Nelson Kalgushkin

@SFill·8 public vizzes

Fork of Global Coronavirus Deaths

A line chart visualizes the cumulative global death toll from COVID-19 over time, using data from the Johns Hopkins Coronavirus Dataset. The chart is built with React and D3 v5, leveraging D3’s `scaleTime`, `scaleLinear`, `extent`, `max`, and `line` APIs to map dates and death totals. A horizontal marker line highlights the 10,000-death threshold, while a vertical marker indicates the most recent date, formatted with `timeFormat`. SVG renders the line with a thick black stroke, and axes use D3’s `axisBottom`.

May 13, 2024

Loading thumbnail…

Missing Migrants(multiple views)

This interactive dashboard visualizes data on missing migrants through two coordinated views: a bubble map plotting incidents geographically with circle size scaled to the square root of the death count, and a date histogram aggregating monthly totals. The map renders world landmasses and graticules using `geoNaturalEarth1` and `geoPath` from d3, while the data is binned using `histogram` and `timeMonths`. Both views are built with React and SVG, pulling from a CSV of Missing Migrants records.

Apr 14, 2024

Loading thumbnail…

Missing Migrants

This visualization displays monthly totals of dead and missing migrants from the Missing Migrants Dataset using a bar chart of aggregated counts over time. The React app loads CSV data via the `useData` hook, then uses `d3.histogram` with `timeMonths` thresholds to bin records by reported date. Axes are rendered as SVG components using `scaleTime` and `scaleLinear`, with bars drawn as SVG rectangles. The y-axis sums deaths per bin via `d3.sum`, while tooltips reveal precise totals on hover.

Apr 14, 2024

Loading thumbnail…

Missing Migrants On the Map

This visualization maps missing migrants worldwide using a natural Earth projection. Semi-transparent circles on the map represent the total number of dead and missing individuals, with circle size scaled proportionally via `d3.scaleSqrt`. The map includes country landmasses, interiors, and graticules drawn with `d3.geoPath` and `d3.geoGraticule`. Data is loaded from a CSV of migrant incidents via `d3.csv`, while geographic boundaries come from World Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`. The React-based component uses SVG for rendering.

Apr 14, 2024

Loading thumbnail…

Fork of Polished World Map(cities)

This D3 visualization presents a world map with city points sized by population, using a Natural Earth projection with graticules, sphere, and country interiors. Built with React, the code uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3, along with a `scaleSqrt` for circle radii. City data is loaded from a CSV of world cities, while country boundaries come from World Atlas TopoJSON, both rendered as SVG paths and circles.

Apr 4, 2024

Loading thumbnail…

Fork of Polished World Map

This example presents a polished world map rendered with SVG, using a Natural Earth projection to depict landmasses in teal against a light gray sphere. Graticules and interior country borders are drawn as subtle strokes, with the map built from World Atlas TopoJSON data. The visualization uses React components, d3.geoPath for geographic projections, and d3.geoGraticule to generate the grid lines, styling all elements through CSS classes.

Apr 4, 2024

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence rates for 2017, shading countries on a natural Earth projection according to the percentage of the population aged 15–49 infected. It uses React with d3.geoPath to render the sphere, graticules, and country boundaries from the World Atlas TopoJSON, while d3.scaleSequential with an interpolateYlOrRd color scale maps prevalence values. Data comes from a CSV of IHME country-level estimates, joined to country codes via ISO-3166 codes, with missing data rendered in gray.

Mar 30, 2024

Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes World Bank GDP per capita (PPP, current international $) for 2020 by country, using a quantile color scale from the YlGnBu ColorBrewer scheme. Countries lacking data are filled in gray. The map renders with d3.geoPath, d3.geoNaturalEarth1, and d3.geoGraticule, while d3.scaleQuantile and d3.schemeYlGnBu map GDP values to colors. Data is loaded from a CSV file via Promise.all and fetched from a GitHub Gist and a world atlas TopoJSON source.

Mar 30, 2024