Bar Chart

Groninger gemeenten

The visualization displays the municipalities of the Dutch province of Groningen as a static choropleth-free map. It shows the boundaries and spatial arrangement of twelve named gemeenten, including Groningen, Delfzijl, and Oldambt. The map uses the d3.geoMercator projection and d3.geoPath to render GeoJSON features fetched from an ArcGIS REST service (ESRI’s Levende Atlas), with the projection fitted to the viewport via projection.fitSize. The SVG is sized responsively with a viewBox attribute. No interactive elements or color encodings are present beyond the default black vector paths.

Groninger gemeenten

The visualization displays the municipalities of the Dutch province of Groningen as an interactive SVG map. It uses D3.js v4 to render geographic paths from GeoJSON data, while Turf.js rewinds the polygon coordinates to ensure correct orientation. The map is projected with `d3.geoMercator` and fitted to the viewport using `projection.fitSize`. Hovering over a municipality triggers a tooltip with the municipality name, and the `path:hover` CSS rule highlights the area in orange. Boundary data originates from the PDOK WFS service, fetched via a URL with a CQL filter for selected gemeenten.

Creating SVG Elements from Data

Four horizontal bar charts show grant application data for events in the Province of Groningen from 2011 to 2014. Each chart displays a different metric—total applications, approved, rejected, and approval percentage—with bars scaled by the corresponding value and tooltips revealing exact numbers and years. The code uses d3.csv to load the data, then appends SVG rectangles via data joins, setting bar widths proportionally to values and using SVG title elements for hover details. The data source is the evenementen_totalen.csv file, with each chart sized to 180 by 100 pixels.

Creating SVG Elements from Data

This example visualizes the total number of grant applications for sports and cultural events in the Province of Groningen from 2011 to 2014, using a horizontal bar chart. It shows the yearly counts as dark blue bars with hover effects and tooltips. The visualization is built with D3.js v3, using `d3.scale.linear` and `d3.scale.ordinal` for scales, `d3.svg.axis` for axes, and SVG `rect` elements for the bars. Data is loaded from a CSV file containing yearly totals.

Gist 3d7c0da4efc292e95700cda51537747d

This map visualizes the twelve municipalities of the Dutch province of Groningen, showing their boundaries as empty polygons with no fill. It uses a D3 v4 geoMercator projection centered on the province, with each municipality rendered as an SVG path element. The geographic data comes from the PDOK WFS service, requested as GeoJSON via d3.json. The map applies a gray stroke to outline each municipality, while intentionally leaving the polygons unfilled to emphasize the administrative borders over any thematic data.

Groninger gemeenten

This example visualizes the municipalities of the Dutch province of Groningen as a static SVG map. It shows the administrative boundaries of twelve selected gemeenten, using a Mercator projection fitted to the viewport. The visualization loads GeoJSON data from a PDOK WFS service, which provides the official administrative borders. The code uses D3 v4 with `d3.geoMercator` for projection and `d3.geoPath` to generate the SVG paths, appending a single `<path>` element per municipality within a 700×400 viewBox.

68% match

Groninger gemeenten

This map shows the municipalities of the northern Netherlands, with each municipality rendered as an SVG path using D3 v4 and TopoJSON data. The map uses a Mercator projection fitted to the viewport. Hovering over a municipality triggers a tooltip that displays the municipality’s name, creating an interactive way to explore the region. The visualization is built with D3.js and TopoJSON, with the geographic data processed in Mapshaper.

67% match

Neighbourhoods in the Province of Groningen

The map shows neighbourhoods in the province of Groningen, coloured by population density (BEV_DICHTH). Each district is represented as a vector polygon with a fill colour that encodes density, likely using a sequential colour scale. The map is rendered as an SVG from a GeoJSON file containing multipolygon geometries and attribute data, where the visualization draws the boundaries of each neighbourhood and colours them according to the density values. The overall design appears to be a straightforward choropleth map, focusing on the spatial distribution of population density across the province’s neighbourhoods.