D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jrzief
Full window
Github gist
Selections && circles
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <div id=circlefun> </div> <script> var data = [25, 20, 10, 12, 15]; var svg = d3.select("#circlefun").append("svg") .attr("width", 600) .attr("height", 400); var circles = svg.selectAll("circle") .data(data); circles.enter() .append("circle") .attr("cx", function(d, i){ console.log("Item: "+ d, "Index: " + i); return (i * 50) + 50; }) .attr("cy", function(d, i){ return (i * 50)+ 50 }) .attr("r", function(d){ console.log("Item: "+ d); return d; }) .attr("fill", "red"); </script> </body>
https://d3js.org/d3.v4.min.js