d3fc-label-layout map example

100%

d3fc-label-layout map example

✓ Published0🌍 Public

Last edited Aug 9, 2018

Created on Mar 17, 2016

This example shows a labeled map of the United Kingdom, with city names positioned to avoid overlap and removed when they collide. It adapts Mike Bostock's map tutorial, using d3.geoPath and topojson to render the geography, while d3fc-label-layout's layoutLabel component, combined with layoutGreedy and layoutRemoveOverlaps strategies, places the SVG text labels. The code loads UK map data from a JSON TopoJSON file and uses the d3fc text label component for layout.

AI-generated description

This is a demonstration of the d3fc-label-layout component based on Mike Bostock's Let's Make a Map example. The label layout component provides an easy mechanism for labeling charts and maps in such a way that labels are positioned to avoid collisions, and (optionally) overlapping labels are removed.

mit Licensed

Similar vizzes

Loading thumbnail…

Label layout example

This example demonstrates how the d3fc-label-layout component places text labels on a scatterplot without overlap, using data from a CSV file that counts GitHub users and organizations per programming language. The code employs a greedy strategy combined with simulated annealing to remove overlapping labels, while each label is rendered as a text element with a circle marker at its data point. The visualization is built with d3 v4, d3fc, and React, and rendered as an SVG chart using d3fc’s Cartesian chart API.

CColinEberhardt

72% match

Loading thumbnail…

UK Map

This example displays a single red map of the United Kingdom rendered as an SVG path. The map is projected using the Albers equal-area conic projection, configured with specific center, rotation, parallels, and scale parameters. The visualization uses d3.geoPath to draw the geographic boundaries, with the topojson library to convert the uk.json TopoJSON data into GeoJSON features. The shape is filled entirely red, emphasizing the country’s outline without additional thematic data. The code relies on d3.json to load the dataset and appends the resulting path directly to the SVG.

NNigel

71% match

Loading thumbnail…

Voronoi Labels

This example demonstrates a technique for labeling points on a map by positioning text labels in the empty spaces between them, using Voronoi diagrams. The visualization computes a Voronoi tessellation of the point locations and then places each label within its corresponding cell, avoiding overlaps. Built with D3.js, it uses `d3.Delaunay` for triangulation, `d3.Voronoi` for the diagram, and a force-directed layout algorithm (`d3.forceSimulation`) to refine label positions. The underlying data comes from a set of U.S. city coordinates, rendered as circles on a projected map.

Mmbostock

71% match

Loading thumbnail…

Elliptic / scaled Polylabel with D3

This example demonstrates three different approaches to finding label placement points within countries on a world map: the orange centroid, the white polylabel, and a green elliptic polylabel that accounts for different x and y scales to fit horizontal text. The visualization uses d3.geoRobinson for projection and d3.geoPath to render world map data from the visionscarto-world-atlas TopoJSON. It applies Mapbox’s polylabel algorithm twice on projected polygon coordinates—once normally and once with x-coordinates scaled by a factor of 4—to compute the largest ellipse-fitting point.

PPhilippe Rivière

70% match

Loading thumbnail…

United Kingdom - Country Map

This example displays a choropleth map of the United Kingdom using a green fill with black borders. It loads geographic data from the world-atlas TopoJSON file, extracts the United Kingdom feature, and projects it with a Mercator projection using `d3.geoMercator` and `d3.geoPath`. The map is rendered as an SVG path element within a 960×500 canvas, with data fetched via `d3.json`.

LLakshmanRangisetti

70% match

Loading thumbnail…

MyMapping - labels

The map projects the world’s countries using a rotating orthographic projection, with each country rendered as an SVG path and labeled by name. The visualization displays a country’s name, capitol, control, and armies in an info box when hovered. Built with D3 v6 and TopoJSON, the code uses `d3.geoPath` and `d3.geoOrthographic` to draw the globe, while drag handlers rotate the projection and update the labels’ positions via `path.centroid`. Country data originates from the world-atlas countries-110m TopoJSON file.

Nnstafford

70% match

Loading thumbnail…

Labeled US Map

This example displays a labeled map of the United States, including territories, with state names positioned using polylabel for optimal label placement. The map uses a custom Albers USA projection with territories, rendering polygons on a Canvas layer and labels in an SVG layer. Built with React and D3 v5, it fetches state boundaries from TopoJSON, draws them with d3.geoPath, and caches geometry data asynchronously.

Jjblaskovich

69% match

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map rendered as an SVG, with countries filled in green against a dark blue spherical backdrop. It fetches country boundaries from a TopoJSON file via the world-atlas dataset, then projects them using the Hufnagel projection from `d3-geo-projection`. The code builds paths with `d3.geoPath` and `d3.json`, styling the sphere and landmasses through CSS classes. It relies on D3 v5, TopoJSON’s `feature` method, and demonstrates a compact, data-driven mapping workflow.

JJames Malvern

69% match