Lei Lei

@kudoshiji·8 public vizzes

Temperature Line Plot

This visualization displays a line plot of temperature readings over time, with a dark, readable style and tooltip interactions. The chart uses the Vega-Lite API to declare the mark and encodings, while D3’s `csv` function loads the dataset from a GitHub gist. The `index.js` file registers the Vega-Lite API with Vega and enables tooltips, then renders the chart into the page’s body with automatic width and height fitting. The configuration adjusts axis label sizes and colors for clearer presentation.

Jan 30, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to plot automotive data from the auto-mpg.csv dataset, showing car origin along the x-axis, horsepower on the y-axis, and encoding weight through color and mpg through point size. The chart renders as an SVG using vega, vega-lite, and vega-lite-api, with d3.csv loading the data and vega-tooltip providing interactive hover details that reveal each car’s name. A custom config adjusts font sizes and axis colors for readability.

Jan 30, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize external data within a React component using D3 utilities. It fetches a CSV file of CSS named colors via D3’s `csv` method, stores the result in React state with `useState` and `useEffect`, and then displays a simple text summary of the dataset. The message shows the file size in kilobytes, row count, and column count, computed by combining `d3.csvFormat` with basic string operations. The code relies on React 16.9 hooks and D3 v7, with the data sourced from a GitHub gist.

Jan 30, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data with D3, displaying basic metadata about the dataset. After fetching the CSV file from a GitHub gist, it computes and presents the file size in kilobytes, the total number of rows, and the column count. The visualization uses D3's `d3.csv` method to asynchronously fetch and parse the data, followed by `d3.csvFormat` to measure the raw text length. The resulting statistics are rendered as large text in an HTML `<pre>` element, with alternative commented-out approaches using `fetch`, `async`/`await`, and `d3.csvParse`.

Jan 30, 2022

Loading thumbnail…

Loading data with d3

A full-screen SVG circle follows the mouse cursor, demonstrating how React state tracks changing pointer coordinates in real time. The example uses React’s `useState` and `useCallback` hooks to update the circle’s `cx` and `cy` attributes on every `mousemove` event. Rendered through ReactDOM, the SVG’s width and height match the browser window dimensions, while the circle’s radius is fixed at 30 pixels. No external data loading or D3 utilities appear in the visible code, despite the title.

Jan 19, 2022

Loading thumbnail…

Mouse Follower

A gray circle follows the mouse cursor across a full-window SVG canvas, updating its position in real time. Built with React, it tracks pointer movement via an `onMouseMove` handler and stores the coordinates in component state. The `useCallback` hook and `setMousePosition` update the circle's `cx` and `cy` attributes, rendering the responsive interaction.

Jan 19, 2022

Loading thumbnail…

Smilly face part I

This example displays a grid of procedurally generated smiley faces, each with randomized dimensions for its outline, eyes, and mouth. Built with React and D3 v7, it renders SVG elements. The D3 `arc` API generates the mouth path, while modular components like `Face`, `Eyes`, and `Outframe` compose the visual, with each face using randomized parameters for varied appearances.

Jan 17, 2022

Loading thumbnail…

Smilly face part I

This example shows a single yellow circle centered on a full-screen SVG canvas, outlined in black. The circle’s radius is set to half the window height minus half the stroke width, ensuring it fits exactly within the viewport. The code uses a React component rendered via `ReactDOM.render`, with D3.js loaded but not yet used for drawing. The SVG is generated dynamically based on `window.innerWidth` and `window.innerHeight`. A commented-out block hints at a future smiley face with eyes, but only the head circle is displayed.

Jan 16, 2022