Public
Edited
May 4, 2024
filteredData
Type Table, then Shift-Enter. Ctrl-space for more options.
{
selectName;
selectNameCheckBox;
clusterMaxZoom;
reloadButton;
map.on("load", () => {
refreshMapBox();
});
}
map = {
selectName;
selectNameCheckBox;
clusterMaxZoom;
reloadButton;
let center = [d3.mean(data, (d) => d.lon), d3.mean(data, (d) => d.lat)],
map = new mapboxgl.Map({
container,
center,
zoom: 3,
maxPitch: 80,
// style: "mapbox://styles/listenzcc/cky2j3ywf13yi15nuybjj4kem"
style: "mapbox://styles/mapbox/light-v9"
});
return map;
}
mapboxgl = {
const gl = await require("mapbox-gl");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1IjoibGlzdGVuemNjIiwiYSI6ImNrMzU5MmpxZDAxMXEzbXQ0dnd4YTZ2NDAifQ.GohcgYXFsbDqfsi_7SXdpA";
const href = await require.resolve("mapbox-gl/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
aspect = 3 / 4
height = width * aspect
namesWithCount = {
let names = [...new Set(data.map((d) => d.name))].map((name) => {
let count = data.filter((d) => d.name === name).length;
return Object.assign({}, { name, count });
});
names = [{ name: "--", count: d3.sum(names, (d) => d.count) }].concat(names);
names.map((d) => (d.name = `${d.name} (${d.count})`));
names.sort((a, b) => b.count - a.count);
return names;
}
namesWithCount
Type Table, then Shift-Enter. Ctrl-space for more options.
filteredData = {
let filteredData = data.filter(
(d) =>
selectName.startsWith("--") |
(d.name === selectName.split(" ")[0]) |
(selectNameCheckBox.find(
(n) => (n.split(" ")[0] === d.name) | n.startsWith("--")
) !==
undefined)
);
let name,
color,
i = 0,
colorBox = {};
filteredData.map((d) => {
name = d.name;
color = colorBox[name]
if (color === undefined) {
color = colors[i % colors.length]
colorBox[name] = color
i += 1;
}
d.color = color;
});
return filteredData;
}
dataGeoJson = {
let features = filteredData.map((d) => {
let properties = d,
coordinates = [d.lon, d.lat],
geometry = { type: "Point", coordinates };
return { type: "Feature", properties, geometry };
});
return { type: "FeatureCollection", features };
}
colors = d3.schemeCategory10
data = {
let split = (string) => {
string = string.slice(1, string.length - 2);
string = string.replaceAll("'", "");
return string.split(",").map((d) => d.trim());
};
let nameTable = [];
table1.map((d) => {
let { title, names, lat, lon, num } = d;
split(names).map((name) => {
let info = table2.find((d) => d.name === name),
{ raw, start, stop, age, dynasty } = info;
nameTable.push({
raw,
location: title,
name,
start,
stop,
age,
dynasty,
lat,
lon
});
});
});
nameTable = nameTable.sort((a, b) => a.start - b.start);
return nameTable;
}
data
Type Table, then Shift-Enter. Ctrl-space for more options.
table-1@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
table-2@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
d3 = require("d3")
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.
