Nfuu

@Nfuu·9 public vizzes

Fork of Stylized Bar Chart

A horizontal bar chart displays the top 10 most populous countries, with country names on the y-axis and population counts on the x-axis. React components render SVG elements, using d3.scaleBand and d3.scaleLinear for positioning, while d3.csv loads United Nations data and d3.format abbreviates tick labels. Bars include hover tooltips via SVG `<title>` elements.

Jun 16, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors. It displays a text summary showing the file size in kilobytes, the number of data rows, and the number of columns. The implementation uses the D3.js `d3.csv` function to fetch and parse the remote CSV, then formats the results using `d3.csvFormat`. The code also includes commented alternatives using the Fetch API with `async`/`await` and a manual `d3.csvParse` approach, illustrating different methods for handling CSV data in a React context.

Mar 10, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset of CSS named colors using React hooks and D3 utilities. It fetches the data with `d3.csv`, stores it in React state via `useState` and `useEffect`, and renders a text summary with `d3.csvFormat`. The display shows the file size in kilobytes, row count, and column count, preceded by a loading message until the data arrives. The code uses React 16.9 and D3 v5, with styling provided through inline CSS.

Mar 10, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. Built with React using the `useState` and `useCallback` hooks, the component tracks mouse coordinates via an `onMouseMove` handler and renders the circle with `ReactDOM.render`. The SVG viewport is fixed at 960 by 500 pixels, with no data source or additional visual elements.

Mar 10, 2021

Loading thumbnail…

Mouse Follower

A React-based SVG application renders a static circle at the center of a 960×500 canvas with a 30-pixel radius. The component uses ReactDOM to mount the `<svg>` element, despite the README’s claim of mouse-following behavior, which is not implemented in the provided code. The example demonstrates basic SVG circle rendering within a React component tree, using hard-coded `cx`, `cy`, and `r` properties rather than interactive or data-driven features.

Mar 10, 2021

Loading thumbnail…

Loading and parsing csv data

This example demonstrates the initial step of loading a remote CSV file containing CSS named color data. The page fetches the text from a GitHub Gist URL using the `fetch` API and logs the raw contents to the browser console. The code defines an asynchronous `fetchText` helper that retrieves the file and returns its text representation, though the logging statement is unreachable due to its placement after the return. The visualization does not yet parse or render the data; it only confirms successful retrieval of the text.

Mar 10, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of 18 randomly generated cartoon faces fills the screen, each with a yellow circular background, two black eyes, and a D3 arc-based mouth. The faces vary in stroke width, eye offset, eye radius, and mouth dimensions due to randomized values from `Math.random()`. Built with React and D3 v6, the visualization uses the `arc()` API from D3 to define each mouth’s path, while React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) assemble the SVG output. The data source is implicit, generated programmatically via `d3.range` and random parameters.

Mar 10, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces demonstrates how React components and D3.js can be combined for declarative, data-driven SVG visualization. Each face, rendered via the `Face` component and its subcomponents (`BackgroundCircle`, `Eyes`, `Mouth`), uses D3's `arc` generator to create the mouth path and `range` to produce the array of faces. The code shows how ES6 modules and React's component model encapsulate SVG elements, with random parameters like eye offset, radius, and stroke width varying each smiley.

Mar 10, 2021

Loading thumbnail…

Smiley Face Part 1

This example shows a simple, static smiley face composed of three overlapping SVG circles: one large yellow circle for the face and two smaller black circles for the eyes. The face uses a yellow fill with a black stroke, while the eyes have no explicit fill, relying on the default black. Rendered directly through inline SVG elements within an HTML document, the visualization demonstrates basic vector shape composition without external libraries. The SVG canvas is set to 960 by 500 pixels, with coordinates explicitly assigned to position each circle for the intended facial layout.

Mar 10, 2021