load
Loads data from a filepath or URL, converts it to a valid JSON object, and returns it to a callback function.
Basic example
Section titled “Basic example”Fetches a URL, parses it by extension (.json, .csv, .tsv, or .txt), and passes the rows to the callback. This is what runs behind a chart’s data: "…" config; called directly it only needs an object for this.
import {load} from "@d3plus/data";
load.call({}, "/data/city_coords.json", undefined, undefined, (error, rows) => {
// rows is the parsed JSON array
});
Csv coercion
Section titled “Csv coercion”CSV cells arrive as strings, so every value that parses as a number becomes a number and "true"/"false" become booleans before the rows are handed over. Here sweet and calories come back typed.
import {load} from "@d3plus/data";
load.call({}, "/data/fruits.csv", undefined, undefined, (error, rows) => {
// rows[0] → {name: "Apple", color: "red", sweet: true, calories: 95}
});
Multiple sources
Section titled “Multiple sources”An array can mix URLs and inline arrays. Everything that needs fetching is loaded, then the pieces are concatenated in the order given, so the inline Durian row lands after the five fetched fruits.
import {load} from "@d3plus/data";
load.call(
{},
[
"/data/fruits.csv",
[{name: "Durian", color: "green", sweet: true, calories: 147}],
],
undefined,
undefined,
(error, rows) => {
// the fetched rows followed by the inline row
},
);
Parameters
import {load} from "@d3plus/data";
thisrequiredVizContextpathrequiredstring|Array.<DataPoint>|Array.<string|Array.<DataPoint>|LoadRequestConfig>The path to the file or url to be loaded. Also support array of paths strings. If an Array of objects is passed, the xhr request logic is skipped.
formatterDataFormatterOptional function to transform the loaded data.
keystringThe key in the
thiscontext to save the resulting data to.callbackFunctionOptional function called with the error and loaded data. Without one, a failed request is logged to the console.