45:["$","title",null,{"children":"CALmatters: Google mobility data | Erica Yee | Observable"}] 4d:T451, viewof county = select({ 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" })4e:T99f, 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 => '#05A0C4') .style("opacity", .80) .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', 2) .attr('stroke-opacity', 1) .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); // 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 + 5) .attr("x2", x(timeParser("2020-03-19"))) .attr("y2", 185) // dummy y axis svg.append('line') .style('stroke', '#C4C4C4') .style('stroke-width', .75) .attr("x1", x(timeParser("2020-02-15"))) .attr("y1", margin.top + 5) .attr("x2", x(timeParser("2020-02-15"))) .attr("y2", 185) // 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-07-05'))) .attr("y2", y(0)) }4f:T428,// allStyles = html``50:[{"id":"e2025bcd48e6f5e3b3f9ec540c78fd0b3289fd07b8fa89fd7579e094f30b1c5501c1e561e6ecda4e2fab0e6f84b3e100d7f9f084c75978ab9b7a9ccf593534fb","href":"https://static.observableusercontent.com/files/e2025bcd48e6f5e3b3f9ec540c78fd0b3289fd07b8fa89fd7579e094f30b1c5501c1e561e6ecda4e2fab0e6f84b3e100d7f9f084c75978ab9b7a9ccf593534fb","name":"data_mob_google_counties_longer_NAs@1.json","type":"application/json","lastModified":1594327855297.697,"size":6136906},{"id":"64bf418f7a20a5592f5c1420572ad0fa31b2941906abb4c23ae5c0d0fb1d897be8006cabfe69bc2d6240144aec4f9b133d16ebf9b435e3b91dc0eed855e73e66","href":"https://static.observableusercontent.com/files/64bf418f7a20a5592f5c1420572ad0fa31b2941906abb4c23ae5c0d0fb1d897be8006cabfe69bc2d6240144aec4f9b133d16ebf9b435e3b91dc0eed855e73e66","name":"data_mob_google_ca_longer.json","type":"application/json","lastModified":1594328166101.483,"size":81980},{"id":"742c5f9216d0f9b65bc41df2e6854d082e3c3b6555482f4d0cfceb059d74d5224d250f8a0dafb27d1d36704be03664b7dd99d435d8853cc7f41837349b43a9ae","href":"https://static.observableusercontent.com/files/742c5f9216d0f9b65bc41df2e6854d082e3c3b6555482f4d0cfceb059d74d5224d250f8a0dafb27d1d36704be03664b7dd99d435d8853cc7f41837349b43a9ae","name":"data_mob_google_counties_longer.json","type":"application/json","lastModified":1594328186344.75,"size":5959378}] 49:{"id":"e80f4f3e26b00fb6","slug":"for-btn-google-mobility-data","title":"CALmatters: Google mobility data","thumbnail":"6f3d0390028cbefc5f344c4af91f13d731c430d5579e7ca7795266e0d4dd42bb","access_level":"public","create_time":"$D2020-07-09T20:45:47.135Z","update_time":"$D2020-08-03T22:36:07.688Z","view_time":null,"first_public_time":"$D2020-07-09T22:52:03.420Z","has_unpublished_edits":null,"fork":{"id":"950783072a497fb3","slug":"google-mobility-data","title":"Google mobility data","owner":{"id":"b037fb3afc5e643d","login":"ericayee","name":"Erica Yee"}},"stars":0,"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":1342,"publish_version":1342,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CALmatters: Google mobility data","cells":[{"id":0,"value":"md`# CALmatters: Google mobility data\n### [[source](https://www.google.com/covid19/mobility/) / [documentation](https://www.google.com/covid19/mobility/data_documentation.html?hl=en)] \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":1024,"value":"countyTitle = html`

Compare Google mobility data for ${county} vs. California

Not all dates are available for every county. Alpine and Sierra Counties unavailable.

Indicates when statewide Stay at Home order began on March 19

`","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 .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 .style(\"display\", \"inline-block\")\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":1191,"value":"\nviewof b = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"toggle = {\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":902,"value":"$4e","pinned":true,"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":true,"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 = 350;","pinned":true,"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 - 5, 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":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":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', '10px')\n .text(`baseline`))\n .call(g => g.selectAll('.tick line')\n .style('display', 'none'))","pinned":true,"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-size', '14px')","pinned":true,"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":98,"value":"chartTitle = ele =>\n ele\n .text(d => d.key.charAt(0).toUpperCase() + d.key.slice(1))\n .attr(\"transform\", `translate(5, 12)`)\n .style(\"text-anchor\", \"start\")\n .style('font-size', '14 px')\n .style('font-weight', '600')\n ","pinned":true,"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":725,"value":"// trying with missing values as null\ncounties_data_nulls = FileAttachment(\"data_mob_google_counties_longer_NAs@1.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":true,"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":true,"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.json\").json()\n// each object has: date, category, perc_change","pinned":true,"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\").json()\n// each object has: county, date, category, perc_change","pinned":true,"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":true,"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":1128,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"margin = ({ top: 25, right: 10, bottom: 30, left: 50 })","pinned":true,"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":1240,"value":"embedStyles = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 44:null