Public
Edited
Dec 1, 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;
}
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 +=
'<i style ="background-color:' + getColor(grades[i]) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
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 = '<h4>US Obesity Rate by State</h4>' + (props ?
'<b>' + props.name + '</b><br />' + 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
});
}
}
vl.markGeoshape({stroke: '#aaa', strokeWidth: 0.25})
.data(vl.topojson(usa).feature('counties'))
.transform(
vl.lookup('id').from(vl.data(obesityDataParsed).key('id').fields('Obesity_Rate'))
)
.encode(
vl.color().fieldQ('Obesity_Rate').scale({domain: [0, 0.6], clamp: true}).legend({format: '%'}),
//vl.tooltip().fieldN('County'),
vl.tooltip().fieldQ('Obesity_Rate').format('.0%')
)
.title('US Obesity Rate by County')
.project(vl.projection('albersUsa'))
.width(900).height(500)
.config({view: {stroke: null}})
.render()
fastFoodData = FastFood
{
const selection = vl.selectPoint(); //We create a selection instance which indicates that we want a selection defined over a point value
return vl.markSquare({size: 1, opacity: 1})
.data(fastFoodData)
//.param(selection)
.encode(
vl.longitude().fieldQ('Lon'),
vl.latitude().fieldQ('Lat')
)
.project(vl.projection('albersUsa'))
.width(900)
.height(500)
.title("Fast Food Restaurant Distribution in the US")
.config({view: {stroke: null}})
.render()
}
vl.markGeoshape({stroke: '#aaa', strokeWidth: 0.25})
.data(vl.topojson(usa).feature('counties'))
.transform(
vl.lookup('id').from(vl.data(obesityDataParsed).key('id').fields('Median_Household_Income'))
)
.encode(
vl.color().fieldQ('Median_Household_Income').scale({domain: [0, 100000], clamp: true}).legend({format:'$K'}),
vl.tooltip().fieldQ('Median_Household_Income').format('$K')
)
.title('US Median Household Income by County')
.project(vl.projection('albersUsa'))
.width(900).height(500)
.config({view: {stroke: null}})
.render()
ObesityAndIncome = d3.csv("https://gist.githubusercontent.com/liutianming07/9754fa12efc077c6a6267b72c90a67a1/raw/3a6ad92afd3ac05e8a482e01200fec5e0c51ad2f/obesity_rate_and_median_income.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 >= 35 ? '#08519c' :
d >= 30 ? '#3182bd' :
d >= 25 ? '#6baed6' :
d >= 20 ? '#bdd7e7' :
'#eff3ff';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.obesity_rate),
weight: 2,
opacity: .5,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
d3 = require("https://d3js.org/d3.v5.js")
mutable selectedMap = ["warmgreys"]
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.
