Sea Level Rise

100%

Sea Level Rise

✓ Published0🌍 Public

Last edited Apr 16, 2016

Created on Apr 16, 2016

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.

AI-generated description

Similar vizzes

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

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

76% match

Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Mmbostock

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

65% match

Loading thumbnail…

Google Map + D3 Generated Layers

This example demonstrates a Google Map with multiple D3-generated layers overlaid, including choropleth countries, GeoHash grid cells, a heat map, a graph, and a graticule. The GMapLayered widget composites these layers, with countries colored by weight using a palette and GeoHash data shown as colored tiles. The visualization also renders a heat map and a graph of weighted points, all anchored to geographic coordinates. The code uses the hpcc-systems Visualization library’s map components to manage layer rendering and interaction.

GGordonSmith

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

63% match

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

63% match

Loading thumbnail…

map-level

This example uses the D3 v5 library to render an interactive map-based visualization. The page layout is built with Bootstrap 4, containing a navigation bar, a form panel, and a map area. The D3 code selects an SVG element and dynamically sets its dimensions to match the browser viewport, though the detailed map rendering and data interaction logic are not visible in the provided files. The approach relies on D3’s selection and attribute methods to prepare the canvas for geographic data display.

AAnimesh Nautiyal

62% match