-
Notifications
You must be signed in to change notification settings - Fork 0
/
component---src-pages-scatter-tsx-c38d602ff236224a0e43.js.map
1 lines (1 loc) · 44.5 KB
/
component---src-pages-scatter-tsx-c38d602ff236224a0e43.js.map
1
{"version":3,"sources":["webpack://my-gatsby-site/./src/components/scatter/scatterPlot.tsx","webpack://my-gatsby-site/./src/components/scatter/scatterView.tsx","webpack://my-gatsby-site/./src/components/scatter/examples/explanationExample.tsx","webpack://my-gatsby-site/./src/components/scatter/examples/weekStartExample.tsx","webpack://my-gatsby-site/./src/components/scatter/examples/flatRegionsExample.tsx","webpack://my-gatsby-site/./src/components/scatter/examples/multipleSamePointExample.tsx","webpack://my-gatsby-site/./src/components/scatter/stateSelection.tsx","webpack://my-gatsby-site/./src/components/scatter/dropdown.tsx","webpack://my-gatsby-site/./src/pages/scatter.tsx"],"names":["Container","styled","Title","MapContainer","getStateFips","fips","Number","String","slice","ScatterPlot","data","title","selectedState","labels","arrows","lines","margin","height","size","d3Container","useRef","useEffect","svg","d3","current","map_g","attr","append","xAxis","domain","range","call","yAxis","width","text","dataToPlot","Object","values","map","d","count","hot","cold","x","recent","y","reduce","result","key","push","getData","line","selectAll","sequential","enter","undefined","forEach","label","arrow","coldScale","hotScale","style","find","f","sel","arr","countiesInState","countiesInPoint","filter","_","i","avg","length","a","b","ref","ScatterView","useContext","LisaContext","mapData","mapTitles","ExplanationExample","includes","WeekStartExample","Math","floor","MultipleSamePointExample","StateSelection","highlightedState","stateSelector","translate","addState","projection","scale","map_path","topojson","countiesMap","features","id","properties","name","on","this","getAttribute","ButtonContainer","Button","Text","DropDown","statevals","statesMap","sort","localeCompare","htmlFor","onChange","value","currentTarget","selectedOptions","target","onClick","Descriptions","DescriptionContainer","SelectionContainer","ExampleContainer","ExampleContainerReverse","TextContainer","Divider","PathList","PathSegment","Red","Blue","Scatter","useState","setSelectedState","Array","mapZoom","setMapZoom","currId","setCurrId","reset","selectedPage","to","m"],"mappings":"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","file":"component---src-pages-scatter-tsx-c38d602ff236224a0e43.js","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport styled from \"styled-components\";\n\nimport * as d3 from \"d3\";\n\nimport Sparse from \"../../utility/sparse\";\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n\n margin: 10px;\n`;\n\nconst Title = styled.h3`\n margin: 0;\n`;\n\nconst MapContainer = styled.svg`\n height: 330px;\n`;\n\nconst getData = (data) =>\n Object.values(\n data\n .map((d) => {\n const [hot, cold] = d.count();\n return {\n x: hot > cold ? d.recent()[0] : d.recent()[1],\n y: hot > cold ? hot : cold,\n hot: hot > cold,\n fips: d.fips,\n };\n })\n .reduce((result, { x, y, fips, hot }) => {\n const key = `${x},${y}`;\n\n if (key in result) {\n result[key].fips.push(fips);\n result[key].hot.push(hot);\n } else {\n result[key] = {\n x,\n y,\n fips: [fips],\n hot: [hot],\n };\n }\n return result;\n }, {})\n );\n\nconst getStateFips = (fips: number): number => {\n return Number(String(fips).slice(0, -3));\n};\n\ntype Props = {\n title: string;\n selectedState: [number, string];\n data: Array<Sparse>;\n labels?: Array<any>;\n arrows?: Array<any>;\n lines?: Array<any>;\n};\n\nconst average = (arr: Array<number>) => {\n return arr.reduce((a, b) => a + b) / arr.length;\n};\n\nconst subset = (vals: Array<number>, sel: Array<boolean>) => {\n return vals.filter((_, i) => sel[i]);\n};\n\nexport default function ScatterPlot({\n data,\n title,\n selectedState,\n labels,\n arrows,\n lines\n}: Props) {\n const size = 380;\n const scale = 1;\n const margin = [50, 50];\n\n const height = size - 2 * 50;\n const width = size - 2 * 50;\n\n const d3Container = useRef(null);\n\n useEffect(() => {\n const svg = d3.select(d3Container.current);\n\n const map_g = svg\n .attr(\"width\", size - 40)\n .attr(\"height\", size - 40)\n .append(\"g\")\n .attr(\"scale\", 10)\n .attr(\"transform\", `translate(${margin[0]}, ${margin[1] - 40})`);\n\n const xAxis = d3.scaleLinear().domain([0, 52]).range([0, width]);\n\n map_g\n .append(\"g\")\n .attr(\"transform\", `translate(0,${height})`)\n .call(d3.axisBottom(xAxis));\n\n const yAxis = d3.scaleLinear().domain([0, 52]).range([height, 0]);\n\n map_g.append(\"g\").call(d3.axisLeft(yAxis));\n\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", width / 2 + 100)\n .attr(\"y\", height + 85 - 40)\n .text(\"Week Number\");\n\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", -10 - height / 2)\n .attr(\"y\", 10)\n .attr(\"dy\", \"0.75em\")\n .attr(\"transform\", \"rotate(-90)\")\n .text(\"Count\");\n\n const dataToPlot = getData(data);\n\n // console.log(\n // dataToPlot.filter(({x , y}) => x === 52 && y === 20)\n // )\n\n const line = d3\n .line()\n .x(({ x }) => xAxis(x))\n .y(({ y }) => yAxis(y));\n\n // lines\n // does all calculations at once then turns on later\n map_g\n .selectAll(\"myLines\")\n .data(\n data.map((d) => {\n const [hot, cold] = d.count();\n return {\n data: hot > cold ? d.sequential(1) : d.sequential(2),\n hot: hot > cold,\n fips: d.fips,\n };\n })\n )\n .enter()\n .append(\"path\")\n .attr(\"class\", \"seq\")\n .attr(\"stroke\", \"none\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-opacity\", 0.15)\n .attr(\"d\", (d) => line(d.data));\n\n map_g\n .selectAll(\"dot\")\n .data(dataToPlot)\n .enter()\n .append(\"circle\")\n .attr(\"class\", \"point\")\n .attr(\"cx\", ({ x }) => xAxis(x))\n .attr(\"cy\", ({ y }) => yAxis(y))\n .attr(\"r\", 2);\n\n if (labels !== undefined) {\n labels.forEach(label => label(svg))\n }\n if (arrows !== undefined) {\n arrows.forEach(arrow => arrow(svg))\n }\n if (lines !== undefined) {\n map_g\n .selectAll(\"divLines\")\n .data(lines)\n .enter()\n .append(\"path\")\n // .style(\"stroke-dasharray\", \"3, 3\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-opacity\", 1)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-dasharray\", \"1,1\")\n .attr(\"d\", d => {\n return line(d);\n })\n }\n }, []);\n\n useEffect(() => {\n const coldScale = d3.interpolateBlues;\n const hotScale = d3.interpolateReds;\n\n d3.select(d3Container.current)\n .selectAll(\".point\")\n .style(\"fill-opacity\", ({ fips }) => {\n return selectedState[0] < 0 ||\n fips.find((f) => getStateFips(f) === selectedState[0]) !== undefined\n ? 1\n : 0.1;\n })\n .style(\"fill\", ({ hot, fips }) => {\n const countiesInState = fips.map(\n (f) => selectedState[0] === -1 || getStateFips(f) === selectedState[0]\n );\n const countiesInPoint = subset(hot, countiesInState);\n const avg = average(countiesInPoint.length ? countiesInPoint : hot);\n return avg > 0.5 ? hotScale(avg) : coldScale(1 - avg); // make sure 1 - avg never is 0\n });\n\n d3.select(d3Container.current)\n .selectAll(\".seq\")\n .style(\"stroke\", ({ fips, hot }) => {\n return selectedState[0] === -2 || getStateFips(fips) === selectedState[0]\n ? hot\n ? \"#FF0000\"\n : \"#0000FF\"\n : \"none\";\n });\n }, [selectedState]);\n\n return (\n <Container>\n <Title>{title}</Title>\n <MapContainer ref={d3Container} />\n </Container>\n );\n}\n","import React, { useContext } from \"react\";\nimport styled from \"styled-components\";\n\nimport Sparse from \"../../utility/sparse\";\nimport ScatterPlot from \"./scatterPlot\";\nimport { LisaContext } from \"../../contexts/lisaContext\"\n\ntype Props = {\n selectedState: [number, string];\n};\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-around;\n\n @media (max-width: 800px) {\n justify-content: center;\n }\n`;\n\nexport default function ScatterView({\n selectedState\n}: Props) {\n const { mapData, mapTitles } = useContext(LisaContext)\n return (\n <Container>\n {mapTitles.map((title, i) => {\n return (\n <ScatterPlot\n key={i}\n title={title}\n selectedState={selectedState}\n data={mapData ? mapData[i] : null}\n />\n );\n })}\n </Container>\n );\n}\n","import React, { useContext } from \"react\";\nimport ScatterPlot from \"../scatterPlot\";\nimport { LisaContext } from \"../../../contexts/lisaContext\";\n\nimport * as d3 from \"d3\";\n\nexport default function ExplanationExample() {\n // Only want the fourth map\n const {\n mapData: [map, _, __, ___],\n mapTitles: [title, _1, __1, ___1],\n } = useContext(LisaContext);\n\n // Get values only for California\n const data = map.find(({ fips }) => fips === 56029);\n\n const label1 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 90)\n .attr(\"y\", 270)\n .attr(\"dy\", \"0.75em\")\n .text(\"(1)\"); // week 10\n\n const label2 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 145)\n .attr(\"y\", 270)\n .attr(\"dy\", \"0.75em\")\n .text(\"(2)\"); // week 10\n\n const label3 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 220)\n .attr(\"y\", 270)\n .attr(\"dy\", \"0.75em\")\n .text(\"(3)\"); // week 10\n const label4 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 300)\n .attr(\"y\", 270)\n .attr(\"dy\", \"0.75em\")\n .text(\"(1)\"); // week 10\n const lines = data\n .sequential(2)\n .map(({ x, y }) => {\n return [\n { x, y: 0 },\n { x, y },\n ];\n })\n .filter(([{ x }, _]) => {\n return [0, 12, 23, 40, 52].includes(x);\n });\n return (\n <ScatterPlot\n title={title}\n data={[data]}\n selectedState={[56, \"Wyoming\"]}\n labels={[label1, label2, label3, label4]}\n lines={lines}\n />\n );\n}\n","import React, { useContext } from \"react\";\nimport ScatterPlot from \"../scatterPlot\";\nimport { LisaContext } from \"../../../contexts/lisaContext\";\n\nimport * as d3 from \"d3\";\n\nexport default function WeekStartExample() {\n // Only want the fourth map\n const {\n mapData: [_, __, ___, map],\n mapTitles: [_1, __1, ___1, title],\n } = useContext(LisaContext);\n\n // Get values only for California\n const data = map.filter(({ fips }) => Math.floor(fips / 1000) === 6);\n\n const label = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 105)\n .attr(\"y\", 100)\n .attr(\"dy\", \"0.75em\")\n .text(\"March 4, State\"); // week 10\n\n const label1 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 105)\n .attr(\"y\", 120)\n .attr(\"dy\", \"0.75em\")\n .text(\"of Emergency\"); // week 10\n\n const label2 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 105)\n .attr(\"y\", 140)\n .attr(\"dy\", \"0.75em\")\n .text(\"Declared\"); // week 10\n\n const label3 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 190)\n .attr(\"y\", 40)\n .attr(\"dy\", \"0.75em\")\n .text(\"March 19, Stay\"); // week 10\n\n const label4 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 190)\n .attr(\"y\", 60)\n .attr(\"dy\", \"0.75em\")\n .text(\"At Home Order\"); // week 10\n\n const arrow1 = (svg) =>\n svg\n .append(\"path\")\n .attr(\n \"d\",\n d3.line()([\n [105, 160],\n [105, 275],\n ])\n )\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"red\");\n const arrow2 = (svg) =>\n svg\n .append(\"path\")\n .attr(\n \"d\",\n d3.line()([\n [190, 80],\n [118, 275],\n ])\n )\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"red\");\n\n return (\n <ScatterPlot\n title={title}\n data={data}\n selectedState={[6, \"California\"]}\n labels={[label, label1, label2, label3, label4]}\n arrows={[arrow1, arrow2]}\n />\n );\n}\n","import React, { useContext } from \"react\";\nimport ScatterPlot from \"../scatterPlot\";\nimport { LisaContext } from \"../../../contexts/lisaContext\";\n\nimport * as d3 from \"d3\";\n\nexport default function WeekStartExample() {\n // Only want the fourth map\n const {\n mapData: [_, map, __, ___],\n mapTitles: [_1, title, __1, ___1],\n } = useContext(LisaContext);\n\n // Get values only for California\n const data = map.filter(({ fips }) => Math.floor(fips / 1000) === 42);\n\n const label1 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 115)\n .attr(\"y\", 180)\n .attr(\"dy\", \"0.75em\")\n .text(\"Social Distancing,\"); // week 12\n\n const label2 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 115)\n .attr(\"y\", 200)\n .attr(\"dy\", \"0.75em\")\n .text(\"Schools Close\"); // week 12\n\n const label3 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 160)\n .attr(\"y\", 80)\n .attr(\"dy\", \"0.75em\")\n .text(\"Counties enter\"); // week 19\n\n const label4 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 160)\n .attr(\"y\", 100)\n .attr(\"dy\", \"0.75em\")\n .text(\"Yellow Phase\"); // week 19\n\n const label5 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 280)\n .attr(\"y\", 30)\n .attr(\"dy\", \"0.75em\")\n .text(\"Stay-at-home\"); // week 46\n\n const label6 = (svg) =>\n svg\n .append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"x\", 280)\n .attr(\"y\", 50)\n .attr(\"dy\", \"0.75em\")\n .text(\"advisory\"); // week 46\n\n const arrow1 = (svg) =>\n svg\n .append(\"path\")\n .attr(\n \"d\",\n d3.line()([\n [115, 220],\n [115, 275],\n ])\n )\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"red\");\n\n const arrow2 = (svg) =>\n svg\n .append(\"path\")\n .attr(\n \"d\",\n d3.line()([\n [160, 120],\n [160, 260],\n ])\n )\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"red\");\n\n const arrow3 = (svg) =>\n svg\n .append(\"path\")\n .attr(\n \"d\",\n d3.line()([\n [280, 70],\n [300, 240],\n ])\n )\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"red\");\n return (\n <ScatterPlot\n title={title}\n data={data}\n selectedState={[42, \"Pennsylvania\"]}\n labels={[label1, label2, label3, label4, label5, label6]}\n arrows={[arrow1, arrow2, arrow3]}\n />\n );\n}\n","import React, { useContext } from \"react\";\nimport ScatterPlot from \"../scatterPlot\";\nimport { LisaContext } from \"../../../contexts/lisaContext\";\n\nexport default function MultipleSamePointExample() {\n // Only want the fourth map\n const {\n mapData: [_, __, map, ___],\n mapTitles: [_1, __1, title, ___1],\n } = useContext(LisaContext);\n\n // Get values only for California\n const data = map.filter(({ fips }) =>\n [6031, 13303, 25023, 34029, 36083, 48227, 48431].includes(fips)\n );\n\n return <ScatterPlot title={title} data={data} selectedState={[-2, \"\"]} />;\n}\n","import React, { useRef, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport * as d3 from \"d3\";\nimport * as topojson from \"topojson\";\nimport MapZoom from \"../../utility/mapZoom\";\n\nimport countiesMap from \"us-atlas/counties-10m.json\";\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n\n margin: 10px;\n`;\n\nconst MapContainer = styled.svg`\n g {\n background-color: light-gray;\n fill: red;\n }\n\n &:hover {\n cursor: pointer;\n }\n`;\n\ntype Props = {\n highlightedState: [number, string];\n stateSelector: ([a, b]: [number, string]) => void;\n addState: (m: MapZoom) => void;\n};\n\nexport default function StateSelection({\n highlightedState,\n stateSelector,\n addState,\n}: Props) {\n const width = 380 - 10;\n const height = 250;\n const translate: [number, number] = [width / 2, height / 2];\n const scale = 500;\n\n const d3Container = useRef(null);\n\n const projection = d3.geoAlbers().scale(scale).translate(translate);\n const map_path = d3.geoPath().projection(projection);\n\n useEffect(() => {\n const map_g = d3\n .select(d3Container.current)\n .attr(\"width\", width)\n .attr(\"height\", height)\n .append(\"g\");\n\n // addState(new MapZoom(map_path, map_g, width, height, highlightedState[0]));\n\n // States:\n map_g\n .append(\"g\")\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", \"0.5px\")\n .style(\"fill\", \"#ffffffff\")\n .selectAll(\"path\")\n .data(topojson.feature(countiesMap, countiesMap.objects.states).features)\n .enter()\n .append(\"path\")\n .attr(\"d\", map_path as any)\n .attr(\"stateFips\", ({ id }) => Number(id))\n .attr(\"stateName\", ({ properties: { name } }) => name)\n }, []);\n\n useEffect(() => {\n d3.select(d3Container.current)\n .selectAll(\"path\")\n .on(\"click\", function () {\n stateSelector([\n Number(this.getAttribute(\"stateFips\")),\n this.getAttribute(\"stateName\"),\n ]);\n })\n .style(\"fill\", function () {\n return Number(this.getAttribute(\"stateFips\")) === highlightedState[0]\n ? \"rgb(0,54,96)\"\n : \"#ffffffff\";\n });\n }, [highlightedState]);\n\n return (\n <Container>\n <MapContainer ref={d3Container} />\n </Container>\n );\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\n\nimport statesMap from \"us-atlas/states-10m.json\";\n\nconst Container = styled.div`\n width: 400px;\n @media (max-width: 400px) {\n width: 100%;\n }\n`;\n\nconst ButtonContainer = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-around;\n align-items: center;\n margin: 10px 0;\n`;\n\nconst Button = styled.button`\n border-radius: 10px;\n height: 30px;\n width: 60px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst Text = styled.p`\n margin: 5px 10px;\n`;\n\ntype Props = {\n selectedState: [number, string];\n stateSelector: ([a, b]: [number, string]) => void;\n};\n\nexport default function DropDown({ stateSelector, selectedState }: Props) {\n const statevals = [\n ...statesMap.objects.states.geometries.filter(\n ({ properties: { name } }) =>\n ![\n \"Alaska\",\n \"Hawaii\",\n \"Guam\",\n \"Puerto Rico\",\n \"American Samoa\",\n \"United States Virgin Islands\",\n \"Commonwealth of the Northern Mariana Islands\",\n \"District of Columbia\",\n ].includes(name)\n ),\n { id: -1, properties: { name: \"United States\" } },\n ].sort((a, b) => {\n if (a.id === -1) {\n return -1;\n } else if (b.id === -1) {\n return 1;\n }\n return a.properties.name.localeCompare(b.properties.name);\n });\n return (\n <Container>\n <Text>\n Select a state from the drop down or by clicking on the map.\n </Text>\n <ButtonContainer>\n <div>\n {\" \"}\n <label htmlFor=\"states\">Choose a State:</label>\n {\"\"}\n <select\n id=\"states\"\n onChange={({\n currentTarget: { value },\n target: { selectedOptions },\n }) => {\n stateSelector([Number(value), selectedOptions[0].text]);\n }}\n value={selectedState[0]}\n >\n {statevals.map(({ id, properties: { name } }) => {\n return (\n <option value={Number(id)} key={id}>\n {name}\n </option>\n );\n })}\n </select>\n </div>\n <Button onClick={() => stateSelector([-1, \"\"])}>Reset</Button>\n </ButtonContainer>\n <Text>\n Selecting a state will highlight that states' counties in the scatter\n plot above and show the cumulative path for each county over the year.\n </Text>\n </Container>\n );\n}\n","import React, { useState } from \"react\";\nimport styled from \"styled-components\";\n\nimport ScatterView from \"../components/scatter/scatterView\";\nimport Page from \"../components/page\";\n\nimport MapZoom from \"../utility/mapZoom\";\n\nimport ExplanationExample from \"../components/scatter/examples/explanationExample\";\nimport WeekStartExample from \"../components/scatter/examples/weekStartExample\";\nimport FlatRegionsExample from \"../components/scatter/examples/flatRegionsExample\";\nimport MultipleSamePointExample from \"../components/scatter/examples/multipleSamePointExample\";\n\nimport StateSelection from \"../components/scatter/stateSelection\";\nimport DropDown from \"../components/scatter/dropdown\";\nimport { Link } from \"gatsby\";\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: column;\n`;\n\nconst Descriptions = styled.div`\n margin: 0 10px;\n`;\n\nconst DescriptionContainer = styled.div`\n margin: 10px 0 30px 0;\n`;\n\nconst SelectionContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n justify-content: space-around;\n\n @media (max-width: 800px) {\n justify-content: center;\n }\n`;\n\nconst ExampleContainer = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n\n @media (max-width: 630px) {\n flex-wrap: wrap-reverse;\n }\n\n * > {\n width: 50%;\n }\n`;\n\nconst ExampleContainerReverse = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n @media (max-width: 630px) {\n flex-wrap: wrap;\n }\n\n * > {\n width: 50%;\n }\n`;\n\nconst TextContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: start;\n width: 100%;\n\n & > h1 {\n margin: 10px 5px 0 5px;\n }\n\n & > h2 {\n margin: 5px 5px 0 5px;\n }\n`;\n\nconst Text = styled.p`\n margin: 5px;\n`;\n\nconst Divider = styled.hr`\n width: 98%;\n height: 1px;\n background-color: black;\n border-radius: 1px;\n margin: 5px 10px;\n`;\n\nconst PathList = styled.ol`\n counter-reset: list;\n list-style-position: outside;\n margin: 10px;\n`;\n\nconst PathSegment = styled.li`\n list-style: none;\n position: relative;\n margin: 0 0 5px 0;\n &:before {\n left: -30px;\n position: absolute;\n content: \"(\" counter(list) \")\";\n counter-increment: list;\n }\n`;\n\nconst Red = styled.i`\n color: #ff0000;\n`;\n\nconst Blue = styled.i`\n color: #0000ff;\n`;\n\nexport default function Scatter() {\n const [selectedState, setSelectedState] = useState<[number, string]>([\n -1,\n \"\",\n ]);\n\n const [mapZoom, setMapZoom] = useState(Array<MapZoom>(1));\n\n const [currId, setCurrId] = useState(-1);\n\n const addState = (m: MapZoom) => {\n mapZoom[0] = m;\n setMapZoom(mapZoom);\n };\n const stateSelector = (\n [id, name]: [number, string],\n reset: boolean = false\n ) => {\n // const m = mapZoom[0];\n\n // if (!reset && id !== m.currId && id !== -1) {\n if (!reset && id !== currId && id !== -1) {\n // m.select(id);\n setSelectedState([id, name]);\n setCurrId(id);\n return true;\n } else {\n // m.reset();\n setSelectedState([-1, \"\"]);\n setCurrId(-1);\n return false;\n }\n };\n\n return (\n <Page selectedPage=\"Scatter\">\n <Container>\n <Descriptions>\n <TextContainer>\n <h1>County Paths</h1>\n <Text>\n This page provides an alternative view to the\n <Link to=\"/interactive\">Interactive Maps</Link> page. Each week a\n county can be a hotspot, coldspot, or not a significant value.\n Over the year of 2020, the total number of weeks a county was a\n hotspot or coldspot and the last week the county was a significant\n value were calculated and are shown in the scatter plots below. In\n these scatter plots, each point represents a county with{\" \"}\n <Blue>blue</Blue> points representing coldspots and <Red>red</Red>{\" \"}\n points representing hotspots.\n </Text>\n </TextContainer>\n </Descriptions>\n <Divider />\n <ScatterView selectedState={selectedState} />\n <Divider />\n <SelectionContainer>\n <DropDown\n stateSelector={stateSelector}\n selectedState={selectedState}\n />\n <StateSelection\n highlightedState={selectedState}\n stateSelector={stateSelector}\n addState={addState}\n />\n </SelectionContainer>\n <Divider />\n <Descriptions>\n <DescriptionContainer>\n <TextContainer>\n <h2>Paths</h2>\n </TextContainer>\n <ExampleContainer>\n <TextContainer>\n <Text>\n When selecting a state, the scatter plots above will highlight\n that state's counties and show each counties' cumulative path.{\" \"}\n <b>\n These paths show, at each week, the total number of times a\n county was a hotspot or coldspot up to that week\n </b>\n . <Red>Red</Red> lines indicate the county was a hot pot while{\" \"}\n <Blue>blue</Blue> lines indicate that the county was a\n coldspot. These paths end in a point that shows the total\n number of times a county was a hotspot or coldspot, on the\n last week it was a hotspot or coldspot. This final value is\n shown in the national view of the scatter plots above and in\n the <Link to=\"/interactive\">interactive maps</Link>.\n </Text>\n <Text>\n The accompanying figure shows the path for Park County,\n Wyoming (the county that contains the majority of Yellowstone\n National Park). This path is colored blue, indicating that\n whenever the county was a significant value, it was a cold\n spot. This path can be broken into three types of regions:\n </Text>\n <PathList>\n <PathSegment>\n In these segments the line has a slope of 1. This means that\n for each week in the segment, the county was a coldspot.\n </PathSegment>\n <PathSegment>\n Between week 13 and 22, Park County was neither a hot spot\n nor cold spot. Flat line segments such as the one in this\n region indicate a period of not being significant.\n </PathSegment>\n <PathSegment>\n This segment shows a general upwards trend. Although there\n are a few flat regions, Park County was mostly a cold spot\n in this region.\n </PathSegment>\n </PathList>\n </TextContainer>\n <ExplanationExample />\n </ExampleContainer>\n </DescriptionContainer>\n <DescriptionContainer>\n <TextContainer>\n <h2>Point Color</h2>\n </TextContainer>\n <ExampleContainerReverse>\n <MultipleSamePointExample />\n <TextContainer>\n <Text>\n Each point on the scatter plot represents a county. However,\n multiple counties can be located at the same end value. In\n these cases, the point color is based off of the proportion of\n counties that were hotspots or cold pots. <Red>Red</Red>{\" \"}\n points signify a majority of hotspots while <Blue>blue</Blue>{\" \"}\n points signify a majority of coldspots. Darker values indicate\n a higher proportion of counties being hotspots or coldspots.\n </Text>\n <Text>\n In the accompanying figure, we can see all of the counties in\n the entire United States that have their 20th significant\n value on the last week of the year. There are 7 of these\n counties with 3 being hotspots and 4 being coldspots as\n indicated by the color of the paths (note that two of the hot\n spots overlap the entire time). Since the majority of the\n counties are coldspots, the point color is a light blue. This\n is the same point that is shown on the national level view on\n the interactive scatter plots above.\n </Text>\n </TextContainer>\n </ExampleContainerReverse>\n </DescriptionContainer>\n <DescriptionContainer>\n <TextContainer>\n <h2>Patterns Starting in March</h2>\n </TextContainer>\n <ExampleContainer>\n <TextContainer>\n <Text>\n The accompanying plot shows the counties in <b>California</b>{\" \"}\n for Safegraph's % sheltered. We can see at once that all of\n the lines are <Red>red</Red> which indicates that these\n counties were hot spots. This means that compared to counties\n in the nation, these counties had a higher percentage of\n people sheltered at home.\n </Text>\n <Text>\n An interesting pattern occurs on week 10 and the immediately\n following weeks that corresponds to the Governor declaring a\n State of Emergency on March 4th and a stay at home order on\n March 19. In this time period, multiple counties become hot\n spots and remain being hot spots each week until the end of\n 2020, as shown by these lines having a slope of 1. We can see\n that multiple counties follow this pattern by the lines being\n colored a brighter red.\n </Text>\n </TextContainer>\n <WeekStartExample />\n </ExampleContainer>\n </DescriptionContainer>\n <DescriptionContainer>\n <TextContainer>\n <h2>Paths With Flat Regions</h2>\n </TextContainer>\n <ExampleContainerReverse>\n <FlatRegionsExample />\n <TextContainer>\n <Text>\n The accompanying plot shows counties in <b>Pennsylvania</b>{\" \"}\n for Cuebiq's % sheltered. All of the lines shown are{\" \"}\n <Red>red</Red> which indicates that all of these counties were\n hot spots. This means that compared to counties in the nation,\n these counties had higher percentages of people sheltering in\n their home.\n </Text>\n <Text>\n Similar to California, starting on week 12, the Governor\n implemented social distancing measures and ordered schools to\n close. This corresponds to counties becoming hot spots and\n staying as hot spots for multiple weeks, meaning that compared\n to counties in the nation, these counties had a higher\n percentage of people sheltered in their homes.\n </Text>\n <Text>\n Then starting on week 19, many counties in the state's Red\n tier moved up to the Yellow tier, allowing certain business to\n reopen. This corresponds to flat regions of the counties' path\n where, compared to counties in the nation, the counties no\n longer have a high percentage of people sheltered in their\n homes.\n </Text>\n <Text>\n Towards the end of 2020, cases in Pennsylvania began to rise\n again. On November 23, the Health Secretary announced a stay\n at home advisory and in December the Governor tested positive\n for COVID-19. This corresponds to certain counties becoming\n hot spots again.\n </Text>\n </TextContainer>\n </ExampleContainerReverse>\n </DescriptionContainer>\n </Descriptions>\n </Container>\n </Page>\n );\n}\n"],"sourceRoot":""}