D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Jn1532
Full window
Github gist
Circles Test
<!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> <script> var circleData = [ { "x": "050", "y": "050", "r": "30", "color": "yellow", "fruit": "banana"}, { "x": "62", "y": "100", "r": "30", "color": "blue", "fruit": "grape" }, { "x": "94", "y": "71", "r": "30", "color": "red", "fruit": "apple" } ]; var svg = d3.select("body").append("svg"); var circles = svg.selectAll("circle").data(circleData).enter().append("circle"); circles .attr("cx",function(d,i) { return d.x; }) .attr("cy",function(d,i) { return d.y; }) .attr("r", function(d,i) { return d.r; }) .style("fill",function(d,i) { return d.color; }); </script> </body>
https://d3js.org/d3.v4.min.js