CatMap: because lolcats need projection too

This is a map of the Australian state of Victoria, showing some of the locations for which cat registration data is available publicly. A bigger cat on the map means there are more real cats in that postcode; pan and zoom to explore.

You might say it's a map of cats, or a CatMap!

im in ur javascript, referencing decade-old memes

Preparing the map

Take a shapefile of "postal areas" from the Australian Bureau of Statistics. Using GDAL, find the postcodes in Victoria (starting with 3), and convert to GeoJSON. Then, run through TopoJSON for fancy lossless compression, and run our own postcode-centroids.js to generate display positions.

ogr2ogr -f GeoJSON -simplify 0.01 -where "SUBSTR(POA_CODE16, 1, 1) = '3'" victoria.geojson POA_2016_AUST.shp
node_modules/.bin/topojson -o victoria.json victoria.geojson
node postcode-centroids.js victoria.geojson

Fluffy feline figures

We want to collect data that has cats, and postcodes. In our case we have the City of Ballarat and the City of Greater Dandenong. Some spreadsheet trickery is required to convert things to consistent format (e.g. converting month of birth -> age) and put them in a single file for ease of consumption.

Drawing with D3

First we draw the base map from the TopoJSON file using The Functions Formerly Known As "d3.geo", with an added splash of d3.zoom to make it look more like a real web map.

Then we load the CSV file containing cat data; for each postcode, we count the number of cats, and add a element with a cat emoji! Its position is given by the centroids calculated earlier, and its font-size comes from the number of cats we counted.

There are, of course, not enough cats. NEED MOAR DATA!

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CatMap!</title>
<style>

path.postcode {
    stroke: #2c7fb8;
    fill: #edf8b1;
  }

svg {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
  }

svg:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
  }

</style>
</head><body>

var map = {
  width: 960,
  height: 500,

el: null,
  projection: null,

init: function() {
    map.el = d3.select("#display").append("svg")
      .attr("width", map.width)
      .attr("height", map.height);

map.projection = d3.geoMercator()
      .center([145.2, -37.6])
      .scale(10000);

map.zoom = d3.zoom()
      .scaleExtent([1, 30])
      .translateExtent([[-500, -500], [map.width + 500, map.height + 500]])
      .on("zoom", function() {
        map.el.selectAll(".zoomable").attr("transform", d3.event.transform);
      });

map.el.call(map.zoom);
  },

draw: function(paths) {
    var pathGenerator = d3.geoPath().projection(map.projection);

map.el.append("path")
      .attr("class", "postcode zoomable")
      .datum(topojson.feature(paths, paths.objects.victoria))
      .attr("d", pathGenerator);
  }
}

map.init();

d3.json("victoria.json", function(error, victoria) {
  map.draw(victoria);

d3.json("postcodes.json", function(error, postcodes) {
    d3.csv("cats.csv", function(error, cats) {
      var counts = {};

cats.forEach(function(cat) {
        // TODO use its colour and/or age; for now, just a count
        if (!counts[cat.postcode]) {
          counts[cat.postcode] = 1;
        } else {
          counts[cat.postcode] ++;
        }
      });

var sizeScale = d3.scaleLog()
          .domain(d3.extent(
            Object.keys(counts).map(function(k) { return counts[k] })
          ))
          .range([0.1, 2]);

var symbol_group = map.el.append("g").attr("class", "zoomable");

// now for each counted postcode, draw a cat icon
      for (var p in counts) {
        var point = map.projection(postcodes[p]);

var s = sizeScale(counts[p]);

symbol_group.append("svg:image")
            .attr("xlink:href", "cat.svg")
            .attr("class", "cat-emoji")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", 20)
            .attr("height", 20)
            .attr("transform", "scale(" + s + ")translate(" + (point[0]/s) + "," + (point[1]/s) + ")");
      }

});
  });
});

</script>
</body></html>

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.js

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