MM y DS en barras by aaizemberg

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>