m-chhetri

@m-chhetri·3 public vizzes

Fork of Fork of D3.js collapsibleRRR tree with boxes vertical

This visualization shows a hierarchical tree diagram with collapsible nodes, rendered as boxes connected by links. Each node displays a label and is colored based on the `gender` attribute from the JSON data—blue for male, green for female. The tree uses D3.js v3 layout functions to position nodes, with SVG rectangles for nodes and paths for links. Clicking a node triggers an animated collapse or expansion of its children, updating the layout dynamically. The example is implemented as a React component and loads data from an external JSON file using `d3.json`.

Jan 13, 2023

Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple cartoon face inside an SVG canvas using D3.js and React-compatible JavaScript. It draws a yellow circular head with black strokes and adds a teal rectangle as a decorative element, positioning shapes via `select`, `attr`, and `append` calls from `d3`. The page renders in a fixed 960×500 SVG container, with styling handled through external CSS that removes margins and hides overflow. The code demonstrates fundamental SVG shape creation and attribute manipulation using D3’s declarative approach.

Jan 12, 2023

Loading thumbnail…

Fork of Fork of D3.js collapsibleRRR tree with boxes vertical

This interactive tree diagram visualizes hierarchical data as colored, collapsible boxes connected by labeled links. Built with D3.js v3, it reads a JSON tree structure and renders nodes as rectangles styled by type, with tooltips and smooth expand/collapse animations. The layout dynamically adjusts its dimensions based on the tree’s depth and breadth, and includes features like zooming and dragging, with SVG elements grouped to keep tooltips on top.

Jan 12, 2023