D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
enjalot
Full window
Github gist
The Counted: simple example
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } svg { width:100%; height: 100% } circle { opacity: 0.5; } </style> </head> <body> <script> // Feel free to change or delete any of the code you see! var svg = d3.select("body").append("svg") var url = "https://numeracy.co/projects/382368K6Bkx/data?format=csv"; d3.csv(url) .row(function(d) { return { name: d.name, age: parseFloat(d.age), date: new Date(d.month + "/" + d.day + "/" + d.year) } }) .get(function(err, data) { console.log("data:", data) var counted = []; data.forEach(function(d) { if(d.age) { counted.push(d) } }) console.log("counted", counted) var maxAge = d3.max(counted, function(d) { return d.age }) console.log("max age:", maxAge) var avgAge = d3.mean(counted, function(d) { return d.age }) console.log("mean age", avgAge); var yscale = d3.scale.linear() .domain([0, maxAge]) .range([400, 10]) var dateExtent = d3.extent(counted, function(d) { return d.date }) var xscale = d3.time.scale() .domain(dateExtent) .range([10, 900]) var circles = svg.selectAll("circle") .data(counted) circles.enter() .append("circle") .attr({ cx: function(d,i) { return xscale(d.date) } , cy: function(d,i) { return yscale(d.age) }, r: 5 }) .on("click", function(d,i) { console.log("clicked", d.age, yscale(d.age)) }) }) </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js