DATAVIZ

100%

✓ Published0🌍 Public

Last edited Aug 2, 2023

Created on Aug 1, 2023

This interactive map visualizes global LGBTQ+ censorship events over time, with a bubble map showing the geographic distribution and a linked date histogram below for temporal filtering. Users can brush the histogram to filter the map by date range. The visualization loads world country boundaries from the TopoJSON World Atlas and event data from a CSV file, rendering an SVG map using a d3.geoNaturalEarth1 projection with d3.geoPath. The React app coordinates the components, while d3's brush and axes enable the time-based filtering interaction.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 2020_Ep48 - 38. Choropleth Map - (React, D3 - HIV/AIDS data)

This choropleth map visualizes the global share of the population infected with HIV/AIDS for the year 2017, using a yellow-to-red sequential color scale to encode prevalence rates. Countries with missing data appear in gray. The visualization is built with React and D3 v6, using `geoNaturalEarth1` and `geoPath` for map projection, `geoGraticule` for grid lines, and `topojson` to convert world atlas data into GeoJSON features. It renders as SVG, pulling HIV prevalence data from an IHME CSV dataset.

MMinwoo Pak

72% match

Loading thumbnail…

HIV/AIDS with React & D3

This visualization uses a D3 geoEqualEarth projection to render a world map colored by HIV prevalence rates for 2017, with a sequential YlOrRd color scale indicating the percentage of the population aged 15-49 affected. Built with React and D3 v7, the code loads country boundaries and interior lines via the topojson `feature` and `mesh` functions, while CSV data from IHME is joined to map geometries using ISO country codes. SVG paths render the sphere, graticules, and landmasses, with countries lacking data filled in grey.

MManon ROMAIN

71% match

Loading thumbnail…

test

An interactive visualization combines a bubble map with a date histogram to explore global migrant deaths. The map uses a natural Earth projection for country boundaries and graticules, with circle radii scaled to the square root of the death count. The histogram bins reported deaths by month, and a brush filter on the histogram updates the map’s displayed data, revealing temporal patterns. Data comes from the Missing Migrants Project CSV, while country shapes are derived from the world-atlas TopoJSON. The implementation leverages D3 v5 for projections, scaling, and brushing, all within a React component rendering SVG.

AAmir

71% match

Loading thumbnail…

Zillow

This visualization displays the global prevalence of HIV/AIDS among adults aged 15-49 for the year 2017, using a sequential color scale from yellow to red shaded across country boundaries. The React app loads world map topology from World Atlas TopoJSON and health data from a CSV source, then projects the map with d3.geoNaturalEarth1 and renders it as SVG paths. Countries missing data appear gray, while graticules and interior borders provide geographic context.

Vvijaya321

71% match

Loading thumbnail…

An interactive D3 map

This interactive D3 map displays a world map with countries colored pink and overlaid with green-bordered circles, visualizing numerical values from a CSV dataset via a color-coded choropleth. Built with React and D3 v5, it loads GeoJSON topology data from the world-atlas package and uses topojson’s feature and mesh functions to render land and country boundaries as SVG paths, while the data CSV is joined by ISO country codes for the visual encoding.

Nnouralkhoury

70% match

Loading thumbnail…

Dataviz 12 - Multiple views

This interactive visualization combines a proportional symbol map with a time-series histogram to explore migration incidents. The map uses a D3 natural Earth projection with graticules, plotting circles sized by the square-root scaled total dead and missing from the Simplemaps World Cities Database, overlaid on World Atlas TopoJSON land boundaries. Below, a date histogram bins reported incidents by month using D3's `scaleTime` and `histogram` APIs, displaying the aggregated casualty count per bin with axes from custom `AxisBottom` and `AxisLeft` components, all rendered as SVG in React.

RRyAlpha

70% match

Loading thumbnail…

Optimized React w/ Brushing

A choropleth of missing migrant incidents combines a world map with a filterable timeline. Geographic data from the World Atlas TopoJSON renders via `d3.geoPath` and `d3.geoGraticule` in an SVG, overlaid with circles sized by `d3.scaleSqrt`. A date histogram below, built with `d3.scaleTime` and `d3.histogram`, uses `d3.brushX` to select a date range. This brushing interaction filters the bubble map circles, revealing temporal patterns in the dataset.

PPadoSensei

70% match

Loading thumbnail…

HIV / AIDS Choropleth Map

This visualization uses a natural Earth projection with D3’s `geoNaturalEarth1` and `geoPath` to draw world landmasses, graticules, and sphere outlines, overlaid with circles sized by city population via `scaleSqrt`. The React component loads World Atlas TopoJSON for boundaries and a CSV of HIV/AIDS prevalence data for cities, mapping each city’s longitude and latitude to screen coordinates. Semi-transparent teal circles highlight population distribution, while the underlying choropleth styling uses SVG paths and CSS classes. Data sources include the World Atlas TopoJSON and a Simplemaps-derived cities dataset.

JJoakim Warholm

70% match