Skip to main content
SimilarExport ZIP
100%

coldcases-trial

✓ Published0🌍 Public
KKikkolatsch
Last edited Aug 4, 2021
Created on Aug 3, 2021

A geo-voronoi diagram maps custom locations from a CSV file as red points on an orthographic globe projection, with semi-transparent polygons filling the space between them. The visualization uses d3-geo-voronoi to compute the Voronoi cells, d3.geoPath for rendering the projected shapes, and d3-tip for hover labels showing name and population data. Country boundaries from the world-atlas TopoJSON are overlaid, and the sphere is filled with a solid blue color. The code also applies hexbin preprocessing and random jitter to site coordinates.

AI-generated description

Quick prototype showing custom locations. With help from Curran Kelleher, Jonah Adkins, and Alec Burch.

This is heavily based on a recreation by Philipe Rivière, with d3-geo-voronoi, of Jason Davies’s magistral demo World Airports Voronoi. Lightly modified to show custom locations instead of airports.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 trials (fork of Cities on a Globe)

This interactive globe displays cities with populations over 100,000 as red circles, using an orthographic projection with drag-to-rotate and zoom capabilities. The visualization renders country boundaries from TopoJSON world-atlas data (110m resolution while dragging, 50m when stationary) and city locations from a CSV file, with circle sizes scaled by population. Tooltips show city names and populations via d3-tip. The implementation uses d3.geoOrthographic, d3.geoPath, d3.drag, and d3.zoom, filtering out cities on the hidden hemisphere based on their projected coordinates.

KKikkolatsch
75% match
Loading thumbnail…

globe-test-02

This example shows the locations of reported monoliths on a rotating globe, plotting red circles at each site with hover tooltips displaying the location name. Using an orthographic projection with d3.geoPath, the visualization renders country boundaries from the world-atlas TopoJSON datasets, switching between 110m and 50m resolutions during drag interactions. The code leverages d3.drag for rotation, d3.scaleSqrt and d3.schemeSet3 for sizing and colors, and d3-tip for interactive popups. Data comes from the included monoliths.csv file.

KKikkolatsch
74% match
Loading thumbnail…

geoVoronoi triangles()

This example visualizes a spherical Voronoi triangulation of 100 random points, with each triangle filled by a random hue and the original sites marked as white dots. The orthographic projection rotates continuously to reveal the globe’s surface. Built with d3-geo-voronoi and d3-delaunay, it uses d3.geoPath and d3.geoOrthographic to render SVG paths, while d3.interval drives the animation by updating the projection’s rotation every 50 milliseconds. The points are generated as a GeoJSON FeatureCollection with coordinates spanning longitude 0–360 and latitude from -90 to 90.

PPhilippe Rivière
74% match
Loading thumbnail…

globe-test-02

This globe visualization displays city population data on an interactive, rotatable Earth. It shows both low-resolution landmasses during drag interactions and high-resolution country boundaries when idle, with red circles sized according to population. Built with d3.geoPath and d3.geoOrthographic, it uses topojson for country features and d3-tip for hover tooltips. City data comes from a local monoliths.csv file, while world geometries are loaded from world-atlas packages.

KKikkolatsch
73% match
Loading thumbnail…

geoVoronoi circumcircles

This example visualizes the Voronoi tessellation of a sphere using 100 random points, rendered as colored triangles with white links and site markers. Hovering over a triangle reveals its circumcircle, drawn as a semi-transparent circle with dashed rays connecting the circumcenter to each vertex. Built with D3 v5 and the d3-geo-voronoi plugin, it uses d3.geoPath with an Equal Earth projection to draw the geometry in SVG, and d3.geoCircle to construct the interactive circumcircles.

PPhilippe Rivière
73% match
Loading thumbnail…

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp
73% match
Loading thumbnail…

ICE08 11604571

This example displays a choropleth-style world map rendered as an SVG, with countries shown in a light color against an olive-green sphere background. The visualization uses D3 v5's `geoEquirectangular` projection and `geoPath` to generate the map geometry from TopoJSON data loaded from the world-atlas dataset. Country boundaries are drawn as individual path elements, and hovering highlights the selected country in cyan, using CSS transitions on the fill property. The implementation leverages D3 selections and data joins to bind country features to paths, with a static projection of the globe.

KKiran Jyothi Bodduluri-11604571
72% match
Loading thumbnail…

ICE-08 11603435

This visualization displays a world map using an equirectangular projection, with countries rendered as black-filled paths against a blue ocean sphere. It loads geospatial data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature()` method from TopoJSON. The D3 v5 code employs `geoEquirectangular()`, `geoPath()`, and `.projection()` to generate the map geometry. Countries change to a red color on hover through a CSS `:hover` rule, and the SVG output is fixed at 960 by 500 pixels.

0057SatvikDamera
72% match