Old school D3 from simpler times

All examples By author By category About

tomshanley

Full window Github gist

OECD ECE rates

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { font-family: Arial}
    rect, line { shape-rendering: crispEdges }
  </style>
</head>

<body>
  
  <div id="chart"></div>
  <div id="source">
    <p>Source: <a href="https://www.oecd.org/edu/EAG2014-Indicator%20C2%20(eng).pdf">OECD</a> </p>
  </div>
  
  <script>
    
    const width = 500;
    const height = 600;
    const margin = {top: 50, right: 40, bottom: 20, left: 140};
    
    const mainColour = "#bf1c7d";
    const secondaryColour = "#96B6C8";
    
    const oecdAvg = 86;
    
    var xScale = d3.scaleLinear()
    .range([0,width])
    .domain([0,100]);
    
    var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);

var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var avgLine = g.append("g")
    .attr("transform", "translate(" + xScale(oecdAvg)  + ",0)")
    
    /*avgLine.append("line")
    .attr("x1", 0)
    .attr("y1", 0)
    .attr("x2", 0)
    .attr("y2", height)
    .style("stroke", "grey")
    .style("stroke-dasharray", "2,2");*/
    
    avgLine.append("text")
    .text("OECD average")
    .attr("x", 5)
    .attr("y", -22)
    .style("font-size", 10)
    .style("text-anchor", "middle");
    
    var axis = d3.axisTop(xScale)
    .tickValues([0, 50, oecdAvg, 100])
    .tickFormat(formatPercentage);
    
    var axisG = g.append("g").call(axis);
    
    axisG.selectAll("line, path")
    .style("stroke", "darkgrey")
    
    axisG.selectAll(".tick")
      .selectAll("line")
    	.attr("y1", height)
    	.style("stroke-dasharray", "2,2");
    
    d3.csv("data.csv", convertTextToNumbers, function(error, data) {
      
      const noOfCountries = data.length;
      const rowHeight = height/noOfCountries;
      const barHeight = rowHeight * 0.8;
      
      data.sort(function(a,b) {
          return d3.descending(a.ece, b.ece);
      });
      
      var country = g.selectAll(".country")
      .data(data)
      .enter()
      .append("g")
      .attr("class", "country")
      //.attr("transform", function(d, i) { return "translate(0," + (i * rowHeight) +")"; });
      .attr("transform", function(d, i) { return "translate(0," + (height - (i * rowHeight)) +")"; });
      
      country.append("rect")
      .attr("x", 0)
      .attr("y", (rowHeight - barHeight)/2 )
      .attr("height", barHeight)
      .attr("width", function(d) { return xScale(d.ece); })
      .style("fill", function(d) { return nzColour(d.country); })
      .style("opacity", 0.7);
      
      country.append("text")
      .text(function(d) { return d.country; })
      .attr("x", -5)
      .attr("y", 13)
      .style("text-anchor", "end")
      .style("font-weight", function(d) { return d.country == "New Zealand" ? "bold" : "normal"; })
      .style("font-size", "14")
      .style("fill", function(d) { return nzColour(d.country); });
      
      country.append("text")
      .text(function(d) { return roundNumber(d.ece); })
      .attr("x", function(d) { return xScale(d.ece) + 5; })
      .attr("y", 13)
      .style("text-anchor", "start")
      .style("font-size", "14")
      .style("font-weight", function(d) { return d.country == "New Zealand" ? "bold" : "normal"; })
      .style("fill", function(d) { return nzColour(d.country); });
      
      //d3.selectAll(".domain").remove()
      
    });
    
    function convertTextToNumbers(d) {
      d.ece = +d.ece;
      return d;
    };
    
    function formatPercentage(n) {
      return n + "%";
    };
    
    function roundNumber(n) {
      return Math.round(n)
    }
    
    function nzColour(country) {
      return country == "New Zealand" ? mainColour : secondaryColour;
    };

</script>
</body>

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