Yodae Lim

@limyod·7 public vizzes

Fork of Vega-Lite API Template

This example visualizes annual counts of air quality records from a filtered dataset, using a scatterplot of circles where each point represents one year. It loads CSV data from a GitHub gist, filters rows by a specific indicator ID, and renders the visualization with the Vega-Lite API, registering it alongside Vega and D3 v5. The code uses `vl.markCircle`, `vl.x().fieldT('Start_Date').timeUnit('year')`, and `vl.y().count()` to aggregate values, with custom axis and label styling via a config object and a tooltip handler.

Aug 30, 2023

Loading thumbnail…

Loading Data with React

This example demonstrates how to load and display a CSV dataset using D3 utilities within a React application. It fetches a list of CSS named colors from a GitHub gist, tracks the loaded data in React state, and shows a summary message with file size, row count, and column count. The code uses `d3.csv` for parsing, `d3.csvFormat` for size calculation, and React's `useState` and `useEffect` hooks to manage the asynchronous data loading. The visualization is purely text-based, rendering the summary in a large font.

Aug 21, 2023

Loading thumbnail…

Loading Data with Fetch from scratch

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API combined with D3 v7. The code fetches a text file containing CSS named colors, then converts the raw text into a parsed data array using `d3.csvParse`. The visualization simply logs the number of parsed rows to the console, illustrating the data-loading pipeline without rendering any graphical output. It highlights the asynchronous flow of fetching data with `fetch()` and handling promises explicitly, contrasting with D3’s built-in `d3.csv` loader.

Aug 18, 2023

Loading thumbnail…

MouseFollower

A circle follows the mouse pointer across an SVG canvas as a direct, real-time visual response. The visualization uses React hooks, specifically `useState` to store mouse coordinates and an `onMouseMove` event handler on the `<svg>` element to update the circle's `cx` and `cy` attributes. Rendered with React and SVG, the circle starts centered and moves smoothly to track `clientX` and `clientY` values from the event object.

Aug 18, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote source, displaying the dataset’s size in kilobytes, row count, and column count. It uses the d3.csv function to fetch and parse the CSS Named Colors dataset from a GitHub Gist, then formats the summary using d3.csvFormat. An alternative commented-out approach uses the fetch API with async/await and d3.csvParse. The visual output is plain text rendered inside a large HTML `<pre>` element.

Aug 16, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

A React-based face built from composable SVG components renders a yellow circle with two black eyes and a smiling mouth. The face’s geometry is parameterized through props like `eyeOffsetX` and `mouthRadius`, while the mouth uses `d3.arc` to generate a curved path. The `FaceContainer` wraps the SVG and applies a centering transform, and the final scene is mounted with `ReactDOM.render`. The code imports specific React components, including `BackgroundCircle`, `Eyes`, and `Mouth`, and uses D3 v7 for arc generation.

Aug 15, 2023

Loading thumbnail…

Fork of Hello HTML

This example shows a simple, fixed composition of three circles inside an SVG canvas. The largest circle is filled yellow with a thick black stroke, while two smaller black circles sit symmetrically within it, forming a basic face-like shape. The visualization is created entirely with static SVG markup, directly declaring each circle’s position, radius, fill, and stroke attributes. The page uses minimal CSS to remove default margins and hide overflow, while the rendering relies on the browser’s native SVG support, with no external JavaScript libraries or data inputs.

Aug 14, 2023