T

Tom-S82

@Tom-S82·17 public vizzes

Loading thumbnail…

Scatter Plot - React/D3 (Part 35) - Interactive Color Legend

This interactive scatter plot displays the Iris dataset, using drop-down menus to select which measurements appear on each axis and color-coding points by species. An interactive color legend highlights points of a selected species while dimming others on mouse hover. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG rendering with radial gradients for point fills. The legend and dropdowns respond to hover and change events, providing a focused exploration of species distributions across four flower attributes.

Loading thumbnail…

Scatter Plot - React/D3 (Part 25) - Stylised

This interactive scatter plot visualizes the Iris dataset, allowing users to compare four flower measurements across three species. The chart uses a React front-end with D3’s `scaleLinear` for axes and SVG rendering. Dropdown menus let viewers switch the x- and y-axis variables. Points are stylized with distinct radial gradients per species, and hovering reveals a tooltip with exact values. The data is loaded from a CSV file via D3’s `csv` function.

Loading thumbnail…

Bar Chart - React & D3 (Part 24) - Stylised

This interactive bar chart displays the top countries by estimated UN population for a selected year, with the number of countries adjustable via dropdowns. The bars are color-coded by continent and stylized with gradient fills and drop shadows. The visualization uses React for state management and component rendering, while D3 v5 handles data loading (via `csv`), scaling (`scaleBand`, `scaleLinear`), and axis generation. Population values are loaded from a CSV file and formatted using D3’s `format` function.

Loading thumbnail…

Bar Chart - React & D3 (Part 22) - Commercialised

This bar chart displays the ten most populated countries in 2020 based on UN population estimates. Built with React and D3 v5, it renders SVG rectangles whose lengths animate from zero to their final values using the `<animate>` element. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with axes split into separate files. Alternating blue and orange vertical gradients give the bars a 3D appearance, while a drop-shadow filter adds depth. Data is loaded via `d3.csv` from a GitHub-hosted CSV file.

Loading thumbnail…

Making a Bar Chart with React & D3 (Tutorial 21)

This example shows a horizontal bar chart of the estimated 2020 populations for the top ten countries, sourced from a UN population CSV file. Built with React and D3 v5, it renders as an SVG, using `d3.scaleBand` and `d3.scaleLinear` to map country names and population values to rectangular coordinates. The chart uses the `d3.max` function to determine the scale domain and React’s `useState` and `useEffect` hooks to asynchronously load and slice the data for display.

Loading thumbnail…

Colorful Smoke Rings - Animation Test

This example shows a field of concentric circles that simulate colorless, drifting smoke rings, which continuously expand and fade against a dark background. Built with React and D3.js, the visualization generates random positions, radii, stroke colors, and widths for 150 circles, rendering them as SVG elements. The animation is driven by SVG’s native `<animate>` elements, which control radius expansion, stroke-width growth, and opacity fade over a 15-second loop, with the dataset refreshing every 30 seconds. This test explores basic SVG animation with React’s state management and SMIL animations, replacing data with random placement to focus on motion and visual effect.

Loading thumbnail…

Vega-Lite API Template - Part 1

This example shows car specifications as a scatter plot, with miles per gallon on the x-axis, horsepower on the y-axis, origin as color, and fuel efficiency also encoded by point size. It uses the Vega-Lite API to construct the visualization programmatically, registering Vega and Vega-Lite v5/v4 with d3.csv for data loading from the Auto-MPG dataset. The chart is rendered as SVG, with tooltips enabled via the Vega Tooltip handler and a custom dark color scheme for axes and labels.

Loading thumbnail…

Mouse Follower & Path Drawer

This example demonstrates a reactive mouse-follower interaction in a React-powered SVG visualization. A gradient-filled circle tracks the cursor's movement, while a d3 path element dynamically appends line segments to record the cursor’s trajectory. The path uses an SVG linear gradient, and the circle uses a radial gradient, both defined in defs. Clicking the SVG triggers a state reset via a callback, clearing the drawn path and allowing a new trace to begin. The visualization leverages React’s `useState` and `useCallback` hooks for efficient state management and rendering updates.

Loading thumbnail…

Datavis 2020 Assignment 2 - (Tutorials 12, 13 and 15)

This example demonstrates how to load and summarize a CSV dataset of US births from 1994–2014, reporting the row count, column count, and file size in kilobytes. The visualization uses d3.csv to fetch and parse the data, then displays the summary in an HTML pre element. The code also includes commented alternatives using the Fetch API with async/await and d3.csvParse, as well as an older nested-fetch pattern. The data merges CDC, NCHS, and SSA sources, with 2000–2003 values averaged between datasets.

Loading thumbnail…

Smiley Face Part 6

A grid of twenty-five smiling faces fills the screen, each face randomly varying in rotation, stroke thickness, gradient colors, eye size and color, eyebrow position, and mouth dimensions. The faces are generated with React, rendered as SVG, and animated so eyebrows wiggle with random timing. Built from modular components, the visualization leverages the D3 arc API for mouth and tongue shapes and CSS variables for interactive hover effects that turn eyebrows blue.

Loading thumbnail…

Racing Bar Chart Animation Test

A racing bar chart animates six named categories as their values incrementally increase over time, with bars re-sorting by value and labels updating to show current distances. A React component renders SVG bars and text using d3-scale’s `scaleBand` and `scaleLinear`, while a custom `useInterval` hook triggers state updates every 750 milliseconds. The chart redraws with 750-millisecond transitions on the `rect` and `text` elements, and a start/stop button controls the animation loop.

Loading thumbnail…

Basic Bar Chart Animation Test (Fixed Data)

This example demonstrates an interactive bar chart where users can dynamically alter the dataset through buttons that increase, decrease, filter, or append random values. The bars animate their height and color transitions over one second, with hover tooltips displaying each bar's value. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes, a `linearGradient`-like color scale mapping values to a red-to-green range, and D3's `.transition()` method to smooth updates to the SVG elements.

Loading thumbnail…

Smiley Face Part 4

A smiling face rendered with SVG uses React components for each facial feature, including a gradient-filled face, eyes with colored irises and pupils, a mouth built from D3 arcs, and teeth as rectangles. Eyebrows are separate React elements with CSS hover effects that change their fill and stroke via custom properties. The face rotates slightly, and the eyebrows animate upward using SVG's built-in `<animate>` element with keyTimes and repeatCount, while the entire scene sits on a green background gradient.

Loading thumbnail…

Basic Bar Chart Animation Test (Fixed Data)

A bar chart in React animates changes to its data values and color scale. Users can adjust the displayed values through buttons that increment, decrement, filter, or add random data points. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes, while `transition` animates bar heights and fill colors over 1000 milliseconds. Hovering over a bar reveals its value via a tooltip with a 500-millisecond animation. The chart renders in SVG, with axes positioned using `axisBottom` and `axisRight`.

Loading thumbnail…

Basic React Hook Test (Line - Fixed Data)

This example demonstrates a line chart built with React hooks and D3.js, where a fixed dataset of twelve values is rendered as a smoothed cardinal curve. The visualization updates dynamically through two interactive buttons: "Update Data" increments each point by a constant value, while "Filter Data" removes all points exceeding a threshold. The code initializes the SVG using a React `useRef` hook, then applies D3's `scaleLinear`, `axisBottom`, `axisRight`, and `line` with `curveCardinal` to draw axes and the path. State management relies on `useState`, with effects triggered by the `useEffect` hook responding to data changes.

Loading thumbnail…

Basic React Hook Test (Circles - Fixed Data)

This example demonstrates how React hooks can manage D3-driven SVG circle updates with fixed data. The app initializes an array of seven values, rendering each as a grey circle with a blue stroke, positioned via attributes calculated from the data. Two buttons trigger state changes: “Update Data” adds five to every value, while “Filter Data” removes values above 35, causing D3’s join method to add, remove, or update circles accordingly. The code uses the `useRef`, `useState`, and `useEffect` hooks, alongside `d3.select` and `.join()`, with React 16.12 and D3 v5.

Loading thumbnail…

Smiley Face Part 1

This example renders a simple smiley face as an SVG graphic using React for DOM creation and D3’s `arc` generator for the mouth path. A yellow circle forms the head, with two black circles for eyes and a curved mouth drawn via the `mouthArc` configuration. The face is centered using a translation transform, and all shapes are positioned relative to the center point. The code defines fixed dimensions and offsets to ensure the face is proportioned consistently.