Skip to content

Instantly share code, notes, and snippets.

@CDEdata
Last active September 20, 2016 11:53
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save CDEdata/af19a1a63b69406ebe7161bfbe08c088 to your computer and use it in GitHub Desktop.
ScienceComm 16: Bar Chart

This code example is the result of the Module 3's exercise from the course “Data Visualization and Infographics with D3,” taught by Alberto Cairo and Scott Murray, and offered through the Knight Center for Journalism in the Americas at UT Austin.

  • 1. Download brackets.io
  • 2. Open a new file in brackets and copy index.html
  • 3. Save your index.html locally
  • 4. Do the same with ttrade.csv and save it in the same folder than index.html
  • 5. Click on the lightning (Live Preview - top right corner) in brackets
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<!--load javascript-->
<script src="http://d3js.org/d3.v3.min.js"></script>
<!--define the layout (CSS) you can also link to an external .css file-->
<style>
body {
font: 16px sans-serif;
font-weight: bold;
}
.bar {
fill: steelblue;
}
.bar:hover {
fill: purple;
}
.axis {
font: 10px sans-serif;
}
.axis path, /* path refers to a line */
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.title {
font: 20px sans-serif;
font-weight: bold;
}
</style>
</head>
<body>
<!--create the bar chart visualisation-->
<script>
var margin = {
top: 30,
left: 65,
right: 20,
bottom: 50
}
height = 400 - margin.top - margin.bottom
width = 600 - margin.left - margin.right
var svg = d3.select("body").append("svg")
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g") //investigate the effects of removing this
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//xAxis
var xScale = d3.scale.ordinal()
.rangeRoundBands([width,0], .1);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
//yAxis
var yScale = d3.scale.linear()
.range([height,0])
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//load the data
d3.csv("ttrade.csv", function(data) {
xScale.domain(data.map(function(d) {return d.year;}));
yScale.domain([0, d3.max(data, function(d) { return +d.ttrade; } )]); //or use yScale.domain([0, 20000]);
//xAxis
svg.append("g")
.attr("class","x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-35)");
//yAxis
svg.append("g")
.attr("class","y axis")
.call(yAxis);
//x axis label
svg.append("text")
.attr("x", width/2) //in the middle
.attr("y", height + margin.bottom)
.text("Year");
//y axis label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Revenue in Mio. CHF");
//title
svg.append("g")
.attr("class","title")
.append("text")
.attr("x", width/2)
.attr("y", (margin.top / 2))
.attr("text-anchor", "middle")
.text("Commodity transit trade")
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) {return xScale(d.year);})
.attr("y", function(d) {return yScale(d.ttrade); })
.attr("width",xScale.rangeBand())
.attr("height", function (d) {return height - yScale(d.ttrade); })
});
</script>
</body>
</html>
year ttrade
2011 19766
2010 19827
2009 14422
2008 14445
2007 10716
2006 8811
2005 5862
2004 4552
2003 2444
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment