|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script> |
|
<style type="text/css"> |
|
h2 { |
|
text-align: center; |
|
} |
|
</style> |
|
<script type="text/javascript"> |
|
function draw(data) { |
|
"use strict"; |
|
console.table(data); |
|
|
|
var margin = 75, |
|
width = 1200 - margin, |
|
height = 500 - margin; //builtin range of colors |
|
|
|
var keys = Object.keys(data[0]); |
|
var xcord = keys[0]; |
|
var ycord = keys[1]; |
|
var svg = dimple.newSvg('#chartContainer', width, height); |
|
|
|
var myChart = new dimple.chart(svg, data); |
|
|
|
myChart.defaultColors = [ |
|
new dimple.color("#95a5a6", "#95a5a6", 1), // concrete |
|
new dimple.color("red", "red", 2), // concrete |
|
]; |
|
|
|
var x = myChart.addCategoryAxis("x", xcord); |
|
//var x = myChart.addTimeAxis("x", xcord, "%d-%m-%Y","%b %Y"); |
|
// x.addOrderRule(xcord); |
|
// x.showGridlines = true; |
|
//x.timePeriod = d3.time.months; |
|
|
|
var y = myChart.addMeasureAxis("y", ycord); |
|
y.showGridlines = false; |
|
y.tickFormat = ',.1f'; |
|
|
|
var s = myChart.addSeries(null, dimple.plot.bar); |
|
s.addOrderRule("spending", true); |
|
|
|
myChart.draw(1500); |
|
|
|
s.shapes.each(function(d) { |
|
|
|
// Get the shape as a d3 selection |
|
var shape = d3.select(this); |
|
|
|
//alert(d.width); |
|
// Add a text label for the value |
|
svg.append("text") |
|
// Position in the centre of the shape (vertical position is |
|
// manually set due to cross-browser problems with baseline) |
|
.attr("x", parseFloat(shape.attr("x")) + parseFloat(shape.attr("width"))/2) |
|
.attr("y", y._scale(d.height) + 35) |
|
.attr("dy", "-1em") |
|
|
|
// Centre align |
|
.style("text-anchor", "middle") |
|
.style("font-size", "1em") |
|
.style("font-family", "'Roboto', sans-serif") |
|
.style("color", "#000") |
|
|
|
// Make it a little transparent to tone down the black |
|
.style("opacity", 0.7) |
|
|
|
// Format the number |
|
.text(d3.format("$,.2s")(d.yValue).replace('G', ' Bn')); |
|
}); |
|
}; |
|
</script> |
|
</head> |
|
<body> |
|
<script type="text/javascript"> |
|
/* |
|
Use D3 (not dimple.js) to load the TSV file |
|
and pass the contents of it to the draw function |
|
*/ |
|
d3.tsv("val_spending.tsv", draw); |
|
</script> |
|
<h2>US net average valentine day spending (total: $17.55 Bn)</h2> |
|
<div id="chartContainer"></div> |
|
|
|
Source: <a href="http://jsfiddle.net/Ra2xS/29/">http://jsfiddle.net/Ra2xS/29/</a> |
|
</body> |
|
</html> |
