S-Zins

@SebastianZins·11 public vizzes

Fork of Loading Data with React D3

A pie chart visualizes the distribution of CSS named colors, with each color represented as a slice filled with its own RGB hex value. The data is loaded from a CSV file using D3's `csv` utility and managed through React state, with a loading message displayed before the data arrives. The visualization is rendered as an SVG using D3's `arc` and `pie` functions to compute the path geometry, while React handles the component lifecycle and DOM rendering via `ReactDOM`.

Oct 6, 2023

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst of CSS named colors fills the SVG canvas, with each color represented as a wedge emanating from the center. The code loads color data from a CSV file using D3’s `csv` utility, then processes it with `pie` and `arc` to compute the wedge geometry. React components render the resulting SVG paths, using `useState` and `useEffect` for asynchronous data loading. The actual color values come from the `RGB hex value` column in the dataset.

Oct 6, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationships among weight, horsepower, and fuel efficiency (mpg) for vehicles in the UCI Auto MPG data set, with each car plotted as a semi-transparent circle whose size reflects mpg, color encodes weight, and tooltips reveal model names. It uses the Vega-Lite API to declare the scatter plot specification, which is registered with Vega and Vega-Lite libraries. The data is loaded asynchronously via d3.csv, while d3.v5 provides the underlying parsing, and the visualization scales responsively to fill the browser window with customized axis and label styling for readability.

Oct 6, 2023

Loading thumbnail…

Fork of Mouse Follower

A fork of a mouse follower renders a large text block that updates as a user moves the cursor. It displays a message about the current dataset derived from a CSV file fetched via the `d3.csv` API, showing its size in kilobytes, row count, and column count. The example uses the React framework with `useState` and `useEffect` hooks to manage asynchronous data loading, and the `d3` library for CSV parsing and formatting. The display is a plain `<pre>` element, with the coordinate-following behavior implied by the title and README description.

Oct 6, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a summary of a CSV dataset containing CSS named colors. It computes the file size in kilobytes, the number of data rows, and the number of columns, then renders these three statistics in a large HTML `<pre>` element. The code uses the D3.js v5 library’s `d3.csv` function to fetch and parse the remote CSV file, and `d3.csvFormat` to calculate the size of the formatted data. The visualization is minimal, focusing on textual output rather than graphical representation.

Oct 6, 2023

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face rendered as an SVG follows the mouse cursor across a 960×500 canvas. The example combines React for state management with D3.js for SVG generation, using a `circle` element whose `cx` and `cy` coordinates update via a `mouseMove` event handler. The React `useState` hook tracks the cursor position, and `useCallback` optimizes the event handler. Though the code defines a yellow face with black outline and two eye circles in an HTML comment, the interactive version displays only a single moving circle, driven by `ReactDOM.render` and D3 v5.

Oct 6, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized, static smiley face created with Scalable Vector Graphics (SVG). It uses a yellow circle for the head, complete with a black stroke, and two smaller black circles for the eyes, all centered on a 960 by 500 canvas. The face is constructed through basic SVG shape elements defined directly in the HTML, without any JavaScript or external libraries. The head is placed at the center, with the eyes offset horizontally to create a simple, recognizable cartoon face.

Oct 6, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

A smiley face rendered as a static SVG graphic shows a yellow circle with a black outline and two smaller black circles for eyes. The face lacks a mouth, reflecting its status as a partial construction. The visualization uses plain SVG elements within an HTML file, with hard-coded `circle` tags for the head and eyes. No JavaScript libraries or data sources are involved; the rendering relies solely on SVG’s native shape primitives. The layout positions the circles on a 960×500 canvas, with the head centered at (480, 250) and eyes offset horizontally.

Oct 6, 2023

Loading thumbnail…

Fork of Smiley Face Part V

A grid of 18 smiley faces, each with randomized eye and mouth sizes, renders as a React component tree. The code splits the visualization into separate ES6 modules, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which wraps the faces in an SVG group. Using React Fragments, the `Eyes` component returns multiple circles, while `Mouth` builds an arc path with the `d3.arc()` API. The `index.js` file generates the grid with `d3.range()` and renders everything via `ReactDOM.render()`.

Oct 6, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiling face constructed from a yellow circle, two black eyes, and a curved mouth, all rendered as SVG within a React component. The face is built from separate React components for the background, eyes, and mouth, which are composed inside a central `FaceContainer` that translates the drawing to the center of a 960×500 canvas. The mouth is drawn using the `d3.arc` API to generate an arc path with defined inner and outer radii and angled endpoints, while the other shapes are simple SVG circles.

Oct 5, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face constructed from three SVG circles on a yellow background. The face is drawn with two small black circles for eyes and one large yellow circle outlined in black for the head. The code uses raw SVG elements within an HTML document, with a stray `<scirpt>` tag and a minimal `index.js` that merely logs "test" to the console, indicating the visualization is static and not data-driven.

Oct 5, 2023