Pakapone Supavarn

@peajung·15 public vizzes

Loading Data with React & D3

This example demonstrates how to load external data in a React application using D3 utilities, displaying a simple status message that changes from "loading" to "loaded" once the data arrives. The code uses React’s `useState` hook to manage the data state and `d3.csv` to fetch a CSV file from a GitHub gist containing CSS color names. After the asynchronous data load completes, the component updates its state, triggering a re-render. The visualization itself is minimal, focusing on the data-loading pattern rather than complex rendering, with SVG coordinates briefly commented in the HTML but not actively used.

Aug 29, 2023

Loading thumbnail…

ParseinbCsvData

This example displays a large-format summary of a CSV file’s dimensions: the file size in kilobytes, row count, and column count. It loads the data from a remote CSV of CSS color names using `d3.csv`, then formats and measures the parsed data with `d3.csvFormat` and `Math.round`. The resulting text is rendered inside a `<pre>` element with a `fetch`-based asynchronous pattern, relying on D3 v7’s promise handling.

Aug 29, 2023

Loading thumbnail…

Mouse Follower

This interactive visualization displays a single circle that follows the cursor as it moves across an SVG canvas. The React application tracks mouse coordinates via an event handler and updates the circle's position accordingly. Built with React and D3.js version 7, the code uses React's state management and callback functions to handle mouse movement events. The rendering is done through an SVG element with a fixed width of 960 pixels and height of 500 pixels, where the circle's center point is repositioned based on the clientX and clientY values from each mouse event.

Aug 27, 2023

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load a remote CSV file and inspect its raw contents in the browser console. It fetches the data from a GitHub gist URL containing CSS color names using the Fetch API’s `fetch` method and `response.text()`, wrapped in an async `fetchText` helper function. The parsed text is logged via `console.log`, revealing the comma-separated values before any formatting or visualization is applied. No external libraries are used; the code relies entirely on native JavaScript promises and async/await syntax.

Aug 26, 2023

Loading thumbnail…

Let's Make a Face Part V

A grid of eighteen smiley faces, each with a yellow circular background, black outline, two eyes, and a curved mouth, is rendered as a single React application. Each face uses randomized eye radii, making them subtly distinct. The visualization is built with React components and D3’s `arc` API for the mouth shape, all rendered as SVG within a fixed 150 by 150 pixel viewport per face.

Aug 26, 2023

Loading thumbnail…

Fork of Let's Make a Face Part V

This example renders a yellow smiley face on a black-outlined circle, centered within an SVG canvas. It uses React components to structure the face, with D3 v7’s `arc` function generating the mouth path from specified inner/outer radii and angles. The code explicitly positions two eye circles via offset coordinates and applies a stroke width to the background circle, resulting in a static, modular composition. The rendering is SVG-based, with React managing the component hierarchy and D3 handling the arc geometry.

Aug 18, 2023

Loading thumbnail…

Let's Make a Face Part IV

This example renders a smiley face as a static SVG composition in React, using D3’s `arc()` generator to draw a mouth shaped as a half-circle path. Two eye circles and a yellow background circle with a black stroke are positioned relative to the center using explicit numeric offsets. The code imports React and ReactDOM directly via UMD, while D3 v7 provides the arc’s inner and outer radii and angle range. The rendering relies on SVG elements inside a `<g>` transform, with no animation or interaction.

Jul 25, 2023

Loading thumbnail…

Part III Assignment

This visualization displays a stylized cartoon face built from basic geometric shapes. It shows a yellow circular head with ears, eyes, brows, a nose, and a mouth rendered as SVG elements. The code uses React to structure the component and d3’s `arc` generator to create the curved mouth and nose paths. A radial gradient fills the inner ear details, while explicit ellipse, circle, rect, and line elements define the remaining facial features, all centered via a `g` transform.

Jul 22, 2023

Loading thumbnail…

Fork of Fork of Let's Make a Face Part III

This example draws a yellow smiley face centered in an SVG canvas using React and D3 v7. It shows a circle for the head, two smaller circles for eyes, and a curved mouth path generated with the `d3.arc()` API. The face is positioned via a translation transform, with eye offsets and radius defined as constants, while the mouth uses inner and outer radii with angled start and end points. All shapes are rendered declaratively as SVG elements within a React component.

Jul 21, 2023

Loading thumbnail…

Fork of Let's Make a Face Part II

A fork of the "Let's Make a Face Part II" example renders a simple smiley face using React and SVG. The visualization displays a yellow circle with black stroke for the head, plus two black circles as eyes, positioned symmetrically around the center via computed offsets. Built with React 18 and ReactDOM, it uses JSX to declaratively define SVG circle elements, with all dimensions and positions derived from constant variables for width, height, and eye placement.

Jul 20, 2023

Loading thumbnail…

Fork of Smiley Face Part II

A full-screen smiley face is drawn with React and rendered as SVG, with the face scaling to the browser window size. The code computes the center and dimensions from `window.innerWidth` and `window.innerHeight`, then uses React elements like `<circle>` to draw the yellow face, black outline, eyes, and a mouth. The example uses React 16.9.0 and ReactDOM to mount the SVG tree into the page, with all geometry positioned relative to a centered group transform.

Jul 20, 2023

Loading thumbnail…

Fork of Smiley face Part II

This example displays a simple smiley face constructed from three SVG circles: a large yellow outlined head and two smaller black eyes. Rendered at 960 by 500 pixels, the face is drawn using React 18, which is loaded via a UMD script, alongside hard-coded circle attributes for position, radius, and stroke. The page also includes an `index.js` file that logs the React object to the console, though the visualization itself relies entirely on static SVG markup without any interactive or data-driven features.

Jul 20, 2023

Loading thumbnail…

Smiley face Part I

A yellow circle with a black outline and two smaller black circles forms the beginning of a smiley face. The larger circle is centered on an SVG canvas, while the two eye circles are positioned symmetrically on either side of the center. The example uses raw SVG elements—`circle` with `cx`, `cy`, `r`, `fill`, and `stroke-width` attributes—directly in the HTML, with a fixed viewport of 960 by 500 pixels. No JavaScript libraries or data sources are involved; the rendering is purely static SVG markup.

Jul 17, 2023

Loading thumbnail…

Car Report

This report displays a static text message, “Happy day,” in large type on a web page, based on a small dataset of car models and prices from 2020 to 2023. The page loads the data from a JSON array defined in `cars.js`, but the example does not visualize the data; instead, it simply assigns the message string to the DOM element via `document.getElementById` in `index.js`. The project uses D3 version 6 and relies on a bundled JavaScript file (`bundle.js`) for execution.

Jul 16, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered greeting message, “Hello HTML!”, styled with CSS for a high visual impact. It demonstrates a minimal HTML page setup that combines markup, styling, and scripting fundamentals. The code uses the Document Object Model (DOM) within an HTML document, leveraging the CSS `font-size` property to scale the text dramatically. It serves as a basic template for web development, highlighting the core structure of an `index.html` file without external libraries or data sources.

Jul 16, 2023