Milana

@kankeinai·6 public vizzes

Fork of Polished World Map

This interactive visualization combines a world map of natural disasters with a time-series histogram. Users brush over the histogram to filter disasters by date, which updates the map’s bubble markers sized by disaster impact and colored by category (hydrological, meteorological, climatological). Radio buttons recolor the map based on minimum, average, or maximum temperature anomalies from a separate CSV dataset. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for rendering, while the histogram employs `d3.bin` and `d3.brushX` within a React framework.

Dec 17, 2023

Loading thumbnail…

Fork of Fork of Working with Time

This stacked bar chart visualizes the frequency of natural disasters over time, broken down by disaster subgroup (Climatological, Hydrological, and Meteorological) using the Data Canvas Sense Your City dataset. The visualization uses React to render SVG marks, with `d3.bin` and `d3.timeYears` to bin events into yearly intervals, and `d3.scaleTime` and `d3.scaleLinear` for axes. Each bar segment encodes one disaster type; hovering reveals its exact count via a native `<title>` tooltip. The chart emphasizes the temporal distribution of these hazard categories across the dataset’s timeframe.

Nov 23, 2023

Loading thumbnail…

Fork of Working with Time

A scatter plot visualizes the frequency of disasters over time, with each point representing a specific disaster event. The x-axis uses a time scale with yearly tick marks, while the y-axis displays frequency counts. Using React and D3 v5, the code loads CSV data from a GitHub gist, bins the records by year using `d3.bin` and `d3.timeYears`, and renders circles with SVG. The visualization applies a Poppins font and custom axis styling from the provided CSS.

Nov 23, 2023

Loading thumbnail…

Fork of Polished World Map

This example presents a polished world map that emphasizes visual clarity, rendering landmasses in teal against a light gray sphere with subtle graticule lines. The geographic data comes from the World Atlas TopoJSON file, which is loaded and parsed using the `json` and `feature` APIs from D3 v5 and TopoJSON. The map is drawn as an SVG, with the `geoNaturalEarth1` projection and `geoPath` handling the shape generation, while a React component structure manages the rendering of each country boundary.

Nov 23, 2023

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization combines a world bubble map and a time-series histogram to explore migrant deaths and disappearances. The map uses a natural Earth projection with circles sized by the total dead and missing per location, while the histogram aggregates monthly totals. A brush on the histogram filters the map’s circles dynamically, linking the two views. Built with React and D3 v5, it uses `geoNaturalEarth1`, `scaleSqrt`, `brushX`, and `useMemo` for efficient rendering. Data comes from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON.

Nov 22, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to assemble a stylized face from fundamental SVG shapes within a React application, utilizing D3’s arc generator for the mouth. The composition layers a yellow circle with a black stroke as the background, two eye circles, and a D3 `arc` path for the smile within an SVG container. The `FaceContainer` component handles the SVG coordinate system, translating the center point while the `Face` component coordinates the layout and sizing of each facial feature through configurable props.

Nov 21, 2023