Nanaimo: if the sea level rose by 4 meters

100%

Nanaimo: if the sea level rose by 4 meters

✓ Published0🌍 Public

Last edited Nov 7, 2014

Created on Nov 6, 2014

A map of Nanaimo, British Columbia, shows elevation contour lines, with lines below five meters highlighted in steel blue to indicate areas that would flood under a four-meter sea level rise. The visualization combines D3.js with the Leaflet mapping library to overlay an SVG of contour data, sourced from the city's LIDAR survey, onto an OpenStreetMap base layer. D3's geo projection and path functions render the TopoJSON contours, with color interpolation based on elevation values.

AI-generated description

This map is more of an exercise in using d3 with leaflet and plotting contour lines (obtained from the city's LIDAR data). The blue lines represent contours less than 5 m. Good thing the sea level rise shouldn't be this severe in the next 100 years or so. Though Nanaimo is hilly so there wouldn't be that much flooding.

Similar vizzes

Loading thumbnail…

Tofino, B.C. Tsunami Map

This map shows the area around Tofino, British Columbia that would be inundated by a 15-meter tsunami, with the inundation zone highlighted in light blue. The visualization uses d3.geo.tile to load OpenStreetMap vector tiles for the basemap, d3.geo.path with a Mercator projection to render the coastline from a TopoJSON outline, and TopoJSON contour bands derived from a digital elevation model to depict the affected areas.

MMbrownshoes

66% match

Loading thumbnail…

Vis Project - Sea Level Rise

This example maps projected sea level rise on a Google Map using KML layers. A dropdown menu lets the viewer select sea level increases from 0 to 6 meters, and the code updates the displayed overlay by swapping the KML file URL. It uses the Google Maps JavaScript API for rendering and event handling, while D3.js (d3.v3) is loaded but not actively used in the shown logic. Geographic polygons from the loaded KML files visualize the affected coastal or low-lying areas.

JJamestiberiuseanes

64% match

Loading thumbnail…

Sea Level Rise

This example visualizes projected sea level rise by overlaying a KML layer onto an interactive Google Map. The map is centered on a specific latitude and longitude with terrain view enabled, zoomed to level 8. The code uses the Google Maps JavaScript API to create the base map and the KmlLayer to fetch and render geographic data from an external KML file. D3.js version 3 is included for utility functions, though the primary mapping and overlay rendering rely on the Google Maps API.

JJamestiberiuseanes

63% match

Loading thumbnail…

San Francisco Bay sea level rise projection

This example projects historic sea level rise in the San Francisco Bay area using an interactive line-with-focus chart built with d3.v2 and the NVD3 library, rendering in SVG with animation. The visualization distinguishes between historic data and projected series, with a focus panel for detailed inspection. It explicitly handles gaps in the 1870–1875 record by preserving undefined Y values to show data absence, while using chart.x(), chart.y(), and chart.forceY() to map timestamps to a time-formatted axis. Data is loaded from a local JSON file.

GGerHobbelt

61% match

Loading thumbnail…

San Francisco Bay sea level rise projection

The visualization projects sea level rise for the San Francisco Bay by displaying both historical and projected data points as a line chart with a focus chart below. It uses the nvd3 library, built on D3, to render the SVG graphic and includes an animated transition. The data is structured with key-value pairs, and tooltips are enabled. The chart updates its display when the window is resized, and it includes custom axis formatting for dates and y-values.

GGerHobbelt

61% match

Loading thumbnail…

Vis 725 Project - Global Warming and Sea Level Rise

This interactive map visualization explores the relationship between global warming, projected sea level rise, and household income across the Chesapeake Bay region. Users toggle KML layers showing income by zip code and select from 0 to 6 meters of sea level rise, while clickable markers reveal tide gauge charts in an embedded iframe. Built with the Google Maps JavaScript API, D3.js v3, and KML data from the author’s GitHub repository, the interface combines geospatial overlays with linked detail panels.

JJamestiberiuseanes

60% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v6

This D3.js (version 6) example displays a world map centered on the Pacific Ocean using a Mercator projection, with red circles marking cities from a CSV data file and city names as text labels. Each city is hyperlinked to a Google search for its name. The visualization supports pan and zoom interactions through the `d3.zoom` API, applying the zoom transform to the map paths, city circles, and text elements. The map geometry comes from a TopoJSON file processed with the `topojson` library, and all rendering uses SVG.

Dd3noob

59% match

Loading thumbnail…

Gist bea3b68601c5004145624bdb03eaa43e

This example maps oceanographic CTD (conductivity, temperature, depth) sampling locations along the British Columbia coast and offshore Pacific. A GeoJSON MultiPoint dataset feeds a D3 map using `d3.geoPath` with a TopoJSON basemap for landmasses. Points cluster tightly near the continental shelf and along a repeating offshore grid, while a supplementary CSV (`proflocations.csv`) suggests profile station coordinates. The visualization shows the spatial distribution of oceanographic measurements, highlighting dense nearshore sampling versus broader offshore transects, rendered as a static point-layer over geographic context.

MMbrownshoes

59% match