Glebenator

@Glebenator·6 public vizzes

us test

This example displays a map of the United States with its states rendered as blue, interactive SVG paths that turn darker on hover. A graticule grid and a gray sphere outline provide geographic context, and the map supports pan and zoom via d3.zoom. The visualization uses d3.geoPath with a null projection to draw raw coordinates from TopoJSON data loaded from the us-atlas package, processed through topojson.feature. Styles are defined in CSS, and the code imports the d3 and topojson libraries.

Apr 2, 2021

Loading thumbnail…

World Map

This interactive world map displays global countries with a three-dimensional orthographic projection, allowing users to drag the globe to rotate it and click individual countries to switch between projections. The visualization uses D3.js with `d3.geoPath` and `d3.geoProjection` for rendering, TopoJSON for country boundaries, and world-atlas data. A graticule overlay shows latitude and longitude lines, while a `d3.drag` handler enables rotation and `d3.zoom` supports scaling. Country names are linked via TSV data, and hover effects highlight selected regions.

Apr 2, 2021

Loading thumbnail…

D3 map drag demo

This demo displays an interactive orthographic globe where users can click and drag to rotate the Earth, with country boundaries rendered as SVG paths and tooltips revealing country names on hover. The sphere, graticule, and countries are drawn using d3.geoPath with a d3.geoOrthographic projection, while rotation is handled manually through d3.drag events that adjust the projection’s rotate values. Country geometries come from the world-atlas TopoJSON dataset (50m resolution) paired with a TSV file for name lookups, and the visualization also supports d3.zoom for additional transformations.

Apr 2, 2021

Loading thumbnail…

Drawing a box

This interactive visualization displays a graticule, country boundaries, and a red rectangular region on an orthographic projection of the Earth. Users can drag to rotate the globe, using the d3.drag module to adjust the projection’s rotation, revealing the selected bounds. Built with d3-geo-projection.v3, it renders via SVG using d3.geoPath and d3.geoGraticule, with country data sourced from the world-atlas TopoJSON. The d3.zoom module enables panning and scaling of the entire graphic.

Mar 5, 2021

Loading thumbnail…

experiments

This example shows a world map with a graticule and a rectangular polygon overlay, rendered as SVG paths. Users can drag to rotate the projection and zoom to rescale the view. It uses `d3.geoEquirectangular` with `d3.geoClipPolygon` to clip the sphere, `d3.geoGraticule` for the grid, and `d3.geoPath` for rendering. Country boundaries come from TopoJSON data in the world-atlas package, with drag handling via `d3.drag` and zoom via `d3.zoom`. The polygon overlay is outlined via `arc.outline()`.

Mar 5, 2021

Loading thumbnail…

Fork of World Map

This interactive map visualization displays world countries and U.S. states using a selectable orthographic or Mercator projection. Users can drag to rotate the globe and click on countries to switch between projections, with a special case for the United States. Built with D3 v6 and d3-geo-projection, it renders geographic features via d3.geoPath, uses topojson for data parsing, and incorporates d3.drag and d3.zoom for interaction. The visualization loads world and U.S. atlas TopoJSON data from unpkg, with animations applied via D3 transitions.

Feb 23, 2021