Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Jan 8, 2024

Created on Jan 8, 2024

This example animates a map of Walmart store openings across the United States over time, using a sliding date window to reveal dots as they appear. It combines D3 v7 with a topojson map of the lower 48 states and a geographic projection via `d3.geoAlbersUsa` and `d3.geoPath`. Store locations are loaded from a TSV file and sorted by date, while a scrubber drives the animation. The code uses `d3.create`, `selection.join`, and `transition.attr` to show and hide arrival points, with a blue dot marking the current store.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes Walmart sales data, plotting temperature against sales year with draggable, animated transitions. Every two seconds, the x-axis automatically cycles through different data columns—year, temperature, weekly sales, and fuel price—updating the circles’ positions accordingly. Built with D3 v6, the visualization uses scaleLinear, axisLeft, axisBottom, and a reusable scatterPlot factory function to manage state. Data loads from a CSV via d3.csv, and the SVG renders with a custom Share Tech font, creating a dynamic exploration of retail metrics.

Mmahee0725

74% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic D3 starter template with hardcoded date data displayed as two animated SVG rectangles representing time intervals. The visualization uses D3 v7 scales and axes to map time values, with bars animating from zero width to full width over one second using transitions. It also includes time parsing utilities like `utcParse` and `timeParse` to handle date formats, while `axisBottom` and `axisLeft` generate the time-labeled axes. Though the code sets up scales and data, the actual visual output is limited to two green bars without a complete data-binding workflow.

DDaniel Russell-Brain

73% match

Loading thumbnail…

Fork of D3 Starter

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.

Eemilienbf

73% 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ć

72% match

Loading thumbnail…

Walmart’s growth

A map of the United States charts the opening of Walmart stores from 1962 onwards. Each store is represented by a dot placed according to its geographic coordinates, using the Albers USA projection. A date-scrubbing control animates the dots into view over time, revealing the company’s expansion from its first store in Arkansas to thousands across the country.

PPhilippe Rivière

72% match

Loading thumbnail…

Fork of D3 map

This example presents a world map populated with animated data points sourced from a live SPARQL query (Netwerk Digitaal Erfgoed). It uses d3.geoPath and d3.geoNaturalEarth1 to render country boundaries via TopoJSON, then plots geographic coordinates as circles. The circles animate in sequence using d3 transitions with a bouncy ease, starting from zero radius. The visualization demonstrates loading external data, projecting coordinates, and adding motion to a static map.

AAMINU LAWAL

71% match

Loading thumbnail…

Fork of reusable D3 Scatter Plot

This interactive map of the United States plots ten major cities as red circles, scaled by their netflow values. A click on any city draws semi-transparent black lines connecting it to all other cities, visually comparing its position relative to the entire set. Built with React and D3, the visualization uses a geoAlbersUsa projection from `d3.geoPath` to render the states, while mouseover transitions animate circle size and color, and the `topojson` library converts US Atlas data for state boundaries.

GGan Gao

71% match

Loading thumbnail…

Fork of Fork of Fork of World Map

This example displays an interactive world map using D3.js and the d3-geo-projection library. Users can drag to rotate the orthographic projection and click on individual countries to toggle between orthographic and Mercator projections; clicking the United States switches to a US-focused AlbersUSA projection. The visualization renders country boundaries as SVG paths via d3.geoPath, with a graticule overlay, and uses d3.drag and d3.zoom for interaction. It loads geographic data from TopoJSON (world-atlas) and country names from a TSV file.

Bbindhureddy98

70% match