Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

DEMO

Public visualization

Viewing a saved revision (read-only)

4836fdd3464d472e8b319789229794f1

DEMO

0 stars0🌍 Public
MMark D. Clements
Last edited Sep 27, 2023
Created on Aug 31, 2023
Forked from HTML Starter

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.

AI-generated description