Yaswanth_ICE_8

100%

Yaswanth_ICE_8

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 8, 2025

Forked from Map

This example presents two linked SVG maps of the world showing the geographic distribution of the largest lawsuits (in USD billions). A choropleth map displays all countries by settlement value, while a second map highlights the top N countries and dims the rest, with an interactive number input to adjust N. The visualization uses D3 v7 with `d3.geoPath` and TopoJSON from the world-atlas dataset. Hovering over countries reveals a tooltip, and highlighted countries are summarized as pills beneath the maps.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-08 11550685

This example presents an interactive world map using a pink-filled sphere and blue countries with red borders. Hovering over a country highlights it in yellow. The visualization uses D3 v5’s `geoEquirectangular` projection and `geoPath` to render geographic features, while TopoJSON’s `feature` API converts the world-atlas countries-110m.json data into GeoJSON paths. The SVG elements are managed with D3 selections, including `select`, `selectAll`, and `enter`. The map loads the TopoJSON dataset from a CDN and includes basic CSS styling for interactivity.

AAISWARYAMARAPATLA1999

74% match

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

73% match

Loading thumbnail…

ICE8_WorldMap_hd

This example presents two interactive SVG maps built with D3 v7 and TopoJSON: a world map showing random population density values and a U.S. map displaying random crime rates. The world map uses a Natural Earth1 projection, while the U.S. map employs an AlbersUsa projection. Both maps encode data through sequential color scales—YlOrRd for density and Blues for crime—applied to country and state polygons via `d3.geoPath`. The code fetches geographic data from world-atlas and us-atlas CDN packages, then appends tooltips with the corresponding random values.

HHarshithaDontha@my.unt.edu

73% match

Loading thumbnail…

ICE_8_maps

This example presents a basic world map rendered as an SVG using D3.js version 7 and the TopoJSON client library. The visualization displays country borders as geographic paths, created with the `d3.geoPath` projection from TopoJSON data loaded via `topojson-client`. The interface shows a single titled view inside a chart container, highlighting a straightforward representation of global landmasses without additional interaction or data layers. The code relies on D3’s map projection utilities to translate geographical coordinates into the 960×520 viewBox.

AAbhiramPudi@my.unt.edu

73% match

Loading thumbnail…

ICE8_SarathL

This example renders a world map with a blue sequential color scale encoding 2022 population estimates for 20 selected countries. The visualization uses D3 v7 with a Natural Earth projection and TopoJSON world-atlas data, applying `d3.geoPath` to draw country boundaries and `d3.scaleSequential` with `d3.interpolateBlues` for the choropleth fill. Hover tooltips, created via SVG `<title>` elements, display each country’s name and population, while unmatched countries appear gray. The code includes a name-correction mapping to align the dataset with TopoJSON’s country names.

Ssarathlingareddy754@gmail.com

73% match

Loading thumbnail…

ICE 08 11590101

This example presents a world map rendered with D3 v5 and TopoJSON, using the `geoMercator` projection and `geoPath` to draw country boundaries from the world-atlas countries-110m dataset. The SVG displays oceans in blue and countries in purple, with a hover effect that changes the fill color to pink via CSS. The code loads the TopoJSON data asynchronously with `d3.json`, converts it to GeoJSON using `feature`, and appends each country as a path element.

DDivyasri0310

73% match

Loading thumbnail…

Fork of ICE-8 1A kumar danam

This example presents two side-by-side SVG map visualizations: a world map showing population data and a U.S. map displaying crime rates. The world map uses the `d3.geoNaturalEarth1` projection with a sequential color scale (`d3.scaleSequential` with `d3.interpolateYlOrRd`) to encode population values from a hardcoded dataset, while U.S. states are rendered via `d3.geoAlbersUsa`. Both maps load TopoJSON data from `world-atlas@2` and `us-atlas@3`, converting it with `topojson.feature` and drawing paths using `d3.geoPath`. Graticules and tooltips via SVG `<title>` elements enhance the display.

KKumar Danam

72% match

Loading thumbnail…

ICE-8_world_map

This example shows a world map with countries colored in red against an orange sphere, and hovering highlights each country in gray. It uses D3 v5’s `geoAzimuthalEqualArea` projection with `geoPath` to render the map, and TopoJSON’s `feature` method to extract country boundaries from the world-atlas countries-10m dataset. The SVG elements are styled via CSS, including hover effects and stroke opacity.

NNiharika-Guthikonda

72% match