Skip to content

Instantly share code, notes, and snippets.

@jakevdp
Last active July 29, 2020 20:03
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Interactive Exploration of Seattle Weather
license: MIT

This is a Vega-Lite chart showing an interactive view of Seattle's weather, including maximum temperature, amount of precipitation, and type of weather. By clicking and dragging on the scatter plot, you can see the proportion of days in that range that have sun, rain, fog, snow, etc.

See the chart in action at https://bl.ocks.org/jakevdp/5d1915d808d3d91ce86f0bc3ca066d48

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
<style>
body {
font-family: sans-serif;
}
.vega-actions a {
padding: 0.2em;
}
</style>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "spec.json";
vegaEmbed('#vis', spec).catch(console.warn);
</script>
</body>
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"title": "Seattle Weather, 2012-2015",
"data": {
"url": "https://vega.github.io/vega-datasets/data/seattle-weather.csv"
},
"vconcat": [
{
"encoding": {
"color": {
"condition": {
"field": "weather",
"scale": {
"domain": ["sun", "fog", "drizzle", "rain", "snow"],
"range": ["#e7ba52", "#a7a7a7", "#aec7e8", "#1f77b4", "#9467bd"]
},
"selection": "brush",
"type": "nominal"
},
"value": "lightgray"
},
"size": {
"field": "precipitation",
"scale": {
"domain": [-1, 50]
},
"type": "quantitative"
},
"x": {
"axis": {
"title": "Date"
},
"field": "date",
"timeUnit": "monthdate",
"type": "temporal"
},
"y": {
"axis": {
"title": "Maximum Daily Temperature (C)"
},
"field": "temp_max",
"scale": {"domain": [-5, 40]},
"type": "quantitative"
}
},
"height": 300,
"mark": "point",
"selection": {
"brush": {
"encodings": ["x"],
"type": "interval"
}
},
"transform": [
{
"filter": {
"selection": "click"
}
}
],
"width": 600
},
{
"encoding": {
"color": {
"condition": {
"field": "weather",
"scale": {
"domain": ["sun", "fog", "drizzle", "rain", "snow"],
"range": ["#e7ba52", "#a7a7a7", "#aec7e8", "#1f77b4", "#9467bd"]
},
"selection": "click",
"type": "nominal"
},
"value": "lightgray"
},
"x": {
"aggregate": "count",
"field": "*",
"type": "quantitative"
},
"y": {
"field": "weather",
"type": "nominal"
}
},
"mark": "bar",
"selection": {
"click": {
"encodings": ["color"],
"type": "multi"
}
},
"transform": [
{
"filter": {
"selection": "brush"
}
}
],
"width": 600
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment