Skip to content

Instantly share code, notes, and snippets.

@jakevdp
Last active July 29, 2020 20:03
Show Gist options
  • Save jakevdp/5d1915d808d3d91ce86f0bc3ca066d48 to your computer and use it in GitHub Desktop.
Save jakevdp/5d1915d808d3d91ce86f0bc3ca066d48 to your computer and use it in GitHub Desktop.
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