Vis 725 Project - Global Warming and Sea Level Rise

100%

Vis 725 Project - Global Warming and Sea Level Rise

✓ Published0🌍 Public

Last edited Apr 29, 2016

Created on Apr 27, 2016

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.

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

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

76% match

Loading thumbnail…

Income By ZipCode

This example shows a choropleth of income levels by zip code overlaid on a Google Map, centered on Virginia’s Northern Neck region. A Google Maps KmlLayer fetches a remote KML file containing the geographic boundaries and income data, while the map itself uses the TERRAIN map type for topographical context. The code directly integrates Google Maps’ JavaScript API with d3.v3, using d3 only to select the map container; no d3-specific data joins or scales are used for rendering. The visualization relies entirely on the KML file’s styling to color-code regions, with no additional D3 drawing or interaction logic.

JJamestiberiuseanes

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

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

64% match

Loading thumbnail…

Untitled

An interactive choropleth map of Baltimore neighborhoods reveals selected workforce and economic indicators from 2010 to 2013, using a dropdown menu to switch among dozens of variables like employment rates, business counts, and educational attainment. The map uses d3.geo.mercator and d3.geo.path for geographic rendering, with d3.scale.linear and viridis colors for continuous value fills. A checkbox excludes downtown to rescale the color range, and hovering displays neighborhood names and values. Data originates from Open Baltimore.

AAnnie Ulichney

64% match

Loading thumbnail…

Choropleth Map w Interactive Filtering

This choropleth map displays global income groups, color-coded using a spectral scale and an interactive zoom projection built with D3’s geoNaturalEarth1 projection and geoPath. The map renders country boundaries from World Atlas TopoJSON and TSV data, with a custom legend generated by colorLegend.js. Users can pan and zoom via the zoom overlay, while hovering over a country highlights it in gray and reveals its name and income group in a tooltip. The visualization demonstrates SVG-based DOM manipulation and event handling through D3’s selection and event APIs.

Cceresfin

64% match

Loading thumbnail…

Choropleth Map with D3 and SVG Final

This interactive world map uses a stereographic projection to display countries colored by income group. Built with D3 v5 and rendered as SVG, it loads GeoJSON and TSV data from the world-atlas package. Users can pan and zoom the map, which features a color legend and tooltips showing country names and income classifications. The visualization relies on d3.geoStereographic, d3.geoPath, d3.scaleOrdinal, and d3.zoom APIs.

CChawin Sungwalngern

62% match