D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jtr13
Full window
Github gist
d3.csv
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v5.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> const w = 500; const h = 400; const svg = d3.select("body").append("svg").attr("width", w).attr("height", h); const xScale = d3.scaleLinear().domain([0,1]).range([0,w]); const yScale = d3.scaleLinear().domain([0,1]).range([h,0]); const rowConverter = function(d) { return {grad: +d.graduation_rate, attend: +d.attendance_rate} }; // Feel free to change or delete any of the code you see in this editor! d3.csv("https://data.cityofnewyork.us/api/views/uq7m-95z8/rows.csv", rowConverter).then(function (data) { console.log(data) svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", d => xScale(d.grad)) .attr("cy", d => yScale(d.attend)) .attr("r", "3") .attr("fill", "red"); }); </script> </body>
https://d3js.org/d3.v5.min.js