geoCircle in d3.v4 (geoOrthographic)

geoCircle in d3.v4

This example visualizes concentric geo-circles radiating from two fixed points on a world map: the North Pole and Washington, D.C. It uses `d3.geoCircle()` to generate spherical circles at increasing radii, with `d3.geoPath()` and an equirectangular projection to render them as SVG paths. The code draws the circles in red and blue before overlaying landmasses from TopoJSON. It demonstrates how d3.v4’s geographic circle generator computes geodesic rings, with radii ranging from 5 to 85 degrees. The map is rendered at 960×500 pixels using D3’s `d3.geoEquirectangular` projection.

95% match

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.

80% match

Circles on a map

This example displays a natural Earth projection world map with interactive zooming and panning, where each country is rendered as a light green path that turns red on hover. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` for map geometry, with country shapes loaded as TopoJSON data from the world-atlas package and names joined via TSV metadata. The visualization demonstrates modular ES6 imports, including `topojson.feature` for converting TopoJSON to GeoJSON, and an SVG-based rendering approach with `d3.zoom` for user interaction.

MMauradion

78% match

Circle on a Map

This example visualizes global population data by overlaying semi-transparent circles on a natural Earth projection map. The circles are sized using `d3.scaleSqrt` based on 2018 population figures, and hovering over countries reveals their population via a tooltip. The visualization uses `d3.geoPath` with `geoNaturalEarth1` for map projection, `d3.zoom` for panning and zooming, and includes both a color legend and a size legend built from `d3.scaleOrdinal` and `d3.scaleSqrt`. Data is loaded from a CSV file and TopoJSON world atlas using `d3.csv` and `d3.json`.

Ggabcoderboi

This Is a Globe in d3.v4

A continuously rotating orthographic projection of the world map, rendered as a spinning globe on a Canvas. The animation uses `d3.geoOrthographic` with a clip angle to show only the visible hemisphere, while `d3.geoPath` draws the land features from a TopoJSON world dataset. The rotation is driven by `d3.timer`, updating the projection’s rotation angle based on elapsed time. A static circle outlines the globe’s edge, with the map redrawn and cleared each frame.

Circles on a Map

This visualization displays a world map with semitransparent circles overlaid on each country, sized proportionally to population data from 2018. The map renders using d3.geoNaturalEarth1 projection and d3.geoPath, while circle sizes are scaled with d3.scaleSqrt. Zooming is enabled via d3.zoom. The code includes color and size legends built with reusable functions, and loads data from a CSV and TopoJSON world atlas using d3.csv and topojson.feature.

NNeepaB

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.

Circles on a Map

This example displays two choropleth-style encoded variables on a world map. Country polygons are colored green or red based on a 2019 property, while circles sized with a square-root scale represent 2018 population data projected at each country’s centroid. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `geoCentroid` to render SVG paths and circles, with TopoJSON from the visionscarto-world-atlas source. A zoom behavior from D3 enables interactive panning and scaling of the entire map group.

Zzenoe