SihleZwane

@SihleZwane·7 public vizzes

Fork of Vega-Lite API Template

This visualization plots daily closing prices from a CSV of South African index data using a scatterplot of semi-transparent points. The chart is built with the Vega-Lite API and rendered in D3, with window dimensions providing a full-screen view and tooltips showing the asset name. The `vl.x().fieldT('date')` and `vl.y().fieldQ('close')` encodings map date and price, while the configuration adjusts axis and label styling for readability.

Jun 1, 2023

Loading thumbnail…

Fork of MouseFollower

A single circle follows the mouse cursor across a blank SVG canvas. The circle’s position updates on every mouse move event, directly using the event’s client coordinates. The implementation uses React state and the `useCallback` hook within `index.js`, rendering through ReactDOM’s `render` method. The SVG is created with hardcoded width and height, and the circle’s radius is fixed at 30 pixels.

May 22, 2023

Loading thumbnail…

MouseFollower

A small yellow circle follows the mouse cursor across an SVG canvas. The circle’s position is driven by React state, updated via a `useCallback` handler on the SVG’s `onMouseMove` event, which reads the native event’s `clientX` and `clientY` coordinates. The visualization is rendered using React and D3.js, with a fixed 960×500 viewport and no external dataset.

May 22, 2023

Loading thumbnail…

LoadingData

This example demonstrates how to load and parse CSV data from a remote source, logging the raw text output to the browser console. It uses the native `fetch` API within an asynchronous function to retrieve the data from a GitHub gist containing a list of named CSS colors. The code highlights the fundamental first step in data visualization: acquiring and inspecting data before any chart rendering occurs, though no visual output is generated in this minimal demonstration.

May 22, 2023

Loading thumbnail…

Fork of Parcel Sandbox

A yellow smiley face rendered as SVG via React, with a black-outlined circle, empty eyes, and a D3 arc path forming the mouth. The example demonstrates composing D3 shape generators with React components, using `d3.arc` to define the mouth’s inner and outer radii and angular range. The face is centered in a 960×500 viewport, with D3 v7 and React 16 loaded from CDNs. It shows how D3’s geometric utilities integrate into a React rendering pipeline without a simulation or data binding.

May 22, 2023

Loading thumbnail…

Fork of Smiley Face Part II

A smiling face rendered as a full-screen SVG scales with the browser window. The face centers itself dynamically, with a yellow circle for the head, black stroke outlining it, and two black eyes positioned symmetrically. The React component computes dimensions from `window.innerWidth` and `window.innerHeight`, then uses SVG `<circle>` elements within a translated `<g>` group. The code defines explicit variables for eye offset, radius, and stroke width, but the mouth remains absent in the current implementation. React and ReactDOM handle the rendering into the `#root` element.

May 21, 2023

Loading thumbnail…

Parcel Sandbox

A yellow circle with a black outline and a smaller, unfilled circle centered above it are drawn in an SVG canvas. The example uses React 16.7.0 with ReactDOM to render the SVG elements, computing the main circle’s center and radius from the fixed width and height variables. The code explicitly sets stroke widths and coordinates, demonstrating basic declarative SVG rendering within a React component.

May 21, 2023