D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
enjalot
Full window
Github gist
fresh block: iris
Simple scatterplot with d3.js
<!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; padding: 0; } </style> </head> <body> <script> d3.csv("iris.csv", function(err, data) { console.log("DATA", data); var width = 960; var height = 500; var svg = d3.select("body").append("svg") .attr({width: width, height: height }).style("background", "gray") var xscale = d3.scale.linear() .domain([0, d3.max(data, function(d) { return +d.sepalW })]) .range([0, width - 100]) var yscale = d3.scale.linear() .domain([0, d3.max(data, function(d) { return +d.sepalL })]) .range([height, 100]) svg.selectAll("circle").data(data) .enter() .append("circle") .attr({ cx: function(d) { return xscale(+d.sepalW) }, cy: function(d) { return yscale(+d.sepalL) }, r: 10, fill: "#d7f8f4", stroke: "#111", "fill-opacity": 0.4 }) }) </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js