Sean Lin

@jacky6016·6 public vizzes

Fork of Vega-Lite API Template

This example visualizes automobile characteristics using a scatter plot, where the x-axis maps the country of origin, the y-axis shows horsepower, color represents weight, and point size encodes miles per gallon. The visualization is built with the Vega-Lite API, which programmatically constructs the specification, while D3 handles CSV data loading from a remote source. The rendered SVG output includes an interactive tooltip showing car names. The code customizes the chart’s appearance through a configuration object that adjusts axis and label styling.

Jun 21, 2021

Loading thumbnail…

Loading data with React

A React component loads a CSS named colors CSV and displays a text summary of the dataset. The code uses React’s useState and useEffect hooks, along with d3.csv, to fetch and store the data asynchronously, rendering a “loading” message while pending. The summary shows the file size in kilobytes, row count, and column count, calculated using d3.csvFormat and array properties. The visualization is plain text, rendered inside an HTML pre element.

Jun 20, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data asynchronously. It fetches a remote CSV file containing CSS named colors and displays a summary of the parsed dataset, including its size in kilobytes, row count, and column count. The code uses `d3.csv` for direct loading and parsing, alongside `d3.csvFormat` and `d3.csvParse` for format calculations. It also includes a commented alternative approach using the Fetch API and `d3.csvParse`. The results appear in a large-font `<pre>` element.

Jun 20, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-screen SVG canvas, updating its position in real time in response to pointer movement. The React app tracks the mouse coordinates via the `onMouseMove` event handler and stores them in state with `useState`, while `useCallback` memoizes the handler for efficiency. The circle’s center is rendered at the cursor’s `clientX` and `clientY` coordinates, with a fixed radius of 30 pixels, using React and ReactDOM to manage the SVG output.

Jun 20, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays summary statistics about a CSV file containing CSS named colors. It loads the data from a remote URL and reports the file size in kilobytes, the number of data rows, and the number of columns as large text. The implementation uses D3 v5’s `d3.csv` and `d3.csvFormat` functions, alongside commented alternatives demonstrating the `fetch` API with `async`/`await` and the lower-level `d3.csvParse`. The data originates from a GitHub gist of CSS named colors.

Jun 20, 2021

Loading thumbnail…

Smiley Face Part 1

A grid of randomly generated smiley faces demonstrates reusable React components for SVG visualization. Each face uses D3's arc generator to construct the mouth path, while circles render the yellow background and eyes. The Face component composes BackgroundCircle, Eyes, and Mouth within a transformed group, with randomized eye and mouth dimensions varying each face. React 17 and D3 v7 manage the SVG rendering through named exports and data-driven styling.

Jun 17, 2021