The Usefulness of stroke-linejoin: round
An interactive visualization demonstrates the importance of the SVG `stroke-linejoin` property by toggling between `round` and `miter` values on text labels over a choropleth map of US states. Red strokes around state names alternate between smooth and jagged edges every second. The map uses `d3.geoPath` with an experimental Albers USA projection including territories, renders polygons on Canvas via `getContext('2d')`, and positions labels using polylabel centroids within a React component structure.
AI-generated descriptionAn example showing why stroke-linejoin: round is critical to use for the stroke around text labels. Without it, you get the default stroke-linejoin value of miter (shown here), which yields jagged edges around the text.
A US map with labels (using an experimental Polylabel build) and an experimental map projection: Geo Albers USA with Territories.
This is really an experiment to see how VizHub can deal with moderate complexity.
Excerpted from Pleth.
Comments
Sign in to join the discussion.