2f:T9de,vlChart = { // Leave the following data section as-is //////////////////////////////////////////////////////////////////////////// let data = weatherByDate; let weatherAttrib = attrLabels[attrSelected]; 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 base = vl.markBar({ tooltip: true }).encode( // TO-DO: Encode the date on the x-axis // (in the dataset weatherByDate, the date attribute is named 'key') vl.x() , // TO-DO: Encode the weather attribute value on the y-axis // (in the dataset weatherByDate, the weather value attribute is named 'value') vl.y() , // Leave the following opacity section as-is // This section produces the effect of data appearing left-to-right during the animation //////////////////////////////////////////////////////////////////////////// vl .opacity() .fieldQ("Confidence") .scale({ domain: [0, 1], range: [0, 1] }) .legend( width > 600 ? { format: "%", symbolFillColor: "firebrick", symbolStrokeColor: "firebrick" } : null ) ); //////////////////////////////////////////////////////////////////////////// const bar = base.encode( // TO-DO: Add a quantitative color scale encoding for the weather attribute value vl.color() ); // Leave the following line section as-is // This section produces the firebrick rolling average line //////////////////////////////////////////////////////////////////////////// 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") ); //////////////////////////////////////////////////////////////////////////// return // TO-DO: Add a layer with the bar and line variables // TO-DO: Add the data // TO-DO: Add a chart height .width(width - (width > 600 ? 200 : 50)) // Leave this line as-is }30:[{"id":"6e4df2fb9dc9282713e1798b1c5930df07e055e8de2f3840033a7a472e7c9649c25e795f55c5358442b8e3e783f6971f2fc72140fce5f11612ddb9800f5293d7","href":"https://static.observableusercontent.com/files/6e4df2fb9dc9282713e1798b1c5930df07e055e8de2f3840033a7a472e7c9649c25e795f55c5358442b8e3e783f6971f2fc72140fce5f11612ddb9800f5293d7","name":"Screen Shot 2021-03-15 at 10.25.58 AM.png","type":"image/png","lastModified":1615829282081.268,"size":162609}] 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":2,"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":111,"value":"md`

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"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":7,"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":9,"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":11,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## Controls`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"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":17,"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":19,"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":21,"value":"md`## Dates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"fmt = {\n const fmt = d3.timeFormatDefaultLocale(locale).format;\n return fmt(\"%b %d, %Y\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"dateFmt = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"dateParse = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"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":31,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"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":35,"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":false,"hidden":false,"mode":"ojs"},{"id":37,"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":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"weatherDatesExtent = d3.extent(weather.map(d => d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"d3.extent(weather.map(d => d.precipitation))","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"d3.extent(weather.map(d => d.temp_max))","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"d3.extent(weather.map(d => d.temp_min))","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"d3.extent(weather.map(d => d.wind))","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"attrLabels = ({\n wind: \"Wind\",\n temp_max: \"Temp (Max)\",\n temp_min: \"Temp (Min)\",\n precipitation: \"Precipitation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"weather = (await require('vega-datasets@1'))['weather.csv']()","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"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":55,"value":"datasets = require('vega-datasets@1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"import { slider, select, date } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"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"}