georgie-flood

@georgie-flood·8 public vizzes

Colour Part III - D3 Arcs

A radial burst of CSS named colors, rendered as a SVG pie chart, fills the viewport as a full circle of 148 wedges. The example loads color data from a CSV file using D3’s `csv` utility, then React state updates the visualization. Each arc is generated with D3’s `arc` and `pie` functions, using the `RGB hex value` column for the fill color, and the chart is positioned with a `translate` transform.

Oct 18, 2023

Loading thumbnail…

Colour Part II - Rendering with React

This example renders a stacked list of CSS named colors as horizontal strips, creating a full-spectrum swatch from a CSV dataset. The `App` component loads the data with `d3.csv`, stores it in React state via `useState` and `useEffect`, and maps each row to a `<div>` whose background color is set from the `RGB hex value` field. React handles the SVG-free, DOM-based rendering, while D3 only handles data loading.

Oct 17, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst of CSS named colors displays each color as a wedge in a full circle, filling the SVG canvas with a vibrant spectrum. The code loads color data from a CSV file using `d3.csv`, then processes it with `d3.pie` to compute arc angles and `d3.arc` to generate SVG path geometries. React manages the component state and rendering, updating the visualization once the data arrives via `useState` and `useEffect`.

Oct 17, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from the classic Auto MPG dataset, plotting each car as a circle with origin on the x-axis, horsepower on the y-axis, weight mapped to color, and miles per gallon to circle size. Hovering reveals the car’s name via tooltips. It uses the Vega-Lite API to construct the specification, with Vega and Vega-Lite rendering to SVG, and D3’s CSV loader to fetch the remote data file. Custom configuration adjusts axis appearance and label styling.

Oct 15, 2023

Loading thumbnail…

Loading data with React and D3

This example shows a React application that loads a CSV file of CSS named colors from a GitHub gist and displays a summary of the data as plain text. The program uses D3's `csv` utility to fetch and parse the remote data, and React's `useState` and `useEffect` hooks to manage the asynchronous loading state and update the display. Once loaded, it reports the formatted data size in kilobytes, the number of rows, and the number of columns using `d3.csvFormat` and the data's properties. The output is rendered as an SVG-less `<pre>` element, showing the text summary within the browser.

Oct 15, 2023

Loading thumbnail…

colour stuffs

This example displays a plain-text summary of a CSV file’s metadata in a large font. It shows the file size in kilobytes, the number of rows, and the number of columns. The code loads the data with `d3.csv` and formats it with `d3.csvFormat` to calculate its byte length. The visualization fetches CSS named colors from a remote CSV file and presents the computed statistics using standard DOM text content.

Oct 15, 2023

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across the full browser window, with its position updating in real time to match the pointer's coordinates. Built with React hooks (useState and useCallback), the app tracks mouse movement via the SVG onMouseMove event and renders the circle using SVG elements. The visualization uses ReactDOM to mount the component and adjusts to the window's inner dimensions, demonstrating a simple interactive pattern with no external charting library.

Oct 15, 2023

Loading thumbnail…

Smiley Face Part 1

The visualization displays a grid of eighteen randomly generated smiley faces, each composed of a yellow circle, black eyes, and an arched mouth. Using React components, the faces render as SVG elements with D3’s `arc` generator for the mouth path. Random values for stroke width, eye offset, eye radius, and mouth dimensions create variation across the grid, while the `range` function from D3 generates the array of face instances.

Oct 3, 2023