|
<!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> |
