D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
aaizemberg
Full window
Github gist
MM y DS en barras
<!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>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js