Mark D. Clements

@markclements·6 public vizzes

Meiosis

This example visualizes meiosis by modeling chromosome sets with genes and their alleles, demonstrating crossover at specified loci. The code constructs a pea plant organism with chromosomes containing genes like podColor and seedColor, then duplicates and swaps alleles past a crossover point. It renders the resulting chromatids as red rectangles using D3 v6’s data join (`selectAll().data().join()`) and SVG text for allele labels positioned by locus. The drawing functions `draw_chrom` and helper `dupChrom` handle the layout and mutation logic.

Nov 26, 2023

Loading thumbnail…

DEMO

This example demonstrates an interactive chromosome visualization where blue and green rectangular bars represent chromatid pairs. Clicking on any rectangle splits it into orange and red segments at the click position, while a duplicate button clones the existing chromosomes and offsets them horizontally. The implementation uses D3 v7 with the `join` method to bind data to SVG `rect` elements, handling user interactions through D3 event listeners and updating the visualization with each state change.

Sep 27, 2023

Loading thumbnail…

Simple Unidirectional Data Flow

This example demonstrates a simple unidirectional data flow pattern, using a counter that increments on button click. The current count is displayed in the DOM, and each click dispatches an INCREMENT action to a reducer function, which returns a new state object. The updated state is then passed to a render function that updates the text content of the counter element. The code uses vanilla JavaScript, with plain DOM methods like `getElementById` and `addEventListener` to handle interaction and rendering.

Sep 22, 2023

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-window SVG canvas. Clicking anywhere randomly changes the circle's fill color. The visualization uses D3 v7 selection and join operations to declaratively manage the SVG and circle elements, with state tracking cursor position and color. Documentation is provided via an embedded YouTube video.

Sep 21, 2023

Loading thumbnail…

basic scatter

This example visualizes the classic Iris dataset as a basic scatter plot, mapping sepal length to the x-axis and sepal width to the y-axis. It loads data from a CSV file hosted on GitHub using `d3.csv`, then uses `d3.scaleLinear` to translate data coordinates into pixel positions. The circles are rendered as SVG elements, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The visualization fills the browser window, adapting its dimensions to `window.innerWidth` and `window.innerHeight`, and applies custom tick font sizing through CSS.

Aug 31, 2023

Loading thumbnail…

JavaScript Arrays

A row of circles animates continuously, with each circle bobbing vertically and pulsing in radius as the total count fluctuates between five and fifteen. The example demonstrates dynamic data joins in D3.js 7, using `d3.select`, `d3.range`, and `selection.join` to bind and update SVG circle elements at 60 frames per second. A sine-wave based `setInterval` loop drives the positions, radii, and count, rendering directly to an SVG canvas sized to the browser window.

Aug 30, 2023