Interactive Map

100%

Interactive Map

✓ Published0🌍 Public

Last edited Jun 18, 2022

Created on Jun 18, 2022

Forked from Untitled

This interactive map displays a choropleth of neighborhood-level demographic and economic indicators. A dropdown menu allows selection of various metrics, such as employment rates, business counts, and property values. A checkbox toggles the inclusion of downtown. The map renders neighborhoods as SVG paths, colored with a viridis color scale, using D3.js. Hovering over an area reveals the neighborhood name and its value in a tooltip.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Untitled

This interactive choropleth map displays neighborhood-level economic and demographic data for a city, with a dropdown menu to select among over 40 metrics such as employment rates, business counts, and commercial property statistics. A checkbox toggles whether downtown neighborhoods are included in the visualization. Hovering over a neighborhood updates a tooltip showing the area’s name and its value for the selected metric. The map is rendered using D3.js with SVG paths from a GeoJSON file, and the dropdown dynamically updates the choropleth’s color scale using the viridis color palette.

KKelsey Xu

91% match

Loading thumbnail…

Untitled

This interactive choropleth map displays a wide range of socioeconomic indicators for city neighborhoods, selectable via a dropdown menu. Built with React and D3.js, it renders neighborhood polygons as SVG paths, with colors encoding the chosen variable. A tooltip reveals the neighborhood name and its exact value on hover. A checkbox toggles the inclusion of the downtown area. The map data is visualized from a linked dataset, allowing for dynamic exploration of employment, education, and business statistics.

KKelsey Xu

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

81% match

Loading thumbnail…

Untitled

An interactive choropleth map of Florianópolis, Brazil, displays neighborhood-level socioeconomic indicators. A dropdown menu allows users to switch between datasets, including employment rates, education levels, and business metrics. Hovering over a neighborhood reveals its name and the selected value in a tooltip. The visualization is built with React, using D3 for map projection and SVG rendering, with data loaded from a GeoJSON file.

HHenrique Reichert

81% match

Loading thumbnail…

Colorpleth Map with interactive filtering

This interactive choropleth map visualizes economic data across countries using a color scale, with a legend allowing users to filter countries by clicking on specific values. The map renders in SVG using d3.geoOrthographic projection and d3.geoPath, while the accompanying color legend enables selection that highlights matching countries and dims others. Data comes from a CSV file merged with world atlas TopoJSON via d3.csv and topojson.feature. Users can also zoom and pan the map using d3.zoom.

Nnouralkhoury

76% match

Loading thumbnail…

Choropleth Map

This interactive choropleth map visualizes global economic data by coloring each country according to its economy category, using a spectral color scale with an accompanying legend. Built with React and D3 v5, the map projects geographic boundaries using the d3.geoNaturalEarth1 projection and renders paths as SVG elements. The visualization loads world atlas data from unpkg, merges tab-separated economy classifications with TopoJSON geometry via topojson.feature, and supports zooming through d3.zoom. Hovering highlights countries in pink while tooltips display each nation’s name and economy value.

Vvic126

76% match

Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays world economies using a color gradient, with an interactive legend that filters countries by economic category. Users can zoom and pan the map, and clicking a legend entry dims non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, and d3.zoom for navigation. Data comes from the world-atlas TopoJSON and TSV datasets, with unemployment type and population shown in tooltips. The color scale uses d3.schemeSpectral, and legend interactions are handled through d3 event listeners.

Jjlongwellchc

76% match

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map visualizes countries' economies using color-coded paths, with an interactive legend that filters the map by economic classification. Clicking a legend category dims non-matching countries and highlights those selected, while a semi-transparent sphere provides geographic context. Built with React and D3 v5, the example uses `geoPath` with the `geoNaturalEarth1` projection for rendering SVG paths, `scaleOrdinal` and `schemeSpectral` for the color scale, and `zoom` for pan and zoom interactions. Data is loaded from the world-atlas package and processed via `topojson.feature`.

AAnShed

75% match