D3 Examples - FT Perils of Perception reader results

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
  <style type="text/css">
    body {
      font-family: sans-serif;
    }
    .c3 {
      max-height: none !important;
    }
  </style>
</head>
​
<body>
  <div id="chart"></div>
  <script>
    const dataUrl = "https://cdn.rawgit.com/aendrew/974a41944a2812e14ed1d126dff541df/raw/c8d877170fcd3f8f8f7b5e4ab81f10ad052c3696/2-agg.json";
  const charts = window.charts = [];
    fetch(dataUrl).then(res => res.json())
  .then(data => {
        const { questions } = data;
    
        questions.filter(d => Object.keys(d.responses).length > 0).forEach((q, i) => {
      const div = document.createElement('div');
      div.id = `chart-${i}`;
      const container = document.body.appendChild(div);
      const responses = Object.entries(q.responses).reduce((last, curr) => {
        if (curr[0] === '99999') return last;
        last[curr[0]] = curr[1];
        return last;
      }, new Array(100).fill(0)).map(d => d === null ? 0 : d);
      console.dir(q)
      try {
        const chart = c3.generate({
          bindto: container,
          oninit: function() {
            const headline = document.createElement('h2');
            headline.innerText = q.text;
            container.insertBefore(headline, container.querySelector('svg'));
          },
           data: {
            columns: [
              ['responses'].concat(responses),
            ],
                        type: 'bar'
          },
                grid: {
              x: {
              lines: [
                {value: q.answer['United Kingdom'], text: 'UK actual'},
                {value: q.meta.Median['United Kingdom'], text: 'UK median'},
                {value: q.answer['United States'], text: 'US actual'},
                {value: q.meta.Median['United States'], text: 'US median'},
                ]
                }
                }
        });
        charts.push(chart); 
      } catch(e) {
        
      }
    });
  });
​
  </script>
</body>
​
    