Sofffos

@Sofffos·9 public vizzes

SVG Fundamentals

This example demonstrates fundamental SVG rendering by displaying two circles positioned within a single SVG element. The first circle uses the default black fill, while the second specifies a red fill via an inline presentation attribute. The code relies on raw SVG markup embedded directly in an HTML page, styled minimally through CSS for typography only. It serves as a bare-bones illustration of how SVG shapes, coordinates, and fill properties work without any external JavaScript libraries or data bindings.

May 28, 2022

Loading thumbnail…

Rendering Data with React

A donut chart displays the distribution of 148 named CSS colors, loaded as CSV data from a GitHub gist and rendered as SVG paths with React 16.9. Using D3 v6’s `pie` and `arc` generators, each slice’s fill is set to the color’s RGB hex value from the dataset. React’s `useState` and `useEffect` hooks fetch the data, while conditional rendering shows a loading message before the visualization appears.

Feb 27, 2021

Loading thumbnail…

Loading Data with React

This example demonstrates loading a remote CSV file and rendering its contents as a vertical strip of colored bars, one row per line, using React components. The visualization transitions from a loading message to the final layout once the asynchronous `d3.csv` request completes, with the data stored in React state. Each row’s `RGB hex value` is applied as a `backgroundColor` style on a fixed-width `<div>`. The code uses React’s `useState` and `useEffect` hooks alongside D3’s `csv` and formatting utilities, with the browser rendering the result as SVG-compatible HTML elements. The CSV source is a GitHub gist of CSS named colors.

Feb 27, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between a car's origin country and its horsepower, using the auto-mpg dataset. Each point is rendered as a large, semi-transparent circle, with size and opacity set to 9000 and 0.02 respectively. The visualization is built using the vega-lite-api library, which registers Vega and Vega-Lite, and retrieves data from a CSV URL via d3.csv. The plot is fitted to the window size and includes a tooltip that displays the car's name on hover.

Feb 27, 2021

Loading thumbnail…

Load data use D3

This example demonstrates loading a remote CSV dataset and reporting its characteristics in text form. It fetches named color data from a GitHub gist using D3’s `csv` method, then displays the file size in kilobytes, row count, and column count. The application is built with React hooks—`useState` and `useEffect`—to manage the asynchronous data loading. The result is rendered as large, formatted text inside a `<pre>` element within an SVG-capable React setup, using D3 v6 and React 16.9.

Feb 27, 2021

Loading thumbnail…

Loading and parsing CSV Data

This example demonstrates how to load and parse CSV data using D3, displaying a summary of the dataset in a large text element. It fetches a CSV file containing CSS named colors from a GitHub gist using `d3.csv`, then reports the file size in kilobytes, the number of rows, and the number of columns. The visualization also includes commented-out alternatives using the Fetch API and `d3.csvParse`, showing different approaches to achieving the same result.

Feb 27, 2021

Loading thumbnail…

Mouse follower

A cursor-following smiley face tracks the mouse across an SVG canvas in this React application. The code uses React's `useState` hook to store mouse coordinates and a `useCallback` handler to update them on `onMouseMove` events. Each mouse movement re-renders a single yellow circle with black stroke, whose center position is bound to the current mouse coordinates. The example demonstrates real-time interaction between browser pointer events and declarative SVG rendering through React's state management.

Feb 27, 2021

Loading thumbnail…

Smile face part 1

This example shows a smiley face composed of a yellow circle background, two black eyes, and a mouth drawn as an arc. The face is centered within an SVG canvas using React components like `FaceContainer`, `BackgroundCircle`, and `Eyes`. The mouth is generated with the `d3.arc()` API, using specified inner and outer radii and angular ranges. The rendering relies on React 17 and D3 v6, with the SVG output controlled entirely through component props for dimensions, offsets, and radii.

Feb 26, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page displaying the text “Hello HTML” at a very large scale, centered on the screen. The page includes a basic HTML structure with CSS styling that sets the body’s text alignment and font size. The code also runs a JavaScript script that logs “Hello JavaScript!” to the browser’s console. It uses plain HTML, CSS, and JavaScript without any external libraries or data sources.

Feb 25, 2021