Fill-Rule Evenodd

100%

Fill-Rule Evenodd

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Mar 15, 2011

This example demonstrates how the SVG `fill-rule: evenodd` property affects the rendering of US state boundaries. When a user hovers over a state, its corresponding path is displayed in steel blue with a semi-transparent fill, while all other states are hidden. The code uses D3’s `d3.geo.path` with an Albers projection and TopoJSON to load geographic data from `us.json`. A separate invisible hover layer manages mouse events, toggling visibility through `mouseovered` and `mouseouted` functions.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fork of CSCE-5320: ICE-8 US Country map

This example shows a map of US states rendered as SVG paths, with states filled white and outlined in black. Hovering over a state turns it goldenrod, revealing its name in a tooltip. The code uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw the map, with TopoJSON’s `feature` method to parse state boundaries from the us-atlas counties-10m.json dataset. The map is loaded asynchronously via `json`, and interactions are handled through D3 event listeners on the path elements.

NNaveenParitala

73% match

Loading thumbnail…

Merging States II

A variation on merging polygons, this example displays a map of the United States where a selected set of states is highlighted in orange. The visualization uses a careful rendering technique rather than topological manipulation to draw the highlighted states, layering a boundary path over the state fill. It employs D3 v3's `d3.geo` and `d3.json` to load US state geometries, along with the TopoJSON library to compute state boundaries and meshes. The rendering is dynamic, with the selected states' boundaries outlined in black to clearly distinguish the merged region.

Mmbostock

73% match

Loading thumbnail…

U.S. States TopoJSON

This example shows a map of the United States rendered as SVG paths, where individual states turn red when hovered. The map uses the TopoJSON `us-atlas` file, loaded via `d3.json`, and the code relies on the `topojson` library to convert the TopoJSON topology into geographic features. The rendering is done with `d3.geoPath` to project the geometry, and state borders are drawn as a separate path using a mesh that highlights each boundary. No interaction beyond the hover effect is implemented.

Mmbostock

72% match

Loading thumbnail…

Country Map- ICE 8

This example displays a choropleth-style map of the United States, coloring each state with a uniform dark teal fill and a light stroke. Hovering over a state changes its fill to a pale cream, providing a simple interactive highlight. The visualization uses D3 v5’s `geoPath` and `geoAlbersUsa` projection, combined with TopoJSON’s `feature` method to parse state boundaries from a remote JSON file. The SVG rendering is styled via a linked CSS stylesheet, with hover effects applied through the `.states:hover` class.

YYbg99

72% match

Loading thumbnail…

Gist 08d3bc545278d6a3b2d22df875392612

This example visualizes U.S. state boundaries using D3 v4’s geoAlbersUsa projection and d3.geoPath to render geographic features from a local us-states.json file. The SVG canvas, sized 700x580, is appended to the body, and each state’s polygon is drawn as a path element with a default fill and stroke. The map is centered using a translate of [width/2, height/2], and the simple code demonstrates how to load and project GeoJSON data for display. No interactions or styling are applied, keeping the focus on the map layout.

JJoymangulJensen

72% match

Loading thumbnail…

CSCE-5320: ICE-8 US Country map

This example displays a choropleth map of the United States, showing state boundaries with a white fill and black strokes. Upon hovering over a state, its fill color changes to goldenrod via a CSS `:hover` rule. The map is rendered as an SVG using D3 v5 and the topojson library, specifically employing `d3.geoPath` with the `geoAlbersUsa` projection. Data originates from the `us-atlas` counties-10m JSON, with state features extracted via topojson's `feature` function.

NNaveenParitala

71% match

Loading thumbnail…

Fork of US states map

This example displays a choropleth map of US states, with each state filled by a categorical color assigned through `d3.scaleOrdinal` and `schemeCategory10`. It renders the map using `d3.geoPath` with a `geoAlbersUsa` projection, drawing state boundaries from TopoJSON county data loaded via `d3.json`. Hovering over a state turns it green through CSS, and each state includes an SVG `<title>` element showing its name.

SShawn-Lian

71% match

Loading thumbnail…

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

MMina Rezaei

71% match