Old school D3 from simpler times

All examples By author By category About

aaizemberg

Full window Github gist

obras en la CABA

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>obras en la CABA</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
</head>
<body>

<script>
  // website = https://www.buenosaires.gob.ar/baobras
  // var url = 'https://recursos-data.buenosaires.gob.ar/ckan2/observatorio-obras-publicas/observatorio-obras_original.csv';
var url = 'https://raw.githubusercontent.com/aaizemberg/vis/gh-pages/obras/datos.tsv';

function doit(datos) {
  var max = datos[0].monto;
  console.log(max);
  var w = 800, h = 200, r = 5;
  var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
  var escala = d3.scaleLinear().domain([0,max]).range([0+r,w-r]);
  
  svg.selectAll("circle").data(datos).enter().append("circle")
     .attr("cx", function(d){return escala(d.monto)})
     .attr("cy", function(d,i) { return (h/4) + Math.random() * (h/2);})
     .attr("fill-opacity", "0.1")
     .attr("r",r)
     .append("title")
       .text(function(d){return d.ar + "\n" + d.monto.toLocaleString('es-AR');})
}

d3.tsv(url, function(d) {
  return {
    ar : d.area_responsable,
    id : d.id,
    monto : +d.monto_contrato
  };
}, function(data) {
  
  doit(data);
  
});
</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js