Skip to main content
SimilarExport ZIP
100%

Veda - ICE8 - Tree Graph

✓ Published0🌍 Public
Vvedasrivarma13@gmail.com
Last edited Apr 1, 2024
Created on Apr 1, 2024
Forked from Tree Example

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Tree Graph

This interactive tree graph visualizes crop production data from ICRISAT, showing a hierarchy of states, districts, and four crops (Rice, Wheat, Kharif Sorghum, and Rabi Sorghum) with their production values in 1000 tons. The visualization uses D3.js v7 to render an SVG-based tree layout, with paths representing links and circles for nodes. Data is loaded from a remote text file and processed using `d3.csvParse` and `d3.hierarchy`, while custom logic aggregates production values for duplicate districts. The graph includes manually defined additional links to expand the tree structure beyond the initial data.

Ppmbhupathibalu@gmail.com
80% match
Loading thumbnail…

ice 8

This visualization presents a spacious tree diagram comparing production and consumption values for wheat, rice, barley, and cotton across the USA, Mexico, and India. The hierarchical structure uses a d3.tree layout with custom separation logic to increase spacing between leaf nodes. Nodes are rendered as rounded rectangles with SVG text labels, while straight brown links connect parent-child relationships. The code builds the tree from flat data using a Map, then applies d3.hierarchy and d3.tree to position elements within an SVG viewBox of 1800 by 600 pixels.

Vvemuri.vaishnavi27@gmail.com
80% match
Loading thumbnail…

ICE 8 by Sujit, Tree Graph

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.

Ssujitrayudu01@gmail.com
79% 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
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
74% match
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
73% 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
73% match
Loading thumbnail…

ICE8 - Task 2A

This visualization shows a three-level hierarchical tree of food categories, displaying a root node ("Food"), three category nodes (Fruits, Vegetables, Grains), and nine leaf items. The SVG rendering uses d3.hierarchy and d3.tree() to compute the layout, with d3.linkVertical() drawing the curved connections. Nodes are distinguished by shape and color: a yellow circle for the root, light-blue rounded rectangles for categories, and green diamonds for leaf items, each accompanied by text labels. The page includes a static, inline JavaScript dataset with no external data source.

Kkmuktha09@gmail.com
73% match