Sam Jukes

@SamJukesData·6 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v5, displaying the file size, row count, and column count in a large text block. The code fetches a CSV of CSS named colors from a GitHub gist via `d3.csv`, which returns a promise, and then uses `d3.csvFormat` to measure the data size in kilobytes. The parsed data array and its `.columns` property provide the row and column totals, which are written into the page using standard DOM manipulation.

Jul 25, 2020

Loading thumbnail…

Mouse Follower

A React component renders an SVG circle that follows the mouse cursor across a 960 by 500 pixel canvas. The application uses React state and the `onMouseMove` event handler to track cursor coordinates, updating the circle's `cx` and `cy` attributes in real time. It demonstrates a simple interactive visualization built with React 16 and SVG, where the circle’s position is bound directly to the user’s pointer location.

Jul 25, 2020

Loading thumbnail…

2018: Smiley Face

A yellow smiley face with black eyes, eyebrows, and a curved mouth is drawn in the center of an SVG canvas. The eyebrows shift up and then back down through a two-stage D3 transition. The visualization uses d3.arc to create the mouth path, while circles and rectangles form the face and features, with all elements positioned relative to the canvas center.

Jul 25, 2020

Loading thumbnail…

Smiley Face Part 2

A yellow smiley face is drawn in SVG using React components for the background circle, two eyes, and a mouth. The face is centered within a 960-by-500 viewport, with the mouth generated by d3’s `arc` path using a half-circle start and end angle. React renders each facial feature as a circle or path element, and the code uses React 16.9 and d3 v5 to compose the visualization declaratively.

Jul 23, 2020

Loading thumbnail…

Smiley Face Assignment

This example shows a classic yellow smiley face rendered as a single SVG graphic. The face consists of a large yellow circle with a black stroke, two eye circles, a curved mouth arc, and two eyebrow arcs, with a yellow rectangle covering the eyes' lower halves to create a closed-eye expression. The code uses React to define the component and D3’s `arc()` API to generate the mouth and eyebrow paths, with all elements positioned via SVG transformations and coordinates.

Jul 23, 2020

Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline forms the face of a smiley, while two smaller black circles serve as its eyes. The example demonstrates basic SVG shape composition using the built-in SVG `circle` element. The code places each circle with explicit `cx` and `cy` coordinates within an SVG canvas, and the styling is applied directly through SVG presentation attributes such as `fill`, `stroke`, and `stroke-width`. The rendering is static, using no JavaScript libraries or data sources.

Jul 23, 2020