Reusable Bar Chart

.block

license: mit

README.md

forked from dougdowson's block: Reusable Bar Chart

chart.js

d3.svg.barchart = function() {

  var margin = {top: 10, right: 10, bottom: 20, left: 0},
      width = 760,
      height = 350,
      padding = 0.25,
      duration = 250,
      tickFormat = null,
      xValue = function(d){ return d[0]; },
      yValue = function(d){ return d[1]; },
      xDomain,
      yDomain;

  function barchart(selection) {

    selection.each(function(datum, index) {

      var data = datum.map(function(d, i) {
        return [xValue.call(datum, d, i), yValue.call(datum, d, i)];
      });

      var xScale = d3.scale.ordinal()
          .domain(xDomain ? xDomain.call(this) : data.map(function(d){ return d[0]; }))
          .rangeBands([0, width - margin.left - margin.right], padding);

      var yScale = d3.scale.linear()
          .domain(yDomain ? yDomain.call(this) : [0, d3.max(data, function(d){ return 1.1*(d[1]); })])
          .range([height - margin.top - margin.bottom, 0]);

      var xAxis = d3.svg.axis()
          .scale(xScale)
          .orient("bottom")
          .tickSize(6, 0);

      var yAxis = d3.svg.axis()
          .scale(yScale)
          .orient("left")
          .tickSize(-width - margin.left - margin.right)
          .tickFormat(tickFormat ? tickFormat : null);

      var svg = d3.select(this).selectAll("svg").data([datum]);

      var g = svg.enter().append("svg")
          .attr("width", width)
          .attr("height", height*1.1)
          .style("padding", "3px")
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      g.append("g").attr("class", "bars");
      g.append("g").attr("class", "x axis");
      g.append("g").attr("class", "y axis");

      g = svg.select("g");

      var bar = g.select(".bars").selectAll(".bar")
          .data(data);

      bar.exit().transition()
          .duration(duration)
          .attr("y", height - margin.top - margin.bottom)
          .attr("height", 0)
          .remove();

      bar.enter().append("rect")
          .attr("class", "bar")
          .attr("x", function(d){ return xScale(d[0]); })
          .attr("y", height - margin.top - margin.bottom)
          .attr("width", xScale.rangeBand())
          .attr("height", 0)
        .transition()
          .delay(duration)
          .duration(duration)
          .attr("y", function(d){ return yScale(d[1]); })
          .attr("height", function(d){ return height - margin.top - margin.bottom - yScale(d[1]); });

      bar.transition()
          .delay(duration)
          .duration(duration)
          .text(function(d){ return d3.round(yScale(d[1]),1); })
          .attr("y", function(d){ return yScale(d[1]); })
          .attr("height", function(d){ return height - margin.top - margin.bottom - yScale(d[1]); });

      g.select(".x.axis")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + yScale.range()[0] + ")")
        .transition()
          .call(xAxis)
          .selectAll("text")
          	.style("text-anchor", "end")
          	.attr("dx", "-0.5em")
          	.attr("dy", "0.1em")
          	.attr("transform", function(d) {
          	return "rotate(-45)"
            });

      g.select(".y.axis")
          .attr("class", "y axis")
        .transition()
          .delay(duration)
          .call(yAxis);

      svg.selectAll("g")
          .classed("g-baseline", function(d) { return d == 0 });

    });
  }

  barchart.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return barchart;
  };

  barchart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return barchart;
  };

  barchart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return barchart;
  };

  barchart.padding = function(_) {
    if (!arguments.length) return padding;
    padding = _;
    return barchart;
  };

  barchart.duration = function(_) {
    if (!arguments.length) return duration;
    duration = _;
    return barchart;
  };

  barchart.tickFormat = function(_) {
    if (!arguments.length) return tickFormat;
    tickFormat = _;
    return barchart;
  };

  barchart.x = function(_) {
    if (!arguments.length) return xValue;
    xValue = _;
    return barchart;
  };

  barchart.y = function(_) {
    if (!arguments.length) return yValue;
    yValue = _;
    return barchart;
  };

  barchart.xDomain = function(_) {
    if (!arguments.length) return xDomain ? xDomain.call(this) : xDomain;
    xDomain = d3.functor(_);
    return barchart;
  };

  barchart.yDomain = function(_) {
    if (!arguments.length) return yDomain ? yDomain.call(this) : yDomain;
    yDomain = d3.functor(_);
    return barchart;
  };

  return barchart;
}

data.csv

index.html

<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
<script src="http://d3js.org/d3.v3.min.js"></script>

<style>

body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  color: #333;
  font-weight: 400;
}

#content {
  margin: 5px;
  padding: 20px;
  width: 775px;
  text-align: left;
  border: 1px solid #ccc;
}

h1 {
  line-height: 1em;
  font-size: 1.75em;
  font-weight: 900;
  color: #000;
}

p {
  margin: 5px 0px 0px 0px;
}

.domain {
  fill: none;
  stroke-width: 0;
}

#menu {
  margin: 5px 0px 0px 0px;
  display: block;
}

#unit {
  margin: 10px 0px 5px 0px;
  font-size: 0.9em;
}

select {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.9em;
  color: #333;
  font-weight: 400;
}

.bar {
  fill: #2980B9;
}

.bar:hover {
  fill: #2C3E50;
}

.axis line {
  stroke: #eee;
  stroke-width: 1;
  opacity: 0.5;
  shape-rendering: crispEdges;
}

.g-baseline line {
  stroke: #333;
  stroke-width: 2;
  opacity: 1;
  shape-rendering: crispEdges;
}

.x.axis .tick text, .y.axis .tick text {
  fill: #333;
  font-size: 0.9em;
}

</style>

</head>

<body>
<div id="content">
<h1>OECD Social Indicators, 2012</h1>
  <select id="menu">
	<option>Poverty rate</option>
	<option>Infant mortality</option>
	<option>Health expenditures</option>
	<option>Education</option>
	<option>Income inequality</option>
	<option>Public social spending</option>
	<option>Tax revenue</option>
    <option>Employment to population ratio</option>
    <option>GDP per capita</option>
	<option>CO2 emissions</option>
  </select>

<p id="unit">Percent of population earning less than 50% of median household income</p>

<div id="chart"></div>
<p>Source: OECD.</p>
</div>

<script src="chart.js"></script>
<script>

var map = d3.map(),
    barchart;

d3.csv("data.csv", function(error, data) {

  data = d3.nest()
      .key(function(d){ return d.variable; })
      .entries(data);

  data.forEach(function(d){
    d.value = +d.value;
    d.values.sort(function(a, b){ return d3.ascending(+a.value, +b.value); });
    map.set(d.key, d.values);
  });

  barchart = d3.svg.barchart()
      .margin({top: 0, right: 10, bottom: 40, left: 40})
      .tickFormat(d3.format(",.0f"))
      .x(function(d){ return d.country; })
      .y(function(d){ return d.value; });

  d3.select("#chart")
      .datum(map.get("Poverty rate"))
      .call(barchart);

});


d3.select("#menu").on("change", function() {

  d3.select("#chart")
      .datum(map.get(this.value))
      .call(barchart);

  var unit;
  var selectedVariable = document.getElementById("menu").value;
  switch (selectedVariable)
    	{
    	case "CO2 emissions": unit = "Metric tons of CO<sub>2</sub> per capita"; break;
    	case "Education": unit = "Percent of 25&ndash;34 year-olds with a post-secondary degree"; break;
    	case "Employment to population ratio": unit = "Percent of working age population (15&ndash;64)"; break;
    	case "GDP per capita": unit = "$US PPP adjusted"; break;
    	case "Health expenditures": unit = "Percent of GDP"; break;
    	case "Income inequality": unit = "Gini coefficient (0 = perfect equality, 100 = perfect inequality)"; break;
    	case "Infant mortality": unit = "Deaths per 1,000 live births"; break;
    	case "Poverty rate": unit = "Percent of population earning less than 50% of median household income"; break;
    	case "Public social spending": unit = "Percent of GDP"; break;
    	case "Tax revenue": unit = "Percent of GDP"; break;
    	}
  d3.select("#unit")
      .html(unit);

});

d3.select(self.frameElement).style("height", "560px");

</script>
</body>
</html>