Earth Data

Realistically, the scope of this lesson is probably a bit too ambitious, but we wanted to take the chance at showing you what can be achieved using real world data, in a real world application. This lesson is going to be optional, and a little more technical than before. If you would prefer to work on your project, then you can! If you'd love to know more about D3, and to see a real application of the software, then keep reading.

This work is based on / derivative of work done by Tom Noda, Scott Murray, and Mike Bostock

Geo positional data is data tied to a location on the planet. It can be anything from the name of a country, to the land formations, to population statistics, to space landing sites. The great thing about this data is it's very appealing to individuals, and it translates really well to visualization. Bar charts are okay, and they're a great tool for presentations. So are pie charts. Having said that, because we're located on earth, and because we interpret our surroundings based on our location, geo-data has an incredible power to affect and astound the viewer!

What's so impressive about this part of the d3 library, is how little code it takes to create a model of the world. Hopefully at this point you'll appreciate just how straightforward this code is! Try and understand it at facevalue, reading through the method calls. This is really good practice for later, when you're programming on your own.

To do this though, we are going to need another library. topojson, by Mike Bostock. We're also going to need some geodata, which we'll get from a website called Natural Earth. We could try to get this from Ordance Survey or US survey data, but it's much harder to locate this information! Natural Earth is a great resource for geodata. Still, it's a little difficult, especially if you're not using your own machine, so we've included a compressed file for you to use, which has a map of the UK.

Once we have this, as well as the topojson.js library, then we use the d3.json method to load the json file. The syntax for this is a little different, but what the code is basically doing is checking if the resource exists, and if it does, then loading the resource into a json object. We can't go too much into json, but it's essentially a way of writing down data in a way which can be easily read by people, and easily processed by computers. It's a very common, very popular format used on the web. If we type the following code (the callback is from Mike Bostock, the creator of the d3 library!), we get a tiny little UK!

d3.json("uk.json", function(error, uk) {
    if (error) return console.error(error);
    svg.append("path")
        .datum(topojson.feature(uk, uk.objects.subunits))
        .attr("d", d3.geo.path().projection(d3.geo.mercator()));
});

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

        

From here, there's a lot we can do. If we use the transformations provided for getting a useable map of the UK, which are:

var width = 960,
    height = 1160;

var projection = d3.geo.albers()
    .center([0, 55.4])
    .rotate([4.4, 0])
    .parallels([50, 60])
    .scale(1200 * 5)
    .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.json("uk.json", function(error, uk) {
svg.append("path")
        .datum(topojson.feature(uk, uk.objects.subunits))
        .attr("d", path);
});

Using this code, and the provided files, you now have the ability to display a map of the UK! We're going to leave you with this, in the hope that you can create something truly spectacular, having been given the files and methods to do so. There are two huge pointers which we'll give you! The first is that you can use inspect element on chrome by right clicking on your webpage after displaying the geodata, and from there you can explore the data in the map, and second that you can use three letter strings, such as WLS, to get the boundaries and specific data of countries in order to outline and highlight elements.

Because SVG is styleable, you can try defining your own paths, and getting to grips with the geo part of the d3 library to try and really go for gold in the project! We don't want to go into any more depth because this is really something extra, and it's something you need to discover for yourself! if you decide to use geo mapping, we're sure you'll be able to come up with something really impressive! The most important thing is to find out how to divide the map into segments (google it!) and then colour those segments. That'll give you something to work with.

Good luck!

Author : Ben Ryves