Thandolwethu Shakes Dlamini

@Shakes-tzd·9 public vizzes

Untitled

This interactive scatterplot explores yearly changes across seven data categories (A–G), displaying each category as a dot plotted along an ordinal x-axis of bars. Users navigate between years with left and right arrow keys, with an automatic playback feature advancing through the dataset. Built with React and D3.js v3, the visualization uses SVG rendering with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.scale.category10` for color encoding. Data loads from an external CSV file, and the chart includes keyboard event handling and dynamic axis updates.

Nov 25, 2021

Loading thumbnail…

d3 class practice

This example demonstrates a before-and-after image comparison slider with a draggable white divider. The interface lets users interactively reveal one of two photographs by dragging the resizer horizontally across the container. The implementation relies on plain JavaScript event listeners for mouse and touch interactions, manipulating DOM element widths and positions directly. It uses CSS gradients and flexbox for styling, with images sourced from Pexels, and does not utilize any D3 or React APIs despite the title.

Nov 16, 2021

Loading thumbnail…

Mapbox Storytelling

This interactive map tells a scrollytelling story about Philadelphia’s bicycle infrastructure. Using the Mapbox GL JS API, a fixed map is paired with scroll-driven chapters that reveal and hide separate layers—such as bike lanes, Indego bike-share stations, and trail networks—by adjusting their paint property opacities. The Scrollama library and Intersection Observer handle the chapter activation, while a JavaScript config file defines the narrative content and camera positions.

Nov 4, 2021

Loading thumbnail…

Transitions

This example demonstrates smooth animated transitions between two datasets of circles rendered as SVG. Three circles initially appear at fixed positions, then shift to new coordinates and radii when a button triggers the change. The code uses D3.js v4’s `transition()`, `delay()`, and `duration()` methods to animate the `cx` and `r` attributes over two seconds. The datasets `data1` and `data2` are simple arrays of numbers that define the circle properties, with the transition bound to a button click via the `triggerTransition` function.

Nov 4, 2021

Loading thumbnail…

Untitled

This interactive scrollytelling visualization tells the story of a 2017 San Diego Data Visualization meetup, summarizing attendance, device types, and age ranges. As the user scrolls, animated SVG grids and bar charts transition with elastic easing, using D3.js v3 for data joins and transitions, while Waypoints triggers each scene. The data is generated with `d3.range` and random age values, rendered as colored rectangles and text labels.

Nov 3, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example displays summary statistics about a dataset of named CSS colors: the row count, column count, and formatted file size in kilobytes, which update after loading. It uses React hooks (`useState`, `useEffect`) to fetch the CSV via d3.csv and displays the computed message using the `message.js` helper. The visualization is minimal, showing text in a large `<pre>` element rather than graphical output, and relies on d3.csvFormat to calculate data size.

Oct 23, 2021

Loading thumbnail…

CSS Named Colors

This example presents a minimal web page that displays a text summary of a dataset containing CSS named colors. It retrieves the CSV data from a remote GitHub Gist using the `fetch` API, then parses the text with `d3.csvParse`. The parsed data is used to report the number of rows, columns, and the approximate file size in kilobytes, which is rendered as plain text in the browser. The page uses D3 v5 for CSV parsing and JavaScript's native `fetch` for loading the resource.

Oct 23, 2021

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face with black outlines is rendered in SVG, centered on a 960 by 500 canvas. The face’s size, stroke width, eye placement, and mouth are all controlled by props. Built with React and D3 v5, the example demonstrates modular component structure by splitting the face into separate files for the background circle, eyes, mouth, and container, using ES6 modules and React Fragments. D3’s `arc` generator creates the mouth path, while React handles the SVG element structure.

Oct 21, 2021

Loading thumbnail…

Document

A yellow face rendered in SVG uses React to draw a centered circle for the head, two offset black circles for the eyes, and a D3 arc path for the mouth. The code sets explicit width, height, and stroke properties, translating the drawing group to the center of the viewport. It demonstrates basic geometric composition with d3.arc for the curved mouth shape, all rendered within a fixed 960 by 500 coordinate space.

Oct 21, 2021