Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Sep 21, 2022

Created on Sep 21, 2022

This fork of D3 Starter uses SVG rendering to display a choropleth map of US counties with bubble overlays sized by population. The visualization loads TopoJSON geographic data and renders county boundaries, internal state lines, and semi-transparent red circles at each county centroid where circle radius is scaled by the square root of population using `d3.scale.sqrt`. Interactive tooltips on hover reveal county names and population values. The code uses `d3.geo.path` for geographic projection and `topojson.mesh` for state borders, with `d3.select`, `.data()`, `.enter()`, and transition methods for dynamic styling. A YouTube tutorial link is embedded in the README.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This visualization shows a world map with countries colored by population using a threshold scale, rendered as SVG paths via `d3.geoPath` with a Mercator projection. The choropleth uses a quantized color range from light to dark blue, and hover interactions trigger tooltips built with `d3-tip`, displaying each country’s name and population. Data comes from a TopoJSON file and a TSV of population figures, both loaded asynchronously with the queue library.

Ddaniel

82% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example displays a choropleth map of U.S. states, using darker blue fills to indicate higher population values from a hardcoded dataset for fourteen states, with unlisted states shown in light gray. It loads TopoJSON from the us-atlas package, converts it to GeoJSON with `feature`, and renders paths via `d3.geoPath` and the `d3.geoAlbersUsa` projection. A linear color scale maps population extents to a blue range, and hover tooltips appear through SVG `title` elements. The map uses D3 v7 and TopoJSON-client, with an SVG rendering approach.

Ssaisanthoshravula@my.unt.edu

82% match

Loading thumbnail…

Fork of Fork of HTML Starter

This interactive choropleth map visualizes global population by country, with each nation color-coded according to population size using a threshold scale and a blue sequential color palette. Hovering over a country highlights its borders and displays a tooltip showing the country name and exact population figure. The visualization loads geographic data from a TopoJSON file and population statistics from a TSV file, then renders the map using `d3.geoMercator` projection and `d3.geoPath`. Tooltips are implemented with the d3-tip library, while the queue library manages asynchronous data loading.

Sshindeayush76@gmail.com

81% match

Loading thumbnail…

Fork of HTML Starter

This choropleth map visualizes world population data from a CSV file, displaying countries in a sequential blue color scale based on their population size. It renders an SVG with D3 v6, using `d3.geoNaturalEarth1` and `d3.geoPath` to draw country boundaries from TopoJSON world-atlas data. Interactive tooltips appear on mousemove, showing country names and population values, while a gradient legend indicates the color scale up to 1.5 billion people.

BBalaji Dasari

81% match

Loading thumbnail…

Fork of Fork of D3 Starter

This interactive map displays country boundaries with colors representing continents, using an orthographic projection that rotates as the user drags the globe. The visualization loads world-atlas data from TSV and TopoJSON files, then fixes specific country discrepancies before rendering. It uses `d3.geoPath`, `d3.geoOrthographic`, `d3.zoom`, and `d3.drag` for interaction, with continent colors assigned via `d3.scaleOrdinal` from the Tableau10 scheme. Hovering highlights a country in red, while the title element shows the country name and index.

IIgor Bojković

80% match

Loading thumbnail…

Fork of Fork of Fork of D3 world map example with TopoJSON to GeoJSON and circular indicators

This example displays a U.S. map with circular indicators, initially showing population-based circles over state boundaries. It converts TopoJSON to GeoJSON using `feature` and `mesh` from `topojson`, while `d3.geoPath` renders the SVG shapes. React hooks manage asynchronous data loading from a CDN via `d3.json`. The visualization uses `d3.scaleLinear` and `d3.scaleSqrt` to size and color the circles, though the render function currently outputs an empty SVG.

HHOURPRIMERA@GMAIL.COM

80% match

Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This choropleth map colors world countries by population, using darker blues for more populous nations while unlisted countries appear gray. A legend explains the visual encoding. The example loads world-atlas TopoJSON, converts it to GeoJSON features using topojson-client, and projects the map with d3.geoNaturalEarth1 and d3.geoPath. A d3.scaleLinear maps population values to a light-to-dark color range, and SVG paths render each country with tooltips showing population figures.

SSathviKankanala@my.unt.edu

80% match

Loading thumbnail…

Fork of React Starter

This React visualization displays a choropleth map of the United States, coloring each state by a numeric rate value from an embedded dataset. Users can click individual states to zoom in and out, with the map resetting when clicking the background. The implementation uses React to render the component, while D3.js handles the SVG generation, `d3.geoIdentity` and `d3.geoPath` for geographic projections, `d3.scaleQuantize` with `d3.schemeBlues` for color encoding, and `d3.zoom` for interactive panning and scaling. TopoJSON data is loaded from a local `map.json` file to define state boundaries.

SSimeon

79% match