D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
kelpenhagen
Full window
Github gist
Day One | Block One | Colour and Circles
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Day 1 Colour Scale and circles</title> <h1 style="padding-left:60px;">Day One | Block 1 </h1> <h2 style="padding-left:60px;">Colour and Circles</h2> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <style type="text/css"> body { font: 16px Futura; color: white; background-color: black; } svg { background-color: black; } svg circle { fill-opacity: 0.75; } </style> </head> <body> <script type="text/javascript"> //Width and height var w = 700; var h = 300; var padding = 100; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); var dataset = [5,10,15,20,25,30,35,40,45,50,55,60,65]; //using categorical colour brewer scale - 20 categories var c20 = d3.scale.category20(); var circles = svg.selectAll("circle") .data(dataset) .enter() .append("circle"); circles.attr("cx", function(d, i) { return (i * 40) + padding; }) .attr("cy", h/2) .attr("r", function(d) { return d; }) .style("fill",function(d) { return c20(d) }); </script> </body> </html>
https://d3js.org/d3.v3.min.js