The avatar for @zanarmstrong
Zan
Data Visualization for Data Analysis
Published
before / after
Edited
Feb 16, 2022
1 fork
18 stars
1
before / after
Instead of more colors, try an input to highlight your bar chartFork this: text input to highlight a bar chart
Instead of a stacked area chart, try an ordered 'faceted' chart.
Fork this: Ordered faceted area chart example 1Fork this: Ordered faceted area chart #2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = FileAttachment("texasEnergyJanFeb2021@1.csv").csv({ typed: true })
Insert cell
Insert cell
Insert cell
sortOptions = (new Map([
["solar, natural gas, nuclear, coal, wind, hydro, other", ["solar","natural gas", "nuclear","coal", "wind", "hydro", "other"]],
[categories.join(", "),
categories],
["alphabetical (default)",
["coal", "hydro", "natural gas", "nuclear", "other", "wind"]],
["most to least by usage",
sortedByTotal],
["least to most by usage",
sortedByTotal.slice().reverse()]
]))
Insert cell
sortedByTotal = d3.rollups(data, v => d3.sum(v, d => d.value), d => d.type).sort((a,b) => b[1] - a[1]).map(d => d[0])
Insert cell
// set up our color scale to match EIA color schemes (semantic colors; ie - hydro is blue, solar yellow, etc)
color = ({
domain: ['solar', 'wind', 'coal', 'natural gas', 'nuclear', 'hydro', 'other'],
range: ["#FEC704","#5C9631", "#664F06","#BD7229","#A1333F","#0395D6","#ADADAD"]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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