fresh block

100%

✓ Published0🌍 Public

Last edited Jun 6, 2020

Created on Jun 6, 2020

This example displays a set of geographic shapes from a JSON file on a Mercator projection. It uses D3 v5 to construct an SVG and render polygons with a `d3.geoPath`, projecting them with a `d3.geoMercator` centered on Australia. The code filters the raw data for entries with a `shape` field, parses them with `topojson`, and applies a teal fill with a dark slate stroke.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A map of world regions renders as a choropleth using a Mercator projection, with each country or territory filled by a distinct categorical color. The visualization loads a TopoJSON file and converts it to GeoJSON with the `topojson.feature` API, then fits the projection to the data using `projection.fitSize`. D3 v5’s `d3.geoPath` generates the SVG paths, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns unique colors to each feature.

GGerardoFurtado

83% match

Loading thumbnail…

fresh block

This example visualizes a map of the United States using the D3.js library and a TopoJSON dataset of state boundaries. The visualization renders the geographic outlines of U.S. states from the USA.json TopoJSON file, using the d3.geomap plugin to project and display the map. The page is styled full-screen with an SVG element that fills the viewport. The key visual encoding is the use of state polygons with names and IDs, which enables interactive selection and highlighting of individual states, though no interaction code is included in this basic setup. The design is minimal, focusing on the clean presentation of state shapes in a neutral white background.

CCurran Kelleher

76% match

Loading thumbnail…

fresh block

This example shows a spinning orthographic globe with continent outlines, rendered as SVG paths. The map rotates continuously using a `d3.timer` that updates the projection’s rotation, while `d3.geoPath` redraws the continent geometry each frame. The globe is styled with a light blue background and uses GeoJSON country data loaded from a remote URL. Although a CSV file with city pollution data is included, it is not referenced in the code. The visualization relies solely on D3 v4’s geographic and timer utilities.

CCanaramour

76% match

Loading thumbnail…

fresh block

This example presents an interactive map of the United States that layers OpenStreetMap raster tiles over a vector outline of the country. Users can pan and zoom, which triggers the loading of new map tiles and the redrawing of the state boundaries. The visualization is built with D3 v4, using its geographic projection and path modules alongside the d3-tile and d3-zoom libraries. The vector data originates from a local US GeoJSON file, while the background imagery is fetched from the OpenStreetMap tile server.

AAnaMal08

74% match

Loading thumbnail…

fresh block

This example shows a spinning globe visualization that rotates continuously to display world continents. The orthographic projection rotates around the vertical axis using `d3.geoOrthographic()` and `d3.geoPath`, with the rotation angle driven by `d3.timer` based on elapsed time. The globe renders country boundaries from a GeoJSON file loaded via `d3.json`, while the SVG background is styled with a light blue color. The code uses D3 v4 for all geographic projections, path rendering, and animation timing, with no additional libraries or interactive elements.

CCanaramour

74% match

Loading thumbnail…

fresh block

A rotating showcase of many map projections, this visualization cycles through a menu of options at a fixed interval, displaying the Netherlands as a shaded landmass within a graticule grid on a spherical outline. It uses D3 v3 with `d3.geo.path` to render SVG paths and fades between projections using TopoJSON data from `NLD_adm0.json`. Manually selecting a projection from the dropdown stops the automatic rotation.

MMicrobie

73% match

Loading thumbnail…

Untitled

A world map rendered in the Mercator projection displays country boundaries as grey paths with thin white strokes. The example demonstrates loading GeoJSON-derived topology data from a local `world-110m2.json` file and converting it to SVG paths using `d3.geoPath`. The map is centered and rotated with `d3.geoMercator` and `projection.rotate`, and country features are extracted via `topojson.feature` from the TopoJSON library. The page uses D3 v7 to fetch the data asynchronously with `d3.json` and append the resulting paths to an SVG container.

Sspace-captain96

73% match

Loading thumbnail…

Mercator Projection

This example displays a world map using a Mercator projection, with each country rendered as a gray shape outlined in white. The map is built with the D3.js version 3 library, using `d3.geo.mercator()` to define the projection and `d3.geo.path()` to convert GeoJSON geometries into SVG paths. The geographical data comes from a `countries.json` file containing feature collections loaded via `d3.json()`. The resulting visualization, rendered in an SVG element, demonstrates the classic distortion of landmasses toward the poles inherent to this projection method.

PPatrick Wojda

73% match