Let's finish our Enter/Update/Exit lesson from last week, which again is based on this great tutorial: https://bost.ocks.org/mike/circles/.
Create a presentation pitching your final project.
Just like CSS and JS, data can be stored in external files and loaded into the page dynamically!
D3 comes with functions that can read in external data files automagically. Filetypes include:
Reads text in as a string. 'Nuff said.
d3.text(file, function(error, data) {
});Comma-separated values. Each line of the file is a data object, with it's values separated by commas.
The first row in the file is expected to be the key names for each data point.
d3.csv(file, function(error, data) {
});The same as .csv, except with tabs instead of commas!
d3.tsv(file, function(error, data) {
});JavaScript Object Notation. Data is stored with the same syntax as it would be in Javascript, with keys and values.
d3.json(file, function(error, data) {
});In the context of data, developers who store data in databases need to enable an easy way for themselves and others to extract data based on specific query parameters.
Data USA hosts data from 7 different public US datasets.
Additionally, they've published an open API for all of the data. Documentation is here.
Data from an API is commonly delivered as JSON, so instead of giving d3.json a filename, we can give it a URL:
var url = "https://api.datausa.io/api/?required=income&show=geo&sumlevel=state";
d3.json(url, function(error, data) {
});Create a presentation pitching your final project.