S

Sun Hwy (David) Kim

@kimdavid333·18 public vizzes

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width with points colored by species. The visualization uses d3.scaleLinear and d3.scaleOrdinal with React and SVG rendering. Hovering over a species label in the color legend, built with d3.scaleOrdinal, highlights only points of that species while fading others to 20% opacity. Data loads asynchronously via d3.csv from a GitHub gist, and axes are rendered using custom React components.

Loading thumbnail…

Working with Time

A line chart displays temperature readings over time, with each data point marked by a circle and the line connecting them. The chart uses a React state hook to load the data from a CSV file via D3's `csv` utility. Time is formatted on the x-axis using `timeFormat`, while linear scaling handles temperature on the y-axis, with axes and marks rendered as SVG elements.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, displaying sepal length against sepal width for each specimen. The visualization is built with React and uses D3 v5 utilities, including `scaleLinear` for axis scaling and `extent` for data domain calculation. The SVG renderings feature custom Poppins typography, teal-colored data points, and axis labels with a 90-degree rotation for the y-axis label. CSS named colors from a GitHub gist are loaded asynchronously via D3's `csv` function, with each point containing a tooltip that formats its x-value using D3's `format` function.

Loading thumbnail…

UN Population Bar Chart

This example shows a horizontal bar chart of the top 10 countries by population from the UN’s 2019 dataset. It uses React state to load and store the CSV data, while D3’s `scaleBand`, `scaleLinear`, and `max` utilities compute the bar positions and widths. The SVG bars render across the full window height, sized proportionally to each country’s 2020 population. The code loads the data asynchronously with `d3.csv` and displays a loading message before the chart appears.

Loading thumbnail…

Loading Data with React & D3

This example visualizes CSS named colors as a pie chart, where each slice represents one color from a dataset loaded via `d3.csv`. The visualization fills the entire browser window, with each slice colored by its corresponding hex value. Built with React and D3 v7, the code uses React’s `useState` and `useEffect` hooks to fetch the CSV asynchronously, displaying a “Loading…” message until the data arrives. The pie geometry is generated using `d3.arc` with an inner radius of zero, and the SVG paths are rendered dynamically based on the loaded data.

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a bar chart illustrating population by country, with each bar colored by religion. The chart is built using the Vega-Lite API, which constructs a visualization specification that is compiled to Vega and rendered as SVG. The code loads CSV data from a Gist URL and supports interactive tooltips through the vega-tooltip handler. The `vl.markBar` method encodes the x-axis with the country field sorted by descending population, the y-axis with the population field, and colors bars by religion.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data by displaying the size, row count, and column count of the CSS Named Colors dataset in a large HTML `<pre>` element. The code uses the D3.js library (v7) to fetch the CSV from a GitHub Gist via `d3.csv()`, which returns a promise, then summarizes the parsed data using `data.length`, `data.columns.length`, and `d3.csvFormat()` to calculate the file size in kilobytes. The visualization emphasizes the data-loading process over graphical representation, with a simple text output.

Loading thumbnail…

Mouse Follower

A yellow circle with a black outline follows the mouse cursor across a full-screen SVG canvas. The visualization responds in real time to pointer movement, with the circle’s center repositioning to match the cursor’s coordinates. Built using React, it leverages the `useState` hook to track mouse position and updates the SVG circle’s `cx` and `cy` attributes via the `onMouseMove` event handler.

Loading thumbnail…

Fork of Smiley Face Part II

A grid of five randomized smiley faces appears, each built from SVG circles and an arc path. The React components manage the face layout, while D3’s `arc` generator creates the mouth shape. Random values for stroke width, eye position and radius, and mouth dimensions vary each face. The `range` function from D3 produces the array of five faces, rendered inside a single SVG per face via the `FaceContainer`.

Loading thumbnail…

Fork of Let's Make a Face Part I

A single yellow circle with a thick black stroke occupies the center of a 960-by-500 SVG canvas, serving as the initial stage of a smiley face. The React component renders this circle using JSX within an SVG element, hard-coding its center coordinates and radius. React 17 and ReactDOM mount the component to the page, while the embedded HTML comment outlines planned eye positions with explicit coordinates. The example demonstrates basic SVG circle rendering through React's declarative component model.

Loading thumbnail…

Fork of Hello HTML

A minimal SVG drawing of a yellow circle with a black outline, rendered directly in an HTML page. The circle is centered with a smaller black-outlined empty circle positioned inside it, visually resembling a simple face or target. No data or interactive behavior is present; the page uses inline SVG elements and CSS to set the margin and hide overflow. The example relies on static SVG markup rather than a JavaScript visualization library or data binding.

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page demonstrating the most basic structure required for any web-based visualization. The example contains only the `<!DOCTYPE html>`, `<html>`, `<head>` with a `<title>`, and an empty `<body>`; there is no data, styling, or JavaScript. It uses no libraries or APIs, serving purely as a starting point for embedding future content. The rendering relies solely on the browser’s default HTML parsing and display behavior.

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized smiley face rendered as SVG via React, with a yellow background circle, two black eyes, and a curved mouth. The code combines React components for structure and D3's `arc` API to generate the mouth path, while the face is centered using an SVG `g` transform. The example demonstrates a fork of a basic face-drawing tutorial, using static values for geometry and radius.

Loading thumbnail…

Fork of Smiley Face Part II

This example displays a full-screen smiley face built with React and D3 v7, centered on the viewport. It shows a yellow circle with black stroke, two eye circles, and a mouth arc drawn using the D3 `arc` generator with specified angles. The SVG rendering uses React components to create the shapes, with dimensions calculated from `window.innerWidth` and `window.innerHeight`. The code defines constants for eye offsets, eye radius, and mouth geometry, rendering everything dynamically to fit the browser window.

Loading thumbnail…

Fork of Smiley Face Part II

A React component renders a full-window smiley face as an SVG graphic, using the window dimensions to position a yellow circle with black stroke, two eye circles, and leaving space for a mouth. The code sets coordinates and sizes relative to the viewport dimensions and uses React 16.9 and ReactDOM to render the SVG element into the DOM. The demonstration focuses on constructing geometric shapes with SVG primitives inside a React application.

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let's Make a Face Part I” shows a simple smiley face constructed from three SVG circles: a large yellow head with a black stroke, and two smaller black eyes. The code uses plain SVG elements within an HTML file, positioning each circle via explicit cx and cy attributes. The rendering is entirely static, with no interaction or animation, and the layout is hardcoded for a 960 by 500 viewport. It demonstrates basic shapes and stroke styling in raw SVG.

Loading thumbnail…

Fork of Hello HTML

This example displays a single yellow circle with a black outline centered on an SVG canvas, alongside a smaller unfilled circle at the same coordinates. The page uses raw SVG elements within an HTML document, setting the body margin to zero and hiding overflow for a clean, full-viewport presentation. Rendering relies on the native SVG `<circle>` tag, with attributes like `cx`, `cy`, `r`, `fill`, and `stroke` defining the shapes. No JavaScript libraries or data sources are involved; the visualization is purely static markup.

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes colored and styled with CSS, including circles, rectangles, a line, and a path. The code uses inline attributes and CSS classes to set fills, strokes, stroke widths, and line joins. A group transformation scales and translates the entire composition. The SVG renders directly in the browser with no external libraries, relying on plain HTML and a linked stylesheet.