D3 Examples - Gini Index resize

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.

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>
    <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)
                ;
      
        
​
      function redraw() {
        const width = viewplot.clientWidth;
        const height = viewplot.clientHeight;
        
        const innerWidth = width - margin.left - margin.right;
        const innerHeight = height - margin.top - margin.bottom;
        
        svg.attr("width", width)
           .attr("height", height);
        
        g.attr('transform', `translate(${margin.left},${margin.top})`);
        
        xAxisG.attr('transform', `translate(0, ${innerHeight})`);
​
        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>
​
​
​
​
​
​
​
​
​
    