Public
Edited
Apr 24, 2023
seattleWeatherTyped = FileAttachment("seattle-weather.csv").csv({typed: true})
vl.markBar()
.data(seattleWeatherTyped)
.encode(
vl.x().fieldQ('temp_max').bin({maxbins: 20}),
vl.y().count()
)
.title('Histogram of Daily Max Temperatures in Seattle (2012 - 2015)')
.render()
vl.markBar()
.data(seattleWeatherTyped)
.encode(
vl.x().fieldQ('temp_max').bin({maxbins: 20}),
vl.y().count(),
vl.color().fieldN('weather')
)
.title('Histogram of Daily Max Temperatures in Seattle (2012 - 2015)')
.render()
vl.markBar()
.data(seattleWeatherTyped)
.encode(
vl.x().fieldQ('temp_max').bin({maxbins: 20}),
vl.y().count(),
vl.color().fieldN('weather').scale({
domain: ['sun', 'fog', 'drizzle', 'rain', 'snow'],
range: ["#e7ba52","#c7c7c7","#aec7e8", "#1f77b4","#9467bd"]
})
)
.title('Histogram of Daily Max Temperatures in Seattle (2012 - 2015)')
.render()
vl.markBar()
.data(seattleWeatherTyped)
.encode(
vl.x().fieldQ('temp_max').bin({maxbins: 20}),
vl.y().count(),
vl.color().fieldN('weather').scale({
domain: ['sun', 'fog', 'drizzle', 'rain', 'snow'],
range: ["#e7ba52","#c7c7c7","#aec7e8", "#1f77b4","#9467bd"]
}),
vl.column().fieldN('weather')
)
.title('Histogram of Daily Max Temperatures in Seattle (2012 - 2015)')
.render()
vl.markPoint()
.data(seattleWeatherTyped)
.encode(
vl.x().fieldT('date'),
vl.y().fieldQ('temp_max')
)
.title('Seattle Daily Max Temperatures 2012 - 2015')
.render()
vl.markPoint({filled: true})
.data(seattleWeatherTyped)
.encode(
vl.x().fieldT('date'),
vl.y().fieldQ('temp_max'),
vl.color().fieldN('weather').scale({
domain: ['sun', 'fog', 'drizzle', 'rain', 'snow'],
range: ["#e7ba52","#c7c7c7","#aec7e8", "#1f77b4","#9467bd"]
})
)
.title('Seattle Daily Max Temperatures 2012 - 2015')
.render()
vl.markPoint({filled: true})
.data(seattleWeatherTyped)
.encode(
vl.x().fieldT('date'),
vl.y().fieldQ('temp_max'),
vl.color().fieldN('weather').scale({
domain: ['sun', 'fog', 'drizzle', 'rain', 'snow'],
range: ["#e7ba52","#c7c7c7","#aec7e8", "#1f77b4","#9467bd"]
}),
vl.size().fieldQ('precipitation').scale({range: [5, 350]})
)
.title('Seattle Daily Max Temperatures 2012 - 2015')
.render()
vl.markPoint({filled: true})
.data(seattleWeatherTyped)
.encode(
vl.x().fieldT('date').timeUnit('monthdate'),
vl.y().fieldQ('temp_max'),
vl.color().fieldN('weather').scale({
domain: ['sun', 'fog', 'drizzle', 'rain', 'snow'],
range: ["#e7ba52","#c7c7c7","#aec7e8", "#1f77b4","#9467bd"]
}),
vl.size().fieldQ('precipitation').scale({range: [5, 350]})
)
.title('Seattle Daily Max Temperatures 2012 - 2015')
.render()
vl.markPoint({filled: true})
.data(seattleWeatherTyped)
.encode(
vl.x().fieldT('date').timeUnit('monthdate'),
vl.y().fieldQ('temp_max'),
vl.color().fieldN('weather').scale({
domain: ['sun', 'fog', 'drizzle', 'rain', 'snow'],
range: ["#e7ba52","#c7c7c7","#aec7e8", "#1f77b4","#9467bd"]
}),
vl.size().fieldQ('precipitation').scale({range: [5, 350]}),
vl.column('weather')
)
.title('Seattle Daily Max Temperatures 2012 - 2015')
.render()
{
// Create the same temporal plot as before
const temporalCirclePlot = vl.markCircle()
.title("Seattle Max Temperatures 2012 - 2015")
.encode(
vl.x().fieldT("date").timeUnit('monthdate').title('Date'),
vl.y().fieldQ('temp_max').title('Max Temp'),
vl.color().fieldN('weather')
.scale({
range: ["#aec7e8", "#c7c7c7", "#1f77b4","#9467bd", "#e7ba52"],
}),
vl.size().fieldQ('precipitation').scale({range:[5, 350]})
);
// Create a bar plot of weather frequencies
const weatherFreqBarPlot = vl.markBar()
.encode(
vl.x().count(),
vl.y().fieldN('weather'),
vl.color().fieldN('weather')
.scale({
range: ["#aec7e8", "#c7c7c7", "#1f77b4","#9467bd", "#e7ba52"],
})
);
// Combine the charts via vertical concatenation
return vl.vconcat(temporalCirclePlot, weatherFreqBarPlot)
.data(seattleWeatherTyped)
.render();
}
import {vl} from '@vega/vega-lite-api-v5'
import {printTable} from '@jonfroehlich/data-utilities'
import {printTableTypes} from '@jonfroehlich/data-utilities'
import {toc} from "@jonfroehlich/collapsible-toc"
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.
