D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
yanhann10
Full window
Github gist
rotate
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3: A simple bar chart</title> <script type="text/javascript" src="../d3.js"></script> <style type="text/css"> /* No style rules here yet */ </style> </head> <body> <script type="text/javascript"> var color = d3.scaleOrdinal() .range(["#F4D221","#F6653F","#E57B5F", "#4BB3A4","#0C9DC2","#2C4B9B","#39338F"]); //Width and height var w = 500; var h = 300; var barPadding = 1; var dataset = [ 5, 10, 13, 19,20,1,3,4,1,2,5,6,7,4,6,2,1,9,0]; //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 50) .attr("height",25) .attr("transform", (d,i)=>"translate(" + (50+ (i%5)*100)+ "," + 50+ ") rotate("+(5*i)+")") .attr("fill", d=>color(d)); </script> </body> </html>
https://d3js.org/d3.v4.min.js