UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk.
import {vl} from '@vega/vega-lite-api-v5'
import {printTable} from '@jonfroehlich/data-utilities'
import {printTableTypes} from '@jonfroehlich/data-utilities'
seattleWeatherFile = FileAttachment("seattle-weather@2.csv");
seattleWeather = seattleWeatherFile.csv()
printTableTypes(seattleWeather);
seattleWeatherTyped = seattleWeatherFile.csv({typed: true})
printTableTypes(seattleWeatherTyped);
vl.markPoint() // specify the point mark
.data(seattleWeatherTyped) // specify data
.render(); // render the vis
vl.markPoint()
.data(seattleWeatherTyped)
.encode(vl.x().field('temp_max').type('quantitative')) // encode temp_max as x position
.render();
vl.markPoint()
.data(seattleWeatherTyped)
.encode(vl.y().field('temp_max').type('quantitative')) // encode temp_max as y position
.render();
vl.markPoint()
.data(seattleWeatherTyped)
.encode(vl.x().fieldQ('temp_max')) // use fieldQ shorthand
.render();
vl.markPoint({tooltip:true})
.data(seattleWeatherTyped)
.encode(vl.x().fieldQ('temp_max').aggregate("mean")) // calculate mean
.height(40)
.render()
vl.markPoint()
.data(seattleWeatherTyped)
.title("Daily Max Temperatures in Seattle 2012 - 2015") // add graph title
.encode(vl.x().fieldQ('temp_max').title("Temperature (Celsius)")) // add x-axis title
.render();
vl.markPoint()
.data(seattleWeatherTyped)
.title("Relationship Between Min/Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_min').title("Min Temp (C)"),
vl.y().fieldQ('temp_max').title("Max Temp (C)") // add in y encoding
).render();
vl.markSquare({opacity: 0.5}) // change mark type to square, change default opacity
.data(seattleWeatherTyped)
.title("Relationship Between Min/Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_min').title("Min Temp (C)"),
vl.y().fieldQ('temp_max').title("Max Temp (C)")
).render();
vl.markCircle({opacity: 0.6}) // change mark to circle and set opacity
.data(seattleWeatherTyped)
.title("Relationship Between Min/Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_min').title("Min Temp (C)"),
vl.y().fieldQ('temp_max').title("Max Temp (C)"),
vl.color().fieldN('weather')
).render();
vl.markCircle({opacity: 0.5})
.data(seattleWeatherTyped)
.title("Relationship Between Min/Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_min').title("Min Temp (C)"),
vl.y().fieldQ('temp_max').title("Max Temp (C)"),
vl.color().fieldN('weather').scale({range: ["#aec7e8", "#c7c7c7", "#1f77b4","#9467bd", "#e7ba52"] }) // add color
).render();
weatherColorPalette = ["#aec7e8", "#c7c7c7", "#1f77b4","#9467bd", "#e7ba52"];
vl.markCircle({opacity: 0.6})
.data(seattleWeatherTyped)
.title("Relationship Between Min/Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_min').title("Min Temp (C)"),
vl.y().fieldQ('temp_max').title("Max Temp (C)"),
vl.color().fieldN('weather').scale({range: weatherColorPalette }),
vl.size().fieldQ('precipitation')
).render();
printTable(minMaxPrecipitation)
vl.markCircle({opacity: 0.6})
.data(seattleWeatherTyped)
.title("Relationship Between Min/Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_min').title("Min Temp (C)"),
vl.y().fieldQ('temp_max').title("Max Temp (C)"),
vl.color().fieldN('weather').scale({range: weatherColorPalette }),
vl.size().fieldQ('precipitation').scale({range:[5, 500]}) // modify output range so sunny days visible
).render();
vl.markCircle({opacity: 0.6, tooltip: true})
.data(seattleWeatherTyped)
.title("Relationship Between Min/Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_min').title("Min Temp (C)"),
vl.y().fieldQ('temp_max').title("Max Temp (C)"),
vl.color().fieldN('weather').scale({range: weatherColorPalette }),
vl.size().fieldQ('precipitation').scale({range:[4, 500]})
).render();
vl.markCircle({opacity: 0.6, tooltip: true})
.data(seattleWeatherTyped)
.title("Relationship Between Min/Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_min').title("Min Temp (C)"),
vl.y().fieldQ('temp_max').title("Max Temp (C)"),
vl.color().fieldN('weather').scale({range: weatherColorPalette }),
vl.size().fieldQ('precipitation').scale({range:[4, 500]}),
vl.tooltip(['temp_min', 'temp_max']) // only show temp min and max
).render();
vl.markCircle({opacity: 0.6, tooltip: true})
.data(seattleWeatherTyped)
.title("Relationship Between Min/Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_min').title("Min Temp (C)"),
vl.y().fieldQ('temp_max').title("Max Temp (C)"),
vl.color().fieldN('weather').scale({range: weatherColorPalette }),
vl.size().fieldQ('precipitation').scale({range:[4, 500]}),
vl.tooltip(['date', 'temp_min', 'temp_max', 'precipitation', 'wind', 'weather'])
).render();
vl.markCircle({opacity: 0.6, tooltip: true})
.data(seattleWeatherTyped)
.title("Relationship Between Min/Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_min').title("Min Temp (C)"),
vl.y().fieldQ('temp_max').title("Max Temp (C)"),
vl.color().fieldN('weather').scale({range: weatherColorPalette }),
vl.size().fieldQ('precipitation').scale({range:[4, 500]}),
vl.tooltip([
{field : "date", type : "temporal"},
{field : "temp_max", title : "max temp" },
{field : "temp_min", title : "min temp" },
{field : "precipitation"},
{field : "wind"},
{field : "weather"},
])
).render();
vl.markPoint()
.data(seattleWeatherTyped)
.title("Daily Max Temperatures in Seattle 2012 - 2015")
.encode(vl.x().fieldQ('temp_max').title("Temperature (Celsius)"))
.render();
vl.markPoint({opacity: 0.05}) // change default opacity for the mark
.data(seattleWeatherTyped)
.title("Daily Max Temperatures in Seattle 2012 - 2015")
.encode(
vl.x().fieldQ('temp_max').bin(true),
)
.render();
vl.markPoint()
.data(seattleWeatherTyped)
.title("Seattle Daily Max Temperatures 2012 - 2015")
.encode(
vl.x().fieldQ('temp_max').bin(true),
vl.y().aggregate('count') // add aggregate count
)
.render();
vl.markBar({tooltip: true})
.data(seattleWeatherTyped)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin(true),
vl.y().aggregate("count")
)
.render()
vl.markBar()
.data(seattleWeatherTyped)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin({maxbins: 5}), // try changing the maxbins to see what happens
vl.y().aggregate("count")
)
.render()
vl.markBar()
.data(seattleWeatherTyped)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin({'step' : 2}), // try changing the step value to see what happens
vl.y().aggregate("count")
)
.render()
vl.markBar({tooltip: true})
.data(seattleWeatherTyped)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin(true),
vl.y().aggregate("count"),
vl.color().fieldN('weather') // add weather field as color encoding
)
.render()
vl.markBar({tooltip: true})
.data(seattleWeatherTyped)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin(true),
vl.y().aggregate("count"),
vl.color().fieldN('weather').scale({ range: weatherColorPalette }) // specify the output colors
)
.render()
vl.markBar({tooltip: true})
.data(seattleWeatherTyped)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin(true),
vl.y().aggregate("count"),
vl.color().fieldN('weather')
.scale({
domain: ['sun', 'fog', 'drizzle', 'rain', 'snow'], // specifically set order of domain
range: ["#e7ba52","#c7c7c7","#aec7e8", "#1f77b4","#9467bd"], // and specify output range
})
)
.render()
vl.markBar({tooltip: true})
.data(seattleWeatherTyped)
.title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
.encode(
vl.x().fieldQ('temp_max').bin(true).title('Max Temp'),
vl.y().aggregate("count").title('Number of Days'),
vl.color().fieldN('weather').scale({ range: weatherColorPalette}),
vl.column().fieldN('weather')
)
.width(130)
.height(150)
.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.
