Skip to main content
SimilarExport ZIP
100%

fernwaerme2

✓ Published0🌍 Public
AAnniWis
Last edited Feb 27, 2018
Created on Feb 26, 2018

This example visualizes the heat supply network of Hamburg’s districts using a custom SVG map. The choropleth colors encode district-level data from the GeoJSON file `bezirke_ohne_neuwerk.json`, which is projected and rendered with D3 v4. The map highlights the seven districts (Bezirke) of Hamburg, excluding Neuwerk, using a color scale to represent the district attribute values. The visualization is built with Blockbuilder.org and relies on D3’s geographic projection and SVG path generation to draw the district boundaries, with tooltips or legends implied to support reading the quantitative variation.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fernwaerme

The visualization displays the number of buildings and those connected to district heating across Hamburg's seven boroughs using a bubble chart. Each circle is positioned by geographic coordinates (x, y) and scaled by total building count, with the data loaded from a CSV file. The SVG rendering uses D3 v4 linear scales to map coordinates and radius, and the chart is generated entirely client-side with code adapted from Blockbuilder.

AAnniWis
87% match
Loading thumbnail…

Karte Berlin

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.

CChrisHeinirch
71% 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
71% 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
69% match
Loading thumbnail…

Gist f8d07cf02b5687668116

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.

HHoffmannP
68% match
Loading thumbnail…

Arrondissementsgebieden

This example visualizes Dutch judicial districts as interactive map shapes, highlighting each region on hover. It shows administrative boundaries sourced from a national geodata WFS service, with tooltips displaying district names. The code uses D3 v4’s `d3.geoPath` and `d3.geoMercator` projection, alongside Turf.js to rewind GeoJSON polygons for correct rendering. SVG paths change fill color on mouseover, while a custom HTML tooltip follows the cursor, all within an animated, zoomable viewport.

FFrieseWoudloper
68% match
Loading thumbnail…

Schland Map Example

This map of Germany uses the D3.js library to visualize geographic and point data from a TopoJSON file. The visualization displays Germany's administrative boundary as a filled polygon, with city locations marked as circles positioned via a geographic projection. The map is rendered using SVG, with the GeoJSON data converted through the TopoJSON plugin to draw the country outline and plot 39 city points. The example demonstrates how to combine geometric and point-based datasets within a single D3 visualization, using the projection to translate coordinates and scale for display.

EEE2dev
67% match
Loading thumbnail…

arrondissementen zonder turf

This example shows a choropleth-style map of Dutch police districts (arrondissementen) from 2019, highlighting each region on hover with an orange fill and a text tooltip that reveals the district’s name. The visualization relies on the D3 v4 library, using `d3.geoMercator` for projection and `d3.geoPath` to render the GeoJSON features fetched from the Dutch national georegister WFS service. The tooltip appears near the cursor via D3’s event handling, while the SVG paths are drawn with a light gray fill and white strokes, with hover interactions triggering the color change and tooltip display.

FFrieseWoudloper
67% match