Skip to main content
SimilarExport ZIP
100%

shivani ice 8 Fork of Vanilla D3 Vibecoding Template

✓ Published0🌍 Public
Bbodushivani2601@gmail.com
Last edited Nov 9, 2025
Created on Nov 9, 2025

This D3.js (v7) world map uses a choropleth to show the most recent year of United Nations population data (from the `datasets/population` GitHub repository). Country colors are mapped to population using a log-scaled YlGnBu interpolator to handle data variance, and the SVG rendering applies a Natural Earth projection via `d3.geoNaturalEarth1`. The map includes graticule lines, hover tooltips with a `d3.select`-based title element, and a log-scale gradient and axis legend using `d3.axisBottom`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

shivani map 2 Fork of Vanilla D3 Vibecoding Template

A U.S. state population choropleth map visualizes 2020 Census data using a log-scaled color gradient. The map renders states as SVG paths via `d3.geoPath` with an Albers USA projection, coloring each state through `d3.scaleLog` and the `d3.interpolateYlGnBu` interpolator. Hovering highlights state borders and shows a tooltip with the population value. The map also includes a gradient legend with log-spaced color stops. The code loads TopoJSON data from the us-atlas package and uses D3 v7.

Bbodushivani2601@gmail.com
87% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This choropleth map visualizes 2024 estimated country populations, coloring nations from light yellow to dark red on a Natural Earth projection to show relative population sizes. The visualization uses d3.geoNaturalEarth1 for map projection and d3.geoPath to render country boundaries from TopoJSON data loaded via d3.json and converted with the `feature` function. Population values are mapped to colors using d3.scaleSequential with an interpolateYlOrRd color scheme, while hover tooltips display each country’s name and population using SVG `<title>` elements.

Ssuddala2001@gmail.com
79% match
Loading thumbnail…

ICE 8 1Q Sharanya

This visualization shows a world map displaying population by country, colored with a pink-to-red sequential scale where darker shades indicate higher population numbers. The map uses a Natural Earth projection and includes interactive tooltips that reveal each country's name and population on hover. Built with D3 v7, it loads GeoJSON country boundaries from the world-atlas package and population data from a CSV file hosted on GitHub. The code employs `d3.geoNaturalEarth1()` for projection, `d3.geoPath` for rendering paths, and `d3.scaleSequential` with `interpolatePuRd` for the color scale. Countries lacking population data appear in a light pink fill, and a pink outline marks the Earth's boundary.

Cchengalvasharanya@gmail.com
77% match
Loading thumbnail…

Shish's Ice 8- Map

This choropleth maps sample population figures by country, joining an inline CSV to a world atlas via matching country names. The visualization uses D3 v7’s `geoNaturalEarth1` projection, `geoPath`, and `scaleSequential` with an YlGnBu interpolator, rendering graticules and country polygons as SVG paths. Tooltips appear on hover, and a TopoJSON (countries-110m.json) data source supplies the geometry.

SSai Shishir Koppula
77% match
Loading thumbnail…

Shish's Ice 8- Making Maps

This interactive world map visualizes synthetic 2025 population and GDP per capita data for major countries using a Natural Earth projection. Users click toggle buttons to switch between two sequential color scales, with D3 transitions animating the country fill colors over 900 milliseconds. The visualization loads TopoJSON world-atlas data via d3.json, renders paths with d3.geoPath, and displays graticules, a legend, and hover tooltips through D3 event handlers. Countries without data appear gray, while the legend gradient updates only for the population metric.

SSai Shishir Koppula
77% match
Loading thumbnail…

Shish's ICE7- Reusable scatter plot

This scatter plot visualizes world population data for 2025, comparing each country’s population against its median age. Using D3.js v7, the code loads a CSV file, parses numeric values, and renders circles scaled with `d3.scaleLinear` for both axes. The SVG visualization includes axis labels, hover effects that change circle color, and tooltips via appended `title` elements. Data comes from a GitHub-hosted CSV source, and rendering uses standard D3 SVG primitives with margins and transitions.

SSai Shishir Koppula
76% match
Loading thumbnail…

shish's ice7-reusable scatter plot

This scatter plot visualizes projected 2025 world population data, showing each country’s total population against its urban population percentage, with circle size encoding each nation’s share of the global population. Built with D3 v7, it renders as an SVG with linear scales for both axes and a square-root scale for radius. Interactive tooltips appear on mouseover, displaying the country name, population, urban percentage, and world share. The chart loads data from a CSV file and uses D3’s `d3.csv`, `d3.scaleLinear`, and `d3.scaleSqrt` APIs.

SSai Shishir Koppula
76% match
Loading thumbnail…

incls 8 shivani Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes Fisher’s Iris dataset, comparing sepal length against sepal width with species distinguished by color. The D3 v7 code uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to render an SVG chart, loading data via `d3.csv`. Interactive legend hover highlighting fades non-selected species, while a separate world map using `d3.geoNaturalEarth1`, `d3.geoPath`, and TopoJSON is also included in the files.

Bbodushivani2601@gmail.com
76% match