Tofino, B.C. Tsunami Map

100%

Tofino, B.C. Tsunami Map

✓ Published0🌍 Public

Last edited Nov 13, 2014

Created on Nov 13, 2014

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Nanaimo: if the sea level rose by 4 meters

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.

MMbrownshoes

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

Loading thumbnail…

Toronto Map

This example displays a vector map of Toronto using topojson data from a GitHub repository. The map is rendered as SVG paths via `d3.geoPath` and the `geoNaturalEarth1` projection, with React managing the component structure. City boundaries appear as teal strokes without fill or labels, while the `useData` hook loads and converts the TopoJSON to GeoJSON using `feature` from topojson. The visualization uses d3.v5 and React 16.9, with the mark component generating one path per feature.

SSophy Sun

56% match

Loading thumbnail…

Gist 69526c10c61369e9ebc7f2479ab96375

This example renders a choropleth map of British Columbia’s regional districts from a TopoJSON file, coloring each polygon by its `FEATURE_AREA_SQM` property. The visualization uses a custom `d3.geoPath` projection to draw district boundaries and a sequential color scale to encode area. Hover effects are implemented through a `transition.attrTween` that animates the fill color on selection, while a tooltip displays the district name and area. The map is composed using D3’s topology and geometry APIs, with the data sourced from the province’s legal boundary records.

MMbrownshoes

56% match

Loading thumbnail…

April 6 class

This interactive map shows earthquake locations across the United States, plotted as crimson paths atop a zoomable OpenStreetMap tile layer. Using d3.geoMercator projection and d3.geoPath, it renders geographic features from TopoJSON state boundaries and GeoJSON earthquake data from the USGS weekly feed. The d3.zoom and d3.tile APIs enable pan and zoom, updating both vector paths and raster tiles in sync. A status readout displays latitude and longitude coordinates using projection.invert as the mouse moves.

MMTClass

56% match

Loading thumbnail…

ICE-8_CanadaMap

This example visualizes a map of Canada with its provinces distinguished by light blue fill and white borders, rendered as scalable vector graphics. It loads TopoJSON data from a GitHub gist and uses d3.geoMercator for projection, with d3.geoPath converting geographic coordinates into SVG paths. The code employs topojson.feature for extracting province geometries and topojson.mesh for drawing internal boundaries, while d3.json handles asynchronous data loading.

Jjgaur96@gmail.com

56% match

Loading thumbnail…

Map Pan and Zoom v6

This example demonstrates an interactive world map that supports panning and zooming, centered on the Pacific Ocean. The map renders country boundaries as SVG paths filled with grey, using the `d3.geoMercator` projection and `d3.geoPath` to generate the geometry. A `topojson` data file supplies the world topology. The `d3.zoom` API applies a transform to the SVG group containing the paths, with a scale range between 1x and 8x, enabling the user to explore the map.

Dd3noob

56% match

Loading thumbnail…

BC Offsite Species

This visualization displays British Columbia offsite species data on a world map, with bubble size reflecting area in square kilometers. Users can brush the time-series histogram below to filter the mapped points. The map uses d3.geoPath with Albers projection and country boundaries from the World Atlas TopoJSON. The histogram bins data by month using d3.histogram and d3.scaleTime, with brushX interactions syncing the view.

AAlan McConchie

56% match