Responding to Resize-Perception of corruption by institution, global aggregate, 2013

Responding to resize

This visualization is a demo for responding to resize in the way of D3 general update pattern.

Data Source

This data is published from Transparency International - Global Corruption Barometer.

The Global Corruption Barometer, produced by Transparency International, asks individuals across countries about whether they perceive specific institutions to be corrupt. The following chart presents, by institution, the global aggregate figures. The numbers correspond to the percentage of survey respondents that think each institution is “corrupt or extremely corrupt” in their home country.

forked from curran's block: Horizontal Bar Chart

forked from loveice622's block: Perception of corruption by institution, global aggregate, 2013

<!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 Internet Countries Visualization</title>
    <style>
      
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
      
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text {
        fill: #8E8883;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 13pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      
      
      var chartDiv = document.getElementById("chart");
      var svg = d3.select(chartDiv).append("svg");
      
//parser
      
      const titleText = 'Perception of Corruption by Institution 2013'
      const xValue = d => d.corruption;
      const xLabel = 'Percentage of Perceived Corruption';
      const yValue = d => d.Entity;
      const yLabel = 'Entity';
      const margin = { left: 150, right: 30, top: 5, bottom: 75 };

//const svg = d3.select('svg');
      //const width = svg.attr('width');
      //const height = svg.attr('height');
      
       const xScale = d3.scaleLinear();
       const yScale = d3.scaleBand()
            .paddingInner(0.3)
            .paddingOuter(0);

function redraw(data)
      {
          var width = chartDiv.clientWidth;
          var height = chartDiv.clientHeight;
        
          svg
          .attr("width", width)
          .attr("height", height);
        
 
          const innerWidth = width - margin.left - margin.right-100;
          const innerHeight = height - margin.top - margin.bottom-50;
        
               
         
          const xTicks = 10;
          const xAxis = d3.axisBottom()
            .scale(xScale)
            .ticks(xTicks)
            .tickPadding(5)
            .tickFormat(d3.format('.0s'))
            .tickSize(-innerHeight);

const yAxis = d3.axisLeft()
            .scale(yScale)
            .tickPadding(5)
            .tickSize(-innerWidth);
             
           yScale
              .range([innerHeight, 0]);

xScale
              .domain([0, d3.max(data, xValue)])
              .range([0, innerWidth])
              .nice(xTicks);
        
          //title        
          var title= svg.selectAll('text').data([null]);

title=title.enter().append('text')
            .merge(title)
            .attr('class', 'axis-label')
            .text(titleText)
            .attr('x', margin.left)
            .attr('y', margin.top+20)

title.exit().remove()
        
 
          //coordinate  
          var g=svg.selectAll('g').data([null]);       
          g=g
            .enter().append('g')
            .merge(g)
            .attr('transform', `translate(${margin.left},${margin.top+50})`);
        
          g.exit().remove();
          
          
          //X axis
          var xAxisG = g.selectAll('#x-axis-g').data([null]);
        
          xAxisG = xAxisG.enter().append('g').merge(xAxisG)
          .attr('id','x-axis-g')
          .attr('transform', `translate(0, ${innerHeight})`);        
          xAxisG.exit().remove();
   
        
          //Y axis        
          var yAxisG = g.selectAll('#y-axis-g').data([null]);
        
          yAxisG = yAxisG.enter().append('g').merge(yAxisG)
          .attr('id','y-axis-g');        
          yAxisG.exit().remove();
        
        
          //X label
          var xAxisText = g.selectAll('#x-axis-label').data([null]);

xAxisText.enter().append('text')
              .attr('class', 'axis-label')
              .merge(xAxisText)
              .attr('id','x-axis-label')
              .attr('x', innerWidth / 2)
              .attr('y', innerHeight+margin.bottom/2)
              .text(xLabel);
        
          xAxisText.exit().remove()
        
          //draw rects
            var rects=g.selectAll('rect')
              .data([null]);
        
            var rects=g.selectAll('rect')
              .data(data);
           
            
            rects
              .enter()
                .append('rect')
              .merge(rects)
                .attr('x', 0)
                .attr('y', d => yScale(yValue(d)))
                .attr('width', d => xScale(xValue(d)))
                .attr('height', d => yScale.bandwidth())
                .attr('fill', '#ff7a7a');
        
             rects
            	.exit()
            		.remove();

xAxisG.call(xAxis);
            yAxisG.call(yAxis);
            yAxisG.selectAll('.tick line').remove();
                   
      }
      
      
      d3.csv('corruption.csv',  data => {
        
         yScale.domain(data.map(yValue).reverse())
         
         const render =() => {        
          redraw(data);
        }
         
        render()
        // Redraw based on the new size whenever the browser window is resized.
        window.addEventListener("resize", render);
   
      });
    </script>
  </body>
</html>

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