colony4

100%

colony4 - sankey tree

✓ Published0🌍 Public

Last edited Nov 30, 2018

Created on Nov 30, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Pragyagarg/'>Pragyagarg</a>'s block: <a href='http://bl.ocks.org/Pragyagarg/c78d9fe478c936bd0fa647caaab975a5'>colony4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

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.

PPragyagarg

91% match

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

89% 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

86% 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

79% 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

78% 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

77% 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

75% 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

73% match