How to Add Data to a Svelte Globe Visualization

[00:00 - 01:45] Hi everyone. In this lesson we're going to add some data to our globe. So it's no longer just a pretty picture. It actually encodes meaningful data. In this case each country's fill will correspond to its population. And obviously the first thing that we need in order to achieve that is data that represents population by country. So I went ahead and gathered this data for you. So you can go ahead and click on this link to download the file, in which case it'll bring up you know the raw data file. Your options are either to save it by clicking command S and then saving it literally to your computer and then dragging it in or what I kind of prefer is just command A, command C to copy everything and then go back into your Visual Studio Code and create a new file and call it data.json. So we can say new file and name it data.json and then just paste in what you just copied. We can go ahead and delete the old data.js because that was just an example. And now let's go ahead and import our data in our script tag. So you could either do it at the top level of the entire script which might be preferable from a code maintainability perspective but because we're kind of doing this sequentially lesson by lesson I'm going to put it here instead. So I'm going to import data from and then find the proper data path data.json. Let's verify that this works by console.logging data and hitting save. I'll go into my console and I'll see that data does exist and it's an array of 212 objects. Each of these with a country property, a code property, an ID property and a population property.

[01:46 - 08:18] This is great because this is exactly the information we needed. And if you remember from our first lesson this ID property is a three digit string which will match one to one with the countries that we have instantiated up here. So just to illustrate exactly what I'm saying I'll go ahead and console.log countries in this same command and notice that countries each of these objects has an ID three digits 0 0 4 same with our data 1 1 6 etc. So we'll be able to use these to match the countries that have data points to the countries that have geographic coordinates encoded. So that's kind of the the matching that we're going to have to do in this lesson. So now that we have our data imported and we know the properties that are within most importantly this population property let's think about what we want to do. In a CoroCliff map which is what we're designing now the best way or the only way to really encode data is with the fill of each country. So in our case you know a more faint green would represent a lower population and a brighter green would represent a greater population higher population. So obviously given that constraint given that detail what we need to produce is a color scale. And because our color scale is going to be linear it's going to be quantitative in nature numeric right with scaling and interpolation of colors we're going to want to use a linear scale. So just like last time in previous modules we're going to want to import scale linear from D3 scale. And in case you have forgotten even though we've done this so many times the way that a scale will work is the name of the scale and then a domain which represents the input and a range which represents the output. In our case I can start off with the range because these are numbers that I've already derived that I think are pretty good to use. If you wanted to kind of brainstorm your own colors what you could do is Google light green hex find a color play around with it. You could also do like a hex color picker and play around within the browser itself you know find some colors say this bright green looks good this dark green looks good you could just find the midpoints or the good colors that you want to use as endpoints within your range. I've already done that so spoiler alert these are good colors. I'm going to make the lowest point meaning the the lowest population in our data 26362E that is actually the current color of all these countries. I'm going to make the highest brightest color OD and that's a 0D CC6C. I'm going to save that and now the question is what is our domain because it's already screaming at us and saying what is the domain good question the domain is going to be zero for the lowest population possible up until the max population in our data set. So if you maybe know your countries really well you might know oh I think India has the greatest population then you might know off the top of your head what their population is that's not good practice we want to not hard code that value so let's go ahead and import max which is a method from D3 array which will find the greatest number within our range. In our case the range so I remember zero is the smallest point but the range is going to be data and then the accessor is its population property. So I'm going to hit save and now the error goes away and everything is functional but color scale is not being used. Let's see what would happen if I did go ahead and put in some random number let's do color scale of 1000. What you see is an RGB value and if I made a 10,000 you would see a different RGB value if I did a million or 10 million etc. Make sure that color does change as you get larger and larger the reason that it didn't change much is because this population is in fact so large that the difference between 1000 and 10,000 was literally non-existent those are effectively the same color in the range provided. So as you can see here the this scale linear can interpolate between this domain which are numbers and provide a returned output within a color range which is really nice it just does that range that color interpolation for us. So now that we have this color scale and we know that it outputs a color it's quite easy for us to go ahead and pass it into our country's object you would think right. Basically you would say oh we'll just do color scale of country dot population but this isn't going to work right everything is black and the reason for that is because our country's array is not the same as our data array okay and I want to remind you we have this console already and we have countries which is 177 objects data which is 212 and what we need to do to make this work is to merge these two arrays. So the way that we're going to do this is basically we're going to account for this new data import right here and we're going to modify our country's array using dot for each which is a JavaScript method and we're going to update each country's metadata based on what we find inside of data okay let me just write it out because I think this will make more sense and let's actually write in a comment what it is we want to do. So restructure our countries array to include population from data okay so we say take the countries array and for each element in that array where we call each element country do the following. I'm going to delete the autocomplete we're going to first find the metadata for that country and as you can see from the autocomplete here this is in fact correct we basically want to look within data and I'm going to add a question mark period in case data does not exist just to be safe and then we're going to find the element where D's or D is the element we want to find the element where that element's country is equal to country dot ID okay this sounds complicated but let's go ahead and console log metadata and then end this loop and save. So what do we notice?

[08:19 - 12:26] It is undefined over and over and over again and the reason for that is because it should not be D of country there should be D of ID okay so let's describe what we're doing by looking at both arrays okay we are iterating through the country's array for each of the 177 elements in this array we are running this block of code so for this country that has an ID of 0 0 4 we are running this operation what is that operation? Well we're looking at data which is another array and we're finding the first element or the only element in our case where D dot ID okay so 5 3 3 is equal to the country's ID okay so this is kind of funky because we're working with two arrays at once but we're basically looking for each country in countries right which is like the coordinate system data and we're saying okay find the first instance in our data array where the ID matches that's exactly what this bit of code is doing and if you look closely you'll see each of these metadata's are in fact rendered they are printed inside of the console which means we're doing something right so now all we need to do from here because we are accessing the metadata for each country is just copy these codes let's do country because we need the name and population let's copy these properties into our existing countries array the way that we're going to do that is if metadata exists so this is important because we don't want to apply a bunch of nulls if metadata exists creates a new property on our countries array that is equal to metadata dot population and the exact same thing for country where country is the name remember and then we'll save this and now you see that our color scale is in fact working because countries as an object if I reconsell this right countries will now include these properties we have the country name and the population and now we never really have to use data again the only reason that we even needed it was to import it into our larger countries array and bring this you know raw world 110 m with all its coordinates and merge it with this data so the fun thing about this lesson is you thought you were going to be adding data thought it would be easy it wasn't too hard but it was actually a data manipulation problem more than anything we had these disparate data sources one with structured coordinate data one with population data and we needed to merge them and that's what we did with this bit of code right here so there's your small slight introduction to you know data manipulation and array manipulation with JavaScript the last change that we'll want to make which you might encounter as a need later is right now this color scale basically says you know return the color based on the country's population but there are some countries that might not have a population of pendant for example you can see maybe some missing shapes right here right here and so those are returning black this is because the merge didn't work for certain countries so you would want to be more robust and make sure things are working but for us what we can do is just say if country population exists use it otherwise just assume the value is zero now if you save that you see these countries do in fact get filled in and that's this operator this question mark period basically says if population exists use it if not then go to the thing after the pipe which in our case is a zero so that way it doesn't return undefined it doesn't return black it returns the lowest point in our data so thanks for bearing with me with this fun lesson of data manipulation and including data in our globe as you can see we do have a functional visualization that actually shows all of the countries in the world with their population the problem is it only shows you this hemisphere it only shows you this side of the world if we want to see the other side of the world we would need to go to our next lesson where we tackle globe rotation so I'll see you there