Weiping

@hihiweiping·5 public vizzes

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flower samples. The React and D3 v5 application renders circles as SVG marks, with axes generated from D3's linear scales. The plot is styled with a Poppins font, teal circle markers, and formatted tick labels. A tooltip on each mark displays the sepal length value, while axis labels identify the measurements. Data is loaded asynchronously from a CSV file using D3's csv function.

Dec 6, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load, parse, and summarize a CSV file using D3.js (v5). It fetches a remote CSV file containing CSS named colors from a GitHub gist via the `d3.csv` method, then displays the formatted data’s size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The code also separately fetches the raw text using the `fetch` API and calls `d3.csvParse` to parse it, though that parsed result is not displayed. The visualization serves purely as a text-based output of dataset statistics, highlighting D3’s CSV parsing and formatting utilities.

Nov 29, 2021

Loading thumbnail…

Mouse Follower

A single gray circle follows the mouse cursor across an SVG canvas, updating its position in real time. The example demonstrates a basic interactive React component that uses the `useState` and `useCallback` hooks to track mouse coordinates. The `onMouseMove` event handler updates the circle's `cx` and `cy` attributes, while D3's `range` function is imported but not actively used. The visualization is rendered entirely through React's declarative SVG elements, with no data source or animation logic beyond direct mouse tracking.

Nov 29, 2021

Loading thumbnail…

Fork of Working with Time

A scatter plot of temperature over time, this React visualization uses D3.js scales and axes to map the data. The code defines axes and marks as separate React components, and uses `d3.scaleTime` and `d3.scaleLinear` to position circles. The `csv` function loads the Sense Your City dataset, and the `timeFormat` API formats x-axis tick labels. The chart is rendered as an SVG, with each data point displayed as a circle whose hover tooltip shows the timestamp.

Nov 28, 2021

Loading thumbnail…

Smile Faces

A grid of eighteen smiling face icons populates the screen, each face rendered as a yellow circle with black stroke, two eyes, and an arc-shaped mouth. Each face is a React component composed of SVG primitives, with randomized eye and mouth radii producing varied expressions. The code uses d3’s `arc` generator for the mouth path and `range` to create the array, while ReactDOM renders the SVG elements into the DOM.

Nov 28, 2021