| 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 | |
| } | |
| ] | |
| } |
