xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v5.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } .barras div { margin: 2px; padding: 10px; text-align: right; color: white; } </style></head><body> <h1>Barómetro Junio GAD3</h1> <svg width="400" height ="180" class="barras_svg"> <rect/> <rect/> <rect/> <rect/> <text/> <text/> <text/> <text/> </svg> <h2>Sin SVG</h2> <div class=barras> <div></div> <div></div> <div></div> <div></div> </div> <script> const rectWidth = 41; d3.csv("junioGAD3.csv").then(datos => { d3.selectAll(".barras_svg rect") .data(datos) .attr("x",0) .attr("y",(d,i) => i * rectWidth) .attr("height",rectWidth) .attr("width",d => 2*d.escanos) .attr("fill", d => d.color) .attr("stroke", "rgb(255,255,255)") .attr("stroke-width", 2) d3.selectAll(".barras_svg text") .data(datos) .text(d => d.nombre) .attr("x",d => 2*d.escanos) .attr("dx","-10") .attr("y",(d,i) => (i + 0.5) * rectWidth) .attr("fill", "rgb(255,255,255)") .attr("text-anchor", "end") .attr("alignment-baseline", "central") }) d3.csv("junioGAD3.csv").then(datos => { //console.table(datos) d3.selectAll(".barras div") .data(datos) .text(d => d.nombre) .style("background-color", d => d.color) .style("width", d => 2*d.escanos + 'px') }); </script></body> https://d3js.org/d3.v5.min.js