Pin-Yu-Li

@Pinpunyu·4 public vizzes

Fork of Interactive Color Legend

This example displays an interactive scatter plot of the Iris dataset, letting users explore relationships between four floral measurements by changing the X and Y axes via dropdown menus. It includes an ordinal color legend that dims and highlights data points when hovered, visually distinguishing the three iris species. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and the `csv` loader to parse data from a remote URL, rendering SVG circles, axes, and the legend through reusable React components.

Sep 15, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying the file size in kilobytes, the number of rows, and the number of columns. Using the D3.js v5 function `d3.csv`, it fetches the Iris dataset from a GitHub gist and processes the resulting array. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, as well as a nested promise “pyramid of doom.” The output renders as large text inside an HTML `<pre>` element.

Sep 5, 2024

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a minimal data-loading workflow using React and D3. It fetches a CSV file of CSS named colors via the `csv` function from D3, stores the parsed data in React state with `useState`, and triggers the fetch inside a `useEffect` hook. While the data loads, the interface displays a "Loading..." message; once ready, it renders a summary of the dataset—its size in kilobytes, row count, and column count—formatted as a large text block. The code uses React DOM for rendering and D3’s `csvFormat` to calculate the file size.

Sep 5, 2024

Loading thumbnail…

Fork of Hello HTML

A fork of the Hello HTML example renders a grid of eighteen yellow smiley faces, each constructed with randomized facial features. The React components use SVG shapes, including a yellow background circle, two black eyes, and a mouth created with a d3 arc path. The faces are drawn with random values for stroke width, eye offset, eye radius, and mouth dimensions, and are laid out in a 6-by-3 grid. The visualization relies on React for component composition and d3's `arc` function for the mouth geometry.

Sep 5, 2024