FT Perils of Perception reader results -- Perceived happiness

forked from aendrew's block: C3 0.4.11 base

forked from aendrew's block: FT Perils of Perception reader results

<!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 charts = window.charts = [];
  
  const generateChart = (country, i) => {
    const [ question ] = country.questions.filter(d => d.meta.qid === 'q10');
		if (!question.answer) return;

// Create container div
    const div = document.createElement('div');
    div.id = `chart-${i}`;
    const container = document.body.appendChild(div);
  	const responses = Object.entries(question.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);
		const totalResponses = Object.values(question.responses)
    	.reduce((last, curr) => last + curr, 0);
    // Generate C3 chart
    try {
        const chart = c3.generate({
          bindto: container,
          oninit: function() {
            const headline = document.createElement('h2');
            headline.innerText = `"${question.text}"\n (Total responses: ${totalResponses})`;
            container.insertBefore(headline, container.querySelector('svg'));
          },
          data: {
            columns: [
              ['responses'].concat(responses),
            ],
            type: 'bar'
          },
          grid: {
            x: {
              lines: [
                {value: question.answer, text: `${country.Country} actual value`},
                {value: question.meta.perceived, text: `${country.Country} median value`},
              ]
            }
          }
        });
        charts.push(chart); 
      } catch(e) {
				console.error(e);
      }
      
    };
    
  const dataUrl = 'https://cdn.rawgit.com/aendrew/bab849d07d2426509e5c25031d4fc49f/raw/1ae418314bbc15ea90759e1ca7efddd0931b45c9/2__perils-of-perception-survey-2016__ALL_AGGREGATED.json';
                                            
	fetch(dataUrl).then(d => d.json()).then(aggregations => {
		aggregations.forEach(generateChart);
  });

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js

https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js