mouseover constant stroke effect

100%

mouseover constant stroke effect

✓ Published0🌍 Public

Last edited Oct 16, 2016

Created on Sep 25, 2016

This example shows a choropleth map of U.S. unemployment rates by county, where hovering over a county triggers a constant, dark stroke outline that highlights the selected area. The map uses D3.js and its `d3.json` and `d3.tsv` loaders to fetch TopoJSON geographic data and tab-separated rate values, which are then mapped to a color scale. On mouseover, jQuery clones the path element and applies a fixed `stroke` and `stroke-width` to create the highlight effect.

AI-generated description

simple choropleth map forked from Mike's. It shows one possible way to display a constant stroke around each country svg path. Original idea from colorbrewer's page.

mit Licensed

Similar vizzes

Loading thumbnail…

Gist d8a8c52a3d98232cd513f1f5364a6e5c

This example displays a choropleth map of U.S. county unemployment rates, using a blue sequential color scale ranging from light to dark shades. The map is rendered as SVG paths via `d3.geo.path` with an Albers USA projection, while county data is joined to `d3.map` values from an external TSV. State boundaries are drawn as a white mesh overlay using TopoJSON. The code relies on `queue`, `d3.json`, `d3.tsv`, and `d3.scale.quantize` to bin rates into nine classes.

JJn1532

76% match

Loading thumbnail…

Let's make a map of US-counties with D3.js:"hover and county name "

This example displays a choropleth-style map of all US counties rendered as SVG paths, with county names revealed on hover via a native `<title>` element. The visualization uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw county boundaries from TopoJSON data loaded from the us-atlas package. County shapes are styled with black strokes and a green fill on mouseover, showing the geographic distribution of administrative divisions. The code filters the TopoJSON for county features and binds them to path elements, relying on the browser’s built-in tooltip behavior for the name display.

NNita

76% match

Loading thumbnail…

Canvas+SVG hover stroke effect

This choropleth map of Spanish municipalities uses a dual-rendering strategy: SVG paths provide hover interaction while a Canvas context draws the color-coded population density fills. The map layers transparent SVG municipality outlines over the Canvas raster, which uses a threshold color scale to visualize population rates. When a user hovers over an SVG path, its stroke becomes visible, creating a highlight effect. The example utilizes `d3.geoPath` and `d3.scaleThreshold` to generate both the vector outlines and the Canvas-rendered fills.

LLuisSevillano

76% match

Loading thumbnail…

Gist 5665764

This choropleth maps U.S. county-level unemployment rates from 2008 using a quantize scale, which assigns each county to one of nine color classes based on rates from 0 to 15%. The map is rendered with SVG paths for counties, colored via CSS classes q0-9 through q8-9, and includes state boundary outlines overlaid for context. The data is loaded from an external TSV file, and clicking a county or hovering over a state logs the element or feature to the console.

11wheel

75% match

Loading thumbnail…

Untitled

This example displays a choropleth map of the United States with counties rendered as SVG paths, filled in light gray and highlighted in light blue on hover. The code loads a TopoJSON file of US counties from a remote GitHub repository and uses `d3.geo.mercator` with a fitted projection to size and position the map within the viewport. Counties are drawn via `d3.geo.path`, and the script references an additional tooltip feature using `d3.tip` in the accompanying test.js file, though that tooltip is not implemented in the visible code. The map is rendered entirely with D3 v3 and SVG.

AAnnie Ulichney

75% match

Loading thumbnail…

Let's make a map of US-counties with D3.js:"hover and county name "

This example displays an interactive map of U.S. counties rendered as SVG paths, with each county’s name appearing as a tooltip on hover. The map uses the `geoAlbersUsa` projection and `geoPath` from D3 v5, while TopoJSON’s `feature` method extracts county geometries from the us-atlas counties-10m.json dataset. Hovering highlights the county in green via a CSS `:hover` rule. The visualization depends on D3’s `select` and `json` utilities to fetch and bind the geographic data.

NNita

74% match

Loading thumbnail…

Map Loupe

This example shows a choropleth map of U.S. county unemployment rates on the left, with a magnified view of the same data on the right. The main map uses an Albers USA projection, while the right panel uses the same projection at a much larger scale, creating a loupe effect. Moving the mouse over the left map repositions the right map's transform to show the corresponding zoomed-in region, effectively magnifying the area beneath the cursor. County colors are assigned via a quantile scale, and state boundaries are overlaid in white. The visualization is built with D3 and TopoJSON, rendered as SVG.

663anp3ca

74% match

Loading thumbnail…

USTopoJSON

This example displays a map of all U.S. counties as thin black outlines, drawn with SVG paths using the `d3.geo.path()` projection. The map is built from a TopoJSON file fetched from a gist, which contains the county geometries. When a user hovers over a county, the CSS `path:hover` rule turns it red, providing a simple interactive highlight. The code relies on D3 v3 and the `topojson.v1` library to process and render the topology data.

JJn1532

74% match