Skip to main content
SimilarExport ZIP
100%

ICE 8 by Sujit, Tree Graph

✓ Published0🌍 Public
Ssujitrayudu01@gmail.com
Last edited Apr 22, 2024
Created on Apr 2, 2024
Forked from HTML Starter

A hierarchical tree chart displays agricultural data for the Akola district in 2017, with crop names branching into detail nodes for area, production, and yield. The d3.v3 layout creates the tree structure, rendering SVG circles for the root, rectangles for crop categories, and ellipses for leaf details. Color-coded shapes with a legend distinguish the three levels, while links connect nodes. The static dataset is embedded directly in the page, and the visualization uses `d3.layout.tree` and `d3.svg.diagonal` for the node-link layout and curved paths.

AI-generated description

ICE 8 by Sujit Rayudu, Tree Graph using d3.js.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8 - Tree graph

A hierarchical tree graph displays the administrative divisions of India, from the root "India" down to cities like Hyderabad and districts such as JNTU. Nodes are rendered as colored circles, with each depth level assigned a distinct color, while green, animated paths draw the parent-child links. The visualization uses D3’s `d3.stratify()` to structure the data and `d3.tree()` to compute the layout, with SVG elements and transitions animating the node radii and link drawing. Data is provided as an inline array of parent-child pairs.

Yyamunayennem
80% match
Loading thumbnail…

Veda - ICE8 - Tree Graph

This example shows a hierarchical tree graph of agricultural production data from ICRISAT, grouping crop values for rice, wheat, and sorghum by Indian state and district. The visualization uses D3.js v7 with a tree layout, rendering nodes as circles with text labels and curved links as paths. The SVG canvas is 800 by 600 pixels, and the data is fetched from a remote text file, parsed with d3.csvParse, and aggregated into a nested structure using custom JavaScript processing. The visual style uses red node borders, purple text, and black links.

Vvedasrivarma13@gmail.com
79% match
Loading thumbnail…

ICE8-

This example presents a hierarchical tree visualization of geographic regions in India, from the country down to local districts. The tree is rendered as an interactive SVG diagram with rounded rectangular nodes, using a collapsible layout. The code employs D3.js v3's tree layout, `d3.layout.tree`, to compute node positions, with custom SVG elements for nodes and links, including arrow markers. Color-coded node types and zoom/pan behavior via `d3.behavior.zoom` enhance exploration. The data is loaded from a JSON file defining the nested structure, and the visualization is built within a React component using raw D3.

Pprathyusha-reddy-arch
79% match
Loading thumbnail…

ICE VIII - Tree Map

This tree map visualizes a hierarchical dataset using D3.js, displaying named nodes connected by curved links from a root node, with each node color-coded and labeled. The visualization uses D3 v2’s `d3.layout.tree` and `d3.svg.diagonal` to compute node positions and draw paths, while circles and text are appended to an SVG canvas. Interactive tooltips appear on mouseover via a styled `div`, revealing each node’s “info” property. The static layout renders with a light background and fixed dimensions of 800 by 300 pixels.

Mms.himabinduchalla@gmail.com
78% match
Loading thumbnail…

ICE-8 2A Ankit goud Poodhari

This example shows a hierarchical tree of food categories, with a brown elliptical root node for "Food," orange rectangular nodes for categories (Fruits, Vegetables, Grains), and green circular leaves for individual items. The visualization uses d3.hierarchy and d3.tree to compute the layout, with d3.linkHorizontal for the connecting paths. Nodes and labels are rendered via SVG, with positions and shapes determined by each node's depth. The styling uses distinct fill colors and text anchors to differentiate the three levels of the hierarchy.

Aankitgoudpoodhari07@gmail.com
78% match
Loading thumbnail…

ICE 8 - Tree idiom

This interactive tree diagram displays a hierarchical structure of Indian states and their cities, using a collapsible D3.js layout. The visualization shows parent-child relationships through a classic node-and-link design, with nodes styled as circular markers and connected by curved paths. Users can click any node to expand or collapse its children, revealing the geographical breakdown. The chart is built with D3.js version 3.5, using `d3.layout.tree` for positioning, `d3.svg.diagonal` for link paths, and animated transitions via `transition().duration()` to smoothly reposition nodes. The SVG rendering scheme positions vertical depth levels at fixed 180-pixel intervals, with static data embedded directly in the source code.

KKetha
78% match
Loading thumbnail…

IC8 - Bhavya - Tree Graph

This tree graph visualizes ICRISAT agricultural data grouped by two Indian states, Telangana and Kerala, with each district branching into crop-related metrics such as Chickpea Area or Fruits Area. Built with D3.js v7, it uses the `d3.tree()` layout to arrange a hierarchical structure, rendering nodes as circles and links as green lines in SVG. The data is fetched as CSV from a GitHub gist and parsed with `d3.csvParse`, while node labels and ties are styled via the `d3.select` API and CSS.

Bbhavyapokuri123@gmail.com
77% match
Loading thumbnail…

ICE 8 Task 2B Kumar Danam

This example visualizes a hierarchical dataset of food categories—Food, Fruits, Vegetables, and Grains—as a vertical tree. It shows the nested structure with color-coded nodes by depth: blue for the root, orange for first-level children, and green for leaves, with links as curved paths. Built with D3.js v7, it uses `d3.hierarchy` and `d3.tree` to compute the layout, `d3.linkVertical` for the connecting paths, and SVG circles and text for node rendering. The hardcoded data is displayed in a 600×400 SVG.

KKumar Danam
77% match