UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk.
Public
Edited
May 11, 2023
5 stars
Intro to ObservableCreating our First Vega-Lite VisualizationsVega-Lite: JSON vs. JavaScript APIDeceptive Visualizations in Vega-LiteIntro to Interaction in Vega-LiteIntro to Cartographic Visualization in Vega-Lite: Visualizing NBA Team LocationsCreating Interactive Choropleths in Vega-LiteVega-Lite Observable Template
Basic Time Series Plots in Vega-Lite
seattleWeatherFile = FileAttachment("seattle-weather@2.csv");
seattleWeatherTyped = seattleWeatherFile.csv({typed: true})
vl.markPoint()
.data(seattleWeatherTyped)
.title("Daily Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_max').title("Temperature (Celsius)"),
vl.tooltip([
{field : "date", type : "temporal"},
{field : "temp_max", title : "temp" }
]),
vl.color().fieldN("date").timeUnit("year")
)
.height(200)
.render();
vl.markPoint()
.data(seattleWeatherTyped)
.title("Daily Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldT("date"), // fieldT is shorthand for temporal data type
vl.y().fieldQ('temp_max').title('Max Temperature'),
)
.width(width - 100) // make the graph responsive to Observable canvas width
.render();
vl.markCircle()
.data(seattleWeatherTyped)
.title("Daily Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldT("date"),
vl.y().fieldQ('temp_max').title('Max Temperature'),
vl.color().fieldN('weather')
.scale({
range: ["#aec7e8", "#c7c7c7", "#1f77b4","#9467bd", "#e7ba52"], // set custom color
}),
)
.width(width - 200)
.render();
weatherPalette = ["#aec7e8", "#c7c7c7", "#1f77b4","#9467bd", "#e7ba52"]
vl.markCircle()
.data(seattleWeatherTyped)
.title("Daily Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldT("date"), // fieldT is shorthand for temporal data type
vl.y().fieldQ('temp_max').title('Max Temperature'),
vl.color().fieldN('weather').scale({range: weatherPalette}),
vl.size().fieldQ('precipitation').scale({range:[5, 350]})
)
.width(width - 200)
.render();
vl.markCircle()
.data(seattleWeatherTyped)
.title("Daily Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldT("date")
.timeUnit('monthdate')
.axis({"format": "%b"})
.title("Aggregated Months (2012-2015)"),
vl.y().fieldQ('temp_max').title('Max Temperature'),
vl.color().fieldN('weather').scale({range: weatherPalette}),
vl.size().fieldQ('precipitation').scale({range:[5, 350]})
)
.width(width - 150)
.render();
vl.markCircle({opacity: 0.5})
.data(seattleWeatherTyped)
.title("Daily Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldT("date")
.timeUnit('monthdate')
.axis({"format": "%b"})
.title('Month'),
vl.y().fieldQ('temp_max').title('Max Daily Temperature'),
vl.color().fieldN('weather').scale({range: weatherPalette}),
vl.size().fieldQ('precipitation').scale({range:[5, 350]}),
vl.column().fieldN('weather')
)
.width(130)
.height(140)
.render();
{
// Create the same temporal plot as before but do not call "render()"
// Instead, "store it" in a variable called temporalCirclePlot
const temporalCirclePlot = vl.markCircle()
.title("Daily Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldT("date").timeUnit('monthdate')
.axis({"format": "%b"})
.title("Aggregated Months (2012-2015)"),
vl.y().fieldQ('temp_max').title('Max Temp'),
vl.color().fieldN('weather').scale({range: weatherPalette}),
vl.size().fieldQ('precipitation').scale({range:[5, 350]})
).width(width - 200);
// Create a bar plot of weather frequencies and store it in weatherFreqBarPlot
const weatherFreqBarPlot = vl.markBar()
.encode(
vl.x().count().title('Num of Days with Weather (2012-2015)'),
vl.y().fieldN('weather'),
vl.color().fieldN('weather').scale({range: weatherPalette})
)
.width(width - 200);
// Combine the charts via vertical concatenation
return vl.vconcat(temporalCirclePlot, weatherFreqBarPlot)
.data(seattleWeatherTyped)
.render();
}
{
// Create the selection brush
const selectIntervalBrush = vl.selectInterval();
// Create the same temporal plot as before
const temporalCirclePlot = vl.markCircle()
.select(selectIntervalBrush) // add in selection brush.
.title({text: "Daily Max Temperatures in Seattle 2012 - 2015",
subtitle: "Drag to select points | Click elsewhere to deselect"})
.encode(
vl.x().fieldT("date").timeUnit('monthdate')
.axis({"format": "%b"})
.title("Aggregated Months (2012-2015)"),
vl.y().fieldQ('temp_max').title('Max Temp'),
// Create conditional based on brush interval. If a point is within the
// selection interval, then color it with weatherPalette. If not, color
// it with lightgray
vl.color().value("lightgray").if(
selectIntervalBrush,
vl.color().fieldN('weather').scale({range: weatherPalette})),
vl.size().fieldQ('precipitation').scale({range:[5, 350]})
).width(width - 200);
// Create a bar plot of weather frequencies
const weatherFreqBarPlot = vl.markBar()
.transform(vl.filter(selectIntervalBrush)) // add in the selection interval to the bar chart
.encode(
vl.x().count()
.title('Num of Days with Weather (2012-2015)')
.scale({ domain: [0, 1600] }),
vl.y().fieldN('weather')
.scale({ domain: ["drizzle", "fog", "rain", "snow", "sun"]}),
vl.color().fieldN('weather').scale({range: weatherPalette})
).width(width - 200);
return vl.vconcat(temporalCirclePlot, weatherFreqBarPlot)
.data(seattleWeatherTyped)
.render();
}
vl.markTick() // use a tick graphic mark
.data(seattleWeatherTyped)
.encode(
vl.x().fieldT("date")
.timeUnit('monthdate')
.axis({"format": "%b"})
.title('Month'),
vl.y().fieldO("date") // ordinal for y axis
.timeUnit("year")
.scale({domain: [2012, 2013, 2014, 2015]})
.title('Year'),
vl.color().fieldN("weather").scale({ range: weatherPalette }),
)
.render()
vl.markTick() // use a tick graphic mark
.data(seattleWeatherTyped)
.encode(
vl.x().fieldT("date")
.timeUnit('monthdate')
.axis({"format": "%b"})
.title('Month'),
vl.y().fieldO("date") // ordinal for y axis
.timeUnit("year")
.scale({domain: [2012, 2013, 2014, 2015]})
.title('Year'),
vl.color().fieldN("weather").scale({ range: weatherPalette }),
vl.size().fieldQ("temp_max").title('Max Temp')
)
.height(140).render()
vl.markTick() // use a tick graphic mark
.data(seattleWeatherTyped)
.encode(
vl.x().fieldT("date").timeUnit('monthdate').title('Month').axis({"format": "%b"}),
vl.y().fieldN("weather"),
vl.color().fieldN("weather").scale({ range: weatherPalette }),
)
.title("Weather Patterns Aggregated Over 2012-2015")
.render()
vl.markTick() // use a tick graphic mark
.data(seattleWeatherTyped)
.encode(
vl.x().fieldT("date").timeUnit('monthdate').title('Month').axis({"format": "%b"}),
vl.y().fieldN("weather"),
vl.color().fieldN("weather").scale({ range: weatherPalette }),
vl.size().fieldQ("temp_max").title('max temp')
)
.render()
vl.markRect({tooltip: true})
.data(seattleWeatherTyped)
.encode(
vl.x().fieldO("date").timeUnit("date").title('Day'),
vl.y().fieldO("date").timeUnit("month").title('Month'),
vl.color().average("temp_max").title('Avg Max Temp')
)
.title('Heatmap of Avg Max Temperatures in Seattle (2012-2015)')
.render()
vl.markRect({tooltip: true})
.data(seattleWeatherTyped)
.encode(
vl.x().fieldO("date").timeUnit("date").title('Day'),
vl.y().fieldO("date").timeUnit("month").title('Month'),
vl.color().average("temp_max")
.scale({ scheme: "redyellowblue", reverse: true })
.title('Avg Max Temp'),
)
.title('Heatmap of Avg Max Temperatures in Seattle (2012-2015)')
.render()
vl.data(seattleWeatherTyped)
.layer(
vl.markRect().encode(
vl.x().fieldO("date").timeUnit("date").title('Day'),
vl.y().fieldO("date").timeUnit("month").title('Month'),
vl.color().average("temp_max")
.scale({ scheme: "redyellowblue", reverse: true })
.title('Avg Max Temp'),
),
vl.markText().encode(
vl.x().fieldO("date").timeUnit("date").title('Day'),
vl.y().fieldO("date").timeUnit("month").title('Month'),
vl.text().average("temp_max").format('.1f')
)
)
.width(800)
.render()
vl.markCircle()
.data(seattleWeatherTyped)
.encode(
vl.x().fieldO("date").timeUnit("date").title('Day'),
vl.y().fieldO("date").timeUnit("month").title('Month'),
vl.size().average('temp_max').title('Avg Max Temp'),
)
.render()
vl.markCircle()
.data(seattleWeatherTyped)
.encode(
vl.x().fieldO("date").timeUnit("date").title('Day'),
vl.y().fieldO("date").timeUnit("month").title('Month'),
vl.size().average('temp_max').title('Avg Max Temp'),
vl.color().average("temp_max")
.scale({ scheme: "redyellowblue", reverse: true })
.title('Avg Max Temp'),
)
.render()
vl.markCircle()
.data(seattleWeatherTyped)
.encode(
vl.x().fieldO("date").timeUnit("date").title('Day'),
vl.y().fieldO("date").timeUnit("month").title('Month'),
vl.size().average('precipitation').scale({range: [5, 300]}).title('Avg Precipitation')
)
.render()
vl.markCircle()
.data(seattleWeatherTyped)
.encode(
vl.x().fieldO("date").timeUnit("date").title('Day'),
vl.y().fieldO("date").timeUnit("month").title('Month'),
vl.size().average('precipitation').scale({range: [5, 400]}).title('Avg Precipitation'),
vl.color().average("temp_max")
.scale({ scheme: "redyellowblue", reverse: true })
.title('Avg Max Temp'),
)
.height(370).render()
vl.markLine({point: true, tooltip: true})
.data(seattleWeatherTyped)
.title("Average Daily Max Temperatures in Seattle (2012-2015) by Month")
.encode(
vl.x().fieldT("date").timeUnit("month").title('Month'),
vl.y().fieldQ('temp_max').aggregate("mean").title('Avg Max Temp'),
)
.render()
{
const avgMonthlyTempLineGraph = vl.markLine({point: true, tooltip: true})
.data(seattleWeatherTyped)
.title("Average Daily Max Temperatures in Seattle (2012-2015) by Month")
.encode(
vl.x().fieldT("date").timeUnit("month"),
vl.y().fieldQ('temp_max').aggregate("mean"),
);
const overallAvgLine = vl.markRule({tooltip: true, color: 'firebrick'})
.data(seattleWeatherTyped)
.encode(
vl.y().fieldQ('temp_max').aggregate("mean")
);
const overallAvgLabel = vl.markText({color: 'firebrick', x:15, dy:-37})
.data(seattleWeatherTyped)
.encode(
vl.text().fieldQ('temp_max').aggregate("mean").format('0.1f')
);
const overallAvgLabelTitle = vl.markText({color: 'firebrick', fontWeight: 'bold', dx:19, dy: -20})
.data(seattleWeatherTyped)
.encode(
vl.x().value(0),
vl.y().fieldQ('temp_max').aggregate("mean"),
vl.text().value('Mean')
);
return vl.layer(avgMonthlyTempLineGraph, overallAvgLine, overallAvgLabel, overallAvgLabelTitle).render();
}
{
const seattleMontlhyAverageMaxTemp = vl.markLine({point: true})
.data(seattleWeatherTyped)
.encode(
vl.x().field("date").timeUnit("month"),
vl.y().fieldQ('temp_max').aggregate("mean"),
vl.tooltip().fieldQ('temp_max').aggregate("mean").format('0.1f')
);
const seattleMinMaxMaxTemp = vl.markArea({ interpolate: "basis", color: "darkseagreen", opacity: 0.5 })
.data(seattleWeatherTyped)
.encode(
vl.x().field("date").timeUnit("month"),
vl.y2().fieldQ('temp_max').aggregate("max"),
vl.y().fieldQ('temp_max').aggregate("min").title("Mean Monthly Temperature")
);
const errorBars = vl.markErrorbar({extent: 'stdev'})
.data(seattleWeatherTyped)
.encode(
vl.x().fieldT("date").timeUnit("month"),
vl.y().fieldQ('temp_max')
);
return vl.layer(seattleMinMaxMaxTemp, errorBars, seattleMontlhyAverageMaxTemp)
.title({
text: "Average Daily Max Temperatures in Seattle (2012-2015) by Month",
subtitle: "The green area marks the min/max of the avg monthly max"
})
.render();
}
vl.markLine({point: true, tooltip: true})
.data(seattleWeatherTyped)
.title("Avg Daily Max Temperatures in Seattle (2012-2015) by Month & Weather Type")
.encode(
vl.x().fieldT('date').timeUnit('month'),
vl.y().fieldQ('temp_max').aggregate('mean'),
vl.color().fieldN('weather').scale({range: weatherPalette}),
)
.render()
vl.markPoint({point: true, tooltip: true})
.data(seattleWeatherTyped)
.title("Avg Daily Max Temperatures in Seattle (2012-2015) by Month & Weather Type")
.encode(
vl.x().fieldT('date').timeUnit('month'),
vl.y().fieldQ('temp_max').aggregate('mean'),
vl.shape().fieldN('weather'),
)
.render()
vl.markPoint({tooltip: true})
.data(seattleWeatherTyped)
.title("Relationship Between Daily Min/Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_min').title("Min Temperature for Day"),
vl.y().fieldQ('temp_max').title("Max Temperature for Day"),
)
.render()
vl.markCircle()
.data(seattleWeatherTyped)
.title("Relationship Between Daily Min/Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_min').title("Min Temperature for Day"),
vl.y().fieldQ('temp_max').title("Max Temperature for Day"),
vl.color().fieldN('weather').scale({range: weatherPalette}),
vl.size().fieldQ('precipitation').scale({range:[5, 350]})
)
.render();
vl.markPoint({tooltip: true})
.data(seattleWeatherTyped)
.title("The Relationship Between Min/Max Temp in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_min'),
vl.y().fieldQ('temp_max'),
vl.color().fieldT('date').timeUnit('year').title('year') // as a temporal encoding
)
.render()
vl.markPoint({tooltip: true})
.data(seattleWeatherTyped)
.title("The Relationship Between Min/Max Temp in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_min'),
vl.y().fieldQ('temp_max'),
vl.color().fieldN('date').timeUnit('year') // as a nominal encoding
)
.render()
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.
