D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
axmopio
Full window
Github gist
IBRO
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v3.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> var width = 500, height = 500, margin = 50; var svg=d3.select("body").append("svg").attr("width",width).attr("height",height); var x=d3.scale.linear().domain([37,38]).range([margin,width-margin]); var y=d3.scale.linear().domain([-122.5,-121.5]).range([height-margin,margin]); var r=d3.scale.linear().domain([0,30]).range([0,30]); var o=d3.scale.linear().domain([0,100]).range([0,100]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); d3.csv("IBRO.csv",function(csv) { svg.selectAll("circle").data(csv).enter() .append("circle") .attr("cx",function(d) {return x(+d.Customers);}) .attr("cy",function(d) {return y(+d.RGUs);}) .attr("r",function(d) {return r(+d.Customers);}) //.style("fill",function(d) {return c(d.landmark);}) //.style("opacity",function(d) {return o(+d.dockcount);}) }) </script> </body>
https://d3js.org/d3.v3.min.js