World Happiness by Country 2017

This block was inspired by part of the video course: D3.js in Motion.

This bar chart variant with tilted axis labels shows the top 10 and bottom 10 countries in terms of their 2017 Happiness Score. It's interesting to see that there is not much deviation in score amongst the top/bottom 10 groups. The lowest 10 are about half as happy as the top 10.

The data shown here comes from the World Happiness Report hosted on Kaggle.

forked from curran's block: Tilted Labels

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>Top 10 Most and Least Happiest Countries</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text {
        fill: #8E8883;
        font-size: 16pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 36pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>

const xValue = d => d.country;
      const xLabel = 'Country';
      const yValue = d => d.score;
      const yLabel = 'Happiness Score';
      const margin = { left: 150, right: 70, top: 20, bottom: 200 };

const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 185)
          .text(xLabel);

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2 - 30)
          .attr('y', -100)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);

const xScale = d3.scaleBand()
        .paddingInner(0.3)
        .paddingOuter(0.2);
      const yScale = d3.scaleLinear();

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickSize(-innerHeight);

const yTicks = 10;
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(yTicks)
        .tickPadding(15)
        .tickFormat(d3.format('.0s'))
        .tickSize(-innerWidth);

const row = d => {
        //const netUsersWithCommas = d['Internet Users 31 Mar 2017'];
        return {
          country: d['Country'],
          //netUsers: +netUsersWithCommas.replace(/,/g, '')
          score: d['Happiness.Score']
        };
      };

d3.csv('2017.csv', row, data => {
        xScale
          .domain(data.map(xValue))
          .range([0, innerWidth]);

yScale
          .domain([0, d3.max(data, yValue)])
          .range([innerHeight, 0])
          .nice(yTicks);

g.selectAll('rect').data(data)
          .enter().append('rect')
            .attr('x', d => xScale(xValue(d)))
            .attr('y', d => yScale(yValue(d)))
            .attr('width', d => xScale.bandwidth())
            .attr('height', d => innerHeight - yScale(yValue(d)))
            .attr('fill', 'steelblue');

xAxisG.call(xAxis);
        xAxisG.selectAll('.tick line').remove();
        xAxisG.selectAll('.tick text')
            .attr('transform', 'rotate(-45)')
            .attr('text-anchor', 'end')
            .attr('alignment-baseline', 'middle')
            .attr('x', -5)
            .attr('y', 6)
            .attr('dy', 0);

yAxisG.call(yAxis);
      });
    </script>
  </body>
</html>

https://d3js.org/d3.v4.min.js