25:["$","title",null,{"children":"Visualization of the impact of COVID-19 coupled with census demographics (for review) | Satvik Chekuri | Observable"}] 49:T4ea,mutable legend_bar = html`

${legend({color, tickFormat: "+k", width: 280,title: encoding.d })}

${d3.select(DOM.svg(210, 70)) .attr('class', 'legend-circle') .append('g') .call(legendCircle() .tickValues(d3.extent(data.filter(function(d, i) { return d.top_category === encoding.p;}), d => d[encoding.s])) .tickSize(20) .tickFormat((d, i, e) => i === e.length - 1 ? d + " Count" : d) .scale(aScale)).node().parentNode }

2020

2019

`; 4a:T1d79,{ let rendered = false; // Create SVG let svg = d3.select(DOM.svg(width, height)); const chart = svg.append('g') .attr('transform', `translate(${28}, ${0})`); const axes = chart.append('g').attr('class', 'axes'); var polygons; // Initlializing before so that it can be used inside mouse over of circle const infoBox1 = html`

`; let lastXFormat = '.0%'; let lastYFormat = '.0%'; let xAxis = axes.append('g').call(x_axis(lastXFormat)); let yAxis = axes.append('g').call(y_axis(lastYFormat)); const xLabel = chart.append('text') .attr('class', 'direction-label direction-label-x') .attr('x', chart_width / 2 ) .attr('y', chart_height + 20) .attr('text-anchor', 'middle') .attr('font-size', 14) .text(xy_options.find(d => d.value === encoding.x).label); const yLabel = chart.append('text') .attr('class', 'direction-label direction-label-y') .attr('x', -(chart_height/2)) .attr('y', 40) .attr('dy', '-2em') .attr('transform', 'rotate(270)') .attr('text-anchor', 'middle') .attr('font-size', 14) .text(xy_options.find(d => d.value === encoding.y).label); var lines; var cells = chart.append('g') .attr('class', 'cells') .selectAll('circle') .data(data.filter(function(d, i) { return d.top_category === encoding.p;})).join('circle') .attr('cx', (d, i) => x(d[encoding.x])) .attr('cy', (d, i) => y(d[encoding.y])) .attr('r', (d, i) => aScale(d[encoding.s])) .style('fill', (d,i) => yearColorScale(d.year)) .style('opacity', 0.7) .style("stroke",'currentColor') .style("stroke-opacity",0.3) .style('stroke-width',2) .on("mouseover",function(d) { tooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px") .style("visibility", "visible") .text(d.brands) .style("font-size", "12px"); infoBox1.innerHTML = `

`; set_infobox(d); d3.select(".infobox").style("display", "block"); cells .filter(function(circle_d, i) { return circle_d.safegraph_place_id === d.safegraph_place_id; }) .style('stroke','black') .style('stroke-width',2) .style('stroke-opacity', 1) polygons .filter(function(polygon_d, i) { return parseInt(polygon_d.properties.CensusBlockGroup) === d.poi_cbg2; }) .style('stroke','black') .style('stroke-width',2) lines .filter(function(line_d, i) { return line_d.safegraph_place_id === d.safegraph_place_id; }) .style('stroke','#666') }) .on("mouseout",function(d){ d3.select(".infobox").style("display", "none"); tooltip.style("visibility", "hidden"); cells .filter(function(circle_d, i) { return circle_d.safegraph_place_id === d.safegraph_place_id; }) .style('stroke','currentColor') .style('stroke-width',2) .style('stroke-opacity', 0.3) polygons .filter(function(polygon_d, i) { return parseInt(polygon_d.properties.CensusBlockGroup) === d.poi_cbg2; }) .style('stroke','none') lines .filter(function(line_d, i) { return line_d.safegraph_place_id === d.safegraph_place_id; }) .style('stroke','#ccc') }) lines = chart.append('g') .attr('class', 'cells') .selectAll('line') .data(data.filter(function(d, i) { return d.top_category === encoding.p;})).join('line') .style("stroke", "#ccc") .style("stroke-width", 1) .style("z-index",-999) .attr("x1", d => Number(cells.filter(function(circle_d, i){ if(circle_d.safegraph_place_id === d.safegraph_place_id){ if(circle_d.year != d.year){ return circle_d.safegraph_place_id === d.safegraph_place_id &(circle_d.year != d.year); } else{ return circle_d.safegraph_place_id === d.safegraph_place_id &(circle_d.year === d.year); } } }).attr('cx'))) .attr("y1", d => Number(cells.filter(function(circle_d, i){ if(circle_d.safegraph_place_id === d.safegraph_place_id){ if(circle_d.year != d.year){ return circle_d.safegraph_place_id === d.safegraph_place_id &(circle_d.year != d.year); } else{ return circle_d.safegraph_place_id === d.safegraph_place_id &(circle_d.year === d.year); } } }).attr('cy'))) .attr("x2", d => Number(cells.filter(function(circle_d, i){ return circle_d.safegraph_place_id === d.safegraph_place_id & circle_d.year === d.year; }).attr('cx'))) .attr("y2", d => Number(cells.filter(function(circle_d, i){ return circle_d.safegraph_place_id === d.safegraph_place_id & circle_d.year === d.year; }).attr('cy'))); ///////////////// GeoMap ///////////////// let map = svg.append( "g" ) .attr('transform', `translate(${0}, ${-80})`); const tracts = map .selectAll('g') .data(dc_geo.features) .join('g') .attr('class', 'tract'); polygons = tracts .append('path') .attr('class', 'polygon') .attr('fill', (d,i)=>color(d.properties[encoding.d])) .attr('d', dc_geoPath) .attr('stroke', '#fff') .attr('stroke-width', '0.05vw') .attr('stroke-linejoin', 'round') .attr('paint-order', 'normal') .on("mouseover",function(d) { polygons.filter(function(polygon_d, i) { return parseInt(polygon_d.properties.CensusBlockGroup) === parseInt(d.properties.CensusBlockGroup); }) .style('stroke','black') .style('stroke-width',2) tooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px") .style("visibility", "visible") .text(d.properties.CensusBlockGroup) .style("font-size", "12px"); infoBox1.innerHTML = `

`; set_infoboxpoly(d); d3.select(".infobox").style("display", "block"); cells .filter(function(circle_d, i) { return circle_d.poi_cbg2 === parseInt(d.properties.CensusBlockGroup); }) .style('stroke','black') .style('stroke-width',2) .style('stroke-opacity', 1) lines .filter(function(line_d, i) { return line_d.poi_cbg2 === parseInt(d.properties.CensusBlockGroup); }) .style('stroke','#666') }) .on("mouseout",function(d){ d3.select(".infobox").style("display", "none"); tooltip.style("visibility", "hidden"); polygons.filter(function(polygon_d, i) { return parseInt(polygon_d.properties.CensusBlockGroup) === parseInt(d.properties.CensusBlockGroup); }) .style('stroke', 'none') cells .filter(function(circle_d, i) { return circle_d.poi_cbg2 === parseInt(d.properties.CensusBlockGroup); }) .style('stroke','currentColor') .style('stroke-width',2) .style('stroke-opacity', 0.3) lines .filter(function(line_d, i) { return line_d.poi_cbg2 === parseInt(d.properties.CensusBlockGroup); }) .style('stroke','#ccc') }) //////// Update is not working yet!!! /////// return html`

${[svg.node(), infoBox1]}

` }4b:Tb90,md` ## Design Description **Summary:** We have used “Multiple Views” for visualizing our tabular and spatial data. The choropleth shows the city map (of Washington DC) divided into block groups. The choropleth map encodes demographic information of the city. While the scatter plot shows the different Points of Interest (POI). The scatter plot aims to encode and compare different mobility attributes before and after COVID-19. We also display an info box to show selected POI’s attributes in detail. **Channels** Magnitude Channels: Ordered Attributes: 1. Area of the circles in scatter plot (encoding selected mobility attribute) 2. Choropleth map color (representing median income level or population of residents from different block groups) 3. Scatter plot X-axis as position on common scale (encoding selected mobility attribute) 4. Scatter plot Y-axis as position on common scale (encoding selected mobility attribute) Identity Channels: Categorical Attributes: 1. Spatial region (city geojson representing block group) 2. Circle color (representing year 2019 or 2020) **Marks** 1. Lines (connecting connecting a pair of POIs for year 2019 and 2020) 2. Circles (representing POIs) ## Forms of Interaction 1. We have a bunch of dropdown selection for building the scatter plot, which includes selecting the X and Y attributes, the POI category and the attribute to represent the size of the circle. 2. We have a dropdown selection for selecting the demographic attribute. 3. We use linking techniques to connect the Choropleth map to Scatter plot. On mouse hover over any circle within the scatter plot, the respective POI pair as well as the CBG it belongs to get’s highlighted in the Choropleth map. 4. Similarly, on mouse hover over any CBG is the map, the respective set of POI circles gets highlighted within the Scatter plot. 5. The lines joining the POI circle pair gets highlighted too on mouse hover events. ## Justification of Interaction 1. Through our visualization design, we have given the users the flexibility to choose which attributes they want to visualize by selecting the channels for both scatter plot as well as the choropleth map. 2. The mouseover events links the two views (Scatter plot and Choropleth map). Thus, providing visual feedback as to which spatial region a given POI belongs to and what is the demographic information for that region. 3. The linking also aids in identifying a set of POIs for a given region. 4. The info box which gets dispayed on mouseover events, provides further detail for each specific POI or CBG. 5. We also made the POI categories as a input selection because the user would only be interested in analyzing one kind of POI at once (example restaurants or grovery stores etc.). Also, a common X,Y scale for all different types of POIs doesn't make sense. For instance, time spent in restaurants is different from time spent in grocery stores or hospitals. `4c:T22f7,md` ## Task Abstraction: What is the relationship between the monthly patterns of a Point of Interest (POI) to that of the demographics in a Census Block Group (CBG) the POI belongs to? _We could answer this primary question of relationship between POIs and demographics in CBGs through this visualization, where we could see for example how POIs visit count can be depandant on the Population or Median Income of a CBG. Further deep dive into each sub task is below. _ * What is the relationship between income, population in a census block group (CBG) and the time spent in a Place of Interest (POI) belonging to the same CBG, before & during the pandemic? _Overall, we could observe population of CBGs playing role in the visits to the POIs but median income had no significant effect on the visit count to POIs. During pandemic, we could see specific category grocessory shopping visits have increased irrespective of CBGs when compared to before pandemic. Having scatter plot of POIs linked with the CBGs demographic through choropleth have really helped in answering. _ * Does the time spent in a POI between 2020 (during pandemic) and 2019 (before pandemic), show any difference trend-wise? _Yes, we could see a general difference between the time spent at a POI in 2020 and 2019. The trend we see is that there is a Increase in time spent compared to before pandemic. Grocesory stores have seen a increase in time spent. Restaurents have seen a drop in time spent (Ex. Subway). We could see few outliers where there is an increase in time spent in Restaurents such as sweetgreen which for example had more visits also. This task can be answered through the scatter plot implemented. _ * How is the median household income compared between each of the Census Block Groups?. _ This task can be answered primarily through the map visualization called choropleth. We have the color lengend for median income where it further helps in comparing between each CBG. The darker the color the higher the median income and the lighter it is, the lower the median income. _ * Which CBG’s have higher/lower median incomes?. _ The CBGs 110010013012, 110010006002, 110010006002, and 110010006004 have the highest median income of $250,001 and the CBG 110010010021 had the lowest median income of $11,477. _ * Is there a correlation between median household income and time spent in a POI?. Does it get affected by the ongoing pandemic? _ No, as we can compare the POIs from scatter plot and the CBGs Median Income through choropleth, we found that the time spent in POIs is diverse and could not generalise the behaviour to the CBGs Median Income attribute for most of categories. For grocery stores, the time spent has increased irrespective of the CBGs Median Income attribute due to ongoing pandemic. _ * Are the CBG’s with less household incomes have more time spent in a POI compared with high household income CBG’s, and is the comparison different to before COVID-19? _No. Again this task can be answered through scatter plot and the choropleth. The Median Income of a CBG hadn't shown a significant effect on time spent in POIs from the data points we have._ * Which CBG’s have the highest/lowest population? _ The CBG 110010062021 has the lowest population of 65. The CBG 110010073011 has the highest population with 4680. This task can be easily answered through the color cmparision of each CBGs. _ * Is there a correlation between the population of a CBG and time spent in a POI? _ Yes, there is a bit of relation. With denser CBGs, the time spent at POIs is more compared to POIs which had less population._ * Are the CBG’s with population on a higher end, have more time spent in a POI compared with less populated CBG’s, and is the comparison different to before COVID-19? _Yes, the CBGs with higher population saw the time spent in it's POI also more. This was the trend before the pandemic and after it also. _ * What is the relationship between income, population in a census block group (CBG) and the median distance travelled to the Place of Interest (POI), before & during COVID19? _ Overall, both median income and population didn't play any role in median distance travelled to POIs even after pandemic hit. But one considerable difference is that of Gas Station category which saw an increase of distance travelled after pandemic hit. Having scatter plot of POIs linked with the CBGs demographic through choropleth have really helped in answering. _ * Can we compare the median distance travelled by visitors to the POI between 2019 and 2020. _ Yes, we could compare using the scatter plot of POIs. Also, the line connection between each POI pair of 2019 and 2020 would easily help us in comparing the median distance travelled to POI for 2019 Vs. 2020. We could see the trend that the median distance travelled has not seen any significant change during pandemic apart from few outliers such as Subway POI. _ * Is there a correlation between median household income of a CBG in which the POI is present and median distance travelled?. Does it show differences in trends when compared to before & after COVID-19? _ No, there is no correlation between median household income of a CBG with that of median distance travelled to POI. Even after pandemic hit, we didn't find a significant change in median distance travelled. We could see outlier such as 7-eleven franchise two stores in tewo different CBGs, where one store median distance increased during pandemic and the other's decreased. Apart from them, the general behaviour shows no significant changes._ * Is there a correlation between the population of a CBG in which the POI is present and median distance travelled?. Does it show any differences in trends when compared to before & after COVID-19? _ No correlation was found between those two metrics. There was an outlier like Subway whose median distance decreased in 2020 compared to 2019, but others it was more or less same but no relation to population of a CBG. But specific to Gas stations, there is an increase in distance travelled in 2020 irrespective of population of which CBG it belongs to. _ * Is the median distance travelled to a POI higher in CBG’s with low household income and how is this trend compared to before COVID-19?. _ No, we found few higher income CBGs have more median distance travelled when compared to lower once. Having scatter plot of POIs linked with the CBGs demographic through choropleth have really helped in answering. ALso, the line link between POI pairs of 2019 and 2020 also helped in asnwering this task. _ * What is the relationship between income, population in a census block group (CBG) and the visits count to the Places of Interest POI), before & during COVID19? _ Overall, we saw a decline in number of visists to the POIs in 2020 when compared to 2019 irrespective of the income/population demographic of the CBG it belongs to. Having scatter plot of POIs linked with the CBGs demographic through choropleth have really helped in answering. ALso, the line link between POI pairs of 2019 and 2020 also helped in asnwering this task._ * What is the trend with respect to the number of visits to different POI’s?. Compare before and after COVID-19. _ This task can be answered through scatter plots and also with the help of the line join between POI bubble from 2019 and 2020. When compared with 2019, we saw a drop in total visists of POIs irrespective of category they belong. _ * Are the percentage of total visits to POIs in CBG’s with higher household incomes is less when compared to lower household income CBG’s?. Does it show any differences in trends when compared to before & after COVID-19? _ No. We saw examples such as POI named LePain Quotidien restaurent which was in a higher median income CBG (110010106002) of $116,680 saw more visists than many of lower income CBGs. So, we didn't find any correlation between median income of CBG and visists count to POIs. The trend after pandemic hit also remains consistent with before it hit. _ * Are the percentage of total visits to POIs in CBG’s with a higher population more when compared to lower populated CBG’s?. Does it show any differences in trends when compared to before & after COVID-19?. _ No. Irrespective of how populated the CBG is, the visit count to POIs had no correlation. But we could observe that after pandemic, we saw a consistent drop of number of visists across all POIs of all categories, again with no relation to the population demographic of the CBG it belongs to. Having scatter plot of POIs linked with the CBGs demographic through choropleth have really helped in answering. ALso, the line link between POI pairs of 2019 and 2020 also helped in asnwering this task. _ `4d:T4dc,set_infobox = (data) => { const infobox = document.getElementById('graphic-infobox'); if (!infobox) return; if (data) infobox.innerHTML = `

POI Name: ${data.brands}

Year: ${data.year}

Category	${data.top_category}
Visit Counts	${data.raw_visit_counts} visits to the POI
Median Distance	${data.distance_from_home_miles} miles travelled by people to the POI
Median Time	${data.median_dwell} minutes spent at the POI
CBG ID	${data.poi_cbg2}
POI ID	${data.safegraph_place_id}

`; else infobox.innerHTML = ''; }4e:T615,md ` ### Perceptual and cognitive design guidelines: 1. We made sure that we use the channels which are ranked higher in terms of effectiveness. For instance we used the color luminance to show the demographic attribute. 2. We made sure the color scheme for the income and population attributes for each CBG are based on a single color gradient and to avoid multiple colors as it would merge the bubble color scheme. 3. Based on the rule of thumb, we didn’t add unjustified 3D visualization and our whole design is based on 2D plane. With a high number of POIs, there could be a chance of occlusion. To avoid it, we would further group the POIs into less categories. 4. To further reduce the latency during interaction for the GeoJSON based value for CBGs, we further simplified the values and reduced the input size of the file by half. This would decrease the time in loading CBGs spatial data. 5. The fifth rule of eyes beats memory can be depicted with the use of size and color code for categories making it easy and comforting for eyes to answer the task the end-user wishes for. 6. The seventh rule is also followed by giving an overall overview of the data first, and details can be seen when hovered over the box. 7. This design would support the tasks that have been discussed in class such as, find extremum (using the size of the bubble, color schema, width of the edges), determining range (again by using color schema for population and income would help in identifying the largest and smallest values), and finding anomalies. `4f:[{"id":"832e0d478d795107d8acefe8c4fd7c5de41abb9cdb051061dd1736042b20e7db108b498ab691c3de962a951b1a1ce8bce0fe9e79d070bc1109edf390df2ec412","href":"https://static.observableusercontent.com/files/832e0d478d795107d8acefe8c4fd7c5de41abb9cdb051061dd1736042b20e7db108b498ab691c3de962a951b1a1ce8bce0fe9e79d070bc1109edf390df2ec412","name":"cbg_dc_income_pop.geojson","type":"application/geo+json","lastModified":1607376061061.418,"size":1459571},{"id":"40e3e67854b85b5823a5e93560e8aa8433995801efe8a9848ec32b9ee83805c706b6a6056240619eac1ef1ee98f0b9ecc259a82d4f3df8a6c23eb09219891079","href":"https://static.observableusercontent.com/files/40e3e67854b85b5823a5e93560e8aa8433995801efe8a9848ec32b9ee83805c706b6a6056240619eac1ef1ee98f0b9ecc259a82d4f3df8a6c23eb09219891079","name":"pois_processed@1.csv","type":"text/csv","lastModified":1607376061061.418,"size":258761}] 29:{"id":"2dff1f6b3e82c64d","slug":null,"title":"Visualization of the impact of COVID-19 coupled with census demographics (for review)","thumbnail":"6f891a378fac8320af8aa4ff00c33eef88462cf0348dd2467c3d5682d502d91b","access_level":"unlisted","create_time":"$D2020-12-07T21:21:01.061Z","update_time":"$D2020-12-07T21:24:35.335Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ab35abcd810b8a72","login":"satvikchekuri","name":"Satvik Chekuri","avatar_url":"https://avatars-next.observableusercontent.com/3ec24277c979795a083fcefc7195fcd0f8b16592c17d4d2f31001601f977a435","tier":"starter_2024","bio":"PhD Student, CS@VirginiaTech","followed_by_you":false,"follows_you":false},"version":1010,"publish_version":1010,"role":null,"authored":false,"authors":[{"type":"individual","id":"126a0615fd2225fd","login":"satvikchekuri","name":"Satvik Chekuri","avatar_url":"https://avatars-next.observableusercontent.com/3ec24277c979795a083fcefc7195fcd0f8b16592c17d4d2f31001601f977a435","tier":null,"bio":"PhD Student, CS@VirginiaTech","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"126a0615fd2225fd","login":"satvikchekuri","name":"Satvik Chekuri","avatar_url":"https://avatars-next.observableusercontent.com/3ec24277c979795a083fcefc7195fcd0f8b16592c17d4d2f31001601f977a435","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualization of the impact of COVID-19 coupled with census demographics (for review)","cells":[{"id":0,"value":"md`# Visualization of the impact of COVID-19 coupled with census demographics (for review)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"md` ## Information Visualization (CS5764)\n### Washington D.C. City Overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"viewof options = {\n const encodings = Object.entries(encoding_defaults)\n .map(([key, value]) => [\n key.charAt(0).toUpperCase() + key.slice(1),value,\n ]);\n\n const agiOptions = [25, 50, 75, 100, 200];\n\n const fields = encodings.map(([title, value]) => select({ title, value, options: (title==='Demographics'? demographics_options : title==='Poi_category' ? poi_options : xy_options) }));\n const keys = encodings.map(([title]) => title.toLowerCase()[0]);\n\n const inputs = inputsGroup([fields], [keys]);\n\n inputs\n .querySelectorAll('select')\n .forEach((el) => {\n el.style.marginBottom = '10px';\n });\n\n inputs\n .querySelectorAll('form > div > div:first-child')\n .forEach((el) => {\n el.style.display = 'inline-block';\n el.style.minWidth = '40px';\n });\n\n return inputs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"md ` **Sub-functions, their code, and variables supporting the main Visualization component**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"set_infoboxpoly = (data) => {\n const infobox = document.getElementById('graphic-infobox1');\n\n if (!infobox) return;\n\n if (data) infobox.innerHTML = `

CBG ID: ${data.properties.CensusBlockGroup}

\n \n \n \n \n \n \n \n \n \n

Population	${data.properties.Population}
Median Income	$${data.properties.Median_Income}

`;\n\n else infobox.innerHTML = '';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"// Create GeoPath function that uses built-in D3 functionality to turn\n// lat/lon coordinates into screen coordinates\ndc_geoPath = d3.geoPath()\n .projection( dcProjection );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"dcProjection = d3.geoAlbers()\n .scale( 170000 )\n .rotate( [77.036,0] )\n .center( [0, 38.907] )\n .translate( [width - 280,height/2] );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"chart_margin = ({ top: 20, right: 30, bottom: 20, left: 50 }) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"chart_width = 480 // scatter plot width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"chart_height = 300 // scatter plot height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"x_extent = d3.extent(data.filter(function(d, i) {\n return d.top_category === encoding.p;}), d => d[encoding.x])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"x_start_diff = 0.02 * Math.abs(x_extent[1] - x_extent[0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"x_end_diff = 0.05 * Math.abs(x_extent[1] - x_extent[0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"x = d3.scaleLinear()\n .range([chart_margin.left, chart_width - chart_margin.right])\n .domain([x_extent[0] - x_start_diff, x_extent[1] + x_end_diff])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"y_extent = d3.extent(data.filter(function(d, i) {\n return d.top_category === encoding.p;}), d => d[encoding.y]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"y_start_diff = 0.02 * Math.abs(y_extent[1] - y_extent[0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"y_end_diff = 0.05 * Math.abs(y_extent[1] - y_extent[0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"y = d3.scaleLinear()\n .range([chart_height - chart_margin.bottom, chart_margin.top])\n .domain([y_extent[0] - y_start_diff, y_extent[1] + y_end_diff])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"x_axis = format => g => g\n .attr('transform', `translate(0, ${chart_height-chart_margin.bottom})`)\n .attr('class', 'axis x')\n .call(d3.axisBottom(x))//.ticks(5, format).tickSize(-height).tickPadding(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"y_axis = format => g => g\n .attr('transform', `translate(${chart_margin.left}, 0)`)\n .attr('class', 'axis y')\n .call(d3.axisLeft(y))//.ticks(5, format).tickSize(-chart_width).tickPadding(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"aScale = d3.scaleLinear().domain(d3.extent(data.filter(function(d, i) {\n return d.top_category === encoding.p;}).map(r=>r[encoding.s]))).range([2,20]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"// color of the map - demographic attributes\ncolor = d3.scaleSequential(d3.interpolateOrRd)\n .domain(d3.extent(dc_geo.features, d => d.properties[encoding.d]))\n .unknown('#eee')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"font-family\", \"'Open Sans', sans-serif\")\n .style(\"font-size\", \"9px\")\n .style(\"z-index\", \"10\")\n .style(\"visibility\", \"hidden\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"yearColorScale = d3.scaleOrdinal().domain(2019,2020).range(['red','green'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":"size = d3.scaleSqrt()\n .range([chart_width * 0.008, chart_width * 0.02])\n .domain(d3.extent(data, d => d[encoding_defaults.size]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"xy_options = [\n { label: 'Visits count', value: 'raw_visit_counts', suffix: 'visits', right: 'More visits' },\n { label: 'Median dwell time', value: 'median_dwell', suffix: 'dwell time in POI', right: 'More dwell time' },\n { label: 'Distance from home (in miles)', value: 'distance_from_home_miles', suffix: 'miles travelled from home', right: 'More distance' },\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"demographics_options = [\n { label: 'Median Income', value: 'Median_Income', format: '.0%', suffix: 'income', right: 'Less wealthy' },\n { label: 'Population', value: 'Population', format: '.0s', suffix: 'residents', right: 'More people' },\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"poi_options = [\n { label: 'Restaurants', value: 'Restaurants and Other Eating Places', format: '.0%', suffix: 'restaurants', right: 'restaurants' },\n { label: 'Gas Stations', value: 'Gasoline Stations', format: '.0s', suffix: 'gas', right: 'More people' },\n { label: 'Healthcare stores', value: 'Health and Personal Care Stores', format: '.0%', suffix: 'healthcare', right: 'restaurants' },\n { label: 'Hospitals', value: 'General Medical and Surgical Hospitals', format: '.0%', suffix: 'hospitals', right: 'restaurants' },\n { label: 'Grocery Stores', value: 'Grocery Stores', format: '.0%', suffix: 'grocery', right: 'restaurants' },\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"encoding_defaults = ({\n x: 'raw_visit_counts',\n y: 'median_dwell',\n demographics: 'Median_Income',\n size: 'distance_from_home_miles',\n poi_category: 'Restaurants and Other Eating Places',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"encoding = ['x', 'y', 'd', 's','p']\n .map(key => [key, options[key]])\n .reduce((acc, [k, v]) => Object.assign(acc, { [k]: v }), {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"md `\nConsidering the scale and available data points, we have implemented the visualization only for **Washington D.C** city.\n\n** Data Sources**\n* Monthly places patterns (US only) from SafeGraph (2019-present): Place foot-traffic and demographic aggregations that answer: how often people visit, where they came from, where else they go, and more. Available for ~3.6MM POI in the USA.\n\n* Core Places (US only) from SafeGraph: Base information about a point of interest (POI) such as location name, address and brand association for top ~5,500 national brands in the US.\n\n* Census Data: All demographics and socio-economic variables tracked by the US Census and American Community Survey, organized as individual columns, for every census block group in the USA. Also, geospatial boundaries for every census block group in the USA.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"md `\n** Census Block Groups Data**\n\nThis dataset consists the data of Washington D.C city in GeoJson format. It consists the geometry of each Census Block Group (CBG) which is used in depicting a map of all the CBGs in the city using the coordinates. It further includes additional details of each CBG such as the population and median income of that CBG. \n\n** Scale:** \n450 rows, 12 columns\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"dc_geo = FileAttachment(\"cbg_dc_income_pop.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"md` **Point of Interest (POI) Data**\n\nThis dataset consists the information about each POI in Washington D.C. city. POIs might be restaurents, grocery stores, gas stations etc. Since the total count of POIs in the city have exceeded more than 1000 and displaying such huge number would make the design over crowded, we did a simple random sampling on the dataset with 0.25 ratio and ended with 213 unique POIs for both 219 and 2020 years.\n\nAs the monthly patterns data source gives trends for each individual month, we have aggregated February, March and April months data for the respective 2019 and 2020 years. We have compiled the data for both the years into a single file. The information for each POI consists the category it belongs, CBG it belongs to, name of the POI, visit count, median distance, median time spent, etc. \n\n** Scale **\nrows: 213, columns: 15\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"data = d3.csvParse(await FileAttachment(\"pois_processed@1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"md ` ### Data Processing\n\nPreparing data was a huge task for this visualization as we had to join three different data sources and are of large size (each file varying from 1GB-10GB). We got the data for total 6 parts: February, March, April of 2019 and February, March, April of 2020 for comparision. As the data is for overall US, we had to retrieve specifically for Washington D.C. from all three data sources that required a lot of computation power. We processed data using Python library such panda, numpy on PyCharm IDE with a system of configuration of 32GB RAM, 4GB GPU (NVIDIA GTX 1650). \n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"md `# D3 Library`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"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":516,"value":"import { inputsGroup } from '@bumbeishvili/input-groups'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"import {slider,select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"import { legend } from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"import { legendCircle } from '@harrystevens/circle-legend';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null