Skip to content

Instantly share code, notes, and snippets.

@jakevdp

jakevdp/.block

Last active July 29, 2020 20:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jakevdp/5d1915d808d3d91ce86f0bc3ca066d48 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jakevdp/5d1915d808d3d91ce86f0bc3ca066d48 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jakevdp revised this gist Mar 8, 2018. 1 changed file with 8 additions and 38 deletions.
    46 changes: 8 additions & 38 deletions spec.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    {
    "$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"
    },
    @@ -10,20 +11,8 @@
    "condition": {
    "field": "weather",
    "scale": {
    "domain": [
    "sun",
    "fog",
    "drizzle",
    "rain",
    "snow"
    ],
    "range": [
    "#e7ba52",
    "#a7a7a7",
    "#aec7e8",
    "#1f77b4",
    "#9467bd"
    ]
    "domain": ["sun", "fog", "drizzle", "rain", "snow"],
    "range": ["#e7ba52", "#a7a7a7", "#aec7e8", "#1f77b4", "#9467bd"]
    },
    "selection": "brush",
    "type": "nominal"
    @@ -33,10 +22,7 @@
    "size": {
    "field": "precipitation",
    "scale": {
    "domain": [
    -1,
    50
    ]
    "domain": [-1, 50]
    },
    "type": "quantitative"
    },
    @@ -61,9 +47,7 @@
    "mark": "point",
    "selection": {
    "brush": {
    "encodings": [
    "x"
    ],
    "encodings": ["x"],
    "type": "interval"
    }
    },
    @@ -82,20 +66,8 @@
    "condition": {
    "field": "weather",
    "scale": {
    "domain": [
    "sun",
    "fog",
    "drizzle",
    "rain",
    "snow"
    ],
    "range": [
    "#e7ba52",
    "#a7a7a7",
    "#aec7e8",
    "#1f77b4",
    "#9467bd"
    ]
    "domain": ["sun", "fog", "drizzle", "rain", "snow"],
    "range": ["#e7ba52", "#a7a7a7", "#aec7e8", "#1f77b4", "#9467bd"]
    },
    "selection": "click",
    "type": "nominal"
    @@ -115,9 +87,7 @@
    "mark": "bar",
    "selection": {
    "click": {
    "encodings": [
    "color"
    ],
    "encodings": ["color"],
    "type": "multi"
    }
    },
  2. jakevdp revised this gist Mar 8, 2018. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,3 @@
    # Seattle Weather Interactive

    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
  3. jakevdp revised this gist Mar 8, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion spec.json
    View file
    Original file line number Diff line number Diff line change
    @@ -57,7 +57,7 @@
    "type": "quantitative"
    }
    },
    "height": 400,
    "height": 300,
    "mark": "point",
    "selection": {
    "brush": {
  4. jakevdp revised this gist Mar 8, 2018. 1 changed file with 39 additions and 19 deletions.
    58 changes: 39 additions & 19 deletions spec.json
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@
    ],
    "range": [
    "#e7ba52",
    "#c7c7c7",
    "#a7a7a7",
    "#aec7e8",
    "#1f77b4",
    "#9467bd"
    @@ -53,10 +53,11 @@
    "title": "Maximum Daily Temperature (C)"
    },
    "field": "temp_max",
    "scale": {"domain": [-5, 40]},
    "type": "quantitative"
    }
    },
    "height": 300,
    "height": 400,
    "mark": "point",
    "selection": {
    "brush": {
    @@ -66,29 +67,40 @@
    "type": "interval"
    }
    },
    "transform": [
    {
    "filter": {
    "selection": "click"
    }
    }
    ],
    "width": 600
    },
    {
    "encoding": {
    "color": {
    "field": "weather",
    "scale": {
    "domain": [
    "sun",
    "fog",
    "drizzle",
    "rain",
    "snow"
    ],
    "range": [
    "#e7ba52",
    "#c7c7c7",
    "#aec7e8",
    "#1f77b4",
    "#9467bd"
    ]
    "condition": {
    "field": "weather",
    "scale": {
    "domain": [
    "sun",
    "fog",
    "drizzle",
    "rain",
    "snow"
    ],
    "range": [
    "#e7ba52",
    "#a7a7a7",
    "#aec7e8",
    "#1f77b4",
    "#9467bd"
    ]
    },
    "selection": "click",
    "type": "nominal"
    },
    "type": "nominal"
    "value": "lightgray"
    },
    "x": {
    "aggregate": "count",
    @@ -101,6 +113,14 @@
    }
    },
    "mark": "bar",
    "selection": {
    "click": {
    "encodings": [
    "color"
    ],
    "type": "multi"
    }
    },
    "transform": [
    {
    "filter": {
  5. jakevdp revised this gist Mar 8, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion spec.json
    View file
    Original file line number Diff line number Diff line change
    @@ -25,7 +25,7 @@
    "#9467bd"
    ]
    },
    "selection": "selector001",
    "selection": "brush",
    "type": "nominal"
    },
    "value": "lightgray"
  6. jakevdp revised this gist Mar 8, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions spec.json
    View file
    Original file line number Diff line number Diff line change
    @@ -59,7 +59,7 @@
    "height": 300,
    "mark": "point",
    "selection": {
    "selector001": {
    "brush": {
    "encodings": [
    "x"
    ],
    @@ -104,7 +104,7 @@
    "transform": [
    {
    "filter": {
    "selection": "selector001"
    "selection": "brush"
    }
    }
    ],
  7. jakevdp revised this gist Mar 8, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion spec.json
    View file
    Original file line number Diff line number Diff line change
    @@ -56,7 +56,7 @@
    "type": "quantitative"
    }
    },
    "height": 400,
    "height": 300,
    "mark": "point",
    "selection": {
    "selector001": {
  8. jakevdp revised this gist Mar 8, 2018. No changes.
  9. jakevdp revised this gist Mar 8, 2018. 4 changed files with 147 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    # Seattle Weather Interactive

    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
    25 changes: 25 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <!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>
    114 changes: 114 additions & 0 deletions spec.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,114 @@
    {
    "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
    "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",
    "#c7c7c7",
    "#aec7e8",
    "#1f77b4",
    "#9467bd"
    ]
    },
    "selection": "selector001",
    "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",
    "type": "quantitative"
    }
    },
    "height": 400,
    "mark": "point",
    "selection": {
    "selector001": {
    "encodings": [
    "x"
    ],
    "type": "interval"
    }
    },
    "width": 600
    },
    {
    "encoding": {
    "color": {
    "field": "weather",
    "scale": {
    "domain": [
    "sun",
    "fog",
    "drizzle",
    "rain",
    "snow"
    ],
    "range": [
    "#e7ba52",
    "#c7c7c7",
    "#aec7e8",
    "#1f77b4",
    "#9467bd"
    ]
    },
    "type": "nominal"
    },
    "x": {
    "aggregate": "count",
    "field": "*",
    "type": "quantitative"
    },
    "y": {
    "field": "weather",
    "type": "nominal"
    }
    },
    "mark": "bar",
    "transform": [
    {
    "filter": {
    "selection": "selector001"
    }
    }
    ],
    "width": 600
    }
    ]
    }
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  10. jakevdp created this gist Mar 8, 2018.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: MIT