2c:null 2d:["$","title",null,{"children":"An animation demo of Walmart in America | Chuncheng | Observable"}] 32:T583,{ const { statemesh, nation } = Geography, { walmarts } = Data, walmartsSorted = walmarts.sort((a, b) => a.date - b.date), period = 10, // seconds scaler = d3 .scaleLinear() .domain([0, period]) .range([1, walmartsSorted.length]); function getSecond() { return new Date().getTime() / 1000; } function loop() { const threshold = scaler(getSecond() % period), w = walmartsSorted.slice(0, threshold), n = w.length, date = w[n - 1].date; const plt = Plot.plot({ projection: "albers", color: { legend: true, label: "First year opened", scheme: "blues" }, marks: [ Plot.density(w, { x: "longitude", y: "latitude", bandwidth: 12, fill: "density" }), Plot.dot(w, { x: "longitude", y: "latitude", r: 1, fill: "date" }), Plot.geo(statemesh, { strokeOpacity: 0.3 }), Plot.geo(nation) ] }); document.getElementById("density-header-container").innerHTML = `

Year: ${date.getFullYear()}

Shops: ${n}

`; return plt; } while (true) { yield loop(); if (!animationToggle) break; } }33:[{"id":"8b73e69e7b78f80be81c9575dfba3734f332b1ac54e21d784818911faba18cf08312361820be9bdea2e448042e6d6731a087fb5da8f71f91721807217c64b4df","href":"https://static.observableusercontent.com/files/8b73e69e7b78f80be81c9575dfba3734f332b1ac54e21d784818911faba18cf08312361820be9bdea2e448042e6d6731a087fb5da8f71f91721807217c64b4df","name":"walmarts.tsv","type":"text/tab-separated-values","lastModified":1681701490391.32,"size":99268},{"id":"096db948f2bb8712435974d3b8ec352aae22fc9f711cffc6aa5dc9be3105a958aa2767f7b8d528ed2c790f561d400abba33916c78d7c12cbf970dff82f61695f","href":"https://static.observableusercontent.com/files/096db948f2bb8712435974d3b8ec352aae22fc9f711cffc6aa5dc9be3105a958aa2767f7b8d528ed2c790f561d400abba33916c78d7c12cbf970dff82f61695f","name":"Snipaste_2023-04-17_21-36-28.png","type":"image/png","lastModified":1681738632405.268,"size":167749},{"id":"1b68405d96da17ef2703974ac04b9d89d2670aebc573566c179d75172369aec6931a52754e0b0c23d92f383fde5fada4df7d4ffd2e2e61fe190337f6cf8dbc56","href":"https://static.observableusercontent.com/files/1b68405d96da17ef2703974ac04b9d89d2670aebc573566c179d75172369aec6931a52754e0b0c23d92f383fde5fada4df7d4ffd2e2e61fe190337f6cf8dbc56","name":"Snipaste_2023-04-17_21-36-45.png","type":"image/png","lastModified":1681738632471.972,"size":191046},{"id":"8b29df92bad674979d8e4f6b3e3ba1d3dc6b71f67ab560feb136468cb1e4c6e2c4bced5b480b40d4216928c62bc725ab4feab6b7f220ff8260b28a950ec0b16c","href":"https://static.observableusercontent.com/files/8b29df92bad674979d8e4f6b3e3ba1d3dc6b71f67ab560feb136468cb1e4c6e2c4bced5b480b40d4216928c62bc725ab4feab6b7f220ff8260b28a950ec0b16c","name":"Snipaste_2023-04-17_21-36-35.png","type":"image/png","lastModified":1681738632495.091,"size":205053},{"id":"31ff68b1c8784afc39b9a7cdd7207fa4c3b90cee1989440c38ad02393cccab005e227a2af0f9d7a2e024ee1e7e67b2cd20e46674a20ce43d404d492b8129f498","href":"https://static.observableusercontent.com/files/31ff68b1c8784afc39b9a7cdd7207fa4c3b90cee1989440c38ad02393cccab005e227a2af0f9d7a2e024ee1e7e67b2cd20e46674a20ce43d404d492b8129f498","name":"Snipaste_2023-04-17_21-36-18.png","type":"image/png","lastModified":1681738632655.96,"size":270448},{"id":"783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","href":"https://static.observableusercontent.com/files/783cf2bf259e16d662d92c9f59ec97e564c50841c5984f2bb6f65a6d31f8c1b80846bffb65cb654dc2b587ac96f0007ab68c24bacce33655fd785e46020aff74","name":"us-counties-10m.json","type":"application/json","lastModified":1681701491106.039,"size":842177},{"id":"5978ce002d33cbcde5f39be69222360182955287fd504d1128b8d73aac5d9080298d87bc92db475f1e17af384db06b0431ad458bdaeaf2bda75685260789ebab","href":"https://static.observableusercontent.com/files/5978ce002d33cbcde5f39be69222360182955287fd504d1128b8d73aac5d9080298d87bc92db475f1e17af384db06b0431ad458bdaeaf2bda75685260789ebab","name":"us-presidential-election-2020.csv","type":"text/csv","lastModified":1681701900313.614,"size":98462}] 30:{"id":"fa095c071190eeab","slug":"an-animation-demo-of-walmart-in-america","title":"An animation demo of Walmart in America","thumbnail":"e84b64424fd2f77ded316505463151fba7342bef9664f04d8999067a6197394c","access_level":"public","create_time":"$D2023-04-17T03:17:28.858Z","update_time":"$D2023-04-17T13:38:02.606Z","view_time":null,"first_public_time":"$D2023-04-17T03:17:28.858Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024","bio":""},"version":371,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"bio":""}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"An animation demo of Walmart in America","cells":[{"id":0,"value":"# An animation demo of Walmart in America\n\nThe document is in the end of the page","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"---\n\n## Density animation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"viewof animationToggle = Inputs.toggle({\n label: \"Animation toggle\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"---\n## Select by years","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"viewof selectYear = Inputs.range(\n d3.extent(Data.walmarts, (d) => d.date.getFullYear()),\n { label: \"Select year\", step: 1 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"viewof accumulateToggle = Inputs.toggle({\n label: \"Accumulate toggle\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"{\n const { statemesh, nation } = Geography,\n { walmarts } = Data,\n w = walmarts.filter((d) =>\n accumulateToggle\n ? d.date.getFullYear() - (selectYear + 1) < 0\n : Math.abs(d.date.getFullYear() - (selectYear + 1)) < 2\n );\n\n return Plot.plot({\n projection: \"albers\",\n color: {\n legend: true,\n label: \"First year opened\",\n scheme: \"blues\",\n domain: d3.extent(walmarts, (d) => d.date)\n },\n marks: [\n Plot.density(w, {\n x: \"longitude\",\n y: \"latitude\",\n bandwidth: 12,\n fill: \"density\"\n }),\n Plot.dot(w, {\n x: \"longitude\",\n y: \"latitude\",\n r: 1,\n fill: \"date\"\n }),\n Plot.geo(statemesh, { strokeOpacity: 0.3 }),\n Plot.geo(nation)\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"{\n const { walmarts } = Data,\n d = new Date();\n\n d.setFullYear(selectYear + 1);\n\n return Plot.plot({\n color: {\n legend: true,\n label: \"First year opened\",\n scheme: \"blues\"\n },\n y: {\n grid: true\n },\n x: {\n // type: \"time\"\n },\n marks: [\n Plot.rectY(\n walmarts,\n Plot.binX({ y: \"count\" }, { x: (d) => d.date, fill: \"date\" })\n ),\n Plot.ruleX([d.getTime()])\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"---\n## Overall distribution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":363,"value":"### Contour","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"{\n const { statemesh, nation } = Geography,\n { walmarts } = Data;\n\n return Plot.plot({\n projection: \"albers\",\n r: {\n range: [0, 10]\n },\n color: {\n legend: true,\n label: \"First year opened\",\n scheme: \"prgn\" //\"spectral\"\n },\n marks: [\n Plot.geo(statemesh, { strokeOpacity: 0.25 }),\n Plot.geo(nation),\n Plot.dot(walmarts, {\n x: \"longitude\",\n y: \"latitude\",\n r: 1,\n fill: \"date\"\n }),\n Plot.density(walmarts, {\n x: \"longitude\",\n y: \"latitude\",\n stroke: \"date\"\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"### Hexgrids","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"{\n const { statemesh, nation } = Geography,\n { walmarts } = Data;\n\n return Plot.plot({\n projection: \"albers\",\n r: {\n range: [0, 10]\n },\n color: {\n legend: true,\n label: \"First year opened\",\n scheme: \"prgn\"\n },\n marks: [\n Plot.geo(statemesh, { strokeOpacity: 0.25 }),\n Plot.geo(nation),\n Plot.dot(\n walmarts,\n Plot.hexbin(\n { r: \"count\", fill: \"min\" },\n { x: \"longitude\", y: \"latitude\", fill: \"date\" }\n )\n )\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Data = {\n const walmarts = await FileAttachment(\"walmarts.tsv\").tsv({ typed: true }),\n elections = await FileAttachment(\"us-presidential-election-2020.csv\").csv();\n return { walmarts, elections };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"{\n const { nation, states, countries, statemesh, countrymesh } = Geography;\n\n return Plot.plot({\n projection: \"albers\",\n marks: [\n Plot.geo(nation),\n Plot.geo(statemesh, { strokeOpacity: 0.2 }),\n Plot.geo(countrymesh, { strokeOpacity: 0.2 })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Geography = {\n const us = await FileAttachment(\"us-counties-10m.json\").json();\n\n const nation = topojson.feature(us, us.objects.nation),\n states = topojson.feature(us, us.objects.states),\n counties = topojson.feature(us, us.objects.counties),\n statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b),\n countrymesh = topojson.mesh(us, us.objects.counties, (a, b) => a !== b);\n\n return { us, nation, states, counties, statemesh, countrymesh };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"snipaste_20230417_213618 = FileAttachment(\"Snipaste_2023-04-17_21-36-18.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"snipaste_20230417_213628 = FileAttachment(\"Snipaste_2023-04-17_21-36-28.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"snipaste_20230417_213635 = FileAttachment(\"Snipaste_2023-04-17_21-36-35.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"snipaste_20230417_213645 = FileAttachment(\"Snipaste_2023-04-17_21-36-45.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"