Groninger gemeenten
This example visualizes the municipalities of the Dutch province of Groningen using D3.js. The map is generated from multiple TopoJSON files (with and without bounding boxes, and with different quantization parameters) that were created with FME Desktop 2019. Due to mixed winding orders of the polygons, the initial rendering shows a rectangle instead of the correct municipality boundaries. The visualization demonstrates the impact of winding order and TopoJSON preprocessing on geographic data rendering. By comparing the different file versions, viewers can observe how the bounding box and the right-hand rule (Orientator transformer) affect the final output. The map displays the municipalities in the northern Netherlands, with the D3 code provided in index.html. A key challenge highlighted is the need for consistent polygon winding order to ensure correct D3.js visualization.**Title:** Groninger gemeenten **Description:** This visualization demonstrates a common pitfall in geographic data processing: winding order in polygon coordinates. The map displays the municipalities in the northern Netherlands, but due to mixed winding orders in the polygon definitions, D3.js renders a solid rectangle instead of the expected municipal boundaries. The author created four TopoJSON variants using FME Desktop 2019—with and without bounding boxes, and with different quantization parameters—to isolate the winding order issue. The accompanying `index.html` file contains the D3.js code used to visualize the files and reproduce the problem. This example is particularly useful for developers working with TopoJSON and D3.js, illustrating how winding order can affect rendering and how data preprocessing choices influence the final output. Source: [gist by FrieseWoudloper](https://gist.github.com/FrieseWoudloper)
AI-generated descriptionThis gist consists of the following files:
- gemeenten.json, a TopoJSON file of municipalities in the north of The Netherlands including a bounding box.
- gemeenten_without_bb.json, a TopoJSON file of municipalities in the north of the Netherlands without bounding box.
- gemeenten_qp_1000000.json, a TopoJSON file without bounding box and the quantization parameter set to 1000000.
- gemeenten_rhr.json, a TopoJSON file with bounding box and Orientator transformer in FME Desktop set to right hand rule.
- index.html, containting D3 JavaScript code to visualize the files mentioned above.
Because of the mixed winding orders of polygons, I get a rectangle when I visualize the municipalities with D3.js. The TopoJSON files were created using FME Desktop 2019.