Skip to main content
SimilarExport ZIP
100%

Karte Berlin

✓ Published0🌍 Public
CChrisHeinirch
Last edited Jul 6, 2022
Created on Dec 8, 2021

This example shows a map of Berlin’s districts, rendered as outlined polygons on a blank SVG canvas. The visualization uses the `geoConicEqualArea` projection and `geoPath` from D3 to convert GeoJSON features into SVG paths. Data is loaded asynchronously via `d3.json` from a GitHub-hosted GeoJSON file provided by Funke Interaktiv. The React component structure manages state and renders the map, with styling applied through CSS to define stroke and fill for the district boundaries.

AI-generated description

Eine Karte der Berliner Bezirke im .svg Format auf Grundlage von Funktinteraktiv

MIT Licensed

Similar vizzes

Loading thumbnail…

test

This example visualizes a single point feature from a GeoJSON file, marking the location of Friedrichstraße in Berlin. The map uses D3’s `d3.geoPath` to render geographic outlines, while the point itself is drawn with SVG markers. The feature’s properties include an image carousel with historical photos, toggled by user interaction. The code relies on D3’s data binding and event handling to update the displayed images, and the geographic coordinates are parsed from string values in the GeoJSON. The rendering approach uses a standard Canvas or SVG projection, though the specific projection library is not shown. The source is a gist by CliffordAnderson, with data embedded directly in the file.

CCliffordAnderson
76% match
Loading thumbnail…

My map

This example presents a choropleth-style map of a single region, likely a state, rendered as a filled polygon in a light blue SVG container. The map uses the Mercator projection and d3.geoPath to draw geographic boundaries from a GeoJSON file, while d3.csv loads city data for potential point markers. The visualization is built with D3 v5 and styled as a responsive SVG using a viewBox, with a custom CSS class for layout. The code demonstrates loading external data files and projecting them onto a large canvas.

Aatree-rohit
75% match
Loading thumbnail…

Europe Map

This example displays a map of Europe rendered as SVG paths, with each country filled in white and outlined in grey. The visualization uses a Mercator projection centered on coordinates [13, 52] and scales the map to fit a 600×500 viewport. The code loads GeoJSON feature data from a remote GitHub gist, then applies `d3.geoPath` to convert the geographic coordinates into SVG path data. React 16 and D3 v5 work together, with D3 selecting the body element to append the SVG directly rather than mounting through React components.

Kkottenikhil
75% match
Loading thumbnail…

USA Map

This visualization displays a map of Portland neighborhoods rendered as an SVG using React and D3. The code employs `geoConicEqualArea` for projection and `geoPath` to draw each neighborhood boundary from TopoJSON data loaded via `useData`. The specific geospatial data comes from a gist containing Portland neighborhood polygons, with styling applied through CSS classes for the path strokes. The example demonstrates integrating React state management with D3’s geographic utilities to produce a clean, minimal choropleth-style map.

LLakshmiVandanaNunna
74% match
Loading thumbnail…

react-d3-world-map

This example displays a world map using React and D3, rendering countries and their interiors as SVG paths with a teal fill and red boundary strokes. It uses the `geoEqualEarth` projection and `geoPath` from D3 to generate shapes, while loading geographic data from the world-atlas TopoJSON dataset via the `json` and `feature`/`mesh` functions. The visualization is built with React components, with the map embedded in a fixed-size SVG viewport.

GGabriel Dias Menezes
73% match
Loading thumbnail…

BeiJing

This example visualizes the administrative districts of Beijing using a GeoJSON dataset. It renders the district boundaries as SVG paths on a 1600x800 canvas, with each polygon outlined in black and left unfilled. The visualization uses D3.js v6, specifically leveraging `d3.geoNaturalEarth1()` for map projection, `d3.geoPath()` for converting geographic coordinates to SVG path data, and `d3.json()` for loading external data. The code also includes commented-out alternatives for other projections like Mercator and Mollweide, as well as a disabled label overlay.

Vvivianaaai@qq.com
72% match
Loading thumbnail…

Europe Map

This example visualizes the countries of Europe as a static SVG map using a Mercator projection centered on the continent. The code loads GeoJSON feature data via `d3.json` and renders each region as a `path` element using `d3.geoPath` with the projection. React and D3 v5 are used together to manage the document, while TopoJSON is loaded but not directly applied in the visible logic. Country boundaries appear as grey strokes with white fills, set through SVG attributes.

Ggayathrikavya
72% match
Loading thumbnail…

map

This example displays a map of U.S. counties as unfilled, stroked polygons on a blank background, all rendered as SVG paths. The map shows the geographic boundaries without additional fill or data encoding. The code uses React with D3 v5 functions including `d3.geoAlbersUsa` for the projection, `d3.geoPath` to generate the path data, and TopoJSON's `feature` function to convert topojson data into GeoJSON features. Data loads asynchronously via `d3.json` from a remote URL, and each feature is mapped to an SVG `<path>` element with a thin teal stroke.

CChase Hall
72% match