rickyphula

@rickyphula·8 public vizzes

Untitled

A yellow line chart with red stroke renders closing prices over time from a CSV file, using dates parsed with `d3.timeParse` and scaled with `d3.scaleTime`. The line is drawn via `d3.line`, while `d3.axisBottom` and `d3.axisLeft` generate the axes, both placed without bottom-margin offset. The y-axis domain uses the data extent rather than zero, and the SVG is appended directly to the body.

Nov 17, 2021

Loading thumbnail…

Pie Chart with D3

This example renders a pie chart using D3 and React. It loads color data from a CSV file and maps each row to a thin colored div, creating a stacked bar visualization. The code uses D3’s `csv` function to parse the remote dataset, and React’s `useState` and `useEffect` to manage data loading. The page is a full-window SVG with a smiley face drawn from circles, though the active display shows the data-driven colored stripes.

Nov 12, 2021

Loading thumbnail…

Rendering Data With React

This example shows the color data from a CSV file of named CSS colors, rendering each color as a thin horizontal strip. The visualization loads the dataset with D3’s `csv` function and uses React’s `useState` and `useEffect` hooks to manage asynchronous data fetching. Each row is mapped to a styled `<div>` element with a background color derived from the `RGB hex value` column. The interface displays a “Loading…” message until the data arrives, and the code also defines a `message` utility that calculates the data size in kilobytes and row/column counts.

Nov 12, 2021

Loading thumbnail…

Load data with React

This example demonstrates loading and summarizing a CSV dataset from a remote URL using React and D3. The app displays the file size in kilobytes, row count, and column count once the data loads, replacing a "loading" message. It uses the React hooks `useState` and `useEffect` to fetch the data with `d3.csv`, then formats the summary using `d3.csvFormat` and a custom message module. The visualization is rendered as text via React, with the data sourced from a GitHub gist containing named CSS colors.

Nov 11, 2021

Loading thumbnail…

interaction with react

A smiling face follows the cursor across a full-screen SVG canvas. Built with React, the app tracks mouse movement via an `onMouseMove` event handler and updates component state with `useState`, re-rendering a single yellow circle to track the pointer. The visualization demonstrates React’s declarative approach to DOM updates, using `ReactDOM.render` to mount the component and SVG elements for rendering. No external data source is used; interaction is driven entirely by user input.

Nov 11, 2021

Loading thumbnail…

A dependency-free Vanilla JS drawer

An interactive HTML page demonstrates a slide-out drawer controlled by custom JavaScript, with no external libraries. The drawer slides in from the right side using CSS transform transitions, triggered by an anchor link and closed via a button or overlay click. The content uses placeholder text, while the structure relies on data attributes and semantic markup. The example showcases a pure HTML/CSS/JavaScript approach for creating accessible UI components without frameworks.

Nov 5, 2021

Loading thumbnail…

Fork of Hello HTML

A React app built with D3.js v7 renders a yellow smiley face using SVG primitives. The face is composed of circles for the head and eyes, with a mouth drawn as an arc path generated by D3's `arc()` generator, which defines inner radius, outer radius, and start/end angles. The SVG canvas is 960 by 500 pixels, with the face centered via a translate transform. React's `ReactDOM.render` mounts the component to a root div, while a radial gradient `grad1` provides the eye fill, demonstrating a simple geometric composition.

Oct 22, 2021

Loading thumbnail…

Fork of Fork of Hello HTML

A smiley face rendered as an SVG drawing, composed of yellow and black circles and an arc for the mouth. The example demonstrates combining React with D3, using D3's `arc` generator to create the mouth path. The SVG is centered within a 960 by 500 viewport, with static positioning for the eyes and face, all defined through JSX in a single React component.

Sep 24, 2021