44:["$","title",null,{"children":"Google mobility data | Erica Yee | Observable"}] 4c:T4f8, viewof county = select({ title: "Counties", description: "See mobility data for a particular county. Not all dates are available for every county. Alpine and Sierra Counties unavailable", options: [ 'Alameda County', 'Amador County', 'Butte County', 'Calaveras County', 'Colusa County', 'Contra Costa County', 'Del Norte County', 'El Dorado County', 'Fresno County', 'Glenn County', 'Humboldt County', 'Imperial County', 'Inyo County', 'Kern County', 'Kings County', 'Lake County', 'Lassen County', 'Los Angeles County', 'Madera County', 'Marin County', 'Mariposa County', 'Mendocino County', 'Merced County', 'Modoc County', 'Mono County', 'Monterey County', 'Napa County', 'Nevada County', 'Orange County', 'Placer County', 'Plumas County', 'Riverside County', 'Sacramento County', 'San Benito County', 'San Bernardino County', 'San Diego County', 'San Francisco County', 'San Joaquin County', 'San Luis Obispo County', 'San Mateo County', 'Santa Barbara County', 'Santa Clara County', 'Santa Cruz County', 'Shasta County', 'Siskiyou County', 'Solano County', 'Sonoma County', 'Stanislaus County', 'Sutter County', 'Tehama County', 'Trinity County', 'Tulare County', 'Tuolumne County', 'Ventura County', 'Yolo County', 'Yuba County'], value: "Alameda County" })4d:T60e,drawStateChart = ele => { const svg = ele .append("svg") .style("height", chart_height + "px") .style("width", chart_width + "px"); // negative area svg.append("path") .datum(d => d.values) .attr("fill", "#77b7cf") .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(timeParser(d.date))) .y0(yCA(height)) .y1(d => yCA(Math.min(0,d.perc_change)))) // positive area svg.append("path") .datum(d => d.values) .attr("fill", "white") // .attr("fill", "blue") .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(timeParser(d.date))) .y0(yCA(height)) .y1(d => yCA(Math.max(0,d.perc_change)))) // Axes svg.append("g").call(xAxis) .select('.domain').remove(); svg.append("g").call(yAxisCA) .select('.domain').remove(); // Axis labels, title svg.append('text').call(chartTitle); // svg.append('text').call(xLabel); // svg.append('text').call(yLabel); // baseline svg.append('line') .style('stroke', '#C4C4C4') .style('stroke-width', 0.75) .attr("x1", x(timeParser('2020-02-15'))) .attr("y1", yCA(0)) .attr("x2", x(timeParser('2020-06-05'))) .attr("y2", yCA(0)) // shelter in place order svg.append('line') .style('stroke', '#8D6A9F') .style('stroke-width', 1) .style('stroke-dasharray', '6,3') .style('opacity', 0.7) .attr("x1", x(timeParser("2020-03-19"))) .attr("y1", margin.top) .attr("x2", x(timeParser("2020-03-19"))) .attr("y2", 160) }4e:Ta98,drawNewChartNulls = ele => { const svg = ele .append("svg") .style("height", chart_height + "px") .style("width", chart_width + "px"); // negative area missing values svg.append("path") .datum(d => d.values.filter(areaNeg.defined())) .attr("fill", "white") .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(timeParser(d.date))) .y0(y(height)) .y1(d => y(Math.min(0,d.perc_change)))) // missing values positive area svg.append("path") .datum(d => d.values.filter(areaPos.defined())) .attr("fill", "white") .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(timeParser(d.date))) .y0(y(height)) .y1(d => y(Math.max(0,d.perc_change)))) // negative area svg.append("path") .datum(d => d.values) .attr("fill", d => '#77b7cf') //.attr("fill", '#77b7cf') .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(timeParser(d.date))) .y0(y(height)) .y1(d => y(Math.min(0,d.perc_change)))) // positive area svg.append("path") .datum(d => d.values) .attr("fill", 'white') .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(timeParser(d.date))) .y0(y(height)) .y1(d => y(Math.max(0,d.perc_change)))) // Axes svg.append("g").call(xAxis) .select('.domain').remove(); svg.append("g").call(yAxis) .select('.domain').remove(); // Axis labels, title svg.append('text').call(chartTitle); // svg.append('text').call(xLabel); // svg.append('text').call(yLabel); // range for memorial day weekend svg.append('rect') .attr('fill', 'red') .style('opacity', 0.1) .attr('x', x(timeParser('2020-05-23'))) .attr('y', margin.top) .attr('width', x(timeParser('2020-05-26')) - x(timeParser('2020-05-23'))) .attr('height', 140) // range for presidents day weekend svg.append('rect') .attr('fill', 'blue') .style('opacity', 0.1) .attr('x', x(timeParser('2020-02-15'))) .attr('y', margin.top) .attr('width', x(timeParser('2020-02-18')) - x(timeParser('2020-02-15'))) .attr('height', 140) // line for shelter in place order svg.append('line') .style('stroke', '#8D6A9F') .style('stroke-width', 1) .style('stroke-dasharray', '6,3') .style('opacity', 0.7) .attr("x1", x(timeParser("2020-03-19"))) .attr("y1", margin.top) .attr("x2", x(timeParser("2020-03-19"))) .attr("y2", 160) // baseline svg.append('line') .style('stroke', '#C4C4C4') .style('stroke-width', 0.75) .attr("x1", x(timeParser('2020-02-15'))) .attr("y1", y(0)) .attr("x2", x(timeParser('2020-06-05'))) .attr("y2", y(0)) }4f:Tb31, drawComparisonChart = ele => { const svg = ele .append("svg") .style("height", chart_height + "px") .style("width", chart_width + "px"); // negative area missing values svg.append("path") .datum(d => d.values.filter(areaNeg.defined())) .attr("fill", "white") .attr("d", areaNeg) // missing values positive area svg.append("path") .datum(d => d.values.filter(areaPos.defined())) .attr("fill", "white") .attr("d", areaPos) // negative area svg.append("path") .datum(d => d.values) .attr("fill", d => '#77b7cf') // .attr("d", areaNeg) .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(timeParser(d.date))) .y0(y(height)) .y1(d => y(Math.min(0,d.perc_change)))) // positive area svg.append("path") .datum(d => d.values) .attr("fill", 'white') // .attr("d", areaPos) .attr("d", d3.area() .curve(d3.curveStep) .x(d => x(timeParser(d.date))) .y0(y(height)) .y1(d => y(Math.max(0,d.perc_change)))) // STATE DATA // Line if (toggle) { svg.append("path") .data(by_type_data) .datum(d => d.values) .attr("stroke", "#F4A045") .attr('stroke-width', 1.5) .attr('stroke-opacity', .75) .attr('fill', 'none') .attr("d", d3.line() .curve(d3.curveLinear) .x(d => x(timeParser(d.date))) .y(d => y(d.perc_change))) } // Axes svg.append("g").call(xAxis) .select('.domain').remove(); svg.append("g").call(yAxis) .select('.domain').remove(); // Axis labels, title svg.append('text').call(chartTitle); // svg.append('text').call(xLabel); // svg.append('text').call(yLabel); // range for memorial day weekend svg.append('rect') .attr('fill', 'red') .style('opacity', 0.1) .attr('x', x(timeParser('2020-05-23'))) .attr('y', margin.top) .attr('width', x(timeParser('2020-05-26')) - x(timeParser('2020-05-23'))) .attr('height', 140) // range for presidents day weekend svg.append('rect') .attr('fill', 'blue') .style('opacity', 0.1) .attr('x', x(timeParser('2020-02-15'))) .attr('y', margin.top) .attr('width', x(timeParser('2020-02-18')) - x(timeParser('2020-02-15'))) .attr('height', 140) // line for shelter in place order svg.append('line') .style('stroke', '#8D6A9F') .style('stroke-width', 1) .style('stroke-dasharray', '6,3') .style('opacity', 0.7) .attr("x1", x(timeParser("2020-03-19"))) .attr("y1", margin.top) .attr("x2", x(timeParser("2020-03-19"))) .attr("y2", 160) // baseline svg.append('line') .style('stroke', '#C4C4C4') .style('stroke-width', 0.75) .attr("x1", x(timeParser('2020-02-15'))) .attr("y1", y(0)) .attr("x2", x(timeParser('2020-06-05'))) .attr("y2", y(0)) }50:[{"id":"a47e07010ba4bbaf284058df4fb628627fa5f56ca48f0936ecf4f5dbe41e383b0177d22420539c1f7961d559adcc8249304f84300cd3bb2f68a813e3f8901cad","href":"https://static.observableusercontent.com/files/a47e07010ba4bbaf284058df4fb628627fa5f56ca48f0936ecf4f5dbe41e383b0177d22420539c1f7961d559adcc8249304f84300cd3bb2f68a813e3f8901cad","name":"data_mob_google_ca_longer@1.json","type":"application/json","lastModified":1591814381650.571,"size":64665},{"id":"0e5813abdf35782735ac9adfa4b459c81a6e4d48e0c8d8b4c02c946d6f41351ff80a91bb5dd3a448dac579501d059905a8794a6bad5b0d20486348e9f4eb8547","href":"https://static.observableusercontent.com/files/0e5813abdf35782735ac9adfa4b459c81a6e4d48e0c8d8b4c02c946d6f41351ff80a91bb5dd3a448dac579501d059905a8794a6bad5b0d20486348e9f4eb8547","name":"data_mob_google_counties_longer","type":"application/octet-stream","lastModified":1591814800477.656,"size":4709878},{"id":"e5724e19efb1a89656b33668d8f41bc847f2f3b79b27e5973a9de82bf86272cbcdfadec6adea048863458b0c677003b93a95851f41f89fb03d93d844781f3f2d","href":"https://static.observableusercontent.com/files/e5724e19efb1a89656b33668d8f41bc847f2f3b79b27e5973a9de82bf86272cbcdfadec6adea048863458b0c677003b93a95851f41f89fb03d93d844781f3f2d","name":"data_mob_google_counties_longer_NAs.json","type":"application/json","lastModified":1591829475283.193,"size":4849030}] 48:{"id":"950783072a497fb3","slug":"google-mobility-data","title":"Google mobility data","thumbnail":"e7bc0cbc23ae5353ceb56000c1c16a609dfc8b491bd25310ab8de08aa5ecfa71","access_level":"public","create_time":"$D2020-06-09T20:29:39.972Z","update_time":"$D2020-06-30T19:25:57.091Z","view_time":null,"first_public_time":"$D2020-06-30T19:26:00.367Z","has_unpublished_edits":null,"fork":{"id":"788231f22abfd142","slug":"d3-small-multiples","title":"D3 Small Multiples","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b037fb3afc5e643d","login":"ericayee","name":"Erica Yee","avatar_url":"https://avatars-next.observableusercontent.com/e06ee0f58db43307f4bc550b15cf3861ff8c70f1f6f0a132ee4fd3d803b33bd0","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1099,"publish_version":1099,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c988eb21019213f","login":"ericayee","name":"Erica Yee","avatar_url":"https://avatars-next.observableusercontent.com/e06ee0f58db43307f4bc550b15cf3861ff8c70f1f6f0a132ee4fd3d803b33bd0","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"2c988eb21019213f","login":"ericayee","name":"Erica Yee","avatar_url":"https://avatars-next.observableusercontent.com/e06ee0f58db43307f4bc550b15cf3861ff8c70f1f6f0a132ee4fd3d803b33bd0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Google mobility data","cells":[{"id":0,"value":"md`# Google mobility data\n### [[source](https://www.google.com/covid19/mobility/) / [documentation](https://www.google.com/covid19/mobility/data_documentation.html?hl=en)] \nTODO: \n* go through [checklist](https://support.google.com/covid19-mobility/checklist/9834261) to mark potentially important dates like holidays\n* ✔figure out what to do when data is missing like Amador County\n* ✔check statewide data for nulls\n* try ✔county-to-state or county-to-county comparisons\n* ✔update data as of 6/9/20\n* ✔add county data with selector✔\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"md`\n### About the data\nThe baseline is the median value, for the corresponding day of the week, during the 5-week period Jan 3–Feb 6, 2020.\n\n### Categories\n#### Grocery & pharmacy\nMobility trends for places like grocery markets, food warehouses, farmers markets, specialty food shops, drug stores, and pharmacies.\n\n#### Parks\nMobility trends for places like local parks, national parks, public beaches, marinas, dog parks, plazas, and public gardens.\n\n#### Transit stations\nMobility trends for places like public transport hubs such as subway, bus, and train stations.\n\n#### Retail & recreation\nMobility trends for places like restaurants, cafes, shopping centers, theme parks, museums, libraries, and movie theaters.\n\n#### Residential\nMobility trends for places of residence.\n\n#### Workplaces\nMobility trends for places of work.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"by_type_chart = {\n const div = d3.create(\"div\").style(\"display\", \"block\");\n const charts = div\n .html('

Google mobility data for California, relative change since Jan 2020

\\n

line indicates when shelter in place began on March 19

')\n .selectAll(\"div\")\n .data(by_type_data)\n .join(\"div\")\n .style(\"height\", chart_height + \"px\")\n .style(\"width\", chart_width + \"px\")\n .attr(\"class\", \"chart-container\")\n .call(drawStateChart);\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"countyTitle = html`

Compare Google mobility data for ${county} vs. California, relative change since Jan 2020

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"comparison_chart = {\n const div = d3.create(\"div\").style(\"display\", \"block\");\n const charts = div\n .html(`

orange is state trend

purple line indicates when shelter in place began on March 19

blue bar indicates Presidents' Day Weekend

red bar indicates Memorial Day Weekend

`)\n .selectAll(\"div\")\n .data(by_type_counties_data_nulls)\n .join(\"div\")\n .style(\"height\", chart_height + \"px\")\n .style(\"width\", chart_width + \"px\")\n .attr(\"class\", \"chart-container\")\n .call(drawComparisonChart);\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"viewof b = button({\n value: \"Toggle state data\", \n description: \"Compare county and state data.\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"// set toggle of state value on comparison chart\ntoggle = {\n b;\n return !this\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"drawChartText = md`## Draw chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"// generator for negative area\n// null values are considered missing data\nareaNeg = d3.area()\n .curve(d3.curveStep)\n .defined(d => d.perc_change != null)\n .x(d => x(timeParser(d.date)))\n .y0(y(height))\n .y1(d => y(Math.min(0,d.perc_change)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"// generator for positive area\n// null values are considered missing data\nareaPos = d3.area()\n .curve(d3.curveStep)\n .defined(d => d.perc_change != null)\n .x(d => x(timeParser(d.date)))\n .y0(y(height))\n .y1(d => y(Math.max(0,d.perc_change)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"scales = md`## Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"chart_height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"chart_width = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"x = d3\n .scaleTime()\n .domain(d3.extent(ca_data, d => timeParser(d.date)))\n .range([margin.left, chart_width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"yCA = d3\n .scaleLinear()\n .domain(d3.extent(ca_data, d => d.perc_change))\n .range([chart_height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"y = d3\n .scaleLinear()\n .domain(d3.extent(counties_data_nulls, d => d.perc_change))\n .range([chart_height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"axes = md`## Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"tickFormatter = d3.timeFormat('%b');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"timeParser = d3.timeParse('%Y-%m-%d');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${chart_height - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(tickFormatter).ticks(4).tickSize(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"yAxisCA = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yCA)\n .ticks(6)\n .tickFormat(d => d + '%'))\n .call(g => g.selectAll('.tick:nth-of-type(4) text')\n .style('font-size', 9)\n .text(`baseline`))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y)\n .ticks(6)\n .tickFormat(d => d + '%'))\n .call(g => g.selectAll('.tick:nth-of-type(3) text')\n .style('font-size', 9)\n .text(`baseline`))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"xLabel = ele =>\n ele\n .text(\"date\")\n .attr(\"x\", (x.range()[1] - x.range()[0]) / 2)\n .attr(\"y\", chart_height - margin.bottom + 35)\n // .style('font-family', \"sans-serif\")\n // .style(\"text-anchor\", \"middle\")\n .style(\"font-size\", '14px')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"chartTitle = ele =>\n ele\n .text(d => d.key)\n .attr(\"transform\", `translate(${chart_width / 2}, ${20})`)\n .style(\"text-anchor\", \"middle\")\n // .style('font-family', \"sans-serif\")\n .style('font-size', 12)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"yLabel = ele =>\n ele\n .text(\"% change from baseline\")\n .attr(\n \"transform\",\n `translate(${margin.left - 40}, ${chart_height / 2})rotate(-90)`\n )\n .style(\"text-anchor\", \"middle\")\n // .style('font-family', \"sans-serif\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"data = md`## Import and format data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"ca_data = FileAttachment(\"data_mob_google_ca_longer@1.json\").json()\n// each object has: date, category, perc_change","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"by_type_data = d3\n .nest()\n .key(d => d.category)\n .entries(ca_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"counties_data = FileAttachment(\"data_mob_google_counties_longer\").json()\n// each object has: county, date, category, perc_change","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"filtered_counties = counties_data.filter(d => d.county == county)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"by_type_counties_data = d3\n .nest()\n .key(d => d.category)\n .entries(filtered_counties)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"// trying with missing values as null\ncounties_data_nulls = FileAttachment(\"data_mob_google_counties_longer_NAs.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"filtered_counties_nulls = counties_data_nulls.filter(d => d.county == county)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"by_type_counties_data_nulls = d3\n .nest()\n .key(d => d.category)\n .entries(filtered_counties_nulls)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"import {select, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"margin = ({ top: 20, right: 30, bottom: 40, left: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"styles = md`# Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"allStyles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"dump = md`# Dump`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"// county_chart_nulls = {\n// const div = d3.create(\"div\").style(\"display\", \"block\");\n// const charts = div\n// .html(`

Google mobility data for ${county}, relative change since Jan 2020

\n//

purple line indicates when shelter in place began on March 19

\n//

blue bar indicates Presidents' Day Weekend

\n//

red bar indicates Memorial Day Weekend

`)\n// .selectAll(\"div\")\n// .data(by_type_counties_data_nulls)\n// .join(\"div\")\n// .style(\"height\", chart_height + \"px\")\n// .style(\"width\", chart_width + \"px\")\n// .attr(\"class\", \"chart-container\")\n// .call(drawNewChartNulls);\n\n// return div.node();\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"// doesn't take into account null values\n// county_chart = {\n// const div = d3.create(\"div\").style(\"display\", \"block\");\n// const charts = div\n// .html(`

Google mobility data for ${county}, relative change since Jan 2020

\\n

line indicates when shelter in place began on March 19

`)\n// .selectAll(\"div\")\n// .data(by_type_counties_data )\n// .join(\"div\")\n// .style(\"height\", chart_height + \"px\")\n// .style(\"width\", chart_width + \"px\")\n// .attr(\"class\", \"chart-container\")\n// .call(drawNewChart);\n\n// return div.node();\n// }\n\n// not sure where i need this, doesn't take into account nulls\n // // Line\n // svg.append(\"path\")\n // .datum(d => d.values)\n // .attr(\"fill\", \"pink\")\n // .attr(\"d\", d3.line()\n // .curve(d3.curveLinear)\n // .x(d => x(timeParser(d.date)))\n // .y(d => y(d.perc_change)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null