Yu Wang

@wuyuyu1024·5 public vizzes

Fork of Smiley Face Part III

This example shows a smiley face composed of a yellow circle with a black outline, two eyes, and an arc-shaped mouth, rendered as SVG. The code uses React to define components and D3’s `arc` function to generate the mouth path based on inner/outer radius and angle ranges. It employs ReactDOM to mount the app to the DOM, with D3 v5 and React 16 loaded via CDN.

Aug 15, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a diamond dataset as a scatterplot, mapping carat to the x-axis, cut to the y-axis, and color to the diamond’s color grade, with tooltips showing cut details. The visualization is built programmatically via `vl.markPoint` and `vl.x`, `vl.y`, and `vl.color` encodings, with data loaded asynchronously using D3’s `csv` function. The chart fills the browser window and applies custom axis and label styling from a separate config module, while the Vega-Lite renderer is configured to use SVG output.

Aug 14, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count as large text. It uses the `d3.csv` method to fetch and parse the CSS Named Colors dataset directly, with the results rendered into a `<pre>` element. The code also includes commented alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, highlighting different approaches to asynchronous data loading within a React project using D3 v5.

Aug 13, 2024

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of randomized smiley faces renders as SVG through React components, each assembled from separate circle, path, and container elements. The example combines React’s declarative component structure with D3’s `arc` generator for the mouth shape, while D3’s `range` function creates the 18-face dataset. Each face independently varies stroke width, eye offset, eye radius, and mouth dimensions using `Math.random()` values passed as props. The code emphasizes modularity by splitting faces into `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` components, demonstrating a reusable, data-driven visualization pattern built with both libraries.

Aug 12, 2024

Loading thumbnail…

Fork of Hello HTML

This example displays a blank HTML page titled “Fork of Hello HTML.” The code uses no external libraries or data sources, containing only a minimal <!DOCTYPE html> wrapper with an empty <body> element. The rendering approach is static, relying solely on the browser’s default document display without any CSS, JavaScript, or D3.js components. The page serves as a starting point for building interactive visualizations, though it currently shows no graphical content or user interactions.

Dec 11, 2023