[DataVizStudy]Using Size and menu with Points on the map

100%

[DataVizStudy]Using Size and menu with Points on the map

✓ Published0🌍 Public

Last edited Nov 8, 2019

Created on Nov 4, 2019

Forked from [DataVizStudy]Using Size with Points on the map

This example displays global terrorism events from 2018 as points on a world map, with point size encoding the combined number of wounded and killed individuals. The visualization uses a React front-end and D3 v5, employing `d3.geoNaturalEarth1` and `d3.geoPath` to render the map from World Atlas TopoJSON data, while `scaleSqrt` maps data values to circle radii. The map includes graticules and country interiors for visual context, and the data is loaded as CSV and processed before rendering as SVG circles.

AI-generated description

The world map shows country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

The points on the map shows 2018 global terrorism events.

The size of the points represents the number of people who were wounded or killed in the terrorism event.

MIT Licensed

Similar vizzes

Loading thumbnail…

[DataVizStudy]Using Size with Points on the map

This interactive world map displays global terrorism events from 2018, using the [2018 Global Terrorism Database](https://gist.github.com/hotdoujiang/e6064faca930a996230aa4dc3ccd8db0). Each point's radius encodes the number of people wounded or killed, with color set to a semi-transparent "bloody red" to visually emphasize severity. The visualization is built with React, D3 v5, and SVG, using the `d3.geoNaturalEarth1` projection for the map and `d3.geoPath` to render land boundaries and graticules. Point sizes are scaled via `d3.scaleSqrt` with a maximum radius of 13 pixels.

Hhotdoujiang

95% match

Loading thumbnail…

[DataVizStudy]Points on the map

This visualization displays the world’s country boundaries alongside 2018 global terrorism events, plotted as semi-transparent red points. Using a Natural Earth projection, it renders landmasses, graticules, and interior borders, then positions each event circle via the d3.geoNaturalEarth1 projection and d3.geoPath. The map is built with React, pulling geographic data from World Atlas TopoJSON and event coordinates from a CSV of the Global Terrorism Database.

Hhotdoujiang

88% match

Loading thumbnail…

Terrorism map world

This map visualizes global terrorism incident data, using a square-root scale to encode the number of deaths from each attack as the radius of red circles. Built with React and D3.js (v5), it projects city coordinates onto a natural Earth projection via `geoNaturalEarth1()` and renders landmasses, graticules, and country boundaries using `geoPath` and TopoJSON data. Each incident is a circle with opacity, colored by the `Deaths` field from the provided CSV dataset.

Jjustineaeyels

81% match

Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city violent crime rates, using a square-root scale to encode the data. The map includes landmasses, graticules, and country borders rendered via `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3 v5. City coordinates are projected from longitude and latitude to SVG circle positions. The visualization is built with React, loads data via `useWorldAtlas` and `useCities` hooks, and uses TopoJSON for country boundaries and CSV crime data.

Yyyaaa1

78% match

Loading thumbnail…

Sized Points on a Map

A geographic visualization displays US cities as circles, with area proportional to total crimes reported. City data originates from a CSV file, while state boundaries and graticules are drawn from the us-atlas TopoJSON. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering map features, and d3.scaleSqrt to map crime counts to circle radii. React and D3 v5 manage the SVG output, with semitransparent teal points layered over a muted landmass.

Yyyaaa1

78% match

Loading thumbnail…

Sized Points on a Map

A world map displays COVID-19 cumulative cases for cities with populations over 50,000, using sized circles where radius encodes case count via a square-root scale. The visualization uses React with D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render country boundaries, graticules, and city points as SVG circles. Data comes from the World Health Organization via a CSV file, with country shapes from World Atlas TopoJSON.

Ggcappadaniel

78% match

Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with sized points representing nuclear explosions, where the point radius corresponds to the blast depth. The map is rendered using SVG with D3’s `geoNaturalEarth1` projection, showing graticules, land masses, and country boundaries from the World Atlas TopoJSON. City data, sourced from a CSV of nuclear explosions, is plotted as semi-transparent teal circles scaled by a `scaleSqrt` size scale based on depth values. The visualization is built with React, D3 v5 for geospatial projection and data loading, and topojson for processing world atlas shapes.

RRochelle

77% match

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, with point size proportional to the number of crimes. The visualization uses a natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath, rendering spheres, graticules, and land boundaries from World Atlas TopoJSON data. Circle radii are scaled using d3.scaleSqrt, with city coordinates and crime statistics loaded from a CSV file. The React component architecture leverages hooks to fetch and process data asynchronously.

Yyyaaa1

77% match