Skip to main content
SimilarExport ZIP
100%

ICE-8

✓ Published0🌍 Public
CCharith Kapuluru
Last edited Nov 10, 2025
Created on Nov 10, 2025
Forked from React & D3 Starter

ICE-8 is a multi-view visualization suite exploring four distinct chart types: a research collaboration force-directed network, a programming languages tree, a choropleth map of US state populations, and an interactive world map. The network uses `d3.forceSimulation` with draggable nodes; the tree uses `d3.stratify` and `d3.tree` with colored generation levels; the US map leverages `d3.geoAlbersUsa` and `topojson-client` with a sequential color scale; and the world map uses `d3.geoNaturalEarth1` with hover highlighting. Each view loads data from CDN-hosted TopoJSON files.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE_8

This example presents a data visualization titled ICE_8, which appears to be a custom rendering built with React and D3. It uses a force-directed simulation (`d3.forceSimulation`) to position nodes, and draws them using SVG paths generated via `d3.geoPath`. The visualization is rendered within a React component, likely incorporating interactivity or animation to explore the network structure. The underlying data source is not explicitly defined in the provided files, but the code demonstrates a hybrid approach combining D3’s layout algorithms with React’s component model for a dynamic, web-based display.

CCharith Kapuluru
85% match
Loading thumbnail…

ice8

The ICE-8 Tree & Network visualization presents two distinct views of relational data, toggled via buttons. The Tree View displays a hierarchical structure, while the Network View maps interconnected nodes, both rendered as scalable vector graphics. The example uses D3.js version 7, leveraging its core selection and layout APIs, with the force-directed simulation handling node positioning in the network mode. The SVG canvas is dynamically redrawn based on the selected view.

Ssdarsi2404@gmail.com
83% match
Loading thumbnail…

ICE 8

This visualization displays a choropleth map of the United States, with each state filled by a categorical color from the D3 category10 scheme. The map uses the geoAlbersUsa projection and renders state boundaries as SVG paths with white strokes via d3.geoPath. It loads US Atlas TopoJSON data from a CDN, extracts state features using topojson’s feature function, and shows state names as tooltips on hover.

66264kusuma@gmail.com
82% match
Loading thumbnail…

ICE-8

ICE-8 presents a pair of interactive SVG choropleth maps showing world GDP and US state values. The world map projects Natural Earth TopoJSON countries with a Natural Earth projection and uses a green sequential color scale, while the US map uses an Albers USA projection. Both maps use `d3.geoPath`, TopoJSON features, and tooltip interactions. Data is joined from remote CSV sources, with JavaScript fetch and D3’s data loaders handling URL fallbacks.

SSainathreddypotu@gmail.com
82% match
Loading thumbnail…

ICE8.1

This interactive map of the world renders country borders and landmasses in SVG using React and D3.js, drawing from the World Atlas TopoJSON dataset. The code applies a conic equidistant projection via `d3.geoConicEquidistant` and generates geographic paths with `d3.geoPath`, alongside graticules from `d3.geoGraticule`. The visualization layers a dark blue sphere for oceans, green land fills with darker strokes for interiors, and light cyan latitude/longitude lines, all styled through CSS classes within the `Marks` component.

BBryanA999
81% match
Loading thumbnail…

ICE-8 map mapping

A world map uses a natural Earth projection to visualize population data by country, with a sequential grey color scale mapping each nation’s population value from a CSV file. Built with d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, the SVG renders countries as colored paths with tooltips showing names and counts, plus a gradient legend. The visualization highlights shared borders using topojson.mesh, and countries lacking data appear in a neutral gray.

Ppanyamsantosh09@gmail.com
80% match
Loading thumbnail…

ICE 8

This example displays a world map from the world-atlas TopoJSON dataset, rendered as styled SVG paths for each country, with an underlying blue sphere as background. It uses d3.geoEquirectangular for projection and d3.geoPath to generate paths from GeoJSON features extracted with topojson.feature. Hover effects change country fill colors via CSS, while the React framework integrates the D3 code within a margin-aware container component.

MMounishSeeni
80% match
Loading thumbnail…

ICE-8 World Map and USA Maps

This interactive map viewer displays world countries, U.S. states, and U.S. counties, letting the user switch between geographic scales via buttons. It renders dynamic SVG paths using React's `useState` and `useEffect` hooks, fetching GeoJSON from `us-atlas` and `world-atlas` via TopoJSON. The visualization applies distinct projections—`geoNaturalEarth1` for the world map and `geoAlbersUsa` for U.S. views—through `d3.geoPath`, with a deep blue background. Map features are drawn as white-filled, black-stroked paths, providing a clean comparison of administrative boundaries across scales.

SSanjib Paudel
80% match