submarine = d3.json(
'https://raw.githubusercontent.com/telegeography/www.submarinecablemap.com/master/public/api/v2/cable/cable-geo.json'
)
//let's look at the individual json object we're merging into our original data
d3.json(
`https://raw.githubusercontent.com/telegeography/www.submarinecablemap.com/master/public/api/v2/cable/${submarine.features[0].properties.slug}.json`
)
//a Promise is a way to work with asynchronous actions; Promise.all(variable) runs a Promise function over an array of data. More on promises: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
submarinejoined = Promise.all(
//an "async" function is basically a slightly tidier way to use Promises in a way that allows asynchronous data to happen in a specific order. You define the function by starting it with "async" and preface your otherwise-asynchronous action with "await."
submarine.features.map(async s => {
//we "await" the results of the asynchronous action (in this case, a request to load data from another website) and the program doesn't move on to the next task until the awaited action is complete. Here, we're using the fact that the "slug" property in the submarine cable geojson matches the filename conventions of the individual json files holding data about each cable.
const data = await d3.json(
`https://raw.githubusercontent.com/telegeography/www.submarinecablemap.com/master/public/api/v2/cable/${s.properties.slug}.json`
);
// here we're adding data to the original submarine cable data we loaded before by assigning new values to the "properties" object. We could add more things if we wanted–there are other pieces of data in those individual files, these are just the ones I thought might be important to include.
s.properties.length = data.length;
s.properties.owners = data.owners;
s.properties.name = data.name;
return s;
})
)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.