Skip to main content
SimilarExport ZIP
100%

colony4

✓ Published0🌍 Public
PPragyagarg
Last edited Dec 14, 2018
Created on Nov 9, 2018

This interactive visualization displays a multi-generation mouse pedigree using a circle-packing layout, where each circle represents an individual mouse and is color-coded by gender. Users can click on any circle to zoom into that branch of the family tree, while hovering reveals the mouse ID and generation. The visualization is built with D3 v4 and uses the `d3.hierarchy`, `d3.pack`, and `d3.zoom` APIs to structure and navigate the hierarchical data. A separate sankey diagram, implemented through the `d3.sankey` module, shows parent-child relationships, and additional SVG charts display statistics on offspring, gender ratios, and age distributions derived from the CSV dataset.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

colony5

This visualization shows a hierarchical circle packing layout of a mouse breeding colony, with circles representing individual mice and generations nested inside parent nodes. The color of each circle encodes the mouse’s gender—blue for males and pink for females—while the size reflects the number of offspring. Users can click on a circle to zoom into that branch of the family tree or use the text input to search for a specific mouse ID. The code uses D3 v4’s `d3.hierarchy` and `d3.pack` to compute the layout, with animated zoom transitions via `d3.interpolateZoom`, and reads hierarchical data from a JSON file.

PPragyagarg
93% match
Loading thumbnail…

colony4 - sankey tree

This visualization combines a zoomable circular packing diagram with an interactive Sankey tree to explore a mouse colony’s breeding hierarchy. The packed circles, colored by gender and generation, are rendered in SVG and support click-to-zoom transitions. Selecting an internal node filters the dataset, updating the adjacent D3 v4 Sankey diagram to show parent–child links between generation groups. Data comes from a CSV of mouse records processed into a hierarchical JSON.

PPragyagarg
91% match
Loading thumbnail…

final

This visualization shows mouse colony breeding hierarchies across multiple generations. A circular bubble chart displays parent-child relationships, with circle size representing offspring count and color distinguishing male (light blue) and female (pink) mice. Users can click circles to zoom between generations or search for specific mouse IDs. A separate Sankey diagram, built with a custom `d3.sankey` layout, maps parent-child connections as flow links. The data comes from CSV files tracking mouse breeding records, converted to JSON hierarchy formats for D3 v4’s `d3.pack`, `d3.hierarchy`, and `d3.json` APIs.

PPragyagarg
88% match
Loading thumbnail…

Bubble Chart - Animal Colony

A bubble chart visualizes mouse pedigree data, grouping individual animals by litter into distinct clusters while using color to differentiate each group. The size of each circle represents the animal's size, and labels show mouse IDs. The visualization uses D3.js version 3’s force-directed layout (`d3.layout.force`), with custom clustering and collision detection logic to separate nodes by group and prevent overlap. Data is loaded from a local CSV file and rendered as SVG circles and text.

PPragyagarg
83% match
Loading thumbnail…

Zoomable Circle Packing - Animal Generation

This interactive visualization shows a hierarchical animal colony across multiple generations using a zoomable circle packing layout. Users click on any circle to zoom into that generation or out to the root level. The D3 v4 code uses `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom` with `transition.attrTween` to animate between views. Circles are colored by depth using `d3.scaleLinear` with HSL interpolation, and hover tooltips display each node’s name. The data comes from a JSON file containing nested generation groups with individual animal sizes and genders. The SVG rendering includes a gray background and hover stroke effects for interactivity.

PPragyagarg
80% match
Loading thumbnail…

Collapsible Tree Example

The collapsible tree example displays a mouse pedigree hierarchy as an interactive SVG visualization. Users enter a mouse ID to view its ancestry, with the tree structure showing parent-child relationships through collapsible nodes. The visualization uses D3 v3’s `d3.layout.tree` for the hierarchy layout and `d3.svg.diagonal` for the connecting links. Node circles are styled with steelblue strokes, and internal nodes have text shadows for legibility. The code loads data from a JSON file (`result2_parent_child.json`) and a CSV file (`colony2_updated.csv`), which provide the parent–child pairs and mate information respectively. Family mates are rendered as ellipses beside the tree, and the view clears and rebuilds on each new search.

PPragyagarg
80% match
Loading thumbnail…

Force Directed Layout - Animal Colony

This example displays a network of mouse breeding colonies through a force-directed layout. It shows how individual animals, represented as nodes, connect through parent–offspring relationships, with node color indicating animal role and node size reflecting degree centrality. The visualization uses D3 v4's forceSimulation API to run a physics-based layout, with multiple forces such as "charge" for repulsion and "link" for attraction between connected nodes. Links are rendered as SVG lines with arrow markers, while the underlying data comes from CSV files specifying the mouse pedigrees. A button allows the user to resize nodes by their calculated degree centrality.

PPragyagarg
79% match
Loading thumbnail…

Circle Packing - Animal Generation Set 1

This interactive circle packing visualization displays a hierarchical animal generation dataset, with each node representing an animal and its size mapped from the data's `size` attribute. The packing layout, generated with `d3.pack`, enables zooming into generations via click interactions. The code uses `d3.hierarchy`, `d3.scaleLinear` for color encoding by gender, and `d3.interpolateHcl` for smooth color transitions. Node labels and a search box are present, though search and text display are not fully implemented in the provided code. Hovering reveals tooltips with animal names. The visualization relies on SVGs and transitions from `d3.transition` for animated zooming.

PPragyagarg
74% match