ICE-8 tagore Tree graph

100%

ICE-8 tagore Tree graph

✓ Published0🌍 Public

Last edited Apr 3, 2024

Created on Apr 3, 2024

A hierarchical tree graph visualizes global sales data, showing the relationship between product categories and countries. The root node represents overall sales, branching into Technology and Office Supplies, with leaf nodes for individual countries and their sales values. Built with D3 v7 and SVG, the visualization uses `d3.hierarchy` and `d3.tree` to compute the layout, while `d3.linkHorizontal` draws curved connecting paths. Nodes are styled with different shapes—ellipses for the root and category levels, circles for countries—and color-coded by depth, with text labels positioned based on whether nodes have children.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 Tree graph

This example demonstrates a product category hierarchy using an ICE-8 tree graph. It shows the relationship between product categories like Furniture and Technology, with subcategories and individual products as leaf nodes. The visualization uses D3.js v7 to render an SVG with distinct shapes (rectangles, ellipses, and circles) for different tree depths, color-coded by level. Data is hardcoded in JavaScript, and the layout uses d3.tree() and d3.linkHorizontal() for positioning nodes and drawing curved links.

Ssai snehith nadipally

84% match

Loading thumbnail…

ICE-8 Network graph Tagore

This network graph visualizes the top 20 product categories and countries from a Global Superstore dataset, showing connections between them. The visualization uses a force-directed layout to position nodes, with custom colors distinguishing categories from countries. Built with D3.js, it employs `d3.forceSimulation` with link, charge, and center forces to arrange the nodes, while SVG circles, lines, and text labels render the network. Interactive dragging is enabled through D3’s drag module, allowing users to manually reposition nodes within the simulation.

Cchilukuritagore1427@gmail.com

83% match

Loading thumbnail…

11702358-ice 8

This vertical tree visualization displays hierarchical sales data for the USA and UK, with four salespersons per country and their associated chocolate products and sales values. The code uses D3.js v7 to render an SVG-based tree layout with square nodes, steel-blue links, and bold text labels. A tomato-red dashed border frames the entire visualization. The hierarchical data structure is loaded from a JavaScript object containing sales figures for each product category.

JJahnavi Kopalli

81% match

Loading thumbnail…

ICE-8 Tree graph

This example displays a hierarchical tree graph of cities organized by their parent countries, with each country as a root and cities as leaf nodes. It shows the structure of the data using circular nodes connected by curved, bezier path links. The code uses d3.stratify to convert the flat array of city-country pairs into a hierarchy, then d3.tree to compute the layout and position nodes. Node circles and text labels are rendered as SVG elements, with links drawn using custom path commands that create smooth curves between parent and child nodes.

Cchalasanigayaetiri@gmail.com

81% match

Loading thumbnail…

ICE 8 - Tree Graph

This company hierarchy tree visualization displays an organizational structure from a CEO down through engineering and marketing departments, teams, and individual employees. The D3.js v7 code uses `d3.hierarchy` and `d3.tree` to compute node positions, while the SVG rendering uses different shapes—circles, rectangles, and polygons—to visually distinguish departments, teams, and people. Each node is styled with custom colors and strokes defined in CSS, and parent-child links are drawn with a light blue fill and yellow stroke. The hierarchical data is defined directly in the JavaScript source.

Kkotlavamsireddy@gmail.com

81% match

Loading thumbnail…

ICE 8 - Tree & Network

A hierarchical organizational tree renders company structure with departments, teams, and employees. The visualization uses d3.hierarchy and d3.tree to compute node positions, then draws horizontal links with d3.linkHorizontal. Node shapes vary by type: circles for departments, orange rectangles for teams, and rotated polygons for employees. Styled with custom CSS, the SVG output displays text labels adjacent to each node. Sample data is embedded in the script, showing the Marketing and Sales departments with their respective team members.

Kkotlavamsireddy@gmail.com

80% match

Loading thumbnail…

Fork of 11702358-ice 8 -Network

This vertical tree visualization displays hierarchical sales data for the US and UK, with nodes representing countries, salespersons, and chocolate products with their associated values. It uses d3.v7 to render the tree structure as SVG elements, including rectangles, circles, and polygons for different node types. The layout organizes the data from a single root node downward, with lavender-colored links connecting parent and child nodes. A dashed orange tree-box outlines the entire visualization, while bold sans-serif text labels identify each entity within the dataset.

JJahnavi Kopalli

80% match

Loading thumbnail…

Fork of ICE-8 Tree graph

This example visualizes a product hierarchy as a tree graph with three node types—rectangles for the root category, ellipses for subcategories, and circles for individual products—using a custom D3 v7 selection with varying fill colors by depth. The code applies the `d3.hierarchy` and `d3.tree` layouts, positions nodes horizontally by depth, and renders connections with `d3.linkHorizontal`. It derives its structure from inline JavaScript objects representing furniture and technology categories, and renders everything as SVG with labeled text for each node.

SSharada

80% match