Untitled

100%

✓ Published0🌍 Public

Last edited Jun 18, 2022

Created on Jun 18, 2022

Forked from 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.

AI-generated description

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

Similar vizzes

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

84% match

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

83% match

Loading thumbnail…

Interactive Map

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.

HHenrique Reichert

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

78% match

Loading thumbnail…

Untitled

A choropleth map of France displays the response rate per university, with red circles sized by percentage using `d3.scaleSqrt`. The map uses `d3.geoConicConformalFrance` from the composite projections library, renders SVG paths via `d3.geoPath`, and overlays city coordinates from a CSV file. Interactive tooltips appear on mouseover, showing each city’s response percentage, with data loaded using `d3.csv` and `topojson`.

Ddartigues

72% match

Loading thumbnail…

Untitled

This interactive visualization displays regional population data over time, where each region appears as a color-coded circle whose radius corresponds to a selected year’s population value. A slider controls the year from 1946 onward, triggering a smooth transition that resizes the circles to reflect changing data. The SVG renderer uses D3.js v3 scales and axes, with circle positions fixed by an ordinal x-axis and a linear y-scale for sizing. Hovering reveals tooltips with region and population details, while the data is loaded from an external CSV file.

Ssgalhamdani

72% match

Loading thumbnail…

Brazil

This visualization displays a map of Brazil drawn from a TopoJSON file containing geographic subunits. The map is rendered as an SVG using D3.js version 3, with the country's border and internal regions defined by MultiPolygon geometries and arcs. The example demonstrates how to load and parse TopoJSON data, project it, and render it as an interactive SVG map. The minimalist presentation focuses on the shape of Brazil, with no additional data encodings or visual variables—the map is likely shown in a single color or simple fill to highlight the geographic boundary. It serves as a basic template for displaying TopoJSON-based maps with D3.

EEvertLagerberg

72% match

Loading thumbnail…

Untitled

This choropleth map of the United States displays sample data for each state, with tooltips showing low, average, and high values on hover. Built with React and D3 v3, it renders states as SVG paths using the `uStates.js` helper, and colors each state via `d3.interpolate` from a yellow-to-dark-red scale based on randomly generated data. The custom tooltip div appears on mouseover, populated by the `tooltipHtml` function.

MManh Pham

72% match