Simple demonstration of consuming Heroku DataClips with D3.js.
Data source: https://dataclips.heroku.com/vgyygvzqtezwpmwpcmmjlluamjlk (.json)
Simple demonstration of consuming Heroku DataClips with D3.js.
Data source: https://dataclips.heroku.com/vgyygvzqtezwpmwpcmmjlluamjlk (.json)
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.dot {} | |
</style> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<body> | |
<script> | |
// var resource = 'https://dataclips.heroku.com/vgyygvzqtezwpmwpcmmjlluamjlk.json'; | |
// Replaced with local copy (CORS) | |
var format = d3.time.format("%Y-%m-%d"), | |
margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.time.scale() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var color = d3.scale.category10(); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom") | |
.ticks(d3.time.months, 1) | |
.tickFormat(d3.time.format('%b')) | |
.tickSize(0) | |
.tickPadding(10); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
.tickPadding(10); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.json('sample.json', function(error, data) { | |
console.log(data) | |
data.values.forEach(function(d) { | |
d.date = format.parse(String(d[0]).substring(0, 10)); | |
d.amount = d[1]; | |
console.log("Spent $" + d.amount + " on " + d.date); | |
}); | |
x.domain([format.parse(String(data.values[0][0]).substring(0, 10)), d3.time.day.offset(format.parse(String(data.values[data.values.length - 1][0]).substring(0, 10)), 1)]).nice(); | |
y.domain([0, 1500]) | |
// d3.max(data.values, function(d) { return d.amount; }) | |
// y.domain(d3.extent(data.values, function(d){ return d.amount; })).nice(); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
.append("text") | |
.attr("class", "label") | |
.attr("x", width) | |
.attr("y", -6) | |
.style("text-anchor", "end") | |
.text(data.fields[0]); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("class", "label") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text(data.fields[1]); | |
svg.selectAll("circle.dot") | |
.data(data.values) | |
.enter() | |
.append("circle") | |
.attr("class", "dot") | |
.attr("r", 10) | |
.attr("cx", function(d) { return x(d.date); }) | |
.attr("cy", function(d) { return y(d.amount); }) | |
.attr("fill", "red") | |
.attr("stroke-width", 0); | |
}) | |
</script> | |
</body> |
{ | |
"fields":["month","book_purchases"], | |
"values":[ | |
["2011-01-01 00:00:00+00","747.58"], | |
["2011-02-01 00:00:00+00","953.48"], | |
["2011-03-01 00:00:00+00","767.51"], | |
["2011-04-01 00:00:00+00","1221.28"], | |
["2011-05-01 00:00:00+00","931.50"], | |
["2011-06-01 00:00:00+00","1045.41"], | |
["2011-07-01 00:00:00+00","863.42"], | |
["2011-08-01 00:00:00+00","629.56"], | |
["2011-09-01 00:00:00+00","681.56"], | |
["2011-10-01 00:00:00+00","827.51"], | |
["2011-11-01 00:00:00+00","701.55"], | |
["2011-12-01 00:00:00+00","771.57"] | |
] | |
} |