ChaBoiYungMoney

@ChaBoiYungMoney·7 public vizzes

smiley face

The smiley face example displays a grid of eighteen cartoon faces, each with a yellow circular head, black outlined stroke, and varying eye, mouth, and stroke dimensions to create subtle differences. The faces are rendered as SVG elements composed of reusable React components: `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The code uses React 18 to manage component state and D3 v7’s `arc` generator to define the mouth’s curved path, with random parameters generated using `d3.range` and `Math.random` for each iteration.

Apr 20, 2022

Loading thumbnail…

Fork of React + D3 Viz Starter

This example provides a minimal React + D3 starter template that establishes a reusable `VizContainer` component. The component abstracts SVG and group elements while implementing the margin convention, with optional visual guides for the margins that can be toggled off. The rendering relies on React 16.13.1 for component management and d3.v6 for selections and utility functions, with all libraries loaded via CDN in the HTML file.

Apr 19, 2022

Loading thumbnail…

Testing

This example animates a bar chart race, showing how categorical rankings change over time as bars reorder and rescale. The chart uses D3’s `d3.create`, `d3.rollup`, `d3.pairs`, and `d3.groups` to process data, with `d3.transition` and `.ease(d3.easeLinear)` driving smooth keyframe animations. The code imports helper functions like `bars`, `axis`, `labels`, and `ticker` from an external module. It renders as an SVG with a viewBox, and the animation runs through an async generator that yields transitions sequentially.

Apr 19, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse CSV data from a remote URL. It fetches a GitHub-hosted CSV file containing named CSS colors and logs the raw text response to the browser console. The code uses the Fetch API with async/await syntax and the response.text() method, showing a commented-out alternative approach using promise chaining. The visualization itself is absent; the focus is purely on the data-loading step.

Apr 19, 2022

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas. The example demonstrates how React manages interactive state by tracking the cursor’s position through the `onMouseMove` event. The `useState` hook stores the mouse coordinates, which update the circle’s `cx` and `cy` attributes on every movement. The application uses React 16.9 and ReactDOM to render the SVG element directly in the browser, with the circle’s position reset to the center of the 960 by 500 viewport on load.

Apr 19, 2022

Loading thumbnail…

Fork of HTML Starter

A minimal HTML page displays the text "Hello HTML!" in large, centered type using a CSS class. The example demonstrates static rendering with plain HTML and CSS, requiring no external libraries or data. It serves as a starting point for comparing basic web technologies with frameworks, as noted by a link to a React starter project. The page contains no interactive behavior or dynamic content generation.

Apr 14, 2022

Loading thumbnail…

Fork of React + D3 Viz Starter

This example demonstrates a minimal React + D3 visualization scaffold, showing an empty SVG canvas with a gray outer rectangle and light gray inner rectangle to visualize the margin convention. The code uses React 16.13.1, ReactDOM, and d3.v6 loaded via CDN, with a reusable `VizContainer` component that abstracts SVG/group elements and follows the margin pattern. Rendering uses SVG elements created in JSX, with margins displayed via a `showMargins` prop that can be removed for production use.

Apr 7, 2022