D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
keith-burns
Full window
Github gist
test bar chart
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> var numbers = [1,5,3,9,15]; margin = {top: 20, right: 30, bottom: 30, left: 30}; var windowWidth = 1000 - margin.right - margin.left; var windowHeight = 600 - margin.top - margin.bottom; var svg = d3.select("body").append("svg") .attr({width: 1000, height: 600}) var g = svg.select("body").append("g") .attr( { width: windowWidth, height: windowHeight }) // map var bars = svg.selectAll("bars").data(numbers); //create visual elements var barEntering = bars.enter().append("rect") //assign attributes bars.attr({ x: function(d,i) {return i*50}, y: function(d,i) {return 300 - d*10}, width: 30, height: function(d,i) {return d*10}, fill: "#00060e" // exit statements }) </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js