SC Counties

100%

✓ Published0🌍 Public

Last edited May 1, 2024

Created on May 1, 2024

Forked from Circles

This example renders a choropleth map of US counties from TopoJSON data using D3 v5 and the `d3.geoPath` API. Each county is drawn as an SVG path, colored blue by default, with red highlighting for counties whose ID matches `'06'`, and tooltips via appended `title` elements. The map loads external US county geometry from a remote URL, while `topojson.feature` converts the data for rendering in an SVG container.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

SC Counties2

This example displays a choropleth map of South Carolina counties, coloring each county blue or red based on whether its ID matches the value "06". It renders the GeoJSON data as SVG paths using D3's `geoPath()` projection. The code loads D3 via UNPKG, fetches geographic data from a raw GitHub GeoJSON URL, and demonstrates importing from local ES6 modules alongside D3's `select` API.

Ooliverkendall99@gmail.com

87% match

Loading thumbnail…

south carolina counties

This example displays a map of South Carolina counties, coloring each county path either red or blue based on its state ID. It loads geographic data from a remote JSON file and uses TopoJSON to convert it into GeoJSON features for rendering. The visualization relies on D3’s `select` and `attr` methods to configure an SVG canvas, while `d3.geoPath` is used to generate the path data for each county shape. The code also demonstrates importing local ES6 modules and logging county geometry coordinates.

Ooliverkendall99@gmail.com

85% 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

85% match

Loading thumbnail…

Country Map

This example renders a choropleth-style map of United States counties on an SVG canvas. Each county polygon is drawn as a purple path with white strokes, and hovered counties turn red, with the county name appearing as a tooltip. The visualization uses D3 v5’s `geoAlbersUsa` projection with `geoPath` to generate the shapes, and TopoJSON’s `feature` method to parse county boundaries from the us-atlas dataset. County names come from the TopoJSON properties, while the map loads via a remote JSON URL.

AAashish Pandey

84% match

Loading thumbnail…

Let's make a map US-counties with D3.js!

This example renders a choropleth-style map of all US counties as light green SVG paths with subtle black borders. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` generator to convert TopoJSON county boundaries from the `us-atlas` dataset into scalable vector graphics. The code loads the TopoJSON via `d3.json`, extracts features with `topojson.feature`, and binds them to SVG path elements, while styling is handled with CSS class selectors.

NNita

84% 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

83% match

Loading thumbnail…

U.S. Counties TopoJSON

This map displays the boundaries of every county in the United States using data from a TopoJSON file fetched from `https://d3js.org/us-10m.v1.json`. It renders the county shapes as filled SVG paths, with a white mesh overlay showing county borders via `topojson.mesh`. Hovering over any county turns it red. The visualization is built with D3 v4, using `d3.geoPath` to project the geometry and `topojson.feature` to extract the features, relying on the `us-atlas` TopoJSON data source.

Mmbostock

83% 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

83% match