Public
Edited
Dec 11, 2022
obesityData = ObesityAndIncome
obesityDataParsed = {
for (let i=0;i<obesityData.length;i++)
{
obesityData[i].Obesity_Rate = +obesityData[i].Obesity_Rate;
obesityData[i].Obesity_Rate = obesityData[i].Obesity_Rate/100;
obesityData[i].Median_Household_Income = +obesityData[i].Median_Household_Income;
}
return obesityData;
}
usCounties= FileAttachment("gz_2010_us_050_00_5m.json").json()
caliMissi = FileAttachment("gz_2010_us_050_00_5m@2.json").json()
data_parsed = {
for(let i=0; i<data.length; i++){
data[i].Num_Restaurants = +data[i].Num_Restaurants;
data[i].Obesity_Rate = +data[i].Obesity_Rate;
data[i].Median_Income = +data[i].Median_Income;
}
return data
}
fastFoodData = FastFood
//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().field("State"),
vl.y().sum("Num_Restaurants"),
vl.tooltip([{field: "Num_Restaurants", title: "Number of Fast Food Restaurants"}])
)
.params(select)
.height(250)
.width(800)
.title("Click on the bars to see details")
return vl.vconcat(mapChart,selectChart)
.render()
}
data_income_parsed = {
for(let i=0; i<data_income.length; i++){
data_income[i].Obesity_Percentage = +data_income[i].Obesity_Percentage;
data_income[i].Median_Household_Income = +data_income[i].Median_Household_Income;
}
return data_income
}
vl.markBar({tooltip:true})
.data(data_income_parsed)
.encode(
vl.x().field('Obesity_Percentage').bin({step: 5 }),
vl.y().fieldQ('Median_Household_Income'),
//vl.size().fieldQ('Obesity_Percentage').scale({range: [1, 60]}),
//vl.x().field("County")
)
.render()
data_income = d3.csv('https://gist.githubusercontent.com/manideepvangari/c9b2e66e9a3f0acc4f782fe6f5290359/raw/0d6979ec774a7a4ff7c938d3e7c23369a2154177/county_data_median_obesity.csv')
data = d3.csv('https://gist.githubusercontent.com/manideepvangari/5519bdcf13f9a7ff067cdb2f9d49a4f8/raw/76b1795fbf8181b6725733d97102f0180d5daaa3/IAT355_A5_Dataset.csv')
ObesityAndIncome = d3.csv("https://gist.githubusercontent.com/liutianming07/7663cd78bee7407aeb36f3e53598aa53/raw/dfd55851f1b88e3f3dbb5833af9d508011ad4362/usCountyData.csv")
FastFood = d3.csv("https://gist.githubusercontent.com/liutianming07/40418148cf917b5f66f666a846454639/raw/cf549736b98fee5bac381808cf428cfe88e933f8/fast_food_data.csv")
import {vl} from '@vega/vega-lite-api-v5'
import {usa} from "@uwdata/cartographic-visualization"
usStates = FileAttachment("usStates.json").json()
tile = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
openStreetAttr = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
function getColor(d) {
return d >= 50 ? '#0d2a78' :
d >= 45 ? '#253f86' :
d >= 40 ? '#3d5593' :
d >= 35 ? '#566aa1' :
d >= 30 ? '#6e7fae' :
d >= 25 ? '#8695bc' :
d >= 20 ? '#9eaac9' :
'#b6bfd7';
}
function styleCounties(feature) {
return {
fillColor: getColor(feature.properties.obesity_rate),
weight: 2,
opacity: .3,
color: 'white',
dashArray: '3',
fillOpacity: 0.3
};
}
function style(feature) {
return {
fillColor: getColor(feature.properties.obesity_rate),
weight: 2,
opacity: .5,
color: 'white',
dashArray: '3',
fillOpacity: 0.6
};
}
d3 = require("https://d3js.org/d3.v5.js")
vegalite = require("@observablehq/vega-lite@0.1")
mutable selectedMap = ["warmgreys"]
VegaLite = require('vega-lite@2.0.0-beta.2/build/vega-lite.min.js')
heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
