map = addTooltips(Plot.plot({
projection: {type: "azimuthal-equidistant", domain: data, rotate:[69, -45]},
marks: [
Plot.geo(
data,
{
fill: (d) => d.properties[key],
stroke: "#888",
strokeWidth: 0.2,
title: d => d.properties.title || 'demo\ntitle'
}
),
],
color: {
range: range,
unknown: "#ddd",
type: "threshold",
label: label,
legend: true,
width: width / 3,
domain: domain
}
}), {fill:"crimson", stroke: "black"})
mywidth = width
label = ""
range = d3.schemeRdYlGn[domain.length+1].toReversed()
domain = {
const domains = {
density: [1, 10, 25, 50, 100, 250, 500, 1000, 2500, 5000],
DDI: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90],
INFA: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90],
SE: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
};
return domains[key];
}
demo = addTooltips(Plot.plot({
projection: {type: "azimuthal-equidistant", domain: data, rotate:[69, -45]},
marks: [
Plot.geo(
data,
{ fill: (d) => d.properties.density,
stroke: '#888',
strokeWidth: .2,
title: (d) => d.properties.title
}
)
],
style: {
backgroundColor: "#ddd",
width: width / 2,
},
color: {
range: d3.schemeRdYlGn[11].toReversed(),
unknown: "#ddd",
type: "threshold",
label: "population density (individuals/sq-mile)",
legend: true,
width: width / 2,
domain: [1, 10, 25, 50, 100, 250, 500, 1000, 2500, 5000]
}
}), {fill:"crimson", stroke: "black"})
dims = {
const svgs = d3.select(demo).selectAll("svg").nodes();
const dims = svgs.map(d => {
const svg = d3.select(d);
const width = svg.attr("width");
const height = svg.attr("height");
const viewBox = svg.attr("viewBox")
const fontSize = svg.attr("font-size");
return [width, height, viewBox, fontSize];
});
return dims;
}
key = {
let key = 'density';
const d = data.features[0].properties;
key = d.DDI ? 'DDI' : key;
key = d.INFA ? 'INFA' : key;
key = d.SE ? 'SE' : key;
return key
}
data = {
const data = await FileAttachment("pop.json").json();
data.features = data.features.map(d => { d.properties.title = d3.format(",d")(d.properties.density); return d;});
return data
}
Plot = require("@observablehq/plot")
import {addTooltips} from "@mkfreeman/plot-tooltip"
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.
