nqu9DL

@nqu9DL·7 public vizzes

Visualizing D3 and React

This example demonstrates how to load and parse CSV data in a D3 and React application. It fetches a dataset of CSS named colors from a remote URL using the `fetch` API with async/await, then parses the raw text with `d3.csvParse`. The visualization displays summary statistics about the dataset—file size in kilobytes, row count, and column count—as large text in a `<pre>` element. The code highlights the contrast between the commented-out `d3.csv` approach and the manual `fetch`-based method.

Mar 18, 2021

Loading thumbnail…

Fork of Vega-Lite API Template_DL

This visualization shows the relationship between miles per gallon and horsepower for cars from the auto-mpg dataset, with points colored by origin. It uses the Vega-Lite API to construct a circle mark with quantitative scales for both axes, and includes a tooltip displaying car names. The code loads CSV data via d3.csv, applies custom styling through a configuration object, and renders the chart as SVG using Vega, Vega-Lite, and the vega-lite-api library.

Mar 9, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example shows how to load and parse CSV data from a remote URL, then displays a concise summary of the file’s size, row count, and column count in large text. It uses the browser’s `fetch` API within an `async` function to retrieve the raw text, followed by `d3.csvParse` (from D3 v5) to convert that text into structured data objects. The data source is a GitHub Gist containing named colors, and the results are rendered into a `<pre>` element.

Mar 2, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data_answer

This example displays basic statistics about a CSV dataset of CSS named colors, showing the file size in kilobytes, row count, and column count. The code fetches the data from a GitHub gist URL using the Fetch API with async/await syntax, then parses it with `d3.csvParse` from D3 v5. The computed values are rendered as text inside a `<pre>` element with large font styling. While the implementation includes commented-out alternatives using `d3.csv` and a promise-based fetch pattern, the active code demonstrates the modern async/await approach for loading and parsing tabular data.

Mar 2, 2021

Loading thumbnail…

Mouse Follower

A smiling face emoji, rendered as a single SVG circle, follows the mouse cursor across a 960 by 500 pixel canvas. The React component uses the `useState` hook to track the mouse position, which is updated on every `onMouseMove` event on the SVG element. React 16.9 handles the state-driven re-rendering, while D3 v5 is loaded but not directly used in this example. The circle’s center coordinates are bound to the current mouse position within the SVG coordinate system.

Mar 2, 2021

Loading thumbnail…

make a face_PartIV_DL2021Mar

This example renders a grid of 18 cartoon faces using React and D3 v6, generated through the `range` and `Math.random` functions to vary each face’s eye offset, eye radius, stroke width, and mouth dimensions. Each face is composed of SVG circles and arcs from D3’s `arc` API for the mouth, with positioning handled by a `FaceContainer` SVG group. Iterating over an array from `d3.range`, it maps random parameter values to reusable React components for background, eyes, and mouth, producing a playful, randomized collection.

Mar 2, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I_DL2021Mar

A yellow face with two black-outlined eyes sits centered on a plain white SVG canvas. The face is a large yellow circle, and the eyes are small, un-outlined circles placed symmetrically on either side of the center. This static example uses raw SVG elements—`circle` tags with explicit attributes for position, radius, and stroke—to render a simple, unfinished smiley face, as noted in the README. No JavaScript libraries or data sources are involved; the rendering relies entirely on hard-coded SVG markup.

Mar 1, 2021