Gist f8d07cf02b5687668116

100%

Gist f8d07cf02b5687668116

✓ Published0🌍 Public

Last edited Dec 21, 2015

Created on Dec 21, 2015

This example displays a map of Thuringian districts using topological vector data. It renders the region by loading a TopoJSON file and converting it to GeoJSON with the `topojson` library. The single multipolygon is drawn as an SVG path using `d3.geo.path()` with a default Mercator projection, showing the administrative boundaries in a straightforward black outline against a blank background.

AI-generated description

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example displays a map of Austrian districts using SVG paths generated from TopoJSON data. The code projects geographic coordinates with the Mercator projection and renders boundaries via `d3.geoPath`. It fetches the TopoJSON file from a remote GitHub repository, converts it to GeoJSON features using the `feature` function from topojson, and appends the resulting paths to an SVG. The visualization uses D3 v5, including d3-array and d3-geo modules, with a fixed viewport of 960 by 500 pixels.

Sskambaskamba

79% match

Loading thumbnail…

Gist 7a936b232f3444758c3bfc5775324231

This example shows a static map of Dutch arrondissements (districts) for 2019, rendered as a single SVG path using a Mercator projection. The code loads GeoJSON data from a national georegister Web Feature Service (WFS) endpoint via `d3.json`. It uses `d3.geo.mercator` and `d3.geo.path` to project and draw the geographic features. The visualization is minimal, displaying only the district boundaries without additional styling or interactivity.

FFrieseWoudloper

77% match

Loading thumbnail…

topojson example data

This example displays a map of Spanish municipalities using a TopoJSON file from a Gist by Jn1532. The visualization renders geographic boundaries as vector paths with `d3.geoPath`, while the code also defines multiple data fields for interactive features. The JSON structure contains topology arcs and coordinate arrays, which are processed and drawn through the D3.js library. The rendering approach focuses on the raw geographic data rather than an interactive interface, showing how TopoJSON encodes complex spatial relationships.

JJn1532

76% match

Loading thumbnail…

Gist d214dcd214bbefa0eeb55b6f7d209c33

This visualization shows a TopoJSON map of Dutch administrative regions, rendered as vector shapes defined by coordinate arcs. The data file, named "arrondissementsgebieden.json" (Dutch for "districts areas"), contains geospatial boundary data that is displayed as a static map. The arcs encode the outlines of the regions, and the visualization likely uses D3.js or similar to project and render these coordinates as an interactive or static choropleth-style map, though no styling or color encoding is present in the raw data. The example demonstrates how raw topological data can be parsed and displayed as a map of regional boundaries.

FFrieseWoudloper

76% match

Loading thumbnail…

Gist 88815dae2f6167aea4e388194e61857a

This example shows a choropleth-style map of Dutch police districts, with hover interactions that reveal the district name in a tooltip. The visualization loads geographic boundary data from a national geo-service via WFS, processes it with Turf.js to rewind polygon coordinates, and renders it as SVG paths using D3’s geoMercator projection and geoPath. Hovering a district turns it orange and displays a floating label, while mouseout fades the tooltip away. The code relies on D3 v3 for SVG manipulation and event handling, with Turf.js for geometry correction before projection.

FFrieseWoudloper

76% 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

75% match

Loading thumbnail…

Gist b62153d4a07669c8305bc65ebaf7f381

This visualization shows a map of Dutch municipalities (gemeenten) rendered from a TopoJSON topology file. The SVG-based map uses D3 v4 to draw geographic boundaries, with each municipality outlined as individual paths. The animation animates the paths when the visualization loads, drawing the boundaries in sequence. The data source is a TopoJSON file containing the geometry of the Dutch municipal divisions, which is loaded and converted for display. The visualization highlights the boundaries between municipalities across the Netherlands, with the animated drawing effect emphasizing the shapes and spatial relationships of the regions.

FFrieseWoudloper

75% match

Loading thumbnail…

DV2_6.2_Regional Map

This example displays a choropleth-style regional map of Swedish counties, rendered as an SVG using React and D3 v5. It shows the geographic boundaries of each county filled with a teal color, while interior borders are highlighted with a lighter stroke. The code loads TopoJSON data from a GitHub gist, converts it to GeoJSON using `topojson.feature` and `topojson.mesh`, and projects it with `d3.geoMercator` fitted to the viewport via `projection.fitExtent`. Paths are drawn using the `d3.geoPath` generator.

NNagateja99

75% match