Public
Edited
Sep 20, 2022
16 forks
18 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
apiKey = "679c7f160e41798b86f2b02336bb0290"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = fetchSeries(multiSeries, start_date, end_date)
Insert cell
Inputs.table(data)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Construct a URL for the series given the selected dates
function dataUrl(series, start_date, end_date) {
let ids = series.map((d) => d.series_id).join(";");
return getQueryUrl(ids, start_date, end_date);
}
Insert cell
// fetch one or more series and turn it into a tidy dataset
function fetchSeries(series, start_date, end_date) {
let ids = series.map((d) => d.series_id).join(";");
return d3
.json(getQueryUrl(ids, start_date, end_date))
.then((response) =>
response.series
.flatMap((s) =>
s.data.map((d) => ({
id: s.series_id,
name: s.name,
date: parseDate(d[0]),
value: d[1]
}))
)
.sort((a, b) => +a.date - +b.date)
);
}
Insert cell
// Users select location to get the list of series
series = d3
.json(
`https://api.eia.gov/category/?api_key=${apiKey}&category_id=${selectedLocation.category_id}`
)
.then((response) => response.category.childseries)
Insert cell
// Users select type to get locations
locations = d3
.json(
`https://api.eia.gov/category/?api_key=${apiKey}&category_id=${selectedType.category_id}`
)
.then((response) => response.category.childcategories)
Insert cell
// The types of data available to query (demand, net generation etc)
categories = d3
.json(`https://api.eia.gov/category/?api_key=${apiKey}&category_id=2123635`)
.then((d) => d.category.childcategories)
Insert cell
Insert cell
Insert cell
Insert cell
allDatasets = d3
.json(`https://api.eia.gov/category/?api_key=${apiKey}&category_id=371`)
.then((d) => d.category.childcategories)
Insert cell
Inputs.table(allDatasets, {width:550})
Insert cell
Insert cell
function parseLocationId(s) {
return s.match(/\((.*)\)/)[1];
}
Insert cell
getQueryUrl = (series, start_date, end_date) => {
const end = formatDate(end_date);
const start = formatDate(start_date);
return `https://api.eia.gov/series/?api_key=${apiKey}&series_id=${series}&start=${start}&end=${end}`;
}
Insert cell
formatDate = d3.utcFormat("%Y%m%dT00Z")
Insert cell
// This parses the date from the format the API returns, which is slightly non-standard.
parseDate = d3.utcParse("%Y%m%dT%HZ")
Insert cell
prettyDate = d3.utcFormat("%m/%d/%Y %H:%M")
Insert cell
import {addTooltips} from "@mkfreeman/plot-tooltip"
Insert cell
import { button as downloadButton } from "@jeremiak/download-data-button"
Insert cell
import {authorship, readMore, navigation, workshop} from "@observablehq/timeseries-assets"
Insert cell

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.
Learn more