Public
Edited
Oct 26, 2023
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Supercluster = require("https://unpkg.com/supercluster@8.0.1/dist/supercluster.min.js")

// We could also import from esm.run:
// Supercluster = (await import("https://esm.run/supercluster")).default
Insert cell
Insert cell
index = {
let clustered = new Supercluster(); // There are a few options
let index = clustered.load(cities);
return index;
}
Insert cell
Insert cell
clusters = {
let bbox = [-125, 24, -66.5, 50];
let zoom_level = 3;
return index.getClusters(bbox, zoom_level);
}
Insert cell
Insert cell
clusters_and_cities = d3.group(clusters, (o) => o.properties.cluster)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function geo_bbox(transform, cylindrical_proj) {
// Width and height, as specified by the SVG's viewBox
let w = 900;
let h = 530;

// Apply the inverse of the transform to obtain the
// corners of the rectangle in pixels.
let lower_left_x = -transform.x / transform.k;
let lower_left_y = (h - transform.y) / transform.k;
let upper_right_x = (w - transform.x) / transform.k;
let upper_right_y = -transform.y / transform.k;
let lower_left = [lower_left_x, lower_left_y];
let upper_right = [upper_right_x, upper_right_y];

// Aply the inverse of the projection to obtain
// the geographic coordinates of the corners.
let geo_lower_left = cylindrical_proj.invert(lower_left);
let geo_upper_right = cylindrical_proj.invert(upper_right);
return [...geo_lower_left, ...geo_upper_right];
}
Insert cell
Insert cell
Insert cell
auto_zoom_map.zoom(in_or_out)
Insert cell
// The city data is stored as a CSV file.
// We've got to read that file and convert the resulting array of
// objects to a valid array of GeoJSON points.

cities = {
let cities = await FileAttachment("cities5000.csv").csv({ typed: true });
cities = cities.filter(
(c) => c.RegionName != "Alaska" && c.RegionName != "Hawaii"
);
cities = cities.map((c) => ({
type: "Feature",
properties: { ...c },
geometry: { type: "Point", coordinates: [c.Longitude, c.Latitude] }
}));
return cities;
}
Insert cell
states = {
let states = await FileAttachment("contiguous_states.json").json();
return topojson.feature(states, states.objects.contiguous_states);
}
Insert cell
tippy_style = html`<div style="display: hidden">
<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}"></div>`
Insert cell
tippy = require("tippy.js@6")
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