2f: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); }30:[] 2d:{"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"},{"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"},{"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"},{"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"},{"id":434,"value":"md`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":308,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`## Controls`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":28,"value":"md`## Dates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"fmt = {\n const fmt = d3.timeFormatDefaultLocale(locale).format;\n return fmt(\"%b %d, %Y\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"dateFmt = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"dateParse = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":15,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":149,"value":"weatherDatesExtent = d3.extent(weather.map(d => d.date))","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"d3.extent(weather.map(d => d.precipitation))","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"d3.extent(weather.map(d => d.temp_max))","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"d3.extent(weather.map(d => d.temp_min))","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"d3.extent(weather.map(d => d.wind))","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":8,"value":"weather = (await require('vega-datasets@1'))['weather.csv']()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":247,"value":"datasets = require('vega-datasets@1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"import { slider, select, date } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"d3 = require(\"d3@6\") // require(\"d3-time-format\", \"d3-array\", \"d3-time\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}