D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
63anp3ca
Full window
Github gist
Prueba GP codigo
Built with
blockbuilder.org
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D3 DataBinding</title> </head> <body> <h1>Simple Barchart d3v5</h1> <svg width=200 height=200 id="viz"> </svg> <svg width=200 height=200 id="viz2"> </svg> <script src="https://d3js.org/d3.v5.min.js"></script> <script> function doScatterPlot(myData, svg) { margin = {top: 20, right: 20, bottom: 30, left: 50}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom; // You were missing a ; here const x = d3.scaleLinear() .domain([0, d3.max(myData, d=> d.censo)]) .range([0, width]); const rects = svg.selectAll(".bar") .data(myData.sort( (a,b) => d3.descending(a.censo, b.censo)) ); rects.enter() .append("rect") .attr("class", "bar") .attr("x", 0) .attr("y", (d,i, ds) => i*10) .attr("width", d => x(d.censo)) .attr("height", 9) .style("fill", "steelblue"); const texts = svg.selectAll(".label") .data(myData); rects.enter() .append("text") .attr("class", "label") .attr("x", 0) .attr("y", (d,i, ds) => i*10) // .attr("x", d => x(d.censo)) //.attr("y", (d) => y(d.municipio)) .text( d=> d.municipio) // .attr("width", d => x(d.censo)) // .attr("height", 9) .style("fill", "#333") .style("font-size", "6pt") .style("font-family", "sans-serif"); console.log("w", width, "h", height); } // Returns a promise, you don't get the data straight from it d3.json("https://raw.githubusercontent.com/john-guerra/consultaAnticorrupcion2018/master/consulta_anticorrupcion_municipios.json") .then( data => { doScatterPlot(data, d3.select("#viz")); // doScatterPlot(data, d3.select("#viz2")); }); </script> </body> </html>
https://d3js.org/d3.v5.min.js