-
Notifications
You must be signed in to change notification settings - Fork 80
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New tip for demand graph in EIA (US Energy) example (#1041)
* 1. Remove unused columns from data loader 2. Move row filtering from page to data loader 3. Change tooltip in line chart to show all values for a given date so values are not obscured 4. Add comments and minor code decluttering * Use default colors for hover tip * Rolled up data in a separate table for tips * Rollup to tip (cont'd) * Hover feedback to dashed line * git hygiene — rename this file instead of delete+new (pt 1) * git hygiene pt 2 — Delete us-demand.zip.js * git hygiene pt 3 — rename us-demand.csv.js to us-demand.zip.js * git hygiene pt 4 — trying CLI mv instead of github UI * git hygiene pt 5 — CLI mv * Remove redundant data type labels * Remove chart junk * Remove second "date" from tip * Remove option that does nothing * Add semicolons * Add semicolons * Revert to single csv data loader instead of zip * Change date to more global friendly format * minimize diff & tighter loop * adopt d3.rollup --------- Co-authored-by: Philippe Rivière <fil@rezo.net>
- Loading branch information
Showing
3 changed files
with
84 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,31 @@ | ||
import * as d3 from "d3"; | ||
|
||
const end = d3.timeDay.offset(d3.timeHour(new Date()), 1) | ||
// Construct web API call for last 7 days of hourly demand data in MWh | ||
// Types: DF = forecasted demand, D = demand (actual), NG = net generation | ||
const end = d3.timeDay.offset(d3.timeHour(new Date()), 1); | ||
const start = d3.timeHour(d3.utcDay.offset(end, -7)); | ||
const convertDate = d3.timeFormat("%m%d%Y %H:%M:%S"); | ||
const usDemandUrl = `https://www.eia.gov/electricity/930-api/region_data/series_data?type[0]=DF&type[1]=D&type[2]=NG&start=${convertDate(start)}&end=${convertDate(end)}&frequency=hourly&timezone=Eastern&limit=10000&respondent[0]=US48`; | ||
|
||
const start = d3.timeHour(d3.utcDay.offset(end, -7)) | ||
const datetimeFormat = d3.utcParse("%m/%d/%Y %H:%M:%S"); | ||
const dateFormat = d3.utcParse("%m/%d/%Y"); | ||
const typeNameRemap = {DF: "demandForecast", D: "demandActual", NG: "netGeneration"}; | ||
|
||
const convertDate = d3.timeFormat("%m%d%Y %H:%M:%S") | ||
|
||
const usDemandUrl = `https://www.eia.gov/electricity/930-api/region_data/series_data?type[0]=D&type[1]=DF&type[2]=NG&type[3]=TI&start=${convertDate(start)}&end=${convertDate(end)}&frequency=hourly&timezone=Eastern&limit=10000&respondent[0]=US48` | ||
|
||
const tidySeries = (response, id, name) => { | ||
let series = response[0].data | ||
let datetimeFormat = d3.utcParse("%m/%d/%Y %H:%M:%S") | ||
let dateFormat = d3.utcParse("%m/%d/%Y") | ||
return series.flatMap(s => { | ||
return s.VALUES.DATES.map((d,i) => { | ||
return { | ||
id: s[id], | ||
name: s[name], | ||
date: datetimeFormat(d) ? datetimeFormat(d) : dateFormat(d), | ||
value: s.VALUES.DATA[i], | ||
reported: s.VALUES.DATA_REPORTED[i], | ||
imputed: s.VALUES.DATA_IMPUTED[i] | ||
} | ||
}) | ||
// Flatten JSON from date / type / value hierarchy to a tidy array | ||
const jsonToTidy = (data, id) => { | ||
let series = data[0].data | ||
return series.flatMap(s => { | ||
return s.VALUES.DATES.map((d, i) => { | ||
return { | ||
name: typeNameRemap[s[id]], | ||
date: datetimeFormat(d) ?? dateFormat(d), | ||
value: s.VALUES.DATA[i] | ||
} | ||
}) | ||
} | ||
}) | ||
}; | ||
|
||
const usOverviewSeries = await d3.json(usDemandUrl).then(response => { | ||
return tidySeries(response, "TYPE_ID", "TYPE_NAME") | ||
}); | ||
const jsonData = await d3.json(usDemandUrl); | ||
const tidySeries = jsonToTidy(jsonData, "TYPE_ID"); | ||
|
||
process.stdout.write(d3.csvFormat(usOverviewSeries)); | ||
process.stdout.write(d3.csvFormat(tidySeries)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters