elena

@elenamadiai·5 public vizzes

Fork of Missing Migrants Date Histogram

This histogram visualizes the total number of dead and missing migrants per month using data from the Missing Migrants Dataset. It aggregates reported date values into monthly bins via `d3.bin` and calculates each bar’s height with `d3.sum`. The React-based SVG chart, authored with D3 v5, uses `scaleTime` and `scaleLinear` for axes, with axis components and marks rendered as reusable React components. Bars display tooltips on hover, and the time axis auto-generates ticks via `xScale.ticks()`.

Jan 11, 2022

Loading thumbnail…

Missing Migrants Scatter Plot

This scatter plot displays reported incidents of missing migrants over time, with each circle representing a reported date and the corresponding total number of dead and missing individuals. The visualization uses React to render SVG elements, while D3 v5 handles data loading via `csv()` and scales with `scaleTime()` and `scaleLinear()`. Custom axis components generate the time-based x-axis with formatted date ticks and a linear y-axis, with tooltips revealing exact dates for each data point. The dataset comes from a CSV file of global missing migrant reports.

Jan 10, 2022

Loading thumbnail…

Fork of Fork of Smiley Face

This example shows a yellow smiley face rendered as an SVG, composed of a background circle, two eyes, and a mouth arc. The React components (`BackgroundCircle`, `Eyes`, `Mouth`) are wrapped in a `FaceContainer` that translates the graphic to the center of a 960×500 viewport. The mouth uses D3’s `arc` generator to create a curved path, while the remaining shapes are plain SVG circles. The code imports React, ReactDOM, and D3 v5, and positions all elements via fixed offsets and radius constants.

Jan 4, 2022

Loading thumbnail…

Fork of Smiley Face

A smiley face rendered as a yellow SVG circle with black outline, two black eyes, and a curved mouth. Built with React and D3 v5, the visualization uses a reusable `BackgroundCircle` component for the face and D3's `arc` generator to create the mouth path. All shapes are positioned relative to the SVG center using a translation transform, with fixed offsets for the eyes and radii for the mouth.

Jan 4, 2022

Loading thumbnail…

Smiley Face Part III

This example shows a smiley face drawn as a yellow circle with black stroke, two eyes, and an arc-shaped mouth centered in an SVG. React manages the component structure, while D3’s `arc` generator creates the mouth path. The face is positioned using SVG `circle` and `path` elements, with coordinates and dimensions defined as constants. Rendering occurs via ReactDOM into the root element, combining React’s declarative UI with D3’s geometry utilities for the curved mouth.

Jan 4, 2022