JosephStalnaker

@JosephStalnaker·8 public vizzes

Fork of Rendering Data with React & D3

A radial burst visualization displays all CSS named colors as pie slices, with each slice colored by its corresponding hex value. The code loads color data from a CSV using D3’s `csv` utility and React’s `useEffect` hook, then renders an SVG via React components. D3’s `pie` and `arc` functions compute the slice angles and paths, while the `fill` attribute maps each data row’s RGB hex value to the slice color. The React `useState` hook manages the loading state, showing "Loading..." until the asynchronous data fetch completes.

Jul 1, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset using React and D3. The visualization displays a text summary showing the data’s file size in kilobytes, row count, and column count, initially showing “Loading…” until the data arrives. The code uses React’s `useState` and `useEffect` hooks to manage data state, and D3’s `csv` function to fetch and parse the remote CSV file, followed by `d3.csvFormat` to calculate the formatted size. The data source is a gist containing CSS named colors.

Jun 28, 2021

Loading thumbnail…

Loading Data

This example demonstrates how to load and inspect a CSV dataset in a web page. It fetches a remote CSV file containing CSS named colors using `d3.csv` with a URL, then displays the file size in kilobytes, the number of rows, and the number of columns in a `<pre>` element. The code also includes commented-out alternatives using the Fetch API and `d3.csvParse` to show different parsing approaches. The visualization is minimal, presenting only textual metadata about the data rather than a graphical chart.

Jun 28, 2021

Loading thumbnail…

Mouse Follower

This example renders a single black-outlined circle on a blank SVG canvas that follows the user’s mouse movements. The circle’s center updates to the current cursor coordinates, which are captured from the mouse event’s `clientX` and `clientY` properties. Built with React and ReactDOM, the application uses the `useState` hook to store the mouse position and an `onMouseMove` handler to trigger re-renders, drawing the circle with SVG elements.

Jun 27, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS classes can be combined to create a layered, colorful composition with circles, rectangles, and a polyline path. The SVG markup uses basic geometric elements with inline fill and stroke attributes, while a separate stylesheet applies a green stroke with rounded line joins to the path and black styling to the `.lines` class. The rendering relies on pure SVG and CSS, with a group transform scaling the entire graphic and translate offsets repositioning elements for a stacked layout.

Jun 27, 2021

Loading thumbnail…

Fork of Smiley Face Part One

This example shows a stylized smiley face rendered as a static SVG graphic, composed of a yellow background circle, two eyes, and a curved mouth. The face is centered on a 960 by 500 canvas using a React component tree that composes reusable subcomponents for each facial feature. The code leverages React 17 and D3 v7, specifically using the `arc()` generator from the `d3` module to create the mouth’s path. All shapes are drawn with SVG circles and paths, with positions and sizes defined by constants passed as props.

Jun 26, 2021

Loading thumbnail…

Smiley Face Part One

A smiling face drawn with SVG shapes is rendered using React and D3. The face consists of a yellow circle for the head, two smaller circles for eyes, and a mouth created with a D3 arc generator. The code uses ReactDOM to render the SVG, and D3 v7’s `arc` function defines the mouth path with inner and outer radii and angular extents. All elements are positioned relative to a central transform, with parameters for eye offset and stroke width.

Jun 26, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “What What” centered on a plain HTML page at an extremely large font size. It demonstrates a minimal setup for web-based visualization using standard web technologies. The page uses inline CSS within a `<style>` tag to control the body’s text alignment and font size, and a JavaScript `<script>` tag that logs “What what” to the browser’s console. No external libraries or data sources are involved, relying solely on native HTML, CSS, and JavaScript APIs.

Jun 25, 2021