Irma on leaflet

100%

Irma on leaflet

✓ Published0🌍 Public

Last edited Oct 14, 2017

Created on Sep 8, 2017

This interactive map animates the paths of hurricanes Irma and Jose across the Atlantic from September 2–11, 2017, overlaying forecast tracks on NASA MODIS Terra satellite imagery. It uses Leaflet for map rendering and panning, with TopoJSON for coastal and track geometry, plus jQuery to load the GeoJSON data. A date counter at the top updates daily as the animation progresses, though hurricane popups only appear for the first few days, and a scale bar displays metric distances. Data originates from the European Center for Medium-Range Weather Forecasts and the National Weather Service.

AI-generated description

Tracking the path of hurricanes Irma and Jose. Source: European Center for Medium-Range Weather Forecasts, National Weather Service.
Tiles from MODIS Terra.

Similar vizzes

Loading thumbnail…

historical hurricane data

This example visualizes historical hurricane tracks from NOAA’s HURDAT2 database, showing each storm’s path as a curved line across a world map. It uses d3.forceSimulation to position labeled points along the tracks and d3.geoPath with a geographic projection to render the map. The visualization highlights storm intensity with color-coded segments and includes interactive hover effects that reveal detailed information about individual hurricanes.

CCurran Kelleher

63% match

Loading thumbnail…

Document

This visualization displays the track of Typhoon Haiyan across the western Pacific, with a red dashed line connecting recorded positions on a Mercator projection. The map includes graticules, land masses, and country boundaries rendered from TopoJSON data. The path is drawn using d3.svg.line with cardinal interpolation, while d3.geo.path projects geographic coordinates onto the SVG canvas. The typhoon’s intensity class is embedded in the source data but not visually encoded.

Tthe-1000th-summer

57% match

Loading thumbnail…

A7 - Heatmap in D3

This heatmap visualizes the frequency of tropical storms in the Atlantic from 1995 to 2019, with years on the x-axis, storm names on the y-axis, and color intensity indicating frequency. It uses D3 v6 to construct an SVG heatmap, reading data from a CSV file and applying the Inferno color scale. Tooltips display exact frequencies on hover, while a gradient legend clarifies the color mapping. The chart includes axis labels and a title, making the distribution of storm activity over time and by storm type readily apparent.

RRiya Mathur

57% match

Loading thumbnail…

Gist f7dc00e0350f215e21d1d7b3f9ee6aca

This example presents an interactive geographic visualization of a world map, with animated flight paths connecting major cities. It shows a network of arcing routes overlaid on a dark, stylized globe. The visualization uses the D3.js library, specifically calling `d3.geoPath` to render the map’s landmasses and `d3.forceSimulation` to manage the physics of the flight arcs, making them appear as if they are in motion. The routes are likely generated from a small set of hardcoded city coordinate pairs. The rendering approach combines a simple geographic projection with dynamic path interpolation for the animated trajectory effects.

LLuisSevillano

54% match

Loading thumbnail…

Retina canvas map

A canvas map of São Miguel Island renders land use, municipal unemployment rates, and road networks from a QGIS-derived TopoJSON file. It uses d3.geoPath with a null projection to draw features onto a 2D canvas context, applying a threshold color scale to municipalities and custom stroke and fill styles for forests, residential areas, and road classes. The code also handles high-DPI displays by scaling the canvas context with the device pixel ratio.

LLuisSevillano

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

54% match

Loading thumbnail…

ebola cases

The visualization maps reported Ebola cases as animated dots on a world map, using a Leaflet map via Mapbox with D3.js for rendering. Each dot represents a case location from a GeoJSON file, initially expanding from a large radius to a small point over three seconds. The code projects geographic coordinates to screen positions using Leaflet's `latLngToLayerPoint` and re-renders the dots on map pan or zoom events. It combines Mapbox's base map with D3's data binding and transitions.

LLisaPicado

54% match

Loading thumbnail…

ebola map

This interactive map visualizes the spread of Ebola cases, plotting individual locations as dots on a tiled satellite basemap. The geographic coordinates (longitude, latitude) of each case are stored in a GeoJSON FeatureCollection, with properties indicating the country and sometimes a specific address or town (e.g., "Dallas, TX", "Gueckedou", "Boende moke"). Rendered as an animated SVG overlay on a Leaflet map, the visualization supports zooming and panning. The map is initialized to a world view centered at [20,-37] with a zoom level of 3, and the D3-selected SVG layer is synced with Leaflet's overlay pane to ensure that the points remain correctly positioned as users interact with the map. The points are plotted based on their latitude and longitude coordinates from the dataset, with labels providing the location name and country. This example demonstrates a straightforward pattern for combining Leaflet's interactive map controls with D3's data-driven SVG rendering, useful for geographically distributed point data like disease outbreak locations.

BBrieLewis

53% match