Skye Chen

@HarpSkye·15 public vizzes

Vega-Lite API_Car

This interactive scatter plot explores automobile fuel efficiency and performance using the UCI Machine Learning Repository's Auto MPG dataset. It displays miles per gallon against horsepower, with circles sized by vehicle weight, colored by country of origin, and offering tooltips for car names. Built with the Vega-Lite API for D3, the visualization leverages `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode these dimensions. The code loads data via `d3.csv`, applies a custom configuration for readable axes and fonts, and renders an SVG that fills the browser window.

Oct 25, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, encoding engine horsepower on the y-axis, miles per gallon on the x-axis, and using color to distinguish the vehicle origin with point size mapped to weight. The code builds the chart using the Vega-Lite API, registering Vega and Vega-Lite libraries alongside a tooltip handler. Data is loaded asynchronously via d3.csv, and the chart is rendered as an SVG that automatically fits the browser window, with custom axis and label styling defined in a separate config file.

Jul 26, 2021

Loading thumbnail…

Ep16 Loading data in react

This example demonstrates how to load CSV data within a React component using D3’s `csv` function, displaying a summary of the dataset’s size, row count, and column count. The code uses React hooks (`useState`, `useEffect`) to fetch the data asynchronously and render it as a large preformatted text element. The CSV source is a GitHub gist containing named CSS colors, and the message is computed in a separate module using `d3.csvFormat` to measure data size in kilobytes.

Jul 12, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays summary statistics about the CSS Named Colors dataset, showing the file size in kilobytes, the number of data rows, and the number of columns. It loads the CSV from a GitHub Gist using the `d3.csv` method, which returns a promise, and then formats the result with `d3.csvFormat` and `data.columns`. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse` to demonstrate different parsing strategies, highlighting the modern promise-based workflow.

Jul 11, 2021

Loading thumbnail…

Loading and parsing csv data

This example demonstrates how to load and parse CSV data using D3 v7, displaying the file size, row count, and column count as large text on a minimal HTML page. It fetches a remote CSV file containing CSS named colors via `d3.csv`, which returns a parsed array of objects. The code then formats the data back to CSV with `d3.csvFormat` to calculate its size in kilobytes, and logs the full dataset to the console. The page uses a simple `<pre>` element and styling to present the summary. The implementation relies on D3’s built-in promise-based loading, with commented-out alternatives using `fetch` and manual text parsing.

Jul 9, 2021

Loading thumbnail…

parse with d3 practice

A circle tracks the user’s mouse movements across a full-window SVG canvas, updating its center position in real time. Built with React 16.9 and D3 v7, the app uses a `useState` hook to store mouse coordinates and a `useCallback` handler to capture `clientX` and `clientY` from the SVG’s `onMouseMove` event. The circle’s `cx` and `cy` attributes are bound directly to that state, with a fixed radius of 30 pixels. No external data is loaded; the visualization purely demonstrates interactive event handling and state-driven rendering.

Jul 9, 2021

Loading thumbnail…

dot follow your mouse

A yellow dot follows the mouse cursor across a full-window SVG canvas, updating its position in real time as the user moves the pointer. The React component tracks mouse coordinates via the `onMouseMove` event handler and the `useState` and `useCallback` hooks, then renders a single `<circle>` element with those coordinates. The visualization uses React 16.9 and ReactDOM with SVG rendering inside a full-screen viewport.

Jul 7, 2021

Loading thumbnail…

Fork of Smiley Face Part V

The example displays a grid of procedurally generated smiley faces, each with random variations in stroke width, eye offset and radius, and mouth dimensions, rendered as SVG. Built with React and D3 v5, it shows how to split visualization components into modular ES6 files using React Fragments and helper containers. The D3 arc API generates each mouth path, while face features are composed from reusable React components.

Jun 27, 2021

Loading thumbnail…

Fork of Smiley Face Part V

A smiling face is rendered as a collection of React components, including a yellow background circle, two black eyes, and a curved mouth. The example demonstrates how to split React code across multiple files using ES6 modules and React Fragments. It uses React 16.9, d3.v5, and the `arc` API from d3 to generate the mouth path, with the final SVG output drawn to the page.

Jun 24, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a classic smiley face constructed from layered SVG shapes, centered within a yellow circular background with a black outline. The face includes two black eyes and a curved mouth arc, all positioned using absolute coordinates relative to the center of the viewport. The visualization is built with React components that render individual SVG elements—a background circle, eyes, and a mouth—using D3’s `arc` generator to define the mouth’s path. The entire composition is rendered as an SVG graphic with a static, fixed layout and no interactive behavior.

Jun 23, 2021

Loading thumbnail…

My 2nd Smiley Face

This visualization displays a smiling face composed of SVG shapes, including a mouth, nose, eyes, and cheeks, rendered in React with D3.js. The code uses the `d3.arc()` API to generate the mouth and nose paths, while ellipses and circles are drawn directly as SVG elements. Components such as `BackgroundCircle` and `Eyes` are composed to structure the face, with the entire graphic centered in an SVG viewport.

Mar 31, 2021

Loading thumbnail…

My first Smiley Face

A smiley face rendered in SVG, composed of a circular head with facial features positioned symmetrically around the center. The code uses React to create the SVG elements and D3’s `arc` generator to draw the mouth, nose, and a partially overlapping cheek shape. Constants define geometry such as eye offsets, radii, and stroke widths, while a `<g>` transform centers the composition. The figure is fully built from primitive shapes rather than data-driven inputs.

Mar 31, 2021

Loading thumbnail…

Make a face 1

This example shows a stylized smiling face built with SVG shapes in a React component. It renders a face with elliptical eyes, a circular red nose, and a mouth arc created using d3.arc, alongside cheek accents drawn as partial arcs. The face is centered within a fixed 960×500 viewport, with the head as a filled circle and all features positioned relative to the center using React’s JSX syntax. D3 v5 provides the arc generator for the mouth and nose paths, while React 16.9 manages the DOM rendering.

Mar 31, 2021

Loading thumbnail…

Smiley Face Transpose Apaneman

This example renders a full-screen smiley face using React and SVG. The face is built from three circles: a yellow head with a black stroke, and two black eyes positioned symmetrically around the center. The head’s radius is calculated from the window height, and the eyes are offset from the center using fixed x and y distances. The code uses React’s `ReactDOM.render` to mount the SVG into a root element, with the viewport dimensions set from `window.innerWidth` and `window.innerHeight`.

Mar 16, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG graphic, with two eyes and a curved mouth positioned on a circular face. The visualization is built using React to manage the component structure and D3’s `arc()` generator to compute the mouth’s path. The face, eyes, and mouth are drawn with basic SVG shapes like `circle` and `path`, while attributes such as radius, offsets, and stroke width are defined as JavaScript constants. The code uses D3 v6 and React 16.9, rendering everything into the DOM via `ReactDOM.render`.

Mar 5, 2021