D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
vpascual
Full window
Github gist
Barchart with SVG
Built with
blockbuilder.org
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Page Template</title> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <script type="text/javascript"> // D3 code const data = [18, 20, 25, 34, 100] barHeight = 15; var scale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([0, 400]); var svg = d3.select("body").append("svg"); svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", 0) .attr("y", (d, i) => { return barHeight * i; }) .attr("width", (d) => { return scale(d); }) .attr("height", barHeight) .style("fill", "steelblue"); </script> </body> </html>
https://d3js.org/d3.v4.min.js