31:T412,{ const data = nytStateFilteredData.filter(d => oDates.includes(d.timestamplocal.substring(0,12))); const title = oMetric == '' ? "Votes" : "Change in Vote from prior time stamp" ; const x = vl.x().fieldT("timestamp") .timeUnit("monthdatehoursminutesseconds") .title("Time Stamp"); const y = vl.y().fieldQ(oMetric + oCandidate).title( oCandidate + " " + title); const color = vl.color().fieldN("state_name"); const tooltip = vl.tooltip([ {field: 'state_name'}, {field: 'timestamp', type: "temporal", format: "%b %d, %Y %I:%M:%S %p"}, {field: oMetric + oCandidate, format: ","} ]); return vl.markBar() .title(oCandidate + " " + title +" vs. Time (N = " + d3.format(",")(data.length) + ")") .data(data) .encode(x,y,color,tooltip) .width(width * .8) .height(350) .render(); } 32:Tcc6,nytData = { const nytURL = "https://static01.nyt.com/elections-assets/2020/data/api/2020-11-03/national-map-page/national/president.json" const nytData = await d3.json(nytURL); const data = nytData.data.races.map(r => { return {state_id: r.state_id, state_name: r.state_name, data: r.timeseries} } ); data.forEach((d) => { // Calculate value-added metrics // Total: // Biden: votes * fraction bidenj; rounded down // Trump: votes * fraction trumpd; rounded down // Other: votes - votes_bidenj - votes_trumpd // // Change Total: increment in votes tally from timeseries n-1 to n // Change Biden: increment in votes_bidenj tally from timeseries n-1 to n // Change Trump: increment in votes_trumpd tally from timeseries n-1 to n // Change Other: increment in votes_other tally from timeseries n-1 to n d.data.forEach((t,n,a) => { t.state_name = d.state_name; // https://github.com/d3/d3-time-format t.timestamplocal = d3.timeFormat("%b %d, %Y %I:%M:%S %p")(new Date(t.timestamp)); // Calc votes a function of shares t.Total = t.votes; t.Biden = Math.floor(t.vote_shares.bidenj * t.Total); t.Trump = Math.floor(t.vote_shares.trumpd * t.Total); t.Other = t.Total - t.Biden - t.Trump; // Deltas t["Change Total"] = n == 0 ? 0 : t.Total - a[n-1].Total; t["Change Biden"] = n == 0 ? 0 : t.Biden - a[n-1].Biden; t["Change Trump"] = n == 0 ? 0 : t.Trump - a[n-1].Trump; t["Change Other"] = n == 0 ? 0 : t.Other - a[n-1].Other; }); //forEach }); //forEach return data; /* Alternate pattern to wrangle data from individual state datasets: const nytURL = "https://static01.nyt.com/elections-assets/2020/data/api/2020-11-03/race-page/"; var data = await Promise.all( // https://gist.github.com/bschwartz757/5d1ff425767fdc6baedb4e5d5a5135c8 Object.keys(states) .map(state => { let stateForURL = states[state].toLowerCase() .replace(new RegExp("\\ ","g"),"-"); return fetch(nytURL + stateForURL + "/president.json") .then((response) => response.json() ); //fetch }) //map ); */ } 33:[] 2f:{"title":"2020 Presidential Election Time Series","cells":[{"id":0,"value":"md`# 2020 Presidential Election Time Series`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"md `## Chart: \nVotes and Vote Changes Between Time-stamped Data Loads. Source: [New York Times 2020 Election Data](https://www.nytimes.com/interactive/2020/11/03/us/elections/results-president.html)\n\nRelated: [2020 Presidential Election Time Series Anomalies](https://observablehq.com/@mariodelgadosr/2020-presidential-election-time-series-anomalies)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"md `## Filters:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"chartFilters = html`\n

${viewof oMetric}${viewof oCandidate}

${viewof oStates}

${viewof oDates}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"md `## Table:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"{\n const data = nytStateFilteredData\n .filter(d => oDates.includes(d.timestamplocal.substring(0,12)))\n .sort((a,b) => new Date(a.timestamplocal) - new Date(b.timestamp) );\n return table(data,{maxHeight: 200});\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md `## Data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"md `### nytData directly links to New York Times' data source(s) at: \n\nhttps://static01.nyt.com/elections-assets/2020/data/api/2020-11-03/national-map-page/national/president.json`","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"nytStateFilteredData = nytData.filter(d => oStates.includes(d.state_id)).map(d => d.data).flat();\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md `## Imports:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"import {select, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md `## Input Objects:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"md`🢇 Click cell to exapand code for ***viewof oCandidate***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"viewof oCandidate = radio({\n title: 'Candiate',\n description: 'Select candidate',\n options: [\n { label: 'All', value: 'Total' },\n { label: 'Biden', value: 'Biden' },\n { label: 'Trump', value: 'Trump' },\n { label: 'Other', value: 'Other' }\n ],\n value: 'Total'\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`🢇 Click cell to exapand code for ***viewof oStates***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof oStates = select({\n title: \"State(s)\",\n description: \"Select state(s) for analysis: Shift/Ctrl Click for multi-selection.\",\n options: nytData.map(r => { return { label: r.state_name, value: r.state_id } }),\n multiple: true,\n value: nytData.map(r => r.state_id),\n size: 10\n }\n );\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"md`🢇 Click cell to exapand code for ***viewof oDates***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"viewof oDates = {\n\n const uniqueDates = [...new Set(nytStateFilteredData.map(d => d.timestamplocal.substring(0,12)))]\n .sort((a,b) => new Date(a) - new Date(b));\n \n \n return select({\n title: \"Date(s)\",\n description: \"Select date(s) for analysis: Shift/Ctrl Click for multi-selection.\",\n options: uniqueDates.map(d => { return { label: d, value: d } }),\n multiple: true,\n value: uniqueDates,\n size: Math.min(5,uniqueDates.length)\n }\n );\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"md`🢇 Click cell to exapand code for ***viewof Metric***` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"viewof oMetric = radio({\n title: 'Metric',\n description: 'Select metric',\n options: [\n { label: 'Votes', value: '' },\n { label: 'Change in Votes', value: 'Change ' }\n ],\n value: ''\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}