Skip to main content
SimilarExport ZIP
100%

IC8 - Bhavya - Tree Graph

✓ Published0🌍 Public
Bbhavyapokuri123@gmail.com
Last edited Apr 2, 2024
Created on Apr 1, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

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…

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
78% match
Loading thumbnail…

IC8 - Bhavya - Social Network Graph

This interactive social network graph visualizes the hierarchical relationships between Indian states and their districts. The visualization uses a force-directed layout with `d3.forceSimulation`, applying `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces to position nodes. States appear as larger steelblue circles with white labels, while districts are smaller lightgreen circles with black text. The graph draws dashed gray reference lines from the center to each district, and data is fetched from a Gist CSV file and parsed using `d3.csvParse`. The layout updates dynamically through the simulation's tick event.

Bbhavyapokuri123@gmail.com
77% 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
77% 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
76% match
Loading thumbnail…

IC8 - Bhavya - social Network graph

This interactive network graph visualizes the connections between districts in Kerala, India. A larger blue node represents the state of Kerala, linking to one district, while smaller red nodes for districts such as Alappuzha and Kannur form a web of connections. The visualization uses `d3.forceSimulation` to apply a force-directed layout, with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` governing the physics. Nodes and links are rendered as SVG circles and lines, with `d3.drag` enabling user interaction to reposition nodes.

Bbhavyapokuri123@gmail.com
75% match
Loading thumbnail…

MY Tree ICE-8

This example shows a collapsible tree diagram of Indian states and districts, with each node representing a location and lines connecting parent-child relationships. The visualization uses D3.js version 3.5.17 with the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the layout and draw curved links. Nodes are rendered as SVG circles with text labels, and clicking toggles the expansion or collapse of branches. The tree animates with staggered transitions, adjusting node positions and link paths over 750 milliseconds. The data structure is a nested JavaScript object containing hierarchical geographic names.

Pprathyusha-reddy-arch
75% match
Loading thumbnail…

Project dataviz

This interactive visualization displays district-level rice cultivation data for various Indian states. Users select a state and district from two dropdown menus, which dynamically filter a dataset from the ICRISAT-District Level Data CSV file hosted on GitHub. The resulting chart plots the cultivated area in hectares over time, using D3's scaleTime and scaleLinear functions for the x and y axes. The SVG visualization updates its line chart each time a new district is selected, with data loaded via d3.csv.

Cchinnivikramnunna@gmail.com
74% match