Skip to main content
Log in
S

stellaWangg

@stellaWangg·8 public vizzes

Loading thumbnail…

DATAVIZ

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.

Aug 2, 2023
Loading thumbnail…

Fork of 2021 Human Development Index

This visualization shows a 2021 world map of the Human Development Index, with countries colored on a green scale from dark (high HDI) to light (low HDI). Hovering reveals each country’s exact value via a tooltip. The map uses `d3.geoPath` with a `geoNaturalEarth1` projection to render country shapes from TopoJSON, and supports zooming via `d3.zoom`. Colors are assigned by comparing HDI values retrieved from a CSV file against a discrete scale built from `d3.schemeGreens`, with a custom color legend.

Aug 1, 2023
Loading thumbnail…

Fork of 2015 Internet Users World Map

A choropleth map colors the world by each country’s percentage of internet users in 2015, using a six-step green scale from `d3.schemeGreens`. Hovering reveals a country’s exact value in a tooltip, while the view supports interactive zoom via `d3.zoom` to bounding boxes. The map is drawn with `d3.geoNaturalEarth1` and `d3.geoPath` from TopoJSON data, with a color legend built from a custom `scaleOrdinal` scale. Internet usage data comes from a CSV of per-100-people statistics.

Aug 1, 2023
Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization displays migrant deaths and missing persons on a world map, with a time-series histogram below. The map uses D3's `geoNaturalEarth1` projection and `geoPath` to render landmasses, graticules, and country boundaries, while circles sized by `scaleSqrt` represent death counts from a CSV dataset. A brushable histogram, built with `brushX` and `scaleTime`, filters the map's data points by date range. React's `useMemo` optimizes the rendering of static geographic layers for performance.

Aug 1, 2023
Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization displays migrant deaths and missing persons on a world map, with a time-series histogram below. The map uses D3's `geoNaturalEarth1` projection and `geoPath` to render landmasses, graticules, and country boundaries, while circles sized by `scaleSqrt` represent death counts from a CSV dataset. A brushable histogram, built with `brushX` and `scaleTime`, filters the map's data points by date range. React's `useMemo` optimizes the rendering of static geographic layers for performance.

Aug 1, 2023
Loading thumbnail…

Fork of Colorpleth Map with interactive filtering

This interactive choropleth map displays global economic data by country, where users can click legend items to filter and highlight specific categories. Built with React and D3 v5, the visualization uses d3.geoPath, d3.geoNaturalEarth1, and d3.scaleOrdinal to render an SVG world map. The map and color legend respond to clicks by adjusting opacity, dimming non-selected countries and legend ticks. Data comes from the world-atlas package, which combines TopoJSON geometries with TSV metadata.

Aug 1, 2023
Loading thumbnail…

Fork of ICE 08 11540905

This interactive map displays the world's countries, rendered as SVG paths filled with a green color and outlined in black. The visualization uses D3.js version 5 and the TopoJSON library with the `geoEquirectangular` projection and `geoPath` to draw the map, pulling country boundaries from the world-atlas dataset (countries-110m.json). Upon hovering over a country, its fill color changes from green to blue, providing a simple interactive feedback mechanism.

Jul 5, 2023
Loading thumbnail…

Fork of World Map

This example displays a world map using a natural Earth projection, with countries rendered as green landmasses against a light blue spherical backdrop. The visualization loads TopoJSON world data from the world-atlas package, converts it to GeoJSON using `topojson.feature`, and draws the paths with `d3.geoPath` and `d3.geoNaturalEarth1`. It also appends a sphere path to frame the projection, all rendered as SVG elements.

Jul 5, 2023