happiness report freedom

This dataset is from World Happiness report. This dataset is about the happiness score of 156 countries around the world, and the contributing aspects to the score.

forked from curran's course materials

Built with blockbuilder.org

<!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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Basic Scatter Plot</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      /* 
       *because tick is splited with 2 properties, if I type 'tick' below, there will be some errors.
       */
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #838c8f;
        font-size: 15pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: black;
        font-size: 23pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="560"></svg>
    <script>
      const xValue = d => d.rank;
      const xLabel = 'Ranking of Happiness';
      const yValue = d => d.freedom;
      const yLabel = 'freedom';
      const colorValue = d => d.happinessScore;
      const colorLabel = 'Happiness Score';
      const margin = { left: 120, right: 200, top: 20, bottom: 120 };

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', 100)
          .text(xLabel);

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

const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      const colorScale = d3.scaleLinear();

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

const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(5)
        .tickPadding(15)
        .tickSize(-innerWidth);
      
      const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('bar');

const row = d => {
        d.happinessScore = +d.happinessScore;
        d.rank = +d.rank;
        d.freedom = +d.freedom;
        return d;
      };

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

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();
        
        colorScale
          .domain(d3.extent(data, colorValue))
          .range(['red', 'green'])
          .nice();

g.selectAll('circle').data(data)
          .enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', d => colorScale(colorValue(d)))
            .attr('fill-opacity', 0.6)
            .attr('r', 8);

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        colorLegendG.call(colorLegend)
          .selectAll('.cell text')
            .attr('dy', '0.1em');
      });
    </script>
  </body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js