sz3g12

@sz3g12·8 public vizzes

Fork of Stylized Line Chart

This interactive SVG line chart visualizes ambient temperature over time using data from the Data Canvas Sense Your City Dataset. The chart plots temperature values along a smooth natural curve, with time on the x-axis and temperature on the y-axis, rendered in teal against a minimalist Poppins-font interface. Built with React and D3 v5, it leverages D3’s `scaleTime`, `scaleLinear`, and `curveNatural` functions for axis scaling and path interpolation. The axes and marks are constructed through custom React components, with data fetched asynchronously via D3’s `json` loader and rendered using SVG elements.

Mar 21, 2021

Loading thumbnail…

Loading data with React & D3

This example demonstrates how to load and summarize a CSV dataset within a React application using D3 utilities. It fetches CSS named colors from a remote GitHub Gist and displays a concise report of the data's size, row count, and column count. The implementation uses React's `useState` and `useEffect` hooks to manage state and trigger the data loading, while `d3.csv` parses the remote CSV file and `d3.csvFormat` calculates the data's kilobyte size. The interface initially shows a "Loading..." message until the asynchronous fetch completes.

Mar 10, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data in a web page, displaying summary statistics about a dataset of CSS named colors. The visualization shows the file size in kilobytes, the number of rows, and the number of columns in plain text. It uses the D3.js library (v6) with the `d3.csv` method for asynchronous data fetching and parsing. The code also includes commented-out alternatives using the Fetch API, `async/await`, and `d3.csvParse` to illustrate different approaches to the same task. The data originates from a gist hosted by Curran Kelleher.

Mar 10, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A circle follows the mouse cursor across an SVG canvas, with its horizontal and vertical position updated in real time to match the pointer’s coordinates. The example demonstrates state management in React, using the `useState` hook to store the cursor position and the `useCallback` hook to handle mousemove events. The `ReactDOM.render` method mounts the component to the DOM, while the SVG’s `onMouseMove` listener triggers updates, with the circle’s center assigned via `cx` and `cy` attributes.

Mar 10, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load raw data from a remote URL using the Fetch API within a React framework. It fetches a CSV file containing CSS named colors and logs the raw text content to the browser console, illustrating the basic pattern of asynchronous data retrieval with `fetch` and `async`/`await`. The visualization does not render any graphical output yet; instead, it focuses on the initial step of obtaining and parsing external data. The code converts the response to text via `response.text()` and outputs it directly through `console.log`.

Mar 10, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A grid of randomly varied smiley faces is rendered, each face composed of a yellow circle, two eyes, and an arc-shaped mouth. The faces repeat across the screen, with slight randomness introduced to eye offset, eye radius, and mouth dimensions, making each face subtly unique. The visualization uses React components for structure, with D3's `arc` generator for the mouth path. SVG rendering via a shared `FaceContainer` handles the coordinate transforms, while React maps over a D3 `range` to generate the grid.

Mar 8, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a yellow smiley face using React and D3’s `arc` generator for the mouth and one eye, while the other eye is omitted, leaving the face halfway complete. The face is drawn as an SVG circle with a thick black stroke, centered at a fixed width and height. The mouth and eye arcs are positioned relative to the center using D3’s `arc` with specified inner and outer radii and angles. The code uses `d3.arc`, `ReactDOM.render`, and SVG elements, with fixed numeric constants for layout.

Mar 8, 2021

Loading thumbnail…

Smily Face Part I

This example displays a static, unfinished smiley face drawn with SVG. A large yellow circle with a black outline forms the head, while two smaller filled circles serve as the eyes; the mouth is absent. The rendering relies on raw SVG elements created directly in the `index.html` file using React’s rendering approach, with no external data or interaction. The code uses plain SVG `circle` elements and inline styles, demonstrating a basic vector composition.

Mar 8, 2021