D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mforando
Full window
Github gist
HSL color space exploration
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> <script> var circleRadius = 100; var pad = 10; var width = circleRadius*2 + pad*2; var height = circleRadius*2 + pad*2; var canvas = d3.select("body") .append("canvas") .style("height",height + "px") .style("width",width + "px") .style("outline","1px solid cyan") .style("margin","15px") .style("background",d3.hsl(50,1,.5)) var context = canvas.node().getContext("2d") var colorDivs = d3.select("body").selectAll(".colorDivs").data(d3.range(360)) colorDivs.enter() .append("div") .style("height","2px") .style("width","50px") .style("background",function(d,i){return d3.hsl(i,1,.5)}) </script> </body>
https://d3js.org/d3.v4.min.js