Gini Index resize

This example extends the gini index scatter plot to resizable plots. To see the effects of the browser size on the graph, enter to full screen and change the browser's window size.

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 curran's block: Responding to Resize

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>
      #plot{
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #000000;
      }
      .tick text, .legendCells text {
        fill: #000000;
        font-size: 8pt;
        font-family: sans-serif;
        
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 16pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id = "plot"></div>
    <script>
       
      const viewplot = document.getElementById("plot");
      const svg = d3.select(viewplot).append('svg');
      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
                     };
 
      var g = svg.append('g');
      var dataG = g.append('g');
     
      var xAxisG = g.append('g');        
      var yAxisG = g.append('g');
      var xText = xAxisG.append('text').attr('class', 'axis-label');
      var yText = yAxisG.append('text').attr('class', 'axis-label');
			const colorLegendG = g.append('g');
      
      colorLegendG.append('text')
            .attr('class', 'legend-label')
            .attr('x', -5)
            .attr('y', -30)
            .text(colorLabel);
     
      const colorScale = d3.scaleOrdinal()
            .range(d3.schemeCategory10);
      const colorLegend = d3.legendColor()
            .scale(colorScale)
            .shape('circle')
      			.shapeRadius(5)
      			;

xText.attr('x', innerWidth / 2)
            .attr('y', 60)
            .text(xLabel);

yText.attr('x', -innerHeight / 2)
        		.attr('y', -60)
        		.attr('transform', `rotate(-90)`)
            .style('text-anchor', 'middle')
            .text(yLabel);
        
        colorLegendG.attr('transform', `translate(${innerWidth + 50},${innerHeight -(innerHeight/2)})`);

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

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 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();

const circles = dataG.selectAll('circle').data(data)
        circles.exit().remove();
        
        circles.enter().append('circle')
        		.merge(circles)
            .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', (width+height)/250);

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        colorLegendG.call(colorLegend)
          .selectAll('.cell text') 
          .attr('dy', '0.01em');
      });
      }

redraw();
      window.addEventListener("resize", redraw);
    </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