ssarowar

@ssarowar·8 public vizzes

Fork of Rendering Data with React & D3

This example displays all CSS named colors as a single radial burst, with each color occupying a wedge of equal angular width. The visualization loads color data from a CSV file using `d3.csv` and passes it to React state. React renders the SVG paths, while D3’s `pie` and `arc` generators compute the angular segments. The project combines React 16.9 with D3 v5, using hooks like `useState` and `useEffect` for data fetching and rendering.

Apr 5, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how React and D3 can work together to load and summarize a dataset of cars. The application fetches a CSV file from a GitHub gist using D3’s `csv` method and stores the parsed result in React state via the `useState` and `useEffect` hooks. Once loaded, it displays a text summary—computed with `d3.csvFormat`—showing the file size in kilobytes, the number of rows, and the number of columns. While the data is pending, the interface shows a "Loading..." message.

Apr 5, 2022

Loading thumbnail…

Fork of Mouse Follower

This example demonstrates a mouse-following circle rendered in an SVG coordinate space. The React component tracks pointer movement using a `useState` hook and updates the circle’s `cx` and `cy` attributes in response to `onMouseMove` events. The circle’s position mirrors the cursor’s `clientX` and `clientY` coordinates, with no additional data source or animation logic. The visualization relies on React 16.9 and ReactDOM, rendering directly to SVG elements with hard-coded canvas dimensions of 960 by 500 pixels.

Apr 5, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays summary statistics for a CSV dataset of cars, reporting the file size in kilobytes, number of rows, and number of columns. It loads the data from a GitHub gist using d3.csv, which returns a promise, then calculates the message from the parsed result and updates the text content of a DOM element. The code also includes commented-out alternatives using fetch with async/await and d3.csvParse, as well as a nested promise example. The page relies on D3 v5 and plain HTML/JavaScript without any React framework integration visible.

Apr 5, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a summary of the CSS Named Colors dataset, showing its size in kilobytes, row count, and column count as large text. It loads the CSV from a GitHub Gist using `d3.csv`, then uses `d3.csvFormat` and `data.columns` to compute the statistics. The code also includes commented alternatives using `fetch`, `async`/`await`, and `d3.csvParse` for comparison.

Apr 5, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a smiling face as an SVG graphic using React to define the component structure and D3.js to generate the mouth path. The face is composed of a pink circle for the head, two black circles for eyes, and a D3 arc path for the smile, all positioned relative to the center of a 960 by 500 canvas. The `arc` function from D3 computes the mouth’s curved shape with specified inner and outer radii and angular range. The drawing is created declaratively with React’s JSX syntax, with all coordinates and dimensions defined as constants for easy adjustment.

Apr 5, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face centered on a full-screen SVG canvas, rendered entirely with React elements. The face consists of a large yellow circle for the head, two smaller black circles for eyes, and a mouth implied by the head’s lower edge. The code uses React and ReactDOM to create and mount the SVG, calculating dimensions from `window.innerWidth` and `window.innerHeight` to scale responsively. Positions for the eyes and stroke widths are defined as constants, with the face centered using an SVG `<g>` transform.

Apr 5, 2022

Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline and two smaller black circles for eyes forms a simple smiley face. The SVG is rendered directly in an HTML page using the `circle` element, with the face centered at 960 by 500 pixels. The rendering relies on basic SVG shape attributes for positioning, fill, stroke, and stroke width, with no external data source or processing library involved. The page uses a minimal stylesheet to remove margins and hide overflow, and the code is self-contained within a single `index.html` file.

Apr 5, 2022