csroysudarshan

@csroysudarshan·13 public vizzes

Hello VizHub

A circle is subdivided into concentric rings by nested paths, with horizontal, vertical, and diagonal lines crossing through its center. The SVG is authored directly in the HTML using static `path` elements, with no JavaScript logic or data binding. While the page includes D3 v5 and an ES6 module that sets a message, the visualization itself does not use these APIs. The style sheet only sizes a container div.

Jun 24, 2020

Loading thumbnail…

Interactive Sunburst Chart

This interactive sunburst chart visualizes the outcomes of a set of "faced questions," branching from a central node through categories like "Visit" and "Not Visit," and further into "Attempted," "Correct," and "Incorrect" subcategories. Clicking any node collapses or expands its child branches, with animated transitions updating the tree layout. The visualization uses D3 v5's `tree` layout, `hierarchy` data structuring, and `linkHorizontal` path generator, rendering to SVG with custom zoom functionality via `d3.zoom`.

Apr 13, 2020

Loading thumbnail…

Interactive Tree Updated

This interactive tree diagram visualizes a hierarchical decision-making process, where each node represents a stage from "Faced Questions" down to outcomes like "Correct" or "Incorrect." Clicking a node expands or collapses its children, using the D3.js `tree` layout and `linkHorizontal` generator for the animated SVG paths. The code relies on D3 v5's `hierarchy`, `zoom`, and `event` APIs, with transitions animating node positions and opacity changes for entering and exiting elements.

Apr 12, 2020

Loading thumbnail…

Interactive Tree

This interactive tree visualizes question-answering outcomes, starting from a "Faced Questions" root that branches into Visit/Not Visit, Attempted/Not Attempted, and Correct/Incorrect paths, each colored by status. Clicking a node collapses or expands its subtree, while dragging attempts deletion. Built with D3 v5, it uses `d3.tree` for layout, `d3.hierarchy` for data binding, `d3.linkHorizontal` for edges, and SVG elements with zoom support via `d3.zoom`. Transitions animate node positions and opacity changes over 100ms durations.

Apr 12, 2020

Loading thumbnail…

Hover to Select, Click apple to convert to lemon and click lemon to delete

An interactive D3 v5 visualization presents a bowl of five apples rendered as SVG circles. Hovering over a fruit selects it with a black stroke. Clicking an apple animates its color and radius to transform into a lemon, while clicking a lemon removes it from the bowl with a shrinking transition. The code uses `scaleOrdinal` for color and radius mappings, and `transition().duration(1000)` for smooth animations, driven by data join with enter/update/exit selections.

Apr 12, 2020

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases With Animation

A bowl of fruit demonstrates D3’s General Update Pattern with animated enter, update, and exit stages. Multiple apples and lemons are drawn as SVG circles with text labels, using d3.scaleOrdinal for color and radius. The example uses selection.merge and transition.duration to animate position and radius changes when fruits are added, removed, or replaced over timed intervals.

Apr 11, 2020

Loading thumbnail…

General Update Pattern With Merge Function + Refactoring

This example demonstrates the D3 general update pattern with a merge function, showing how enter, update, and exit selections handle data changes. It renders colored circles representing fruits in an SVG, where apples are red and lemons are yellow, with radii scaled by type. The code uses d3.select, scaleOrdinal, and selection.merge to combine enter and update selections, logging each phase to the console. After rendering, a timeout replaces an apple with a lemon and another removes the last fruit, triggering re-renders that update the visualization accordingly.

Apr 11, 2020

Loading thumbnail…

General Update Pattern With Merge Function + Refactoring

This example demonstrates the General Update Pattern with a merge function in D3.js, showing how data changes animate fruit bowls as apples are eaten, replaced with lemons, or removed. A React-like refactoring separates the visualization into a reusable fruitBowl module. Using d3.scaleOrdinal for color and radius mapping, circles transition smoothly via d3.transition, with entering elements scaling from radius 0, updating elements repositioning, and exiting elements shrinking before removal. The SVG rendering and animation showcase D3’s data join, merge, and exit selection techniques in a bare-minimum HTML setup.

Apr 11, 2020

Loading thumbnail…

General Update Pattern Without Merge Function - Like React Render Function

This example demonstrates a general update pattern for SVG elements in D3, mirroring the behavior of a React render function. It initially renders five circles, each representing an "Apple" with a red color and radius of 50, positioned along the x-axis. After a delay, the third fruit changes its type to "Lemon", altering its fill to yellow and radius to 30. Then, a final fruit is removed, triggering the exit selection. The code uses `d3.selectAll`, `data`, `enter`, `exit`, and `remove` to manage the lifecycle of elements based on the data array.

Apr 11, 2020

Loading thumbnail…

Concept of Enter and Exit Selection

This example demonstrates the D3.js concept of enter and exit selections within an SVG rendering context. It uses D3’s `selectAll().data().enter()` to append circles representing apples, each assigned a random ID and positioned horizontally across the canvas. The code then removes the last fruit via `fruits.pop()` and applies `selectAll().data().exit().remove()` to delete the corresponding circle, showing how the exit selection handles data removal. All rendering is performed through D3’s selection API on a 960x500 SVG element.

Apr 11, 2020

Loading thumbnail…

Smiling Face

This example presents a cheerful animated face built with React and SVG, rendered in a web browser. The face features a yellow circle, eyes, eyebrows, and a mouth, with the eyebrows moving up and down in a looping animation. The code uses the D3.js library, specifically `d3.select`, `d3.arc`, and the `.transition().duration()` API to create the motion. The shape is composed of SVG elements, including circles, rectangles, and a path for the mouth, which are constructed programmatically based on computed values. The animation runs continuously, shifting the eyebrow group vertically between two positions.

Apr 10, 2020

Loading thumbnail…

HTML Starter

This example shows a stylized face built with SVG shapes, including a yellow circle for the face, black rectangles for eyebrows, and a mouth drawn using an arc path. The code uses D3.js v5 selection methods and the `arc` generator to create the smile. A series of chained `transition().duration()` calls animate the eyebrow group vertically, making the eyebrows bounce up and down repeatedly. The visualization demonstrates how to combine static geometric elements with simple D3 transitions for a playful effect.

Apr 10, 2020

Loading thumbnail…

HTML Starter

This example draws a smiley face using D3 selections and SVG shapes. A yellow circle serves as the face, with black circles for eyes, rectangles for eyebrows, and a D3 arc path for the mouth. The eyebrows animate vertically through a chain of `transition().duration()` calls, moving up and down repeatedly. The code constructs the SVG elements by appending groups and shapes to the root `svg` element, using D3's `select` and `arc` functions.

Apr 10, 2020