Skip to main content
SimilarExport ZIP
100%

final

✓ Published0🌍 Public
PPragyagarg
Last edited Dec 4, 2018
Created on Oct 23, 2018

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.

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
88% match
Loading thumbnail…

colony4

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
88% 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
86% 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
82% 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…

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
74% match
Loading thumbnail…

fresh block

A force-directed network diagram displays the familial relationships between individual mice from a colony, using data from `colony.csv`. Nodes represent each animal, while links connect offspring to their fathers via the father ID. The visualization is interactive, allowing users to click a "Degree Size" button that scales node radius and repulsion strength based on each node's degree centrality. The code leverages the `d3.forceSimulation` API with custom charge and center forces, rendering the network as animated SVG elements. Styling is applied via CSS classes, with distinct colors for active, source, and target nodes to highlight the interaction.

PPragyagarg
72% match