D3 Examples - Perception of corruption by institution, global aggregate, 2013

Perception of corruption by institution, global aggregate, 2013

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.

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>
    <title>Top Internet Countries Visualization</title>
    <style>
      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>
    <svg width="960" height="500"></svg>
    <script>
​
      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 innerWidth = width - margin.left - margin.right-100;
      const innerHeight = height - margin.top - margin.bottom-50;
​
      const g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top+50})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');
​
      xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 55)
          .text(xLabel);
​
      const xScale = d3.scaleLinear();
      const yScale = d3.scaleBand()
        .paddingInner(0.3)
        .paddingOuter(0);
​
      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);
      
      
      d3.csv('corruption.csv',  data => {
        yScale
          .domain(data.map(yValue).reverse())
          .range([innerHeight, 0]);
​
        xScale
          .domain([0, d3.max(data, xValue)])
          .range([0, innerWidth])
          .nice(xTicks);
​
        g.selectAll('rect').data(data)
          .enter().append('rect')
            .attr('x', 0)
            .attr('y', d => yScale(yValue(d)))
            .attr('width', d => xScale(xValue(d)))
            .attr('height', d => yScale.bandwidth())
            .attr('fill', '#ff7a7a');
              
​
        xAxisG.call(xAxis);
​
        yAxisG.call(yAxis);
        yAxisG.selectAll('.tick line').remove();
      });
    </script>
  </body>
</html>
​
    