Red Dots On A Map

100%

Red Dots On A Map

✓ Published0🌍 Public

Last edited Jan 5, 2017

Created on Jan 5, 2017

This visualization renders a map of the United States covered in red dots, with the number of dots dynamically displayed in the corner. It uses Poisson-disc sampling to distribute non-overlapping dots across landmasses, refined by a point-in-polygon test to ensure dots remain within state boundaries. The code relies on d3.geo.albersUsa for projection, d3.geo.path for drawing geographic features, and a Canvas context for rendering. The user can adjust the dot radius using a mousewheel or the dat.GUI slider, which triggers redraws.

AI-generated description

Created by Christopher Manning

Summary

Red dots on a map; it really makes you think. Uses Poisson-Disc Sampling and a point in polygon test to spread out dots on this map of the United States.

This We Put 700 Red Dots On A Map article about hackneyed geographic visualizations inspired this work.

Controls

Use the mousewheel to adjust the red dot radius

References

forked from <a href='http://bl.ocks.org/christophermanning/'>christophermanning</a>'s block: <a href='http://bl.ocks.org/christophermanning/ac4c3265452529a20279'>Red Dots On A Map</a>

mit Licensed

Similar vizzes

Loading thumbnail…

map us 1

This map of the United States displays cities as red circles, overlaid on a gray state map. It uses D3’s `geoAlbersUsa` projection and `geoPath` to render the states, and plots city coordinates from `citydata.csv`. Clicking a city draws black lines to all other cities, with line thickness proportional to the clicked city’s `flow` value, and hover transitions enlarge and recolor the selected circle.

PPeiyang Li

77% 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

77% match

Loading thumbnail…

US States

This visualization displays a map of the contiguous United States, with each state rendered as a blue SVG path. Hovering over a state turns it red and updates a text overlay near the cursor, showing the state’s name and population from the GeoJSON data. The map uses `d3.geoAlbersUsa()` for projection and `d3.geoPath()` to draw shapes, while mouseover events trigger the text and resize a separate red circle in a second SVG, scaled by population. The data comes from the contiguous-usa.geojson source, and the interaction is built with React and D3 v6.

Ookahne@gmail.com

77% match

Loading thumbnail…

map with points

This visualization displays a map of the United States with a circle for each city, sized by population using a square-root scale to reduce visual disparity. It shows the geographic distribution of populated areas across the country. The code uses React to manage state and rendering, while D3 v5’s geoAlbersUsa and geoPath project and draw state boundaries and interior borders from TopoJSON data. City coordinates are projected from longitude and latitude, and circles are rendered as SVG elements with opacity.

CChase Hall

76% match

Loading thumbnail…

US Map

This example displays a map of the 50 US states, with each state filled in red and white borders separating them. The visualization uses the `geoAlbersUsaTerritories` projection and the `d3.geoPath` API to render geographic shapes as SVG paths. The map is generated from TopoJSON data loaded from a remote US atlas source, and it enhances interactivity by changing each state’s color to green when the pointer hovers over it.

Fferneyhoughedward@gmail.com

76% match

Loading thumbnail…

country map

This visualization displays a choropleth map of the United States, coloring each state in red with thin black internal borders. The map is rendered using React and D3 v5, with geographic shapes generated through `d3.geoAlbers` projection and `d3.geoPath`. State boundaries come from the US Atlas TopoJSON dataset, processed via `topojson.feature` and `topojson.mesh`. The SVG paths change to sky blue on hover using CSS, providing simple interactivity.

SSai Kaushik

76% match

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147

76% match

Loading thumbnail…

USA Map

This visualization displays a choropleth map of the United States, where individual states are filled with varying intensities of red based on values loaded from a CSV file. States without matching data appear in gray. The map is rendered as an SVG using D3.js, with geographic boundaries drawn via `d3.geoPath` and TopoJSON features from the `us-10m.v1.json` dataset. A `d3.scaleLinear` maps data values to a color range from light red to deep red for each state's fill.

Hharsha

75% match