Fork of Irish Map with Borehole

100%

Fork of Irish Map with Borehole

✓ Published0🌍 Public

Last edited Mar 25, 2021

Created on Mar 25, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

77% match

Loading thumbnail…

Fork of Let's make a map with D3 (Tricks).js!

This interactive map displays world countries using a natural Earth projection, rendered as SVG paths with green fill that turns red on hover. The visualization loads geographic data from the World Atlas TopoJSON file and converts it to GeoJSON features using `topojson.feature`. Users can pan and zoom the map through `d3.zoom`, with transformations applied to a group element containing the country paths. The map also includes a blue sphere outline drawn via `d3.geoPath` with the `geoNaturalEarth1` projection, and each country displays its name as a tooltip using SVG `title` elements.

BBKirst3

75% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This fork of a D3.js mapping tutorial displays a natural Earth projection of the world, with countries filled in light green against a blue sphere. The visualization renders as an SVG using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while the topojson library’s `feature` function extracts country boundaries from the world-atlas dataset at 110m resolution. Country paths are drawn with a semi-transparent black stroke, and the map appears static without interaction.

Iinnocent thomas

74% match

Loading thumbnail…

Fork of World Map with D3.js!

This example displays an interactive world map where each country is rendered as a green SVG path with a black stroke. A blue sphere provides the background, and hovering over a country highlights it in orange. Built with D3.js v5 and TopoJSON, it uses `d3.geoPath` with `d3.geoEquirectangular` projection to draw the map from the world-atlas countries-110m.json data source. The SVG rendering is styled via CSS classes, with hover effects defined in the stylesheet.

BBajiSharifPatan@my.unt.edu

74% match

Loading thumbnail…

Fork of Map with D3.js!

This example displays a world map with countries rendered in green and outlined in black, highlighted in orange on hover. Built with D3.js v5 and TopoJSON, it uses the `geoEquirectangular` projection and `geoPath` to draw the sphere and country boundaries from a world-atlas GeoJSON file. The SVG output includes a static blue ocean background, with interactive hover states defined via CSS.

TTejucmandava

73% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualizes the countries of the world on a blue sphere using a natural Earth projection. It renders geographic boundaries with a light green fill, black strokes, and a semi-transparent stroke opacity. The code uses D3 v5’s `geoNaturalEarth1` and `geoPath` to project and draw features, while TopoJSON’s `feature` extracts country polygons from the world-atlas dataset. A static SVG path for the sphere is appended first, followed by dynamically appended country paths.

PPatrickhCahill

73% match

Loading thumbnail…

Fork of Let's make a map with D3 with popup.js!

This is a D3.js map of the world created with a Natural Earth projection, using `d3.geoPath` and `d3.geoNaturalEarth1` to render country outlines. Each country is joined with a CSV dataset by its numerical ID, and hovering over a country triggers a custom tooltip via `d3.select` and DOM `mouseover` events, displaying the country's ID and its associated value from the CSV. The visualization demonstrates basic interaction and data-binding on an SVG canvas, with countries colored light blue and highlighting red on hover.

991geethikaalwis

73% match