P

Pragyagarg

@Pragyagarg·33 public 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.

Loading thumbnail…

fresh block

Two donut charts display randomly generated sales data for five product tiers, each slice filled with a radial gradient that darkens toward the edge for a subtle 3D effect. A "Change Data" button triggers animated transitions using `gradPie.transition`, which relies on D3 v3’s `transition.attrTween` and an interpolated arc path (`d3.svg.arc`). The custom `gradientPie.js` library builds gradients via SVG `radialGradient` elements and updates both charts simultaneously in 750 milliseconds, demonstrating reusable pie-chart logic with smooth data updates.

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.

Loading thumbnail…

SANKEY Experiment

This example shows a Sankey diagram with seven nodes and ten links, each link carrying a value of two widgets. The diagram uses the D3 v4 library with Jason Davies' Sankey plugin to compute node positions and render SVG paths for the links, which are colored black with adjustable opacity. Users can drag node rectangles to reposition them, triggering a relayout of the flow. The data comes from a local JSON file specifying the node names and link connections, and node colors are assigned via `d3.scaleOrdinal` with the `d3.schemeCategory20` palette.

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.

Loading thumbnail…

SANKEY Experiment

This example demonstrates a repurposable Sankey diagram, which visualizes the flow of quantities between interconnected nodes. Built with D3 v4, it loads node and link data from an external JSON file and renders the diagram as SVG, using the `d3.sankey` plugin for layout and `d3.drag` for interactive node repositioning. The code also employs `d3.scaleOrdinal` for node coloring and `d3.format` for display values, with links drawn as cubic Bézier curves via `sankey.link()`.

Loading thumbnail…

SANKEY Experiment

This sankey diagram visualizes the flow of widgets between seven nodes, with link thickness proportional to the value of each connection. The diagram uses d3.js v3 with SVG rendering, loading JSON data that defines nodes and links by name. The code leverages the custom `d3.sankey` API to compute node positions and link paths, with interactive node dragging that triggers relayout. Node and link titles display labels and values on hover, while the color scheme uses `d3.scale.category20()` to differentiate node groups.

Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram visualizes the flow of "Widgets" between named sources and targets in a network. It uses d3.js version 3 and the custom `d3.sankey()` layout function, which positions nodes and computes curved link paths. External CSV data supplies the source, target, and value pairs, which are parsed into node and link objects. Users can drag nodes to rearrange the layout, triggering a relayout that updates the link paths, with hover effects increasing link opacity.

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.

Loading thumbnail…

Tree diagram using flat data with v4

This tree diagram visualizes hierarchical parent-child relationships from a flat JSON data source, allowing users to enter an ID and view its descendants as an interactive SVG tree. Built with D3.js v4, it converts flat data into a hierarchy using the `d3.stratify` API, lays out nodes with `d3.tree`, and renders curved links and labeled circular nodes via SVG paths. The visualization updates dynamically when a user submits an ID, filtering the dataset to show only relevant branches.

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.

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.

Loading thumbnail…

Collapsible Tree Example

This collapsible tree example displays a small hierarchical dataset in a static, left-to-right node-and-link diagram. The code converts a flat array of name–child pairs into a tree structure, then uses the d3.layout.tree and d3.svg.diagonal APIs to position nodes and draw curved links. Rendered as an SVG with white circles and gray paths, the visualization uses a fixed-depth layout where each level is offset vertically by 80 pixels. No interactive collapse or expand behavior is implemented despite the title.

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.

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization presents a hierarchical dataset as a set of nested circles, where each circle represents a node and its size reflects the node's value. Clicking a circle zooms in to focus on that branch, while clicking the background returns to the root view, with smooth animated transitions. Built with D3 v4, it uses `d3.pack` for circle-packing layout, `d3.hierarchy` for tree processing, and `d3.transition` with `interpolateZoom` for the zooming effect. The flare.json file supplies the data, which is rendered as SVG elements with hover highlighting and color gradients based on depth.

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.

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.

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.

Loading thumbnail…

fresh block

A chord diagram visualizes the flows between data nodes, with colored ribbons connecting segments around a circular layout. The example loads a JSON file containing hierarchical data with import relationships, then maps those relationships into a matrix of source-target counts. Using D3 v3's `d3.layout.chord`, it renders SVG arcs for each group and curved paths for chords, with colors assigned by a categorical scale. The visualization is built with an inner and outer radius, showing the structure of interconnections across the dataset.

Loading thumbnail…

Force Directed Layout

A force-directed network diagram shows relationships among employees, managers, and contractors, with node colors encoding role and link thickness representing edge weight. The code uses d3.forceSimulation with charge and link forces to position nodes, and d3.forceManyBody to adjust repulsion based on degree centrality. It loads nodelist.csv and edgelist.csv via promises, renders nodes as SVG circles with labels and directed links with arrow markers, and includes a button triggering sizeByDegree to scale node radius by centrality.

Loading thumbnail…

Force Directed Tree

A force-directed tree layout visualizes 500 nodes connected by links, simulating a branching hierarchy where linked nodes cluster while unlinked nodes repel. The nodes are drawn as red-stroked dots on a gray canvas, and users can drag any node to interactively disturb and rebalance the layout. Built with D3 v4, the example uses `d3.forceSimulation` with many-body charging, link constraints, and X/Y centering forces, rendered via Canvas 2D drawing. The data is procedurally generated with `d3.range`, creating a binary-tree-like link structure where each node connects to its square-root index parent. Drag interactions are handled through D3's drag module, updating fixed positions during the simulation.

Loading thumbnail…

Beeswarm plot

A beeswarm plot visualizes the distribution of 300 sampled values by arranging circles along a horizontal axis, with vertical positions reflecting each value. The code uses d3.forceSimulation with forceX, forceY, and forceCollide to position the circles, while d3.scaleOrdinal assigns categorical colors. The simulation updates circle coordinates via a tick handler, rendering the final layout as SVG elements.

Loading thumbnail…

Scatterplot Matrix

This scatterplot matrix, or SPLOM, visualizes the relationships between age, gender, and net worth for a dataset of billionaires from 1996. Each cell displays a scatterplot comparing two of these three traits, with points colored by gender. The code uses D3.js v4 to create an SVG visualization, employing linear scales for numeric axes and band scales for the categorical gender axis. Data is loaded from a local CSV file using `d3.csv`.

Loading thumbnail…

Interactivity - MultiSeries Line Chart

This example shows daily average temperatures for New York, San Francisco, and Austin over a year, with each city as a colored line. The chart uses zooming and panning to explore the time axis, and users can click city labels to show or hide lines or hover to highlight one city. It loads data from a TSV file, parses dates with `d3.timeParse`, and renders SVG with `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.schemeCategory10`. Interactivity relies on `d3.zoom` with custom event handlers for brushing and selection.

Loading thumbnail…

Trellis plot

The trellis plot compares the relationship between age and wealth (in billions) across three billionaire categories: Financial, Non-Traded Sectors, and Traded Sectors. The visualization uses split axes to isolate each category’s data points. The code relies on `d3.scaleLinear` for custom x- and y-axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circles to render the filtered datasets from the billionaires.csv file.

Loading thumbnail…

Circle packing - java.util API

A circle packing diagram visualizes the hierarchical structure of the Java 8 `java.util` package, with each circle sized by a numeric value. The visualization uses the D3 v4 library and renders to SVG, with a sequential magma color scale encoding the depth of each node. Hovering over a circle highlights all its ancestors. Data is loaded from a CSV file and processed using `d3.stratify` to build the hierarchy, which is then laid out with `d3.pack`. Text labels are clipped to leaf circles.

Loading thumbnail…

Dendrogram - Java8 API (subset)

This dendrogram visualizes a subset of the Java 8 API, showing the hierarchical package and class structure from the `java`, `java.math`, and `java.sql` packages. The D3 v4 `d3.cluster` layout arranges the nodes, while `d3.stratify` converts the CSV data into a hierarchy based on the dotted identifiers in the `java8.csv` file. Nodes and connecting links are rendered as SVG elements, with internal nodes highlighted in darker gray and leaf nodes in lighter gray.

Loading thumbnail…

Parallel Coordinates Visualisation

This parallel coordinates visualization displays relationships across multiple numerical attributes of California colleges, using data from a CSV file that includes fields such as average, female, married, mean parent income, and mean kid earning. Each vertical axis represents one dimension, and colored lines connect the values for each college across those axes. The code uses D3 v3 with d3.svg.line, d3.scale.linear, and d3.svg.brush. Users can drag axes to reorder them and brush along any axis to filter the foreground lines, which are highlighted in red against gray background lines. SVG provides the rendering, with smooth transitions during interactions.

Loading thumbnail…

Florida Gun Deaths

This chart shows the annual number of firearm-related murders in Florida from 1989 to 2015, with a prominent annotation marking the 2005 enactment of the "Stand Your Ground" law. The visualization combines an area chart and a line chart, with points marking each year’s total. Built with D3 v4, the code uses `d3.area`, `d3.line`, and `d3.scaleLinear` to render the SVG elements, drawing axis lines, heavy horizontal bars, and a text annotation with a connecting line. The data comes from a CSV file derived from the Florida Department of Law Enforcement’s UCR offense data.

Loading thumbnail…

Florida Gun Deaths

This chart shows the number of firearm-related murders in Florida from 1989 to 2015, with a heavy black annotation marking the 2005 enactment of the “Stand Your Ground” law. The visualization uses a red filled area beneath a thick black line, with a y-axis scaled from 0 to 1,000 and dashed gridlines. The code relies on d3.v4 with `d3.area`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG. Data comes from a CSV file containing annual totals and rates.

Loading thumbnail…

Multi-Series Line Chart (Lab 3)

This multi-series line chart displays daily average temperatures for New York, San Francisco, and Austin over a year, with each city color-coded and labeled. It highlights the minimum and maximum temperature points for each series with annotated text. The visualization loads a TSV file using d3.tsv, parses dates with d3.timeParse, and encodes time on the x-axis with d3.scaleTime and temperature on the y-axis with d3.scaleLinear. Lines are drawn using d3.line, axes created with d3.axisBottom and d3.axisRight, and colors assigned via d3.scaleOrdinal with d3.schemeCategory10. All marks render as SVG.

Loading thumbnail…

D3: ScatterPlot

This interactive scatter plot displays 50 randomly generated data points on a chart with labeled x and y axes. Clicking the visible "Click!" text triggers a one-second animated transition where the points enlarge and turn red before shrinking back to their original size and color, while the axes rescale to fit new random data. The visualization uses D3 v5's `scaleLinear` for coordinate mapping, `axisBottom` and `axisLeft` for axes, and `transition` with `duration` and `on("start")`/`on("end")` callbacks to animate the point changes.

Loading thumbnail…

D3: Adding and removing values from a chart (dynamic labels included)

Twenty randomly generated bars appear in an SVG bar chart, each labeled with its numeric value. Buttons add a new bar to the end or remove the first bar, triggering a 500-millisecond transition via `selection.merge` and `transition.attr` to animate position, height, and label placement. The chart uses `d3.scaleBand` and `d3.scaleLinear` to map data to coordinates, with a blue color scale derived from each value.