D3 Examples - World Happiness by Country 2017

World Happiness by Country 2017
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.
xxxxxxxxxx
 
<!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;
​
      const g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');
​
      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>
​
    