Joining GeoJSON to another GeoJSON

Question

I have some geographic boundaries that I have a GeoJSON endpoint for.

I also have some variables that are stored at a separate GeoJSON endpoint which does not have coordinates, but does have the variable that I want to later thematically style a map with later on with D3. This is updated weekly.

There is a common ID in both responses called lga_name (Local Government Area Name) which I am trying to join on. There appear to be plenty of examples on how to join GeoJSON with a CSV, but not GeoJSON with GeoJSON.

I have had a stab at trying to put together an app, but still struggling with the join.

// Load LGAs from ArcGIS Online (The GeoJSON with geoms)
d3.json("the url to the Geoms", function(error, data) {

// Load Crash Stats from ArcGIS Online (the total persons involved, summarised down to LGA names)
d3.json("the url to the table", function(error, data2) {

        var lga = data.features;
        var crashStats = data2.features;

        // Not working
        var joined =  lga.forEach(function(item) {
            item.properties.LGA_NAME = crashStats[item.properties.lga_name];
        });

Can anyone give me some pointers to help get me moving? Just trying to learn some more about D3 and Javascript in general.

Answer 1

You have data quality issues that will cause some troubles:

1. Names (lga_name) of features are all caps in one json, but not the other
2. Names of features include characters/phrases such as "(" or "-" or "Greater " in one json but not the other.
3. There are features that have coordinates but no entry in the other json (Unincorporated Vic)
4. There appear to be duplicate values in the json holding non-geographic properties (you have stated you want to join, not sum any data, my solution only uses one entry from the properties json (the one without coordinates))

You can achieve your goal (use the 2nd json to get "the variable that I want to later thematically style a map" with) different ways, I'll use two different methods here:

1. Create one valid geojson that holds all your features and properties
2. Create the features from the coordinates json, and style them based on the properties json using the name as a common identifier.

Create one valid geojson that holds all your features and properties

Using d3.map() we can add the properties of the non-geographic json easily:

var lookup = d3.map(data.features, function(d) { return d.properties.lga_name; });

geographic.features.forEach(function(d) {
  d.properties = lookup.get(d.properties.LGA_NAME).properties;
});

Now you have one geojson that has the properties of one json, and the coordinates of the other.

Since your identifiers are not standardized, I created a function to standardize the names between the two files to make the data work. I also added a check to ensure that properties exist for a given feature. See this block.

Create Features With One JSON and Style Based on the Other JSON

You don't need to actually join the data though to achieve the styling. Using d3.map() you can look up the properties of each feature when styling. For example you could style fill with:

var lookup = d3.map(data.features, function(d) { return d.properties.lga_name; });

regions.attr("fill",function(d) { 
    return color(lookup.get(d.properties.LGA_NAME).properties.total_pers); 
    })

Again, since your identifiers are not standardized, I created a function to standardize the names between the two files. As above, there is also a check to see if there is a feature in the non geographic json (and therefore properties to use with styling). See this block.