Map with Borehole

100%

Map with Borehole

✓ Published1🌍 Public

Last edited May 15, 2019

Created on May 15, 2019

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.

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…

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

77% match

Loading thumbnail…

Map

This example visualizes world countries as a choropleth-style map, coloring each country green with white borders on a dark blue spherical backdrop. The map renders as SVG using D3.js with a Natural Earth projection via `d3.geoNaturalEarth1`, and country boundaries are generated through `d3.geoPath`. Geographic data loads from the world-atlas TopoJSON file (countries-110m.json), which is converted to GeoJSON using the `feature` function from the topojson library. Hovering a country changes its fill to red, and each country includes a title tooltip displaying its name.

VVlad Bogo

72% match

Loading thumbnail…

map

A map of Estonian counties rendered as an SVG using React and D3. The visualization uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` with `fitExtent` to scale the map to the viewport. County boundaries are drawn as brown filled paths with darker stroke outlines, while interior borders are highlighted using a TopoJSON mesh. The geographic data is loaded from a remote TopoJSON file and processed with `feature` and `mesh` from the topojson library.

Ppreethamkesa

72% match

Loading thumbnail…

Map D3

This map displays the counties of the United States using a natural Earth projection. The visualization draws each county as a separate SVG path, with white fill and black borders. The code loads TopoJSON data from a remote source, converts it to GeoJSON using the `topojson.feature` API, and renders it with `d3.geoPath` and `d3.geoNaturalEarth1`. It utilizes the D3 v5 library and appends all shapes within a single SVG container.

CChristopher Repka

72% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries with a green fill and a blue sphere background, using a natural Earth projection rendered to SVG. It draws country boundaries and names from the world-atlas TopoJSON dataset, with each country’s name displayed as a tooltip. The map supports pan and zoom via d3.zoom, and hovering over a country turns it red. The code leverages d3.geoNaturalEarth1, d3.geoPath, and topojson.feature to generate the geographic paths.

Ccpsshan

72% match

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes U.S. county boundaries as a natural Earth projection map, with the sphere background filled in blue and country shapes rendered in light green. It loads GeoJSON data from a freeCodeCamp choropleth dataset and uses `d3.geoPath` with `d3.geoNaturalEarth1` to project and draw the paths. The code selects an SVG element, appends a sphere path, then joins the TopoJSON features to append individual county paths using D3's data join. The map is static, with no interaction or animation beyond the initial rendering.

Ssriramvsharma

72% match

Loading thumbnail…

map

This example displays a choropleth map of Swedish counties (laen) using geographic data from a TopoJSON source. The visualization renders province boundaries as filled shapes in a blue-teal color, with interior borders highlighted in green, all drawn through SVG paths generated by `d3.geoPath` and the `geoMercator` projection. Built with React and d3.v5, the code applies the projection’s `fitExtent` method to scale and position the map within the viewport. The map is populated using `topojson.feature` and `topojson.mesh` to extract geometries and internal boundaries from the fetched dataset.

Ppreethamkesa

72% match