The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Sep 20, 2022
16 forks
18 stars
apiKey = "679c7f160e41798b86f2b02336bb0290"
data = fetchSeries(multiSeries, start_date, end_date)
Inputs.table(data)
// 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);
}
// 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)
);
}
// 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)
// 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)
// 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)
allDatasets = d3
.json(`https://api.eia.gov/category/?api_key=${apiKey}&category_id=371`)
.then((d) => d.category.childcategories)
Inputs.table(allDatasets, {width:550})
function parseLocationId(s) {
return s.match(/\((.*)\)/)[1];
}
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}`;
}
formatDate = d3.utcFormat("%Y%m%dT00Z")
// This parses the date from the format the API returns, which is slightly non-standard.
parseDate = d3.utcParse("%Y%m%dT%HZ")
prettyDate = d3.utcFormat("%m/%d/%Y %H:%M")
import {addTooltips} from "@mkfreeman/plot-tooltip"
import { button as downloadButton } from "@jeremiak/download-data-button"
import {authorship, readMore, navigation, workshop} from "@observablehq/timeseries-assets"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
