Bubble Chart - Animal Colony

100%

Bubble Chart - Animal Colony

✓ Published0🌍 Public

Last edited Jul 26, 2018

Created on Jul 26, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

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

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

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

75% match

Loading thumbnail…

bubble one more time

A force-directed bubble chart displays individual BMI measurements grouped by race and sex, with circle radius proportional to BMI value and color encoding racial categories. Using D3 v3 and SVG rendering, the visualization loads data from a CSV file and applies a cluster force layout with collision detection to arrange bubbles into distinct groups. The code implements custom `cluster` and `collide` functions alongside the `d3.layout.force` simulation, while a tooltip on mouseover reveals each bubble's race, BMI, and sex. Circles are colored via an ordinal scale and positioned through the force layout's tick handler.

GGerardoFurtado

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

72% match