-
Book Overview & Buying
-
Table Of Contents
Learn D3.js - Second Edition
By :
Sometimes your data visualization will require loading data from different sources, for example, a GeoJSON shapefile to draw a map, and a table with geographical coordinates of specific points in the map. Only after both files are loaded can you start rendering the map and the points. This is a very common scenario with geographical charts.
Since every fetching function is a promise, you can use Promise.all() to synchronize them. In the following example, d3.json() and d3.dsv() are used to obtain two promises: one for a JSON source and the other for a CSV containing a row function that replaces each entry with a new object. The promises are passed to Promise.all(). When parsed, the resulting datasets will be stored in shapes and points:
const shapesFile = '../data/world-lowres.geojson'; const pointsFile = '../data/cities15000.csv'; const shapesPromise = d3.json(shapesFile); const pointsPromise = d3.dsv( ...