Public
Edited
Feb 25, 2024
Importers
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof zipcolor = Inputs.select(new Map([
["Blues (sequential, single-hue)", "blues"],
["Greens (sequential, single-hue)", "greens"],
["Greys (sequential, single-hue)", "greys"],
["Purples (sequential, single-hue)", "purples"],
["Reds (sequential, single-hue)", "reds"],
["Oranges (sequential, single-hue)", "oranges"],
["Turbo (sequential, multi-hue)", "turbo"],
["Viridis (sequential, multi-hue)", "viridis"],
["Magma (sequential, multi-hue)", "magma"],
["Inferno (sequential, multi-hue)", "inferno"],
["Plasma (sequential, multi-hue)", "plasma"],
["Cividis (sequential, multi-hue)", "cividis"],
["Cubehelix (sequential, multi-hue)", "cubehelix"],
["Warm (sequential, multi-hue)", "warm"],
["Cool (sequential, multi-hue)", "cool"],
["BuGn (sequential, multi-hue)", "bugn"],
["BuPu (sequential, multi-hue)", "bupu"],
["GnBu (sequential, multi-hue)", "gnbu"],
["OrRd (sequential, multi-hue)", "orrd"],
["PuBuGn (sequential, multi-hue)", "pubugn"],
["PuBu (sequential, multi-hue)", "pubu"],
["PuRd (sequential, multi-hue)", "purd"],
["RdPu (sequential, multi-hue)", "rdpu"],
["YlGnBu (sequential, multi-hue)", "ylgnbu"],
["YlGn (sequential, multi-hue)", "ylgn"],
["YlOrBr (sequential, multi-hue)", "ylorbr"],
["YlOrRd (sequential, multi-hue)", "ylorrd"],
["BrBG (diverging)", "brbg"],
["PRGn (diverging)", "prgn"],
["PiYG (diverging)", "piyg"],
["PuOr (diverging)", "puor"],
["RdBu (diverging)", "rdbu"],
["RdGy (diverging)", "rdgy"],
["RdYlBu (diverging)", "rdylbu"],
["RdYlGn (diverging)", "rdylgn"],
["Spectral (diverging)", "spectral"],
["BuRd (diverging)", "burd"],
["BuYlRd (diverging)", "buylrd"],
["Rainbow (cyclical)", "rainbow"],
["Sinebow (cylical)", "sinebow"]
]), {label: "Color scheme", value: "puor"})
Insert cell
zipcolor
Insert cell
Insert cell
viewof rangezip = Inputs.range([0, 10], {label: "Quantiles", step: 1, value: 8})
Insert cell
Plot.plot({
width: 960,
height: 600,
projection: "albers",
color: {
scheme: zipcolor,
type: "quantile",
n: rangezip,
reverse: reversedzip,
label: `${illness} (%)`,
legend: true
},
marks: [
Plot.geo(nation),
Plot.geo(statemesh, {strokeOpacity: 0.2}),
Plot.dot(brfss_zip, {x: "longitude", y: "latitude", stroke: illness ,strokeOpacity: 0.4, r: 1})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
brfss_zip@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
brfss_zip@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof schemeq = Inputs.select(new Map([
["Blues (sequential, single-hue)", "blues"],
["Greens (sequential, single-hue)", "greens"],
["Greys (sequential, single-hue)", "greys"],
["Purples (sequential, single-hue)", "purples"],
["Reds (sequential, single-hue)", "reds"],
["Oranges (sequential, single-hue)", "oranges"],
["Turbo (sequential, multi-hue)", "turbo"],
["Viridis (sequential, multi-hue)", "viridis"],
["Magma (sequential, multi-hue)", "magma"],
["Inferno (sequential, multi-hue)", "inferno"],
["Plasma (sequential, multi-hue)", "plasma"],
["Cividis (sequential, multi-hue)", "cividis"],
["Cubehelix (sequential, multi-hue)", "cubehelix"],
["Warm (sequential, multi-hue)", "warm"],
["Cool (sequential, multi-hue)", "cool"],
["BuGn (sequential, multi-hue)", "bugn"],
["BuPu (sequential, multi-hue)", "bupu"],
["GnBu (sequential, multi-hue)", "gnbu"],
["OrRd (sequential, multi-hue)", "orrd"],
["PuBuGn (sequential, multi-hue)", "pubugn"],
["PuBu (sequential, multi-hue)", "pubu"],
["PuRd (sequential, multi-hue)", "purd"],
["RdPu (sequential, multi-hue)", "rdpu"],
["YlGnBu (sequential, multi-hue)", "ylgnbu"],
["YlGn (sequential, multi-hue)", "ylgn"],
["YlOrBr (sequential, multi-hue)", "ylorbr"],
["YlOrRd (sequential, multi-hue)", "ylorrd"],
["BrBG (diverging)", "brbg"],
["PRGn (diverging)", "prgn"],
["PiYG (diverging)", "piyg"],
["PuOr (diverging)", "puor"],
["RdBu (diverging)", "rdbu"],
["RdGy (diverging)", "rdgy"],
["RdYlBu (diverging)", "rdylbu"],
["RdYlGn (diverging)", "rdylgn"],
["Spectral (diverging)", "spectral"],
["BuRd (diverging)", "burd"],
["BuYlRd (diverging)", "buylrd"],
["Rainbow (cyclical)", "rainbow"],
["Sinebow (cylical)", "sinebow"]
]), {label: "Color scheme", value: "puor"})
Insert cell
Insert cell
viewof range = Inputs.range([0, 10], {label: "Quantiles", step: 1, value: 8})
Insert cell
Plot.geo(counties_health, {fill: (d) => d.properties[illness]}).plot({
projection: "albers-usa",
width: 960,
height: 600,
color: {
type: "quantile",
n: range,
reverse: reversed,
scheme: schemeq,
label: `${illness} (%)`,
legend: true
}
})




Insert cell
Plot.geo(counties_health, {fill: (d) => d.properties[illness]}).plot({
projection: "albers-usa",
width: 960,
height: 600,
color: {
type: "quantile",
n: range,
reverse: reversed,
scheme: schemeq,
label: `${illness} (%)`,
legend: true
}
})


Insert cell
counties_health = {
const cancer = new Map(health.map(({id, cancer}) => [id, cancer]));
const obesity = new Map(health.map(({id, obesity}) => [id, obesity]));
const diabetes = new Map(health.map(({id, diabetes}) => [id, diabetes]));

const counties = topojson.feature(us, us.objects.counties);
for (const county of counties.features) county.properties.cancer = cancer.get(county.id);
for (const county of counties.features) county.properties.obesity = obesity.get(county.id);
for (const county of counties.features) county.properties.diabetes = diabetes.get(county.id);

return counties;
}
Insert cell
Plot.geo(state_health, {fill: (d) => d.properties['value']}).plot({
projection: "albers-usa",
width: 960,
height: 600,
color: {
type: "quantile",
n: 5,
reverse: false,
scheme: "rdbu",
label: `Label (%)`,
legend: true
}
})

Insert cell
Plot.plot({
projection: "albers-usa",
width: 960,
height: 600,
color: {
type: "quantile",
n: 5,
reverse: false,
scheme: "rdbu",
label: `Label (%)`,
legend: true
},
marks: [
Plot.geo(state_health, {
fill: (d) => d.properties['value'],
}),
// Any additional geo or other marks can be added here
]
})

Insert cell
schemeq
Insert cell
state_health = {
const abortion = new Map(wk_abortion_state.map(({state_code, value}) => [state_code, value]));
const states = topojson.feature(us, us.objects.states);
for (const state of states.features) state.properties.value = abortion.get(state.id);

return states;
}
Insert cell
state_health2 = {
const abortion = new Map(wk_abortion_state.map(({state, value}) => [state, value]));
const states = topojson.feature(us, us.objects.states);
for (const state of states.features) state.properties.value = abortion.get(state.properties.name);

return states;
}
Insert cell
wk_abortion_state = FileAttachment("20wk_abortion_state@1.json").json()
Insert cell
health = (await FileAttachment("brfss@1.csv").csv()).map(({cancer,obesity, diabetes,...rest}) => ({...rest,obesity: + obesity, diabetes:+diabetes, cancer: +cancer}))
Insert cell
us = FileAttachment("us-counties-10m.json").json()

Insert cell
nyc = FileAttachment("nyc@1.json").json()
Insert cell
Plot.geo(nyc, {fill: (d) => d.properties["medianIncome"]}).plot({
projection: { type: "albers", domain: nyc} ,
width: 960,
height: 600,
color: {
type: "quantile",
n: range,
reverse: reversed,
scheme: schemeq,
label: `${'medianIncome'} (%)`,
legend: true
}
})
Insert cell
map = {
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container).setView([37.774, -122.423], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Insert cell

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.
Learn more