D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
gráfico de barras con SVG
<!DOCTYPE html> <meta charset="utf-8"> <style> </style> <div id="vis"></div> <script src="https://d3js.org/d3.v5.min.js"></script> <script> var h = 200, w = 500; var datos = [40, 8, 15, 16, 23, 50]; var x = d3.scaleLinear() .domain([0, d3.max(datos)]) .range([0, 420]); var svg = d3.select("div#vis").append("svg") .attr("width",w) .attr("height",h); svg.selectAll("rect") .data(datos) .enter() .append("rect") .attr("style", "stroke:white;fill:steelblue;") .attr("x", 10) .attr("y", function(d,i) {return i * (h/datos.length); }) .attr("width", function(d,i) {return x(d);} ) .attr("height", h/datos.length) .append("title").text(function(d){return d;}); svg.selectAll("text") .data(datos).enter().append("text") .attr("x", function(d,i) {return 10+x(d);} ) .attr("y", function(d,i) {return i * (h/datos.length) + h/datos.length/2; }) .text(function(d){return d;}); </script>
https://d3js.org/d3.v5.min.js