Solution for a question on stackoverflow
code forked from a Mike Bostock example gist
Solution for a question on stackoverflow
code forked from a Mike Bostock example gist
x | y | |
---|---|---|
5 | 90 | |
25 | 30 | |
45 | 50 | |
65 | 55 | |
85 | 25 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.axis path, .axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.point { | |
fill: steelblue; | |
stroke: #000; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v2.js?2.9.6"></script> | |
<script> | |
var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scale.linear() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
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.csv("data.csv", function(data) { | |
// Coerce the strings to numbers. | |
data.forEach(function(d) { | |
d.x = +d.x; | |
d.y = +d.y; | |
}); | |
// Compute the scales’ domains. | |
x.domain(d3.extent(data, function(d) { return d.x; })).nice(); | |
y.domain(d3.extent(data, function(d) { return d.y; })).nice(); | |
// Add the x-axis. | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.svg.axis().scale(x).orient("bottom")); | |
// Add the y-axis. | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(d3.svg.axis().scale(y).orient("left")); | |
// create a new empty array to hold the data | |
var step = 0, | |
dataToPlot = []; | |
var pointAdd = setInterval( | |
function(){ | |
dataToPlot.push(data[step]); | |
step += 1; | |
// stop once all data is plotted | |
if (step > data.length) { | |
clearInterval(pointAdd); | |
} else { | |
addAPoint(); | |
} | |
} | |
,1000); | |
// Add the points! | |
function addAPoint() { | |
svg.selectAll(".point") | |
.data(dataToPlot) | |
.enter().append("path") | |
.attr("class", "point") | |
.attr("d", d3.svg.symbol().type("triangle-up")) | |
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); | |
} | |
}); | |
</script> |