Day 21: RasterDay 10: North AmericaDay 30: My favoriteDay 8: AfricaDay 14: EuropeDay 9: HexagonsTurkey vulture migrations in South AmericaDay 3: PolygonsDay 18: AtmosphereDay 29: PopulationDay 2: LinesDay 28: Is this a chart or a mapDay 23: 3DDay 11: RetroDay 16: OceaniaDay 13: ChoroplethProjection importsDay 6: AsiaDay 7 - NavigationDay 4: Bad mapDay 17: FlowDay 1: Points
Day 20: Outdoors
addTooltips(
Plot.plot({
width: 1000,
insetBottom: 40,
insetTop: 70,
projection: "albers",
marginBottom: 20,
marks: [
Plot.sphere({fill:"black", opacity: 1}),
Plot.geo(nation, {stroke:"#06c258",fill: "#97704f", opacity: 1, clip: "frame" }),
Plot.geo(states, {stroke: "black", clip: "frame", strokeOpacity: 1 }),
Plot.geo(states, {fill: d=> "#008080", opacity: 1, stroke: "black", title: (d)=> (d.properties.name) + "\n" + d.properties.common_name, filter: d=>d.properties.categoryemoji == category, fillOpacity: 2}),
Plot.text(['Is your State Amphibian\na Frog or a Salamander?'],{x:-84, y: 53, dx: 20, dy: 20, fontSize: 35, fill: "#008080", opacity: .8, lineHeight: 1.2, lineWidth: 50, fontStyle: "oblique", fontFamily: "italic", fontWeight: "bold"}),
Plot.text(['Data: wikipedia.org | Design: Deepsha Menghani\nThreads: @IandLoveandData | Mastodon: @Deepsha'],{x:-104, y: 24, dx: -180, dy: -20, fontSize: 15, fill: "gray", opacity: .7, lineHeight: 1.2, fontStyle: "oblique"}),
Plot.text(['🐸 - Frog'],{x:-104, y: 30, dx: -320, dy: -20, fontSize: 25, fill: "#008080", opacity: 1, lineHeight: 1.2, textAnchor: "start"}),
Plot.text(['🦎 - Salamander'],{x:-104, y: 30, dx: -320, dy: 25, fontSize: 25, fill: "#008080", opacity: 1, lineHeight: 1.2, textAnchor: "start"}),
Plot.text(
states.features,
Plot.centroid({
text: (d) => d.properties.emoji,
fontSize: 20,
textAnchor: "middle",
stroke: "white",
fill: "red",
title: (d) => d.properties.name + "\n" + d.properties.common_name,
filter: d=>d.properties.categoryemoji == category
})
)
]
}),
{ fill: "red", opacity: 0.5, "stroke-width": "4px", stroke: "red"}
)
addTooltips(
Plot.plot({
inset: 40,
projection: "albers",
marginBottom: 20,
width: 600,
//colors: [{type: "categorical", range: ("white", "black")}],
marks: [
Plot.sphere({fill:"lightblue", opacity: .4}),
Plot.geo(nation, {stroke:"black",fill: "lightpink", opacity: .4, clip: "frame" }),
Plot.geo(states, {stroke: "gray", clip: "frame", strokeOpacity: 1 }),
Plot.geo(states, {fill: d=> d.properties.category, opacity: 1, stroke: "black", title: (d)=> (d.properties.name) + "\n" + d.properties.common_name, filter: d=>d.properties.categoryemoji == category, fillOpacity: 2}),
Plot.text(
states.features,
Plot.centroid({
text: (d) => d.properties.emoji,
fontSize: 20,
textAnchor: "middle",
stroke: "white",
fill: "red",
title: (d) => d.properties.name + "\n" + d.properties.common_name,
filter: d=>d.properties.categoryemoji == category
})
)
]
}),
// Set styles for the hovered element
{ fill: "red", opacity: 0.5, "stroke-width": "4px", stroke: "red"}
)
state_amphibians@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
states
function mergeData2() {
states.features = states.features.map(feature => {
const matchedState = state_amphibians2.find(row => row.State == feature.properties.name);
if (matchedState) {
feature.properties.category = matchedState.category;
feature.properties.emoji = matchedState.emoji;
feature.properties.categoryemoji = matchedState.categoryemoji;
feature.properties.common_name = matchedState.common_name;
}
return feature;
});
}
mergeData2()
import {us} from "ff0a83b495637684"
import {states} from "ff0a83b495637684"
import {statemesh} from "ff0a83b495637684"
import {nation} from "ff0a83b495637684"
import {addTooltips} from "@mkfreeman/plot-tooltip"
states
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.
