Class 10

100%

✓ Published0🌍 Public

Last edited May 17, 2017

Created on May 17, 2017

This interactive map lets users pan and zoom across the United States, with a red outline showing county boundaries overlaid on OpenStreetMap tiles. A yellow draggable circle marks Washington, DC, and when moved, it displays the name of the state containing the current point in a tooltip. The visualization uses d3-tile for raster tiles, d3.geoMercator and d3.geoPath for projections and vector rendering, topojson for county mesh data, and d3.zoom and d3.drag for interaction.

AI-generated description

Similar vizzes

Loading thumbnail…

Class 10

This interactive map displays U.S. counties with a yellow draggable marker representing Washington, D.C. Users can reposition the marker to see which state it lands in, with a tooltip revealing the state’s name. The visualization uses d3.tile and d3.geoMercator with OpenStreetMap raster tiles, d3.geoPath for county outlines, and d3.drag for marker interaction. County data comes from a TopoJSON file, while earthquake data is loaded from USGS GeoJSON.

AAnaMal08

91% match

Loading thumbnail…

homework 9

This visualization displays a zoomable map of the United States with OpenStreetMap tiles as the basemap, overlaid with red state boundaries. The map uses the d3-tile library to load and render raster tiles, while d3.geoMercator and d3.geoPath project the TopoJSON boundaries of US states from external JSON data. User interactions via d3.zoom adjust the tile scale and translate the projection to sync vector features with the changing raster view.

AAnaMal08

84% match

Loading thumbnail…

Class 10

This interactive map of Washington, D.C., overlays bike-sharing stations, hiking trails, and points of interest onto a zoomable Mercator projection. Users can hover over red station markers or green trail paths to see tooltips with addresses, bike counts, or trail lengths. Built with D3 v4, the example uses `d3.geoMercator` and `d3.geoPath` to render geographic features, while `d3.zoom` and `d3.tile` provide a smoothly scaling tile-based view. Data is loaded from three remote JSON files hosted on GitHub, and the interface supports mouse-based panning and zooming.

AAnaMal08

84% match

Loading thumbnail…

Class 10

A data-visualization example titled “Discovering D.C. by Bike” shows bike-sharing stations, bike trails, and tourist attractions across Washington, D.C., on an interactive zoomable map. It uses d3-geo with a Mercator projection and d3-tile for the basemap, while d3-zoom enables pan and zoom with tile scaling. Hovering over markers reveals tooltips, and a legend explains the symbols. The code loads three GeoJSON datasets from GitHub and renders all elements as SVG with animation support, using d3.v4 and d3-legend for the color legend.

AAnaMal08

82% match

Loading thumbnail…

Geo Map

This map of the United States lets users click a state to zoom in on it and click the background to zoom back out. The visualization uses D3.js v3 with the `d3.geo.albersUsa` projection and `d3.geo.path` to draw state boundaries from TopoJSON data loaded from a GitHub gist. Clicking a state triggers a smooth `g.transition()` that adjusts the scale and translate attributes, while the active state is highlighted in orange via CSS classes.

IIgathi

79% match

Loading thumbnail…

us test

This interactive map of the United States displays the 10-meter resolution state boundaries from the us-atlas package, with states shown in blue and territories outlined in gray. The visualization supports panning and zooming through d3.zoom, which applies affine transforms to the SVG group containing the map. The code builds the geographic paths using d3.geoPath with a null projection, and includes a graticule generated by d3.geoGraticule for reference. State boundaries are processed from the TopoJSON data using the topojson library's feature function.

AAndre J Denais

79% match

Loading thumbnail…

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall

79% match

Loading thumbnail…

US State Map with Interaction

This example presents a choropleth-style map of US states with pan and zoom interaction. Built with D3 v5 and rendered as SVG, it uses `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.zoom` to display state boundaries loaded from a TopoJSON file. State names and election data come from a CSV file, though only the names appear as tooltips via appended `title` elements. Hovering highlights a state in red, while the map supports interactive zooming through event-driven transforms.

Ddanrhymes

78% match