D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
rjmundt
Full window
Github gist
illustrator artwork
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> <svg width="580px" height="400"> //illustrator artwork here <g id="Circles"> <circle id="circle1" cx="83.7" cy="121.4" r="23.5"/> <circle id="circle2" cx="130.8" cy="121.4" r="23.5"/> <circle id="circle3" cx="177.9" cy="121.4" r="23.5"/> <circle id="circle4" cx="225" cy="121.4" r="23.5"/> <circle id="circle5" cx="272.1" cy="121.4" r="23.5"/> <circle id="circle6" cx="319.2" cy="121.4" r="23.5"/> <circle id="circle7" cx="366.2" cy="121.4" r="23.5"/> <circle id="circle8" cx="413.3" cy="121.4" r="23.5"/> <circle id="circle9" cx="460.4" cy="121.4" r="23.5"/> <circle id="circle10" cx="507.5" cy="121.4" r="23.5"/> </g> <g id="Layer_1"> <text id="title" transform="matrix(1 0 0 1 56.7222 55.75)" class="st0 st1">Lorem ipsum dolor sit amet consectur</text> </g> </svg> <script> // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("svg"); var circles = d3.selectAll("circle"); var myData=[12,45,23,11,5,39,20,14,50,33]; //select everything of a certain type circles.attr("opacity",function(d,i){ return myData[i]/100; }).attr("r",10) //select individual bits d3.select("#circle3").attr("fill","red"); //add interactivity circles.on("mouseover",function(d,i){ d3.select(this).attr("r",20) var myid = d3.select(this).attr("id") d3.select("#title").text("Just moused over "+myid) }); circles.on("mouseout",function(d,i){ d3.select(this).attr("r",10) var myid = d3.select(this).attr("id") d3.select("#title").text("This is my title") }); //animate circles .transition() .duration(1000) .ease((d3.easeBounce)) .attr("cy",function(d,i){ return 100+myData[i] }) console.log(circles) </script> </body>
https://d3js.org/d3.v4.min.js