D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
patiencehaggin
Full window
Github gist
Haggin Health & Wealth Scatterplot
Built with
blockbuilder.org
<!DOCTYPE html> <head> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .title { font-family: "Courier"; font-size: 32px; fill: #000; } .axis { font-family: "Courier"; font-size: 11px; fill: #808080; } .circle { fill: lime; fill-opacity: 1.0; stroke: limegreen; } </style> </head> <body> <script> d3.json("nations.json", function(error, json) { if (error) throw error; // var var data = json; var width = 960; var height = 500; var margin = { top: 50, right: 50, bottom: 50, left: 50}; // extents var xExtent = d3.extent(data, function(d) { return d.income }); var yExtent = d3.extent(data, function(d) { return d.lifeExpectancy }); // scales var xScale = d3.scaleLinear() .domain(xExtent) .range([margin.left, width - margin.right]); var yScale = d3.scaleLinear() .domain(yExtent) .range([height - margin.bottom, margin.top]); // axes var xAxis = d3.axisBottom() .scale(xScale); var yAxis = d3.axisLeft() .scale(yScale); // svg var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); // circles var circle = svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", function(d) { return xScale(d.income) }) .attr("cy", function(d) { return yScale(d.lifeExpectancy)} ) .attr("r", 10) .attr("class", "circle"); // axes var axisX = svg.append("g") .call(xAxis) .attr("transform", "translate(" + [0, height - margin.bottom] + ")") .attr("class", "axes") var axisY = svg.append("g") .call(yAxis) .attr("transform", "translate(" + [margin.left, 0] + ")") .attr("class", "axes"); }); </script> </body> </html>
https://d3js.org/d3.v4.min.js