Skip to content

Instantly share code, notes, and snippets.

@jakevdp

jakevdp/.block

Last active Jul 29, 2020
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