D3 Examples - Horizontal Bar Chart

Horizontal Bar Chart

This example shows how to make a horizontal bar chart with D3.js and Google Fonts. It is derived from example 105 of the screencast Introduction to D3.js.

The data shown in this example is from the List of cities proper by population Wikipedia page. The data used in the original example used city populations from GeoNames, which seemed to be inaccurate for the top 10 cities.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <style>
    
      .axis text {
        font-family: 'Poiret One', cursive;
        font-size: 24pt;
      }
      .axis .label {
        font-size: 40pt;
      }
​
      .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
      .y.axis path, .y.axis line {
        stroke: none;
      }
​
    </style>
  </head>
  <body>
    <script>
​
      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 165, top: 0, right: 0, bottom: 90 };
      var barPadding = 0.2;
      var barPaddingOuter = 0.1;
​
      var xColumn = "population";
      var yColumn = "city";
      var xAxisLabelText = "Population";
      var xAxisLabelOffset = 75;
​
      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;
​
      var svg = d3.select("body").append("svg")
        .attr("width",  outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")")
      var xAxisLabel = xAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("x", innerWidth / 2)
        .attr("y", xAxisLabelOffset)
        .attr("class", "label")
        .text(xAxisLabelText);
      var yAxisG = g.append("g")
        .attr("class", "y axis");
​
      var xScale = d3.scale.linear().range([0, innerWidth]);
      var yScale = d3.scale.ordinal().rangeRoundBands([0, innerHeight], barPadding, barPaddingOuter);
​
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .ticks(5)
        .tickFormat(d3.format("s"))
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .outerTickSize(0);
​
      function render(data){
​
        xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
        yScale.domain(       data.map( function (d){ return d[yColumn]; }));
​
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
​
        var bars = g.selectAll("rect").data(data);
        bars.enter().append("rect")
          .attr("height", yScale.rangeBand());
        bars
          .attr("x", 0)
          .attr("y",     function (d){ return yScale(d[yColumn]); })
          .attr("width", function (d){ return xScale(d[xColumn]); });
        bars.exit().remove();
      }
​
      function type(d){
        d.population = +d.population;
        return d;
      }
​
      d3.csv("top10cities.csv", type, render);
​
    </script>
  </body>
</html>
​
    