Yan Yan

@yanyanmountainview·5 public vizzes

Loading Data with React & D3

This example demonstrates how to load and interact with data using D3 utilities within a React application. It renders an SVG circle that follows the mouse cursor, updating its position through D3’s event handling. The code uses `d3.select` to append an SVG element and a circle, then attaches a `mousemove` listener to update the circle’s `cx` and `cy` attributes based on cursor coordinates. The visualization is rendered via SVG, with the React app serving as the container for the D3-generated elements.

Jan 21, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying basic statistics about the dataset. The code fetches a CSV file containing CSS named colors, parses it with d3.csvParse, and renders the file size, row count, and column count in large text. It uses the native fetch API to retrieve the text and D3 v7’s parsing utilities to structure the data. The output is shown inside a pre element with oversized styling for readability.

Jan 21, 2023

Loading thumbnail…

make_face_yy

A static SVG drawing depicts a stylized face midway to completion, featuring a large yellow circle with a black outline as the head, and two unfilled circles as eyes positioned symmetrically around the center. The rendering uses raw SVG elements, specifically `<circle>` tags, with coordinates and dimensions hardcoded in the HTML file. The face lacks a mouth, leaving the expression unfinished, while the simple geometric composition highlights the initial steps of constructing a smiley face. The example relies on inline SVG within an HTML document, with no external libraries or data sources.

Jan 17, 2023

Loading thumbnail…

make_face_yy

Three yellow circles with dark outlines on a white canvas form a partial smiley face. The largest circle serves as the face, and two smaller, identical circles positioned symmetrically above its center represent the eyes. The visualization is built with static SVG elements, using explicit pixel coordinates for the center and radius of each circle. The headless HTML file includes an embedded YouTube video in its README, but the rendered output itself is a simple, non-interactive graphic.

Jan 17, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows move. The face is drawn as SVG elements, and the eyebrows are animated using D3’s `transition.attrTween` to shift their vertical position. The code uses `d3.select` and `d3.append` to build the shapes, while `d3.interval` drives the continuous motion. The page loads D3 v5 from a CDN and applies styling from an external stylesheet, with all script logic contained in `bundle.js`.

Jan 17, 2023