Simple Barchart

forked from 63anp3ca's block: fresh block

forked from john-guerra's block: Simple Barchart

<!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>

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