Vis Project - Sea Level Rise

100%

Vis Project - Sea Level Rise

✓ Published0🌍 Public

Last edited Apr 26, 2016

Created on Apr 26, 2016

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.

AI-generated description

Similar vizzes

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

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

81% match

Loading thumbnail…

d3v5 - Selective Projection Map

This example visualizes a world map with a dropdown menu to switch between over 40 different geospatial projections, including Miller, Mercator, and Robinson. The map is rendered as SVG using d3.geoPath, while the projection options are defined with d3-geo-projection methods like d3.geoMercator and d3.geoMiller. World coastlines come from a GeoJSON file, and a graticule and sphere outline are added to each view.

HHirosaji

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

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

66% match

Loading thumbnail…

projet_1

This interactive map visualizes hourly pedestrian sensor data across a city, with the view switching between 24 time-steps via buttons. It uses a Google Maps base layer with a custom D3 overlay to render each sensor as a brown circle sized by pedestrian count, and labels each location. The code employs D3.js for data binding and scaling, Google Maps’ OverlayView for projection, and SVG for markers, with data loaded from two CSV files.

EEssohanamKouyou

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

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

64% match