Click to zoom with table and map in D3

100%

Click to zoom with table and map in D3

✓ Published0🌍 Public

Last edited Jan 7, 2017

Created on Jan 7, 2017

This interactive D3 visualization pairs a choropleth map of Ireland with a sortable table of referendum results. Users can click on either a county on the map or a row in the table to zoom and highlight the selected region. The map uses `d3.geo.path` with a Mercator projection, while the table is built with `d3.csv` and `d3.select`. Colors are applied via a `d3.scale.ordinal` based on ColorBrewer palettes, and zooming is animated through `g.transition().duration(750)`.

AI-generated description

An example of a click and zoom map using table cells as well as the map for Ireland. This is in response to this Stack Overflow question and the code at this page.

The visualisation also has the referendum results displ;ayed as a choropleth map, in green of course. The colours are from ColorBrewer.

forked from <a href='http://bl.ocks.org/phil-pedruco/'>phil-pedruco</a>'s block: <a href='http://bl.ocks.org/phil-pedruco/7557092'>Click to zoom with table and map in D3</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Map of Ireland

This interactive map of Ireland visualizes COVID-19 confirmed cases per county over time, with a color gradient from yellow to red indicating case counts and a slider to scrub through dates. The choropleth uses `geoMercator` projection via `d3.geoPath` to render county boundaries from TopoJSON, while a `scaleSequential` with `interpolateYlOrRd` maps case numbers to colors. Data comes from a CSV of HPSC county statistics, with a React-based `Slider` component powered by `d3.sliderBottom` controlling the temporal filter.

TThomas Cormican

70% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale, with a clickable legend that filters the map to highlight selected categories and dim non-matching countries. Built with D3 v5, the visualization renders GeoJSON features via `d3.geoPath` with a Natural Earth projection, uses `d3.scaleOrdinal` and `d3.schemeSpectral` for color mapping, and supports zooming through `d3.zoom`. Data is loaded from the world-atlas TopoJSON and TSV files.

CCurran Kelleher

70% match

Loading thumbnail…

Irish Map with Borehole

This example displays a map of Ireland with a borehole cross-section in a modal window. Clicking a county opens an info box showing layered soil types, from topsoil to bedrock, with hover tooltips revealing depth details. The visualization uses d3.geoMercator projections and d3.geoPath to render the map, while topojson.feature processes the geographic data. The borehole diagram is built with SVG rectangles and lines, and d3.zoom enables interactive panning and scaling of the map.

SShane Carey

69% match

Loading thumbnail…

Irish Property Market- Under Development

This proof-of-concept dashboard visualizes the number and price variance of Irish property listings across counties. A grid of small multiples (one per county) displays area charts of property counts across price bands, while a map of Ireland uses color intensity to show each county’s total property count. Interactive controls let users sort charts alphabetically or numerically and toggle province visibility. Built with D3 v3, it uses SVG for rendering and includes animated transitions when reordering or filtering data, based on scraped dummy data in a JSON file.

EEoinMGB

68% match

Loading thumbnail…

Zoom to County

Clicking a UK country on the map smoothly zooms to its bounding box, highlighting it in orange while dimming the background. The visualization uses D3 v3 with a geographic Albers USA projection and TopoJSON for county boundaries. A d3.behavior.zoom handler enables free pan and zoom, while transitioned zoom events interpolate between scales and translations over 750 milliseconds.

SSaminu

68% match

Loading thumbnail…

Map with Borehole

A choropleth-style map of Ireland displays each county as a green SVG path with semi-transparent black borders. Using d3.geoPath and d3.geoMercator, the code projects TopoJSON county boundaries sourced from deldersveld’s GitHub repository. It loads the data via d3.json, converts it with topojson.feature, and appends path elements to the SVG, relying on d3.v5 and the geoMercator projection centered on Ireland.

SShane Carey

68% match

Loading thumbnail…

Choropleth map with Interactive Filtering in D3.js!

A choropleth map of world countries colored by economic category supports interactive filtering: clicking a legend swatch dims all countries not in that category, with a highlighted stroke on the selected group. Built with React and SVG, the map uses `d3.geoPath` with the `geoNaturalEarth1` projection and `d3.scaleOrdinal` with the `schemeSpectral` palette. Data is loaded from the world-atlas TopoJSON and TSV files, and zooming is handled via the d3 `zoom` event.

Fforcox43

68% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using D3's `geoNaturalEarth1` projection and `geoPath`, with an ordinal color scale from `schemeSpectral`. Clicking a legend item filters the map by highlighting matching countries and dimming others, while the sphere fades to emphasize the selection. The visualization loads country boundaries from TopoJSON world-atlas data and supports pan and zoom via `d3.zoom`, with tooltips showing country names and values.

YYF

68% match