KaiXuan Chin

@kaixuan98·12 public vizzes

Refactor Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, using React to render SVG elements and D3 scales to map country names and population values to screen coordinates. The code builds the chart by composing separate components for the axes and marks, with D3’s `scaleBand` and `scaleLinear` handling the data-to-pixel transformations. Data comes from the United Nations World Population Prospects 2019 CSV, loaded via D3’s `csv` function. The final chart includes axis lines and labels, positioning them relative to the margins and inner chart dimensions.

Aug 5, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart that uses country names as the y-axis labels and numeric population values for the x-axis, but omits axis lines and titles. It loads United Nations World Population Prospects 2019 data using `d3.csv`, then applies React state and hooks to render SVG bars. The visualization uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` to map the data, while `d3.ticks` generates gridlines.

Aug 5, 2021

Loading thumbnail…

Rendering Data with React & D3

This example renders a dataset of CSS named colors as a pie chart, with each slice representing a single color and filled using its corresponding RGB hex value. The visualization uses D3’s `csv` utility to fetch the data from a remote URL and D3’s `arc` generator to define the pie slice paths. React manages the asynchronous data loading through state and renders the final SVG output, combining the declarative structure of React with D3’s geometric calculations.

Aug 5, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data using D3 v5 within a React framework. It fetches a CSS Named Colors dataset from a GitHub gist and displays basic statistics about the file, including its size in kilobytes, row count, and column count. The code uses the `d3.csv` method to asynchronously load and parse the data, then calculates metrics using `d3.csvFormat` and the data’s built-in `length` and `columns` properties. The results are rendered as text in a large `<pre>` element.

Jul 29, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas in this React-based visualization. The circle’s position updates in real time based on the mouse’s clientX and clientY coordinates, tracked through React’s useState hook. The component renders a single `<circle>` element inside an `<svg>` that listens for mousemove events, using D3 v7 only for library loading. The rendering relies entirely on React’s state management rather than D3’s selection or transition methods, with no external data source.

Jul 29, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using the D3 library. It fetches the CSS Named Colors dataset from a GitHub gist and displays summary statistics: file size in kilobytes, row count, and column count. The code uses `d3.csv` with a Promise-based `.then()` method to handle the asynchronous data loading, then formats the output with `d3.csvFormat` and updates the DOM via `textContent`. The visualization is minimal, showing only text statistics rather than a graphical chart.

Jul 29, 2021

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face drawn with SVG circles and an arc renders in a React app, centered on a 960 by 500 canvas. The face’s components—background, eyes, and mouth—are split into separate ES6 module files, with the mouth using the D3 `arc()` generator. A `FaceContainer` component supplies the SVG wrapper and translation transform, while React Fragments group the two eye circles. All visual properties like radii and offsets are passed as props from `index.js`, and the example demonstrates modular component composition with D3 and React.

Jul 29, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG, composed of a circular background, two eyes, and an arc-shaped mouth, all centered within a fixed 960 by 500 pixel viewport. Built with React components, the visualization uses D3’s `arc()` API to generate the mouth path, while the background circle and eyes are plain SVG elements with defined radii and offsets. The code defines constants for geometry and passes them as props, with no interactivity or data source beyond hardcoded values.

Jul 29, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a responsive smiley face using React to create SVG elements and D3’s `arc` generator for the mouth. The face is centered dynamically based on the window size, with fixed offsets for the eyes and radial proportions for the head. Yellow circles with black strokes form the head and eyes, while the mouth is drawn as a path from a half-circle arc. The code uses D3 v7 and React’s `ReactDOM.render` to mount the visualization, relying on SVG for all shape rendering.

Jul 29, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a stylized smiley face using React and SVG. It renders a yellow circle for the head, outlined in black, with two smaller black circles positioned symmetrically for eyes. The component defines fixed dimensions and constants for centering, eye offsets, and radii, then uses ReactDOM to mount the SVG into the page’s root element. The code uses React’s JSX syntax and the ReactDOM.render API to display the static graphic.

Jul 29, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This SVG visualization depicts a simple yellow smiley face, centered within a 960 by 500 pixel canvas. The face consists of a large yellow circle outlined in black, with two smaller unfilled circles positioned as eyes. The code uses inline SVG elements—`<circle>` and `<svg>`—to construct the shapes, with hardcoded coordinates and dimensions for the face and eyes. The rendering is static and does not involve any interactive or dynamic behavior.

Jul 29, 2021

Loading thumbnail…

Fork of Hello HTML

This is a static SVG visualization that displays three circles arranged to form a simple face-like composition on a blank canvas. The code defines two small circles (representing eyes) without any fill, so they render with default black styling, while a larger circle (the face) uses a yellow fill with a thick black stroke. The example demonstrates basic SVG shape rendering inside an HTML page, using pure SVG elements with no external libraries or data sources.

Jul 29, 2021