D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
graphical perception (areas)
<!DOCTYPE HTML> <html> <head> <script src="https://d3js.org/d3.v3.min.js"></script> </head> <body> <canvas id="myCanvas" width="600" height="300" style="border:1px solid #bbb;"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var r = d3.scale.sqrt().domain([0, 100]).range([0, 100]); var px = d3.scale.linear().domain([0, 1]).range([0, canvas.width]); ctx.fillStyle = "#aaa"; //ctx.strokeStyle = "#aaa"; ctx.beginPath(); ctx.arc(px(1/4), centerY, r(50), 0, 2 * Math.PI); ctx.fill(); //ctx.stroke(); ctx.beginPath(); ctx.arc(px(3/4), centerY, r(100), 0, 2 * Math.PI); ctx.fill(); //ctx.stroke(); </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js