Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Created November 2, 2016 14:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/363f140badaba1716f1541e7e5cedbdd to your computer and use it in GitHub Desktop.
Save aaizemberg/363f140badaba1716f1541e7e5cedbdd to your computer and use it in GitHub Desktop.
Download ZIP
MM y DS en barras
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
</head>
<body>
<div id="laviz"></div>
<!--
<svg width="200" height="200" >
<rect x="0" y="0" width="90" height="90" rx="15" ry="15" stroke="blue" fill="none"/>
<rect x="100" y="0" width="90" height="90" rx="15" ry="15" stroke="blue" fill="none"/>
<rect x="0" y="100" width="90" height="90" rx="15" ry="15" stroke="blue" fill="none"/>
<rect x="100" y="100" width="90" height="90" rx="15" ry="15"
stroke="red" fill="blue" fill-opacity="0.1" stroke-opacity="1"/>
<text x="45" y="50" font-size="20" text-anchor="middle" >
0
</text>
<text x="145" y="50" font-size="20" text-anchor="middle" >
1
</text>
<text x="45" y="150" font-size="20" text-anchor="middle" >
2
</text>
<text x="145" y="150" font-size="20" text-anchor="middle" >
3
</text>
</svg>
-->
<script>
// d3.select("body").append("p").html("<b>texto en negrita</b>");
// d3.select("body").append("p").append("i").text("otra forma de hacer lo mismo");
var d1 = [
{"candidato": "Daniel Scioli", "votos": 12198441, "color": "#3182bd", "tcolor": "white"},
{"candidato": "Mauricio Macri", "votos": 12903301, "color": "#ffeda0", "tcolor": "black"}
];
var d2 = [
["DS",12198441],
["MM",12903301]
];
/**
d3.select("body")
.selectAll("p").data(d1).enter().append("p")
.text( function(d,i) {return d.candidato + " saco " + d.votos + " votos.";} );
**/
var vtop = d3.scaleLinear().domain([0, 12903301]).range([0, 200]);
var w = 200, h = 200;
var elDiv = d3.select("div#laviz");
var svg = elDiv.append("svg").attr("width",w).attr("height",h);
svg.selectAll("rect").data(d1).enter().append("rect")
.attr("x", 0)
.attr("y", function(d,i) {return i*100;})
.attr("width", function(d,i) {return vtop(d.votos);} )
.attr("height", 95)
.attr("fill", function(d,i) {return d.color;} );
svg.selectAll("text").data(d1).enter().append("text")
.attr("x", 10)
.attr("y", function(d,i) {return 50+i*100;})
.attr("fill", function(d,i) { return d.tcolor;})
.text( function(d,i) {return d.candidato + " " + d.votos.toLocaleString();} );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment