Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Created March 18, 2019 14:16
Show Gist options
  • Save aaizemberg/519d527f94ad790e3d2f95c411b9c365 to your computer and use it in GitHub Desktop.
Save aaizemberg/519d527f94ad790e3d2f95c411b9c365 to your computer and use it in GitHub Desktop.
Download ZIP
gráfico de barras con SVG
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment