Gini Index

The data shows income inequality in terms of the gini index for four countries over a period of three decades. The data is collected from our workd in data. The original data is trimed and only four countries gini indices are depicted. In Brazil and Argentina the inequality has decreased during the period, while in Turkey and US it has slightly increased.

Built with blockbuilder.org

forked from curran's block: Stylized Scatter Plot with Color Legend

forked from bpartopour's block: Gini Index

<!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>Gini Index</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #000000;
      }
      .tick text, .legendCells text {
        fill: #000000;
        font-size: 10pt;
        font-family: sans-serif;
        
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 29pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="350"></svg>
    <script>
      const xValue = d => d.Year;
      const xLabel = 'Year';
      const yValue = d => d.Gini;
      const yLabel = 'Gini Index';
      const colorValue = d => d.Country;
      const colorLabel = 'Country';
      const margin = { left: 170, right: 300, top: 21, 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', 'legend-label')
          .attr('x', -19)
          .attr('y', -40)
          .text(colorLabel);

const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      const colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .tickSize(-innerHeight)
        .tickFormat(d3.format("d"));
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(10)
        .tickPadding(15)
        .tickSize(-innerWidth);

const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle');

const row = d => {
        d.petalLength = +d.petalLength;
        d.petalWidth = +d.petalWidth;
        d.sepalLength = +d.sepalLength;
        d.sepalWidth = +d.sepalWidth;
        return d;
      };

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

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .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