Madalina Harii

@MadalinaH·4 public vizzes

Rendering data with React & D3

A horizontal bar chart displays the ten most populous countries in 2020, using United Nations population data loaded via `d3.csv`. React manages the component state, while D3 scales (`scaleLinear` and `scaleBand`) map population values to rectangle widths and country names to vertical positions. The SVG bars are rendered as React elements inside a `<svg>` container, with D3's `max` function determining the domain for the linear scale.

Mar 2, 2021

Loading thumbnail…

Rendering data with React

A pie chart displays 148 named CSS colors, each slice sized equally and filled with its corresponding RGB hex value from a CSV file. The example uses React to manage state and render SVG paths, while D3 utilities handle data loading with `d3.csv` and pie slice geometry via `d3.pie` and `d3.arc`.

Feb 28, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API. The page is minimal, displaying only the text "Hello HTML" in large type, while the script fetches the CSS named colors CSV file from a GitHub Gist and logs its raw text contents to the browser console. The code uses the asynchronous `fetch` function with a helper `fetchText` that returns the response as a string, with no visualization or charting library involved.

Feb 27, 2021

Loading thumbnail…

CSS SVG Smiley face

A smiling face built from modular React components renders as SVG, with a yellow background circle, two black eyes, and an arc-shaped mouth. The example demonstrates how to compose reusable SVG elements using React props for geometry like radius, offsets, and stroke width. D3’s `arc` generator creates the mouth path, while a `FaceContainer` wraps the SVG group and applies centering transforms. The face is drawn at fixed dimensions (960 by 500) with no data source, focusing on declarative component structure and D3 integration within a React framework.

Feb 27, 2021