3e:null 3f:["$","title",null,{"children":"IAT355 Assignment 4 & 5 Project Visualizations (Group 7, Tianming Liu & Manideep Vangari) | Tianming Liu | Observable"}] 45:Tb0b, usMap = { let width = 1000 let height = 800 let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container //base layer let map = L.map(container).setView([37.8, -96], 4); let baseLayer = L.tileLayer(tile, { attribution: openStreetAttr, minZoom: 1, maxZoom: 19, }).addTo(map); L.geoJson(usStates).addTo(map); //add US areas let UsStatesLayer = L.geoJson(usStates, {style: style}) .bindTooltip(function (Layer) { return Layer.feature.properties.NAME; }).addTo(map); //defining the legend var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [20,25,30,35], labels = []; // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); } return div; }; //add the legend to the map legend.addTo(map); //defining the info panel var info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" this.update(); return this._div; }; // method that we will use to update the control based on feature properties passed info.update = function (props) { this._div.innerHTML = '

US Obesity Rate by State

' + (props ? '' + props.name + '
' + props.obesity_rate + ' % ' : 'Hover over a state'); }; info.addTo(map); //defining the highlight layer when the mouse is hovering function highlightFeature(e) { var layer = e.target; layer.setStyle({ weight: 5, color: '#666', dashArray: '', fillOpacity: 0.7 }); //bringing the layer to font layer.bringToFront(); info.update(layer.feature.properties); } //definging the geoJson shape and applying to the map const geojson = L.geoJson(usStates, { style: style, onEachFeature: onEachFeature }).addTo(map); //defining the layer when the mouse is off of state panel function resetHighlight(e) { geojson.resetStyle(e.target); info.update(); } //defing the zoom in geature function zoomToFeature(e) { map.fitBounds(e.target.getBounds()); } //applying the hover over and off and zoom in features to the map function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } } 46:[{"id":"8f1bad80cbb2cbd1fab19ff7c96675befd1ecbdd41f2757ea2e0ace1df4c6bb4ec21d4fbacd09a9537963a53508c158b3538cb12310c08aba8c29da14ea7f03d","href":"https://static.observableusercontent.com/files/8f1bad80cbb2cbd1fab19ff7c96675befd1ecbdd41f2757ea2e0ace1df4c6bb4ec21d4fbacd09a9537963a53508c158b3538cb12310c08aba8c29da14ea7f03d","name":"usStates.json","type":"application/json","lastModified":1669519514951.171,"size":307199}] 43:{"id":"8333d5fa333498d7","slug":null,"title":"IAT355 Assignment 4 & 5 Project Visualizations (Group 7, Tianming Liu & Manideep Vangari)","thumbnail":"1168275d5d766f0004b2931e0d657d8bbb353d0e85da5506b3176ba4aff516e6","access_level":"public","create_time":"$D2022-11-07T02:36:10.753Z","update_time":"$D2022-11-28T03:00:04.977Z","view_time":null,"first_public_time":"$D2022-11-07T03:36:06.536Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"43ce8365533aacde","login":"liutianming07","name":"Tianming Liu","avatar_url":"https://avatars-next.observableusercontent.com/1d1158cd2344459824590df34e615b957e1187746814c0b1aa25c9ff98d61e85","tier":"starter_2024","bio":"","following":false},"version":605,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0d4d2f439085845","login":"liutianming07","name":"Tianming Liu","avatar_url":"https://avatars-next.observableusercontent.com/1d1158cd2344459824590df34e615b957e1187746814c0b1aa25c9ff98d61e85","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"a0d4d2f439085845","login":"liutianming07","name":"Tianming Liu","avatar_url":"https://avatars-next.observableusercontent.com/1d1158cd2344459824590df34e615b957e1187746814c0b1aa25c9ff98d61e85","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"IAT355 Assignment 4 & 5 Project Visualizations (Group 7, Tianming Liu & Manideep Vangari)","cells":[{"id":0,"value":"# IAT355 Assignment 4 & 5 Project Visualizations (Group 7, Tianming Liu & Manideep Vangari)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"## Question: Is the obesity rate in the east side of the USA higher than on the west side?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"obesityData = ObesityAndIncome","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"obesityDataParsed = { \n for (let i=0;i\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":561,"value":"vl.markGeoshape({stroke: '#aaa', strokeWidth: 0.25})\n .data(vl.topojson(usa).feature('counties'))\n .transform(\n vl.lookup('id').from(vl.data(obesityDataParsed).key('id').fields('Obesity_Rate'))\n )\n .encode(\n vl.color().fieldQ('Obesity_Rate').scale({domain: [0, 0.6], clamp: true}).legend({format: '%'}),\n vl.tooltip().fieldN('County'),\n vl.tooltip().fieldQ('Obesity_Rate').format('.0%')\n )\n .title('US Obesity Rate by County')\n .project(vl.projection('albersUsa'))\n .width(900).height(500)\n .config({view: {stroke: null}})\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"### Reflection\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"To answer the question, I want to show the map of the USA and show the data by county. Because I think the map is the most intuitive way to compare the data between the east and west side. The map shows the longitude and latitude data, and a colour gradient is used to show the obesity rate which adds another dimension to the chart. The higher the obesity rate is, the darker the colour is. I picked the data we need from the original datasets and transformed the data into a CSV file. Finally, I converted Obesity_Rate and Median_Household_Income to integers data type and changed the scale for Obesity_Rate from 0-100 to 0-1 since the format in vega light is in percentage. From the map, it is easy to see that the colour is darker on the east side, so we know that the obesity rate is higher on the east side of the USA.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"## Question: What is the relation between the number of fast food reataurant and the median household income in each county?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"fastFoodData = FastFood","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"{\n const selection = vl.selectPoint(); //We create a selection instance which indicates that we want a selection defined over a point value\n return vl.markSquare({size: 1, opacity: 1})\n .data(fastFoodData)\n //.param(selection)\n .encode(\n vl.longitude().fieldQ('Lon'),\n vl.latitude().fieldQ('Lat') \n )\n .project(vl.projection('albersUsa'))\n .width(900)\n .height(500)\n .title(\"Fast Food Restaurant Distribution in the US\")\n .config({view: {stroke: null}})\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"\n vl.markGeoshape({stroke: '#aaa', strokeWidth: 0.25})\n .data(vl.topojson(usa).feature('counties'))\n .transform(\n vl.lookup('id').from(vl.data(obesityDataParsed).key('id').fields('Median_Household_Income'))\n )\n .encode(\n vl.color().fieldQ('Median_Household_Income').scale({domain: [0, 100000], clamp: true}).legend({format:'$K'}),\n vl.tooltip().fieldQ('Median_Household_Income').format('$K')\n )\n .title('US Median Household Income by County')\n .project(vl.projection('albersUsa'))\n .width(900).height(500)\n .config({view: {stroke: null}})\n .render() \n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"## Reflection\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"To see if there is a relation between the median household income and the number of fast food restaurants. I would like to use one point map to see the distribution of the fast food restaurant and one choropleth map to see the wealth distribution. On the point map, the longitude and latitude of the fast food restaurant show the spacial information. On the choropleth map, the colour gradient shows the third dimension of information on top of longitude and latitude which is the income. Because the original file was way too large, I cleaned the data by deleting the unnecessary indicators and then transformed it into a CSV file. On the choropleth map, I set the range of the median household income from $0 to $100000. The hues may not be distinguishable if the range is too small since the median household income of the country is around $50000. By comparing the two graphs, I can see those fast-food restaurants are more likely to be located in countries that have a higher median income.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"## Datasets and Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"ObesityAndIncome = d3.csv(\"https://gist.githubusercontent.com/liutianming07/9754fa12efc077c6a6267b72c90a67a1/raw/3a6ad92afd3ac05e8a482e01200fec5e0c51ad2f/obesity_rate_and_median_income.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"FastFood = d3.csv(\"https://gist.githubusercontent.com/liutianming07/40418148cf917b5f66f666a846454639/raw/cf549736b98fee5bac381808cf428cfe88e933f8/fast_food_data.csv\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"import {usa} from \"@uwdata/cartographic-visualization\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"## Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"usStates = FileAttachment(\"usStates.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"tile = \t'https://tile.openstreetmap.org/{z}/{x}/{y}.png'\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"openStreetAttr = '© OpenStreetMap'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"--- CSS --- \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":372,"value":"function getColor(d) {\n return d >= 35 ? '#08519c' :\n d >= 30 ? '#3182bd' :\n\t d >= 25 ? '#6baed6' :\n\t d >= 20 ? '#bdd7e7' :\n\t '#eff3ff';\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"function style(feature) {\n return {\n fillColor: getColor(feature.properties.obesity_rate),\n weight: 2,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## Libraries ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"d3 = require(\"https://d3js.org/d3.v5.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"mutable selectedMap = [\"warmgreys\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"## Resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"#### Cartographic Visualization, https://observablehq.com/@uwdata/cartographic-visualization#unemp\n\n#### [IAT355] Tutorial 2: Working with data in d3 and Vega | SOLUTION, https://observablehq.com/@krispybird/iat355-tutorial-2-working-with-data-in-d3-and-vega-solution\n\n#### [IAT355] Tutorial 7: Maps & Geocoding with Vega-Lite and Leaflet 🍂| SOLUTION, https://observablehq.com/@krispybird/iat355-tutorial-7-maps-solution\n\n#### Rankings Data & Documentation, https://www.countyhealthrankings.org/explore-health-rankings/rankings-data-documentation\n\n#### US Restaurant Datasets, https://www.kaggle.com/datasets/michaelbryantds/us-restaurants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"