Filling with points according to the population density

This example, inspired in this example by Gregor Aisch, shows the percentage of people in Catalonia able to speak in Catalan in every comarca (data from IDESCAT).

But the Catalan population is not evenly distributed, but concentrated around Barcelona and surroundings. So comparing the region colours can lead to wrong conclusions, since they don't represent comparable amount of people.

So the population density is represented by the dots: The dot area represents the amount of people in each comarca

<!DOCTYPE html>
<meta charset="utf-8">
<title>Point density according to the population density</title>
<style>
  .background {
    fill: None;
    stroke: #444;
    stroke-width: 1;
  }
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>

var projection = d3.geo.mercator()  
    .center([2.1,41.7])  
    .scale(9000)  
    .translate([width / 2, height / 2]);

var path = d3.geo.path()  
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.csv("/rveciana/raw/5919944/comarques.csv", function(data_values) {
  max_density = 0;
  max_value = 0;
  min_value = 100;
  for (i=0; i<data_values.length; i++){
    if(parseFloat(data_values[i].Density) > max_density){
      max_density = parseFloat(data_values[i].Density);
    }
    if(parseFloat(data_values[i].Catalan) > max_value){
      max_value = parseFloat(data_values[i].Catalan);
    }
    if(parseFloat(data_values[i].Catalan) < min_value){
      min_value = parseFloat(data_values[i].Catalan);
    }    
  }

color = d3.scale.quantize(45).domain([min_value,max_value]).range(scaleColors);

d3.json("/rveciana/raw/5919944/comarques.topo.json", function(error, us) {

svg.selectAll(".mask")
    .data(topojson.feature(us, us.objects.comarques).features)
    .enter()
    .append("clipPath")
    .attr("class","mask")
    .attr("id",function(d){return d.properties.comarca;})
    .append("path")
    .attr("d",path);

svg.selectAll(".points")
    .data(topojson.feature(us, us.objects.comarques).features)
    .enter()
    .append("g")
    .attr("class","points")
    .attr("clip-path", function(d){return "url(#"+d.properties.comarca+")";})
    .each(draw_circles);

svg.append("g")
  .attr("id","limits")
  .append("path")
      .datum(topojson.feature(us, us.objects.comarques))
      .attr("class", "background")
      .attr("d", path);
  
  scale = svg.append("g");
  scale.append("text")
      .attr("x",width - 400 )
      .attr("y",height - 50)
      .text("Can speak Catalan");
  for (i=0; i< scaleColors.length; i++){
    scale.append("rect")
      .attr("width", 30)
      .attr("height",15)
      .attr("x",width - 400 + 37*i )
      .attr("y",height - 40)
      .style("fill",scaleColors[i])
      .style("stroke","#000");
    scale.append("text")
      .attr("x",width - 400 + 37*i )
      .attr("y",height - 10)
      .text(function(){
        return Math.round(min_value + i*(max_value - min_value)/scaleColors.length)+"%";
      });

}

});
});
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

https://d3js.org/topojson.v1.min.js