index.html
<!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>
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>