Grace Valerie Anyango

@Gracie254·6 public vizzes

Mouse Follower

This interactive visualization uses mouse movement to control a smiley face rendered as SVG circles. The React app loads color data from a CSV file of CSS named colors using d3.csv, then displays statistics about the data in large text. The application relies on React's useState and useEffect hooks to fetch and process the data, while the smiley face itself is constructed from basic SVG circle elements with yellow fill and black strokes.

Oct 28, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js setup that renders the text “Hello 3 version 7” directly into the body of an HTML page. It uses the `select` API from D3 v7 to target the body element and set its text content. The page loads D3 from a CDN, while the main logic is contained in a separate `bundle.js` file. The document includes basic styling that centers the text and sets a large font size.

Oct 27, 2021

Loading thumbnail…

Smiley Face Part 1

A grid of randomized smiley faces appears as a modular React component composition, using reusable parts like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`. Each face is generated from `d3.range` and laid out via SVG elements, varying attributes such as stroke width, eye offset, eye radius, and mouth dimensions. The `d3.arc` API defines the mouth’s curved path, while `FaceContainer` handles SVG coordinate translation. D3 v7 provides the arc and range utilities within the React rendering flow.

Oct 27, 2021

Loading thumbnail…

D3 Learning

This example demonstrates a minimal HTML page rendered with React, displaying the text “Hello HTML!” in large, centered type. It uses CSS for styling and plain JavaScript within an HTML structure, showcasing the integration of D3’s ecosystem with React. The code relies on standard DOM elements and CSS properties rather than D3-specific APIs, serving as a starting point for learning D3 in a React environment. The page is static, with no data loading or interactive visualization.

Oct 26, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a centered message that reads “Hello HTML!” displayed at a large scale across the page. It demonstrates the simplest possible structure for a web-based visualization: a single HTML file containing inline CSS for styling and embedded JavaScript for interactivity. The code defines a `.message` class with a font-size of 13em and uses text-align to center the content. No external libraries or data sources are used; the page relies solely on native HTML, CSS, and JavaScript to render static text.

Oct 26, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a static HTML page displaying the text “Hello HTML!” in a large, centered font. It uses inline CSS to style a div element with a font size of 13em and text alignment, while the content is hardcoded directly in the markup. No external libraries or JavaScript APIs are used; the page relies solely on native HTML and CSS to render the message. The simplicity demonstrates a minimal starting point for building web-based visualizations.

Oct 26, 2021