Assignment8_Manisha_TreeVisualization

100%

Assignment8_Manisha_TreeVisualization

✓ Published1🌍 Public

Last edited Nov 10, 2025

Created on Nov 10, 2025

This visualization displays a hierarchical tree structure loaded from a CSV file containing id, parent, and label columns. The code uses `d3.stratify` to convert the flat tabular data into a hierarchy, then applies the `d3.tree` layout to position nodes and links horizontally. It renders SVG circles for nodes with color coding by depth and uses `d3.linkHorizontal` for curved connector paths. The tree draws from a raw GitHub source URL with d3.v7 and displays labels next to each node.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment_8_sowjanya_tree

This hierarchical tree visualization displays a food-category dataset from a CSV file, organized by root, category, sub-category, and item layers. It uses `d3.stratify()` to build the hierarchy from flat "id,parent" data, then `d3.tree()` to compute the tidy layout. Nodes use distinct shapes and pastel colors per depth, with `d3.symbol()` generating circles, squares, diamonds, and triangles. The code renders links as horizontal paths, provides an interactive tooltip, and includes a legend. The visualization is rendered as an SVG canvas using D3 v7.

Ssaisowjanyaedupuganti.24f@gmail.com

82% match

Loading thumbnail…

Assignment 8 Tree

This visualization shows a hierarchical tree of programming languages organized by execution type, with categories for compiled, interpreted, and hybrid languages. The tree layout positions nodes horizontally, routing curved links between parent and child nodes using `d3.linkHorizontal`. D3 v7’s `d3.hierarchy` and `d3.tree()` compute the node positions, while the SVG rendering uses colored circles—red for the root, blue for category branches, and green for leaf nodes—based on node depth. Text labels alternate sides depending on whether a node has children, and a rounded rectangle outlines the root for emphasis.

445.saiful@gmail.com

80% match

Loading thumbnail…

Tree

This tree visualization displays a five-generation family hierarchy, with each generation distinguished by both color and node shape, ranging from circles for the root and parents to squares, diamonds, and triangles for subsequent descendants. The D3.js code uses the `d3.stratify()` and `d3.tree()` APIs to convert flat data into a hierarchical structure and compute the layout, drawing links as lines and rendering nodes as SVG shapes within a white-bordered chart. A legend above the chart clarifies the mapping of generation to shape and color.

PP Manisha

79% match

Loading thumbnail…

Assignment - 8 - 2.2

This family tree visualization displays a four-generation hierarchy using distinct colors and shapes for each layer: squares for the root, circles for grandparents, triangles for parents, and diamonds for children. Built with D3 v7, the example uses the `d3.hierarchy` and `d3.tree` APIs to compute the layout, `d3.linkVertical` for the connecting links, and `d3.symbol` with specific shape types and color functions per depth. Node positions are translated via SVG groups, with labels placed beneath each shape. The static data is embedded directly in the JavaScript code.

AAriful Hasan

79% match

Loading thumbnail…

Assignment - 8 - 2.1

This family tree visualization displays three generations of a family using a hierarchical tree layout. The D3.js visualization uses the `d3.hierarchy` and `d3.tree` APIs to position nodes and `d3.linkVertical` to draw connecting links as SVG paths. Each node is a colored circle, with distinct colors differentiating grandparents, parents, and children, including a node for "Me" and cousins. The SVG is fixed at 900x500 pixels, and the data is hard-coded as a JavaScript object within the script.

AAriful Hasan

78% match

Loading thumbnail…

simple tree

This visualization shows a small tree diagram with circular nodes connected by vertical paths, displaying hierarchical relationships from a CSV file. The node positions and link paths are computed using d3.stratify and d3.tree APIs, then rendered as SVG paths and circles. Data is loaded from data.csv, which contains id and parent columns, and the layout is controlled by a custom separation function that sets uniform spacing between siblings. The tree is drawn on a 960 by 500 pixel canvas using D3 v4.

RRainboylvx

78% match

Loading thumbnail…

Tree Visualization with D3.js

This visualization presents a hierarchical tree of fruit categories, using circles to represent nodes and curved horizontal links to show parent-child relationships. It loads D3 v7 via UNPKG and builds the layout with `d3.tree()` on a `d3.hierarchy` data structure. The SVG renders colored node circles based on fruit-specific color data, while labels position differently for internal nodes versus leaves. The code uses `d3.linkHorizontal()` to generate paths and dynamically adjusts the SVG height from the computed tree extent.

VVinay Vemuri

78% match

Loading thumbnail…

Tree

This interactive D3.js visualization presents a hierarchical tree of AI and data careers, loaded from a CSV file via `d3.csv` and structured with `d3.stratify`. It uses the `d3.tree` layout to position nodes, with horizontal links drawn using `d3.linkHorizontal` and circle markers colored by depth, while leaf nodes are highlighted with purple rectangles. The SVG rendering includes labels aligned based on whether nodes have children, and a chart title is added to the 1100×700 canvas.

AAparna Desi Reddy

77% match