14Hazel

@14Hazel·11 public vizzes

React Tutorials

This example displays a full-screen “Hello React!” message using React components. The code defines an SVG canvas with specified dimensions and attempts to draw a circle at its center, though the eye offset variables are undefined. It uses React 16.13.1 and ReactDOM to render the message into the root element via `ReactDOM.render`. The project loads React from a CDN and renders all content through an SVG output.

Jun 29, 2022

Loading thumbnail…

Untitled

This interactive parallel plot visualizes the Iris dataset, displaying four flower measurements across parallel vertical axes. Each line represents a sample, colored by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with a viridis palette. Hovering a line triggers a d3 transition that dims all other lines to light grey and reduces their opacity to 0.2 while highlighting the selected species in full color. The visualization uses d3.scaleLinear for each dimension, d3.scalePoint for axis positioning, and d3.axisLeft for tick rendering, with SVG paths created via d3.line.

Jun 23, 2022

Loading thumbnail…

parallel_coordinate_charts

This example displays a basic D3 version 7 setup with a blank page and the text “Hello D3 version 7” rendered in the body. It uses the `select` method from the D3 library to target the body element and set its text content. The page includes a large font size of 13em for the displayed message, and the code is structured with an external `bundle.js` file that imports from `d3`. No charts or data visualization features are present, serving only as a minimal starter template.

Jun 20, 2022

Loading thumbnail…

face_version3

This example creates a simple face using SVG primitives in React, positioning a single eye circle relative to the center of a 960 by 500 viewport. The code uses React 16.9 and D3 v7, specifically the `arc` function (imported but unused here), and relies on inline JSX to render the `<svg>` and `<g>` elements with a translate transform. The static visualization demonstrates basic coordinate math and component structure, but renders only one facial feature without additional styling or interactivity.

Apr 24, 2022

Loading thumbnail…

Mouse face

A stylized mouse face is drawn as a simple SVG composition: a large yellow circle forms the head, two black circles serve as eyes, and a thick black stroke defines the outline. The example demonstrates drawing primitive shapes with React and D3.js v7, explicitly setting coordinates and radii as constants. It uses React’s `ReactDOM.render` to mount the SVG element and employs basic SVG `<circle>` elements without any data binding or dynamic behavior.

Apr 24, 2022

Loading thumbnail…

Fetch, async, await

This example demonstrates how to fetch and read a CSV file of CSS named colors using modern JavaScript async/await syntax. The code defines an `async` function that uses the built-in `fetch` API to request data from a GitHub gist URL, then returns the response as plain text via the `.text()` method. The fetched text is logged to the browser console for inspection. The example highlights the contrast between chained `.then()` callbacks and the more readable `async`/`await` approach for handling asynchronous data loading.

Apr 24, 2022

Loading thumbnail…

Fork of Fork of face_version5

A grid of eighteen procedurally generated cartoon faces, each composed of a yellow circle, two eyes, and an arc-based mouth, demonstrates the variability possible through randomized parameters. The React components `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` compose individual SVGs, with `FaceContainer` managing the coordinate transform. Using d3’s `arc` generator, the mouth shape is defined by inner and outer radii and specific angles, while `Math.random()` varies stroke widths, offsets, radii, and mouth curvature across the batch, making every face slightly different.

Apr 22, 2022

Loading thumbnail…

Fork of face_version4

This example shows a simple cartoon face composed of a yellow circular background, two eyes, and a mouth, all rendered as SVG elements in a React application. The face is centered on a 960×500 canvas, and each facial feature is built from reusable React components. The mouth is drawn using the `d3.arc()` API with a predefined start and end angle, while the background and eyes are plain SVG circles. The code uses React 16.9 and D3 v7, passing coordinates and radii as props to control the face’s layout.

Apr 22, 2022

Loading thumbnail…

tested

A yellow circle face with black outline, two eyes, and an arc-shaped mouth is rendered in an SVG using React components. The components are split across separate ES6 modules, with the mouth drawn using the d3 arc generator. The example demonstrates component composition and React Fragments, with all shapes positioned via a central transform group.

Apr 22, 2022

Loading thumbnail…

Fork of face_version4

This example displays a stylized yellow face built from SVG circles and an arc, centered on a 960 by 500 canvas. The face features black-outlined eyes, a simple mouth, and a thick black stroke around the head, all rendered using React components. The code uses D3 v7’s `arc` generator to create the mouth path, with geometric constants defining eye offset, radii, and stroke width to position each element. The visualization is drawn with declarative SVG elements inside a React component, demonstrating a straightforward composition of primitive shapes without data binding.

Apr 21, 2022

Loading thumbnail…

Face_version3

A stylized face constructed from three SVG circles, rendered with a yellow head, black outline, and two black eyes, is centered on a 960 by 500 canvas. The code uses React and ReactDOM to declare the static elements, with the head positioned at the canvas center and eyes offset by fixed x and y coordinates. The active React component renders shapes via SVG primitives, specifying dimensions and colors as JSX attributes. The example demonstrates a minimal, declarative approach to vector graphics composition without drawing that data.

Apr 21, 2022