Classic D3 Examples

Old school D3 from simpler times

63anp3ca

Full window Github gist

fresh block

Built with blockbuilder.org

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3 DataBinding</title>
</head>
<body>
	<h1>Scatterplot d3v5</h1>
	
	<svg width=200 
		 height=200
		 id="viz">
	</svg>

<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
		
    let myData = d3.json("https://raw.githubusercontent.com/john-guerra/consultaAnticorrupcion2018/master/consulta_anticorrupcion_municipios.json");
		
    
    let svg = d3.select("#viz"),
	  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,
	  
    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");
		
		
		console.log("w", width, "h", height);
	</script>
</body>
</html>

https://d3js.org/d3.v5.min.js