fiqri.ismail@osos.om

@fiqriismailosos·4 public vizzes

Loading data with react and d3

This example demonstrates how a React application loads and processes external CSV data using D3, displaying a simple text header while preparing a dataset for visualization. The code fetches a color-names CSV file from a GitHub gist via `d3.csv`, then uses `d3.csvFormat` to calculate the data size in kilobytes, row count, and column count. React manages the component state with `useState`, while the data-loading side effect runs inside the component body. The visualization itself is minimal, rendering only a placeholder heading, but the structure shows the integration of React’s declarative rendering with D3’s data-handling utilities.

Jan 21, 2025

Loading thumbnail…

Parsing Data

This example demonstrates how to load and parse a CSV file using D3.js. It fetches a dataset of CSS named colors from a GitHub gist with `d3.csv`, then formats the raw data back to CSV using `d3.csvFormat` to calculate file size. The page displays the approximate data size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The visualization focuses on summarizing dataset structure rather than plotting points or shapes.

Jan 21, 2025

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face fills the browser window, centered and scaled to the viewport's dimensions. Using React components, the visualization draws a yellow circle for the head, two black circles for eyes, and an arc for the mouth via a D3 path. The code calculates positions dynamically from window dimensions and uses ReactDOM to render the SVG elements, with D3's arc generator defining the mouth's curved shape.

Jan 16, 2025

Loading thumbnail…

A Face Tutorial

A yellow circle with a black outline and thick stroke occupies the center of an SVG canvas. The example demonstrates basic SVG shape rendering within an HTML document, using the native `circle` element. It sets explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes to position and style the face-like form. The page is configured with a full-bleed layout through CSS, removing margins and hiding overflow, while the SVG itself is 960 by 500 pixels. This is a minimal, static illustration of vector graphics without external libraries or data.

Jan 16, 2025