Mahmud Hasan

@mhasanrabbi·3 public vizzes

Fork of Loading and Parsing CSV Data

This example demonstrates the contents of a CSV file containing CSS named colors by displaying its size, row count, and column count as large text. The code uses the D3.js v5 library’s `d3.csv` method to fetch and parse the data from a GitHub gist, then formats the summary with `d3.csvFormat`. An alternative approach using the Fetch API with `async`/`await` and `d3.csvParse` is included in commented-out code, illustrating two methods for handling asynchronous CSV loading in a React-agnostic plain HTML/JavaScript context.

Oct 1, 2021

Loading thumbnail…

Fork of Smiley Face Part 2

This example draws a smiley face using React and D3, rendering SVG shapes inside a 960x500 viewport. It shows a yellow circle with black stroke for the head, two filled eyes, and a curved mouth generated from an arc path. The code uses React’s `ReactDOM.render` to mount the component and D3’s `arc()` API to compute the mouth’s path geometry based on specified angles and radii. All positioning relies on fixed numeric constants for offsets and dimensions, with D3 v7 loaded via CDN.

Sep 29, 2021

Loading thumbnail…

Smiley Face Part 1

This visualization displays a classic smiley face composed of a yellow circle with a black outline, two eyes, and a curved mouth, all centered on an SVG canvas. Using React, the code defines the face’s geometry with coordinates and radii, then renders circles for the head and eyes and a path for the mouth. The mouth’s arc is generated via the `d3.arc` API, which computes the path data with specified inner and outer radii and angular ranges. The layout is fixed, with the head radius set to half the canvas height minus half the stroke width, ensuring the face fills the space.

Sep 29, 2021