31:Taf7,md`# COVID-19 World Community Mobility Report by Google [Google](https://www.google.com/covid19/mobility/) has released reports on movement trends due to COVID-19 from all around the world. They have shared data in [PDF files](https://www.google.com/covid19/mobility/). **Updated Jun 2020:** Since the first released reports, Google, now made all the data available as a big [CSV file](https://www.google.com/covid19/mobility/data_documentation.html?hl=en)! **Update Apr 2021:** Now using the latest data from [COVID19_mobility gitub](https://github.com/ActiveConclusion/COVID19_mobility) Another better visualization approach is using [horizontal charts](https://observablehq.com/@radames/covid-19-community-mobility-reports-timechart)

Old content

I made a [glitch project](https://glitch.com/edit/#!/google-mobility-data-sql) to serve the latest CSV as a SQLite db. You can get a JSON data with all countries level fetching this this endpoint [\`https://google-mobility-data-sql.glitch.me/getCountries\`](https://google-mobility-data-sql.glitch.me/getCountries) or you can send any SQLite query, the table name is **Global_Mobility_Report** \` https://google-mobility-data-sql.glitch.me/sql?q=SQL_QUERY\` example SQLite query: **SELECT * from Global_Mobility_Report WHERE sub_region_1 = '' and sub_region_2 = ''** [https://google-mobility-data-sql.glitch.me/sql?q=SELECT * from Global_Mobility_Report WHERE sub_region_1 = '' and sub_region_2 = ''](https://google-mobility-data-sql.glitch.me/sql?q=SELECT%20*%20from%20Global_Mobility_Report%20WHERE%20sub_region_1%20=%20%27%27%20and%20sub_region_2%20=%20%27%27) for reference here is one row example: \`\`\`js { iso_3166_2_code: '', census_fips_code: '', date: '2020-02-15', retail_and_recreation_percent_change_from_baseline: '0', grocery_and_pharmacy_percent_change_from_baseline: '4', parks_percent_change_from_baseline: '5', transit_stations_percent_change_from_baseline: '0', workplaces_percent_change_from_baseline: '2', residential_percent_change_from_baseline: '1', }; \`\`\` ps: it might take few seconds to warmup the glitch instance ~~Thanks to [Kyle McDonald](https://twitter.com/kcimc/status/1246212041175523328)!! He wrote a [script](https://github.com/kylemcdonald/covid-mobility-data/releases/tag/2020-03-29) to convert the charts images back into [data](https://github.com/kylemcdonald/covid-mobility-data/releases/tag/2020-03-29)~~ ~~I've aggregated country level data in this [tsv file](https://static.observableusercontent.com/files/d50b8d4bbf32e81c0d1e3b51cf8ec3fd8ccff4242daf302c73b4686e648268cacc844817bac8778ef2f04c7a942509c5bd7fe11fbcb965a849517620e64e9c0d") using this [shell script](https://gist.github.com/radames/88e751adc0ef23a58a4f347cf5935f80).~~ `32:Tcb8,map = { const svg = d3 .create("svg") .style("display", "block") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .style("background", "#777777"); const tooltip = svg.append("g").attr("class", "tooltip"); const countriesGroup = svg.append("g"); countriesGroup .append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", "#3333333") .attr("d", path); countriesGroup .append("path") .datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-opacity", "0.5") .attr("stroke-width", "1") .attr("stroke-linejoin", "round") .attr("d", path); const bubbleData = d3.local(); const currData = groupbyDate.get("2020-14-02"); const bubble = svg .append("g") .selectAll(".bubble") .data(countries.features) .enter() .filter((d) => currData.has(+d.id)) //bubbles only for countries in dataset .append("circle") .attr("transform", (d) => { const points = path.centroid(d); return `translate(${points[0]} ${points[1]})`; }) .attr("class", "bubble") .attr("fill-opacity", 0.6) .each((d, i, nodes) => { const [country] = currData.get(+d.id); const value = +country[selectedCategory]; bubbleData.set(nodes[i], { value: value }); }) .attr("fill", (d, i, nodes) => { return colorScale(bubbleData.get(nodes[i]).value); }) .attr("r", (d, i, nodes) => { return radius(bubbleData.get(nodes[i]).value); }) .on("mousemove", (event, d) => { const [country] = currData.get(+d.id); console.log(country); const value = +country[selectedCategory]; if (value) { const { layerX, layerY } = event; tooltip.call(tooltipCall, { mouseX: layerX, mouseY: layerY, value: [d.properties.name, value, country.date.toDateString()] }); } }) .on("touchend mouseleave", () => tooltip.call(tooltipCall, null)); return Object.assign(svg.node(), { update(newday) { const currData = groupbyDate.get(timeFormater(newday)); const t = svg.transition().duration(delayTime).ease(d3.easeLinear); bubble .transition(t) .each((d, i, nodes) => { if (!currData.has(+d.id)) return; const [country] = currData.get(+d.id); const value = +country[selectedCategory]; bubbleData.set(nodes[i], { value: value }); }) .attr("fill", (d, i, nodes) => { return colorScale(bubbleData.get(nodes[i]).value); }) .attr("r", (d, i, nodes) => { return radius(bubbleData.get(nodes[i]).value); }); bubble.on("mousemove", (event, d) => { const [country] = currData.get(+d.id); console.log(country); const value = +country[selectedCategory]; if (value) { const { layerX, layerY } = event; tooltip.call(tooltipCall, { mouseX: layerX, mouseY: layerY, value: [d.properties.name, value, country.date.toDateString()] }); } }); } }); }33:T558,tooltipCall = (g, d) => { if (!d) return g.style("display", "none"); const { mouseX, mouseY, value , date} = d; const padding = { x: 10, y: 10 }; g.raise(); g.style("display", 'block') .style("pointer-events", "none") .style("font", "12px sans-serif") .style("background-color", "green") .style("font-weight", "bold"); // break text into lined of 4 words const text = g .selectAll("text") .data([null]) .join("text") .call(text => text .selectAll("tspan") .data(value) .join("tspan") .attr("alignment-baseline", "hanging") .attr("x", 0) .attr("y", (d, i) => `${i * 1.1}em`) .text(d => d) ); const textbox = text.node().getBBox(); g.selectAll("rect") .data([null]) .join('rect') .attr("fill", "white") .attr("stroke", "lightgray") .attr("x", -padding.x / 2) .attr("y", -padding.y / 2) .attr("width", textbox.width + padding.x) .attr("height", textbox.height + padding.y); const xshift = mouseX + textbox.width + padding.x / 2 > width ? -(textbox.width + padding.x) : padding.x; const yshift = mouseY + textbox.height + padding.y / 2 > height ? -(textbox.height + padding.y) : padding.y; g.attr("transform", `translate(${mouseX + xshift},${mouseY + yshift})`); text.raise(); }34:T7fd,html`