Q1 — VizHub

100%

Q1

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

This interactive visualization presents two maps side-by-side: a world map colored by continent and a US map showing unemployment rates by state. The world map uses `d3.geoNaturalEarth1` projection to display countries from the `world-atlas` dataset, with countries colored via `d3.scaleOrdinal` based on a continent mapping. The US map employs `d3.geoAlbersUsa` projection with the `us-atlas` states dataset, rendering geographic paths through `d3.geoPath`. Both maps include graticule overlays, hover tooltips, and SVG-based rendering with animated state transitions between views.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

dinesh ice8 q1

This example presents a dual-map visualization: a world choropleth and a US states choropleth, rendered as SVG using D3.js v7. The world map uses `d3.geoNaturalEarth1` projection and color-coded countries based on population data from a CSV file, while the US map uses `d3.geoAlbersUsa` projection with state-level values. Both maps load GeoJSON from the world-atlas and us-atlas CDN packages, and use `topojson-client` functions `feature` and `mesh` for geometry processing. A hover tooltip displays values; the US section also includes state borders drawn via a mesh layer.

Ddineshsingiri18@gmail.com

81% match

Loading thumbnail…

Q1-ASSIGN-8

This choropleth map displays 2023 US unemployment rates by state using a purple sequential color scale and an Albers USA projection. It employs `d3.geoPath` with the `topojson` library to render state boundaries from the us-atlas TopoJSON, while a custom tooltip shows state names and exact percentages. Data originates from the Bureau of Labor Statistics, rendered as SVG with a gradient legend indicating relative unemployment levels.

Kkpavithrasai@gmail.com

81% match

Loading thumbnail…

Dinesh ICE8 Q1

This example shows two maps side-by-side: a world map in a Natural Earth projection and a map of U.S. states using the Albers USA projection, with each state colored according to a numeric value from a linked CSV dataset. The visualization uses D3.js v7 with the `d3.geoNaturalEarth1()` and `d3.geoAlbersUsa()` projections, alongside `d3.geoPath` for rendering GeoJSON features. It loads world countries from `world-atlas`, U.S. states from `us-atlas`, joins state IDs to CSV values, and applies a sequential purple color scale to encode the data.

Ddineshsingiri18@gmail.com

80% match

Loading thumbnail…

ICE 8-1Q Sadvik

This visualization presents two interactive geographic maps side by side: a world map using the Natural Earth projection and a United States map using the Albers USA projection. The world map colors countries by population (in millions) using a sequential blue interpolator, while the US map shades states by crime rate using a green interpolator. Built with D3 v7 and TopoJSON, both maps load geographic data from CDN-hosted world-atlas and us-atlas JSON files, rendering SVG paths via `d3.geoPath` with hover tooltips displaying country or state names and their corresponding values. Non-highlighted regions appear gray, indicating missing data.

SSadvik

78% match

Loading thumbnail…

T1-MAP-CM

This example presents two maps side by side: a world basemap using TopoJSON data from world-atlas and a US choropleth showing education levels (percentage of adults with a bachelor’s degree or higher). The world map uses d3.geoNaturalEarth1 and d3.geoPath to render neutral country boundaries, while the US map joins CSV data with FIPS codes from us-atlas via d3.csv, applies a sequential PuBuGn color scale, and includes an interactive tooltip for state values.

Cchandanamahesh0215@gmail.com

78% match

Loading thumbnail…

State Map with Population - Rajan

This visualization presents two maps: a world map using the Aitoff projection and a US state choropleth displaying unemployment rates. The US map colors states on a sequential scale, with hover interactions revealing exact values via a tooltip. Built with D3 v7, it uses `d3.geoAitoff` and `d3.geoAlbersUsa` for projections, `d3.geoPath` for rendering, and TopoJSON data from world-atlas for country and state boundaries. The choropleth color encoding is generated dynamically from inline CSV data, with a legend included.

Kkhushburajan2015@gmail.com

77% match

Loading thumbnail…

Map

This example presents two static choropleth-style maps side-by-side: a world map using the Natural Earth projection and a U.S. map using the Albers USA projection. Both maps load TopoJSON data—from `world-atlas` and `us-atlas` datasets—and render country and state boundaries as SVG paths via `d3.geoPath` and `topojson.feature`. The world map includes a graticule generated by `d3.geoGraticule`, while the U.S. map uses `d3.geoAlbersUsa`. Regions are filled with solid colors, and hover tooltips are added using SVG `title` elements.

SSahil Thapa

77% match

Loading thumbnail…

World Map

This example visualizes homelessness-related diversity metrics across US states, mapping numerical values to a white-to-blue color scale. The code uses D3 v4 with the `geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from TopoJSON data, while territories are colored based on a static `diversity` dataset. State paths receive hover effects through CSS classes, and the visualization is built within a React framework using SVG rendering. Animated interactions are present, though the tooltip functionality appears incomplete in the provided code.

EEunice Tu

77% match