D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
graphical perception (length)
<!DOCTYPE HTML> <html> <head> <script src="https://d3js.org/d3.v3.min.js"></script> </head> <body> <canvas id="myCanvas" width="600" height="200" style="border:1px solid #bbb;"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext('2d'); var w = d3.scale.linear().domain([0, 100]).range([0, canvas.width * 0.9]); var py = d3.scale.linear().domain([0, 1]).range([0, canvas.height]); ctx.fillStyle = "#aaa"; ctx.fillRect(0,py(1/3)-12,w(50),24); ctx.fillRect(0,py(2/3)-12,w(100),24); </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js