Skip to main content
SimilarExport ZIP
100%

Town/county switch with topojson

✓ Published0🌍 Public
FFrissAnalytics
Last edited Sep 3, 2018
Created on May 22, 2017

A choropleth of New Hampshire toggles between town and county boundaries, fading town polygons to faint outlines while emphasizing county borders. The animation cycles automatically every 1.5 seconds. Using D3 v3 and TopoJSON, the code loads a local GeoJSON topology, renders paths via `d3.geo.path()` with a null projection, and transitions opacity on SVG elements. County meshes are derived from FIPS codes using `topojson.mesh()`.

AI-generated description

forked from <a href='http://bl.ocks.org/bycoffe/'>bycoffe</a>'s block: <a href='http://bl.ocks.org/bycoffe/e32cc94b26df9c5e28aa'>Town/county switch with topojson</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example visualizes the counties of New York State using a Transverse Mercator projection, with state boundaries outlined and counties filled in gray. Hovering over a county highlights it in light blue. The code loads US TopoJSON data via `d3.json`, extracts New York using `topojson.feature`, and applies a clipping path to restrict county paths to the state outline. It uses `d3.geo.path` for rendering and `path.bounds` to auto-fit the projection scale and translation.

AAnnie Ulichney
74% match
Loading thumbnail…

NYS V3

An interactive choropleth map of New York State displays its counties, which change color and reveal a tooltip with the county name on hover. Clicking a county hides all others and shows a full-width “Return” button, though the code’s data-entry section is empty, so no additional details appear. Built with D3 v7 and topojson, it uses `d3.geoMercator`, `d3.geoPath`, and `d3.geoBounds` to project and render GeoJSON/TopoJSON data, with SVG paths styled via CSS.

Llupica.matthew@gmail.com
74% match
Loading thumbnail…

NewYorkCounty

This example shows a choropleth-style interactive map of New York County and its surrounding counties, rendered with SVG paths. Users select a US state from a dropdown menu, which triggers an animation as the map re-centers and re-scales to fit the selected state using `d3.geoIdentity` and `d3.geoPath`. Hovering over a county highlights it in orange and displays its name in a tooltip. The visualization uses `topojson.feature` to parse US county and state boundaries from the `us-10m.v2` TopoJSON file, with data from `county_data.tsv`.

Kkenny-wq
74% match
Loading thumbnail…

U.S. Counties TopoJSON Mesh

This example displays a mesh of U.S. county boundaries derived from a TopoJSON shapefile, rendered as a black outline with small circles marking each polygon’s coordinate origin. It uses d3.json to load the TopoJSON data, then topojson.mesh and topojson.transform to build the mesh and map coordinates. The outline is drawn with d3.geoPath, while circles are positioned using the transform function, showing the raw geometry structure rather than a filled choropleth. The data comes from the U.S. Census Bureau via the us-10m.v1.json file, and the visualization renders entirely in SVG.

FFrissAnalytics
74% match
Loading thumbnail…

Untitled

An animated choropleth of UK counties and suburbs rendered on a Canvas, cycling through randomly selected townships, highlighting each city in turn. The visualization uses the `topojson` library to parse geographic data from a GitHub-sourced JSON file and the `d3.geoPath` and `d3.zoom` APIs for map projection and smooth zoom transitions. The `draw()` function fills administrative regions with varying shades, strokes dashed boundaries, and places point markers with town labels, all while continuously re-centering the view. This is built with React and D3, with animation driven by `d3.zoom` and Canvas drawing.

PPriyanka Sawant
74% 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
73% match
Loading thumbnail…

County Topology

This graph displays the topology of U.S. counties, with each node positioned at its county centroid and links connecting neighboring counties that share a border. The visualization uses TopoJSON’s `topojson.neighbors` to identify adjacent counties and `d3.geoPath` to compute centroids from simplified geometry. A background map and white county mesh provide geographic context, while black lines trace the adjacency network. The code loads data from the us-10m.v1.json file and renders entirely in SVG using D3 v4.

FFrissAnalytics
73% match
Loading thumbnail…

Massachusetts Towns

This example visualizes the towns of Massachusetts as a choropleth-style map using SVG. It loads GeoJSON town boundaries from a remote gist and renders them as filled paths with black strokes via `d3.geoPath`, projected using `d3.geoConicConformal` with parameters fit to the state. The map is drawn into a dynamically created SVG element sized 800×400, with the projection fitted to the data extent. D3 v5 and TopoJSON are used for data loading and path generation, though the code appears incomplete as only the town polygons are shown without additional styling or interactivity.

NNilla
73% match