Irish Map with Borehole

100%

Irish Map with Borehole

✓ Published1🌍 Public

Last edited Sep 17, 2019

Created on May 15, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Irish Map with Borehole

This fork of an Irish map with a borehole combines a geographic view with a stratigraphic cross-section. The map uses D3’s `geoPath` and `geoMercator` projections to render the country, with zooming enabled via `zoom()`. Clicking a borehole opens a modal containing an SVG diagram of subsurface layers (topsoil, peat, till, and sandstone) beneath a water table. Hovering over each colored rectangle or water line displays a tooltip with depth information. The geological visualization is built with D3’s `select` and SVG shapes, styled with Bootstrap and CSS.

DDibya Prokash Sarkar

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

87% match

Loading thumbnail…

Stacked Borehole

This example visualizes a geological borehole as a vertical stacked bar chart, showing distinct subsurface layers including Topsoil, Peat, Till, and Sandstone, along with a blue line indicating the water table. Depth ranges appear dynamically in a tooltip on mouseover, providing context for each layer. The visualization uses D3 v5’s `select` API to append SVG shapes and text, and implements custom tooltip behavior via D3 transitions. Layer rectangles are colored to represent different materials, and the water level is marked with two blue lines, creating a simple cross-section of the earth.

SShane Carey

75% match

Loading thumbnail…

Borehole

This visualization displays borehole data as a stacked bar chart, mapping geological layers along the x-axis and their depth on the y-axis. The chart uses a single band scale for the categorical layer, with a linear scale for depth, rendering black rectangular bars via SVG. Built with D3 v5, it loads the dataset from a CSV file, computes scales and axes dynamically, and binds data to rect elements. The example demonstrates basic data loading, scaling, and SVG bar rendering without interactions or responsive updates.

Ggsigroundwater

73% match

Loading thumbnail…

World map d3 and React

This example displays a world map with Ireland highlighted in teal, set against a muted sphere and interior borders, using an equal Earth projection. Built with React and D3 v5, it loads TopoJSON world-atlas data via `d3.json` and processes it with `topojson.feature` and `topojson.mesh`. The map is rendered as SVG paths created through `d3.geoPath` and `d3.geoEqualEarth`, with a `useData` hook managing asynchronous data loading.

SShane Carey

70% match

Loading thumbnail…

D3 World Map III

This example displays an interactive world map with countries rendered in light green against a light blue ocean. Users can pan and zoom the map using mouse or touch gestures, with a hover effect that highlights countries in red and reveals their names as tooltips. The visualization uses d3-geo with the geoNaturalEarth1 projection and d3.geoPath to draw SVG paths, while d3.zoom handles the interactive transformations. Geographic data comes from the world-atlas TopoJSON dataset, with country names loaded from a corresponding TSV file.

YYoung Song

70% match

Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Ggilbster

70% match

Loading thumbnail…

Map Interaction

This example displays an interactive world map, rendering country boundaries as SVG paths using d3.geoPath and a d3.geoNaturalEarth1 projection. The map is built from TopoJSON data loaded via d3.json and the topojson.feature API, with country names attached as SVG title elements. The visualization supports panning and zooming through d3.zoom, which applies a transform to the map group, and highlights individual countries by changing their fill color on hover using CSS.

WWayne716

70% match