rathan.ramesh00@gmail.com

@Rathraiser12·4 public vizzes

Fork of Multiple Views with Brushing

This interactive dashboard combines a bubble map and a date histogram to explore missing migrant incidents. The map displays circles sized by the total dead and missing using a square-root scale, while the histogram aggregates the same metric monthly. Brushing on the histogram filters the map’s displayed data in real-time. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map projection and `brushX` for the selection interaction, with data from the Missing Migrants Project.

Feb 7, 2024

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization displays migrant deaths worldwide using a linked-view design. A bubble map shows the geographic locations of casualties, with circle size proportional to the total dead and missing, while a time-series histogram below aggregates deaths by reported date. Users can brush over the histogram to filter the map, updating the visualization in real time. The project uses React with D3 v5 APIs including `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, `scaleTime`, `brushX`, and `histogram`. Data originates from the Missing Migrants Project, with geographic boundaries from the World Atlas TopoJSON.

Feb 7, 2024

Loading thumbnail…

Smiley Face

A grid of eighteen randomly generated smiley faces, each rendered as an SVG, demonstrates component reusability through React props. The faces vary in stroke width, eye offset, eye radius, mouth width, and mouth radius. The visualization uses D3 v7's `arc` generator to create the mouth path, while React components `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` compose the face. Each face is drawn with a yellow circle, black stroke, two eyes, and a curved mouth, using `Math.random()` to assign individual facial features.

Dec 16, 2023

Loading thumbnail…

Fork of Smiley Face

A face is drawn using a yellow circle with a black stroke, two dark eyes, and a semi-circular mouth, all positioned relative to the chart’s center. The code uses React to render SVG elements and imports D3’s `arc` generator to create the mouth path. The circle geometry relies on computed offsets for eye placement, while the mouth is defined by inner and outer radii with start and end angles.

Dec 13, 2023