2c:null 2d:["$","title",null,{"children":"Vega-Lite Animation with Scrubber | Clinton Brownley | Observable"}] 32:T8df,vlChart = { let data = weatherByDate; const maxDateWithValue = new Date(currentDate); const aWeekBeforeMax = maxDateWithValue - 7 * 24 * 3600000; const thresholdBeforeMax = maxDateWithValue - threshold * 24 * 3600000; data = weatherByDate.map(d => ({ ...d, Confidence: d.key < thresholdBeforeMax ? 1 : (maxDateWithValue - d.key) / (threshold * 24 * 3600000) / 2 })); const gridCondition = { condition: { test: "+timeFormat(datum.value, '%d') <= 7", value: [] }, value: [1, 5] }; const base = vl.markBar({ tooltip: true }).encode( vl .x() .fieldT("key") .timeUnit("yearmonthdate") .title("Date") .axis({ gridDash: gridCondition, tickCount: "week", tickDash: gridCondition, labelAlign: "left", labelExpr: "[timeFormat(datum.value, '%d'), +timeFormat(datum.value, '%d') <= 7 ? timeFormat(datum.value, '%b') : '']", labelOffset: 4, labelPadding: -24, tickSize: 30 }), vl .y() .fieldQ("value") .title(attrLabels[attrSelected]), vl .opacity() .fieldQ("Confidence") .scale({ domain: [0, 1], range: [0, 1] }) .legend( width > 600 ? { format: "%", symbolFillColor: "firebrick", symbolStrokeColor: "firebrick" } : null ) ); const bar = base.encode( vl .color() .fieldQ("value") .title(attrLabels[attrSelected]) .legend(width > 600) .scale({ scheme: "lightgreyteal" }) ); const line = base .markLine({ color: "firebrick", size: 2, interpolate: "basis" }) .transform(vl.window(vl.mean("value").as("rolling_mean")).frame([-days, 0])) .encode( vl.y().fieldQ("rolling_mean"), vl .color() .value("firebrick") .legend( width > 600 ? { format: "%", symbolFillColor: "steelblue", symbolStrokeColor: "steelblue" } : null ) ); return vl .layer(bar, line) .data(data) .width(width - (width > 600 ? 200 : 50)) .height(400); }33:[] 30:{"id":"9777610776503ae7","slug":null,"title":"Vega-Lite Animation with Scrubber","thumbnail":"13a6f4b9ec1af4a7d315494e03974a8de3b16432d602b491296f5f0d6879bf83","access_level":"public","create_time":"$D2021-03-14T20:54:16.174Z","update_time":"$D2022-07-12T15:08:08.551Z","view_time":null,"first_public_time":"$D2022-12-30T00:26:16.037Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f53fd09c4c73fcfb","login":"clinton-brownley","name":"Clinton Brownley","avatar_url":"https://avatars-next.observableusercontent.com/0683ab3692f040e05b994f7d2fd9e5c5954dbc8ab8333e6c2dd230cfb8f86648","tier":"starter_2024"},"version":529,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c0acc693e908940a","login":"clinton-brownley","name":"Clinton Brownley","avatar_url":"https://avatars-next.observableusercontent.com/0683ab3692f040e05b994f7d2fd9e5c5954dbc8ab8333e6c2dd230cfb8f86648","tier":null}],"members":[{"type":"individual","id":"c0acc693e908940a","login":"clinton-brownley","name":"Clinton Brownley","avatar_url":"https://avatars-next.observableusercontent.com/0683ab3692f040e05b994f7d2fd9e5c5954dbc8ab8333e6c2dd230cfb8f86648","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Vega-Lite Animation with Scrubber","cells":[{"id":0,"value":"md`# Vega-Lite Animation with [Scrubber](https://observablehq.com/@mbostock/scrubber)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"md`### A fork of [John Guerra's](http://johnguerra.co/) [Coronavirus en Colombia](https://observablehq.com/@john-guerra/evolucion-coronavirus-en-colombia) notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"header = html`\n

\n\n

Weather in Seattle

Create an animated chart of weather in Seattle.

\n
\n

Click Play to view the animation.

${viewof currentDate}

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"viewof attrSelected = select({\n options: Object.keys(attrLabels).map(d => ({\n label: attrLabels[d],\n value: d\n })),\n title: \"Select a weather attribute: \"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"md`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart = {\n const target = html`

${attrLabels[attrSelected]} in Seattle on ${fmt(\n new Date(currentDate)\n )}

`;\n //yield target;\n vlChart\n .render()\n .then((view) => target.querySelector(\"#chart\").appendChild(view));\n yield target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Controls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof days = slider({\n min: 0,\n max: 30,\n value: 7,\n step: 1,\n title: \"Average Window\",\n description: \"Previous days included in the average.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof threshold = slider({\n min: 0,\n max: 30,\n value: 14,\n step: 1,\n title: \"Days to Reliable Data\",\n description: \"After how many days the data is considered reliable.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof currentDate = Scrubber(weatherByDate.map(d => d.key), {\n format: date =>\n date.toLocaleString('en-US', {\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\"\n }),\n initial: Math.floor(weatherByDate.length * 0.10),\n autoplay: false,\n loop: false,\n delay: 100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`## Dates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"fmt = {\n const fmt = d3.timeFormatDefaultLocale(locale).format;\n return fmt(\"%b %d, %Y\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"dateFmt = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"dateParse = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"locale = fetch(\n \"https://unpkg.com/d3-time-format@3.0.0/locale/en-US.json\"\n).then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"viewof earliestDate = date({\n title: \"Earliest Date\",\n min: weatherDatesExtent[0],\n max: weatherDatesExtent[1],\n value: \"2015-05-01\",\n description: `Only dates between ${fmt(weatherDatesExtent[0])} and ${fmt(\n weatherDatesExtent[1]\n )} are allowed.`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"// There are 1,461 records for Seattle, which causes the chart to render slowly\n// Filter out older dates/records to help the animation progress more quickly\nweatherByDate = weather\n .filter(d => d.date >= dateParse(earliestDate) && d.location === \"Seattle\")\n .map(d => ({\n value: +d[attrSelected],\n key: d.date\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"// There are more locations than Seattle, so we need to filter for Seattle \n// when we produce weatherByDate in the cell above\nweather.filter(d => d.date.toString() == new Date('2015-05-03').toString())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"weatherDatesExtent = d3.extent(weather.map(d => d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"d3.extent(weather.map(d => d.precipitation))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"d3.extent(weather.map(d => d.temp_max))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"d3.extent(weather.map(d => d.temp_min))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"d3.extent(weather.map(d => d.wind))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"attrLabels = ({\n wind: \"Wind\",\n temp_max: \"Temp (Max)\",\n temp_min: \"Temp (Min)\",\n precipitation: \"Precipitation\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"weather = (await require('vega-datasets@1'))['weather.csv']()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"//flights = datasets['flights-5k.json'].url // use URL\nflights = (await require('vega-datasets@1'))['flights-5k.json']()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"datasets = require('vega-datasets@1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"import { slider, select, date } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"d3 = require(\"d3@6\") // require(\"d3-time-format\", \"d3-array\", \"d3-time\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"