UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk.
seattleWeatherTyped = d3.csv("https://raw.githubusercontent.com/vega/vega-datasets/next/data/seattle-weather.csv", d3.autoType)
vl.markBar()
.data(seattleWeatherTyped)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin(true),
vl.y().aggregate("count").title("Num of Days")
)
.render()
vl.markBar({color: "purple", opacity: 0.7})
.data(seattleWeatherTyped)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin(true),
vl.y().aggregate("count").title("Num of Days")
)
.render()
{
const barColorParam = vl.param("bar_color").value("lightblue");
return vl.markBar({color: {expr: 'bar_color'}, opacity: 0.7})
.data(seattleWeatherTyped)
.params(barColorParam)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin(true),
vl.y().aggregate("count").title("Num of Days")
)
.render()
}
{
const barColor = "lightblue";
return vl.markBar({color: barColor, opacity: 0.7})
.data(seattleWeatherTyped)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin(true),
vl.y().aggregate("count").title("Num of Days")
)
.render()
}
{
const barColorParam = vl.param("bar_color")
.value("lightblue")
.bind(vl.menu(['lightblue', 'peachpuff', 'purple', 'blue']));
return vl.markBar({color: {expr: 'bar_color'}, opacity: 0.8})
.data(seattleWeatherTyped)
.params(barColorParam)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin(true),
vl.y().aggregate("count").title("Num of Days")
)
.render()
}
{
const barColorParam = vl.param("bar_color")
.value("lightblue")
.bind(vl.menu(['lightblue', 'peachpuff', 'purple', 'blue']).name('Bar Color '));
const cornerRadiusParam = vl.param('bar_corner_radius')
.value(10)
.bind(vl.slider(0, 20, 1).name('Corner Radius')); // slider takes min, max, step
return vl.markBar(
{color: {expr: 'bar_color'},
cornerRadius: {expr: 'bar_corner_radius' }})
.data(seattleWeatherTyped)
.params(barColorParam, cornerRadiusParam)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin(true),
vl.y().aggregate("count").title("Num of Days")
)
.render()
}
vl.markPoint()
.data(seattleWeatherTyped)
.title("Seattle Daily Max Temperatures (2012-2015)")
.encode(
vl.x().fieldT("date").title('Day'),
vl.y().fieldQ('temp_max').title('Max Temp'),
vl.color().fieldQ('temp_max').scale({domain: [0, 30]}).title('Max Temp')
)
.render();
vl.markPoint()
.data(seattleWeatherTyped)
.title("Seattle Daily Max Temperatures (2012-2015)")
.transform(
vl.filter('datum.temp_max > 20') // keep all temp_max > 20 Celsius
)
.encode(
vl.x().fieldT("date").title('Day'),
vl.y().fieldQ('temp_max').title('Max Temp'),
vl.color().fieldQ('temp_max').scale({domain: [0, 30]}).title('Max Temp')
)
.render();
{
const maxTempParam = vl.param('max_temp_threshold')
.value(0)
.bind(vl.slider(-5, 35, 1));
return vl.markPoint()
.data(seattleWeatherTyped)
.title("Seattle Daily Max Temperatures (2012-2015)")
.params(maxTempParam)
.transform(
vl.filter('datum.temp_max > max_temp_threshold') // keep all temp_max > 20 Celsius
)
.encode(
vl.x().fieldT("date").title('Day'),
vl.y().fieldQ('temp_max').title('Max Temp'),
vl.color().fieldQ('temp_max').scale({domain: [0, 30]}).title('Max Temp')
)
.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.
