Skip to main content
Log in
S

Shannon Teoh

@ShannonTeoh·15 public vizzes

Loading thumbnail…

Animated Reusable Scatter Plot with menu

This example presents an interactive scatter plot of the Iris dataset, where users can dynamically select which measurements appear on the X and Y axes via dropdown menus. The visualization renders SVG circles with different symbol shapes representing species, and smoothly animates transitions between axis configurations using D3 transitions. The reusable charts, `scatterPlot` and `menu`, are built with D3 v6 and React, leveraging scales like `scaleLinear` and `scaleOrdinal` along with axis generators. Data is loaded asynchronously from a CSV file, and the plot updates in place when menu selections change.

May 26, 2024
Loading thumbnail…

Animated Reusable Scatter Plot with menu

This example demonstrates an animated scatter plot of the Iris dataset, using D3 v6 with React. The plot cycles through different x-axis variables (petal length, petal width, sepal length, sepal width) every two seconds, with circles transitioning smoothly via `selection.join` and `transition`. Species are encoded by distinct symbols from `d3.symbols` and `scaleOrdinal`. The reusable chart function exposes setters like `.xValue()` and `.yValue()` to update the visualization, while axes are redrawn using `axisLeft` and `axisBottom`.

May 26, 2024
Loading thumbnail…

Animated Reusable Scatter Plot

This example demonstrates an animated scatter plot built with React and D3, visualizing the classic Iris dataset. The plot cycles through four different variables (petal and sepal length and width) every two seconds, animating the positions of data points along both axes using `transition().delay()` for a cascading effect. It leverages D3's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs, rendering as an SVG with smooth transitions. The reusable component pattern allows dynamic updates to the x-value mapping, showcasing a flexible approach to interactive data exploration.

May 26, 2024
Loading thumbnail…

SYmbols Reusable Scatter Plot

This animated scatter plot, built with React and D3.js, visualizes the Iris dataset, showcasing how different species cluster based on combinations of sepal and petal measurements. It creates a reusable chart component whose axis mappings can be dynamically reassigned. Using D3's `scaleLinear`, `scaleOrdinal`, and `symbol` APIs, it renders SVG paths with distinct shapes for each species, while a `setInterval` loop cycles through the four measurement columns for the axes every two seconds. This example demonstrates the flexibility of D3's functional, concatenation-based API for building interactive, data-driven visualizations.

May 26, 2024
Loading thumbnail…

SYmbols Reusable Scatter Plot

This example demonstrates a reusable scatter plot built with D3.js and React, visualizing the classic Iris dataset of flower measurements. It shows the relationship between petal length and sepal length as circles, with axes labeled using D3's `axisBottom` and `axisLeft` from version 6.6.2. The code defines a configurable `scatterPlot` component that accepts data, value accessors, dimensions, and margins via a fluent interface, enabling flexible reuse across datasets. Data is loaded from a raw GitHub-hosted CSV file and rendered as an SVG, with circles positioned using `scaleLinear` and `extent` for automatic axis scaling.

May 25, 2024
Loading thumbnail…

Reusable Scatter Plot

This example demonstrates a reusable scatter plot showing the relationship between petal length and sepal length in the Iris dataset. The plot uses d3.scaleLinear for axes and positioning, d3.axisLeft and d3.axisBottom for axis rendering, and SVG circles for marks. The code exposes a configurable scatterPlot() function with setters for width, height, data, values, margin, and radius, enabling flexible reuse. Data is loaded via d3.csv from a gist, with numeric parsing applied to each row.

May 25, 2024
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between petal length and sepal length in the classic Iris dataset. The visualization uses D3 v7 to load CSV data, then applies `d3.scaleLinear` with `d3.extent` to map the data to screen coordinates, and renders circles as SVG elements with `d3.axisLeft` and `d3.axisBottom` for the axes. The plot fills the browser window, with a margin layout for the axes.

May 18, 2024
Loading thumbnail…

d3 selection

This example demonstrates a dynamic visualization of circles that move vertically in a sine-wave pattern, with the number of circles oscillating over time. Constructed with React and D3.js, the SVG rendering updates at 60 frames per second using an interval timer. The code leverages D3’s `select` to append an SVG canvas and `range` to generate data, while `selectAll` and `.join` bind circle elements to the evolving dataset. The animation adjusts each circle’s x and y coordinates based on a time variable, creating a fluid, rhythmic motion.

May 12, 2024
Loading thumbnail…

javascript array

This example demonstrates basic JavaScript array manipulation and data aggregation techniques using D3 v6. The code defines a `range` function that creates an array of zeros, logging the result for an array of length 4 to the console. It then uses the `reduce` method to transform an `entries` array into a key-value object, illustrating how to convert array data into a structured dictionary format. The visualization is minimal, focusing on console output rather than graphical rendering, with the page styled using CSS. The example serves as a foundational demonstration of array operations within a React framework setup.

May 12, 2024
Loading thumbnail…

full symbol D3 Sol Le Witt Vertical

This example generates a Sol LeWitt-inspired grid of vertical and horizontal stripes, with each stripe masked by an abstract symbol. Two separate groups of `<rect>` elements are drawn across the full width and height, and each group is assigned a different SVG mask. The masks are created using D3’s `symbol` and `symbols` APIs to render shapes like circles and crosses, with one mask inverted to produce contrasting cutout effects. The visualization relies on D3 selections and data joins to render the grid dynamically at full viewport size.

May 4, 2024
Loading thumbnail…

D3 Sol Le Witt Vertical

This example generates a grid of horizontal and vertical rectangles that form a striped pattern. Two circular masks reveal the grid only within their boundaries, creating a bold, minimalist composition reminiscent of Sol LeWitt's wall drawings. The code uses D3's `select` and `range` APIs to generate 100 rectangles in each direction, with SVG `mask` elements controlling visibility. Each stripe is a distinct SVG `rect` element, and the masks are composed of black and white rects and circles.

Apr 28, 2024
Loading thumbnail…

Sol Le Witt Vertical

This example generates an abstract, Sol LeWitt-inspired visual composition using only SVG and JavaScript. It creates two circular masks via the SVG `mask` element, and draws a grid of horizontal and vertical rectangles that are selectively revealed through each mask. The first mask shows a series of horizontal lines inside a black circle, while the second shows vertical lines outside a white circle, creating a layered, geometric contrast. The code dynamically creates SVG elements using `document.createElementNS` and appends them to the document, with dimensions tied to the full window size.

Apr 28, 2024
Loading thumbnail…

Fork of HTML Starter

This example shows a full-screen SVG canvas generated entirely with vanilla JavaScript, without any external libraries. It creates 100 vertical rectangles, each 10 pixels wide, positioned at 20-pixel intervals across the viewport width. The code uses the Document Object Model (DOM) API methods `createElementNS`, `setAttribute`, and `appendChild` to build the SVG elements dynamically. The rectangles stretch to the full height of the window, producing a simple striped pattern that reacts to the browser’s current dimensions at load time.

Apr 28, 2024
Loading thumbnail…

Fork of React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” centered on the page. It uses React 18’s `createRoot` API from `react-dom` to mount a functional component into a `#root` div defined in the included `index.html` file. The component applies a CSS class with a large font-size and text alignment for display. The setup relies on production builds of React and ReactDOM loaded via CDN, with the application logic bundled into `bundle.js`.

Apr 28, 2024
Loading thumbnail…

Fork of HTML Starter

This example displays a blank SVG canvas with the text "HTML Starter" styled at a large font size. The page uses vanilla HTML and CSS, with a small JavaScript snippet that creates a new SVG element and appends it to the document body, though this results in showing only the styled message. The SVG’s defined width and height of 960 by 500 pixels are visible in the markup, but no data or additional visualizations are rendered. It serves as a minimal starter template for web-based graphics.

Apr 27, 2024