Testing map labels

100%

Testing map labels

✓ Published0🌍 Public

Last edited Apr 5, 2016

Created on Mar 31, 2016

This example tests map label placement by rendering the regions of Italy over a Robinson projection. It uses D3's `d3.geo.path()` to draw the region polygons and `path.centroid()` to compute the x and y coordinates for each label. A text shadow is applied to each label to improve readability, with a background layer of white-stroked text behind the main labels. The map uses topojson data from the `italy.json` file and fills regions with a quantized color scale based on the `SHAPE_Leng` property.

AI-generated description

mit Licensed

Similar vizzes

Loading thumbnail…

Fork of Country Map

This example displays a choropleth map of Italy, highlighting its regional borders and using a Mercator projection to shape the geographic outlines. The visualization is rendered as an SVG, with sky-blue fill for regions and black strokes for interior boundaries, while a hover effect changes the region color to PaleVioletRed. The code leverages D3 v5’s `geoMercator` and `geoPath` for map projection and path generation, TopoJSON’s `feature` and `mesh` functions to process geographical data from the italy.json file, and React with a custom `useData` hook to fetch and manage the data.

RRinoj-Gautam

74% match

Loading thumbnail…

Fork of Italy Map

This example displays a map of Italy’s provinces using D3’s `geoMercator` projection and `geoPath` to render SVG paths. TopoJSON data is loaded from a GitHub source and converted with `feature`, while a categorical color scale fills each region. The map supports zoom and pan via D3’s `zoom` behavior, which applies transforms to a group element.

Kkirangithub23

73% match

Loading thumbnail…

Country Map

This example displays a choropleth map of Italy, with its administrative regions filled in sky blue and separated by black borders. The map uses the Mercator projection and renders geographic features with the `geoPath` function from d3. Hovering over a region highlights it. The application is built with React, fetching TopoJSON data from a remote URL and processing it with the `topojson` library to generate land features and interior borders.

CCH SAMPATH

73% 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…

Polylabel with D3

This visualization compares two methods for labeling countries on a world map: centroids and polylabels. Small orange dots mark each country’s spherical centroid, while white dots show the polylabel (the point farthest from any polygon edge) of its largest projected polygon, with green lines connecting the two. The map uses a Robinson projection and renders country shapes from TopoJSON data via d3.geoPath, while the polylabel algorithm from Mapbox computes the label positions on the projected coordinates.

PPhilippe Rivière

70% match

Loading thumbnail…

Europe_test

This map shows the countries of Europe as solid dark-gray polygons on a white background. The data comes from a GeoJSON file named `custom.geo.json`, which contains the administrative boundaries. The visualization uses the D3.js v4 library, employing `d3.geoConicConformal()` for the map projection and `d3.geoPath()` to render each country's path. The map is centered on coordinates 10, 46 and rendered as SVG within a fixed 700 by 580 viewport.

LLaippe

69% match

Loading thumbnail…

Fork of Map

This interactive map of Italy visualizes a playful, made-up “Pasta Variety Index” for ten major cities. Circle size and color encode the index value on top of the country’s geographic outline, with a hover tooltip revealing city details. The visualization is built with D3.js v7, rendering to SVG, and uses the `topojson-client` library to load world-atlas TopoJSON data. A custom `d3.geoPath` projection draws the country, while a simple CSS-based tooltip provides interactivity.

Kkovuribalanagavinay@gmail.com

69% match

Loading thumbnail…

d3-composite-projections test

This example demonstrates an interactive map of Spain’s autonomous regions using the d3-composite-projections library to combine separate projections into a single visualization. It loads preprojected TopoJSON data from the es-atlas package and renders boundaries with `d3.geoPath`, while a dashed brown overlay marks the composite projection’s internal borders. As the user moves the mouse, the code uses `projection.invert` to display geographic coordinates and appends fading circles at each cursor position, using SVG transitions to shrink them. Points outside the valid projection area trigger an error message instead of drawing.

LLuisSevillano

68% match