3f:null 40:["$","title",null,{"children":"Final Project: Obesity in the USA | Tianming Liu | Observable"}] 46:Tc50,//completed by Tianming Liu 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); //add Counties areas let UsCountiesLayer = L.geoJson(caliMissi, {style: styleCounties}) .bindTooltip(function (Layer) { return Layer.feature.properties.NAME; }).addTo(map); UsCountiesLayer.bringtofront //L.geoJson(caliMissi).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,40,45,50], 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 + ' % ' : 'Click a state to see details'); }; 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 }); } } 47:T594,//completed by Tianming { //defining the multi selection for the map const select = vl.selectMulti().encodings("x"); //definging the map for updating const mapChart = vl.markGeoshape({stroke: '#aaa', strokeWidth: 0.25}) .data(vl.topojson(usa).feature('counties')) .transform( vl.lookup('id').from(vl.data(obesityDataParsed).key('id').fields('State','County','Median_Household_Income')), vl.filter(select) ) .encode( vl.x().fieldQ('Median_Income').scale({domain: [40000, 90000]}), vl.y().fieldQ('Num_Restaurants'), vl.color().fieldQ('Median_Household_Income').scale({domain: [0, 100000], clamp: true, scheme: "blues" }).legend({format:'$K'}), vl.tooltip([{field:"State"},{field:"County"},{field:"Median_Household_Income",format:"$K", title:"Median Household Income"}]) ) .width(600) .height(600) .project(vl.projection('albersUsa')) .title('US Median Household Income by County VS Number of Fast Food Restaurants') .config({view: {stroke: null}}) //defining the selection bar chart const selectChart = vl.markBar() .data(data_parsed) .encode( vl.x().fieldN("State"), vl.y().sum("Num_Restaurants"), vl.tooltip([{field:"State"},{field: "Num_Restaurants", title: "Number of Fast Food Restaurants"}]) ) .params(select) .height(250) .width(700) .title("Click on the bars to see details") return vl.vconcat(mapChart,selectChart) .render() }48:T4b2,I used a 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. The user can interact with the visualization by clicking on one of the bars on the graph below, to see the median income distribution per county. By comparing the two graphs, I can see those fast-food restaurants are more likely to be located in counties that have a higher median income. Because the population density is different in each county, I cannot conclude if there is a correlation between the number of fast food restaurant and the median household income.49:T4bc,{ //Completed by Manideep const brush = vl.selectInterval().encodings("x"); const brushChart = vl.markCircle() .data(data_parsed) .encode( vl.x().field('Obesity_Rate').bin({step: 1.5}), vl.y().fieldQ('Median_Income').scale({domain: [40000, 90000]}), vl.tooltip([{field: "State"}, {field: "Obesity_Rate", title: "Obesity Rate"}, {field: "Median_Income", title: "Median Income"}]), vl.opacity().if(brush, vl.value(0.9)).value(0.1), // vl.opacity().if(selectRange, vl.value(0.9)).value(0.1) ) .params(brush) .width(300) .height(300) .title("Median Household Income vs Obesity Rate in Each State (Brush to See Details) ") ////////////////////////////////////////////////////// const reactChart = vl.markBar() .data(data_parsed) //.params(selectRange) .transform( vl.filter(brush) ) .encode( vl.x().field("State"), vl.y().sum("Num_Restaurants"), vl.tooltip([{field: "Num_Restaurants", title: "Number of Restaurants"}]), //vl.opacity().if(click2, vl.value(0.75)).value(0.05) ) .title("Number of Fast Food Restaurants in Each State") .height(250) .width(600); return vl.vconcat(brushChart,reactChart) .render() }4a:T40c,{ //Completed by Manideep const click = vl.selectPoint().encodings('color'); const clickChart = vl.markBar({tooltip:true}) .data(data_parsed) .params(click) .encode( vl.x().field('Income_Range'), vl.y().count(), vl.color().field("Income_Range"), vl.color().value('lightgray').if(click, vl.color().fieldN('Income_Range').title('Income_Range')) ) //.render() const reactChart = vl.markCircle({tooltip:true}) .data(data_parsed) .transform(vl.filter(click)) .encode( vl.x().field('State'), vl.y().field('Obesity_Rate').bin({step: 1}).sort('ascending'), vl.color().field("Income_Range").scale({ range: colors }), vl.tooltip([{field: "State"}, {field: "Obesity_Rate", title: "Obesity Rate"}, {field: "Median_Income", title: "Median Income"}]), //vl.size().field('Num_Restaurants') ) .title("Obesity Rate vs Median Household Income in Each State (Click on the Bars to See Detials)") .height(440) .width(600) return vl.hconcat(clickChart,reactChart) .render() } 4b:T411,The user can click on one of the bar charts to see the corresponding changes in the scatterplot. From this visualization, the user can observe how ranges of income affect the obesity rate of that state. If we click on both the "50k-60k" and "80k-90k" bars, the scatterplot suggests that states that have a lower median income have higher obesity rates. This pattern can be observed through the other income ranges as well. Similarily, it can also be seen that obesity rates decrease as median household income increases. The data also suggests that the price range where obesity rates are the highest is between $50k-$60k. This could mean that the differenciating factor for higher obesity rates could income, rather than the number of restaurants the state has. This type of visualization was chosen to show the income trends more clearly, and the color coding of each price range makes it easier to differenciate how a state is categorized on the scatterplot chart. The scatterplot chart was chosen to show the numerous state information. 4c:T5d2,## Further Work **Tianming:** I intended to show the obesity data on county level on the leaflet map but then I realized that it would be difficult to populate 3134 entries of data manually into the Json file. I should’ve collected the obesity rate datasets in the past ten years so it would be more clear to see the change and offer a new perspective for the user. The bias I want to adjust in the future is that the population density is different in each state and more people live in the east side. I would like to continue working on this in the future. **Manideep:** I intended to combine both state and county data into my visualizations instead of only using state data. My initial idea was to include a top-layer which shows the information per state (current visualizations) but clicking/brushing/menu clicking the specific state would populate another linked visualization to show the data values of all the counties that fall into the selected state. On one of my visualizations I decided to use the brushing functionality on a data type (state) that wasn’t ordinal in nature and wouldn’t work the best. I found this out by Professor Lyn and our TA Tiffany by receiving comments on an assignment submission. I changed this design decision by implementing the brushing functionality to the scatter plot graph. In the next version I would try to implement this, and maybe we can also include how the prevalence/frequency of fast food ads relates to obesity rates as well. 4d:T44a,#### Cartographic Visualization, https://observablehq.com/@uwdata/cartographic-visualization#unemp #### GEOJSON AND KML DATA FOR THE UNITED STATES, https://eric.clst.org/tech/usgeojson/ #### [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 #### [IAT355] Tutorial 6: Interaction | SOLUTION, https://observablehq.com/@krispybird/iat-355-tutorial-6-interaction-solution?collection=@krispybird/iat-355-s22-tutorials #### [IAT355] Tutorial 7: Maps & Geocoding with Vega-Lite and Leaflet 🍂| SOLUTION, https://observablehq.com/@krispybird/iat355-tutorial-7-maps-solution #### Interactive Choropleth Map, https://leafletjs.com/examples/choropleth/ #### Rankings Data & Documentation, https://www.countyhealthrankings.org/explore-health-rankings/rankings-data-documentation #### US Restaurant Datasets (County), https://www.kaggle.com/datasets/michaelbryantds/us-restaurants #### US Restaurant Dataset (State), https://www.statista.com/statistics/825076/number-of-lsr-s-by-us-state/4e:[{"id":"285e4052ffeff388e8180e148d7ea93938f732e64f7f01fd881dcd15c2bd5a68a16ab9aed0c9a3176901e3baa139caf210ad53bb0fe583df564f9a6afbf266de","href":"https://static.observableusercontent.com/files/285e4052ffeff388e8180e148d7ea93938f732e64f7f01fd881dcd15c2bd5a68a16ab9aed0c9a3176901e3baa139caf210ad53bb0fe583df564f9a6afbf266de","name":"gz_2010_us_050_00_5m.json","type":"application/json","lastModified":1670824215667.323,"size":5996982},{"id":"813263b6994f35bf64117e5fe1a16694a513f583716acd60b7b4ac57cbbff9b190de994ce81d3ebcf4f2ea4e60a91b8684241ff3737c56750552094f88eecf31","href":"https://static.observableusercontent.com/files/813263b6994f35bf64117e5fe1a16694a513f583716acd60b7b4ac57cbbff9b190de994ce81d3ebcf4f2ea4e60a91b8684241ff3737c56750552094f88eecf31","name":"gz_2010_us_050_00_5m@2.json","type":"application/json","lastModified":1670824215667.323,"size":5999778},{"id":"8f1bad80cbb2cbd1fab19ff7c96675befd1ecbdd41f2757ea2e0ace1df4c6bb4ec21d4fbacd09a9537963a53508c158b3538cb12310c08aba8c29da14ea7f03d","href":"https://static.observableusercontent.com/files/8f1bad80cbb2cbd1fab19ff7c96675befd1ecbdd41f2757ea2e0ace1df4c6bb4ec21d4fbacd09a9537963a53508c158b3538cb12310c08aba8c29da14ea7f03d","name":"usStates.json","type":"application/json","lastModified":1670824215667.323,"size":307199}] 44:{"id":"12c0dd0cbd74ad6c","slug":"final-project-obesity-in-the-usa","title":"Final Project: Obesity in the USA","thumbnail":"451a2be9f3effc77a36e147c5da9a4722c628a265aaa0809d5f07945c00d9450","access_level":"public","create_time":"$D2022-12-12T05:50:15.667Z","update_time":"$D2022-12-12T05:59:03.162Z","view_time":null,"first_public_time":"$D2022-12-12T05:50:15.667Z","has_unpublished_edits":null,"fork":{"id":"582e5d6fd0647512","slug":null,"title":"Final Project: Obesity in the USA","owner":{"id":"214cb1016147f554","login":"manideepvangari","name":"Manideep Vangari"}},"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":1136,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Final Project: Obesity in the USA","cells":[{"id":0,"value":"# Final Project: Obesity in the USA\n\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":997,"value":"#### By Tianming Liu and Manideep Vangari\nIAT355 Fall 2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":836,"value":"## Introduction\nMost of us have heard or seen fat jokes about Americans on social media and on the news. At first, we glossed over this problem and thought of it as a joke as well. However, the more we thought about it the more we realized that this was an actual issue that should be addressed. After brainstorming the possible reasons for why the USA have comparatively high obesity rates, we thought of an overriding factor: income. \n\nWith this overarching reason in mind, we have also used geographic locations and the number of fast food restaurants in hopes to discover the underlying reason behind high obesity rates in the USA. This project is designed to show the potential factors that affect obesity rates of the different areas in the USA. We are using datasets of median household income (Census Bureau), number of fast food restaurants (Kaggle), obesity rate of states (Statista) and obesity rate of counties (Census Bureau) to see if there are relationships among the factors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":814,"value":"## Questions\n\nOur domain question relates to how income affects obesity rates in the USA. Other questions include: \n\n- Is the obesity rate in the east side of the USA higher than on the west side?\n- What is the relation between the number of fast food restaurants and the median\nhousehold income in each county? \n- How does the number of restaurants and median income of a state relate to its obesity \nrate?\n- Is there a relationship between obesity percentages and median household income?\n- Do obesity percentages increase/decrease as household income increases/decreases?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1006,"value":"## Data Dimensions\nWe used the datasest from the US Census Bureau, Kaggle, and Statista . The data dimensions used from the **Census Bureau** includes the obesity rate per county, obesity rate per state, median income per county, and median income per state. These dimensions are all ratio data types. \n\nThe data dimension used from **Kaggle** is the number of restaurants per county, and the data dimension used from **Statista** is the number of restaurants per state. These two dimensions are ratio data types as well.\n\nWe have combined these data dimensions into our own separately created datasets to make the parsing process easier. However, we have not manipulated any of the data values themselves.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"## Is the obesity rate on 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":"//completed by Tianming Liu\n{\n const selection = vl.selectPoint();\nreturn 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('State','County','Obesity_Rate'))\n )\n .params(selection)\n .encode(\n vl.color().if(selection, vl.color().fieldQ('Obesity_Rate').scale({domain: [0, 0.6], clamp: true, scheme: \"purples\" })\n .legend({format:'%'})).value('grey'),\n vl.tooltip([{field:\"State\"},{field:\"County\"}, {field:\"Obesity_Rate\", format:\".0%\",title:\"Obesity Rate\"}])\n )\n .title('US Obesity Rate by County (Click to See Details)')\n .project(vl.projection('albersUsa'))\n .width(900).height(500)\n .config({view: {stroke: null}})\n .render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"These two maps show the obesity rates on county and state level, using the obesity rate and location information. Comparing these maps on the two levels can help us see the distribution of obesity rates on the county and state level. Users can hover on areas (both the maps) to see the obesity rates for the state/county.\n\nTo answer the question, I want to show the map of the USA and show the data by county. The map shows longitude and latitude data, and a colour gradient is used to show the differences in obesity rates. A darker color indicates higher obesity rates, lighter colors indicates lower obesity rates. I created a separate dataset using the original data from the mentioned resources. We can see from the map that the color is darker on the east side, meaning 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":"## What is the relation between the number of fast food restaurants and the median household income in the richest and the poorest state?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":620,"value":"data_parsed = {\n\n for(let i=0; iOpenStreetMap'","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 >= 50 ? '#0d2a78' :\n d >= 45 ? '#253f86' :\n d >= 40 ? '#3d5593' :\n d >= 35 ? '#566aa1' :\n d >= 30 ? '#6e7fae' :\n\t d >= 25 ? '#8695bc' :\n\t d >= 20 ? '#9eaac9' :\n\t '#b6bfd7';\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"function styleCounties(feature) {\n return {\n fillColor: getColor(feature.properties.obesity_rate),\n weight: 2,\n opacity: .3,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.3\n };\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.6\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":613,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","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":616,"value":"VegaLite = require('vega-lite@2.0.0-beta.2/build/vega-lite.min.js')","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":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 45:"$44:body"