VEENA

100%

✓ Published3🌍 Public

Last edited Apr 8, 2025

Created on Apr 7, 2025

This example visualizes a hierarchical sales dataset for “Awesome Chocolates,” showing global sales broken down by region, geography, and layers such as salespersons and products. It presents the tree structure using SVG nodes and links, with additional metadata like product categories and sales figures displayed via a tooltip. The visualization is built with D3 v7, using the hierarchical tree layout and custom styling for nodes, links, and interactive hover effects.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

veena

A network graph displays nodes arranged in a circular layout, with links connecting salespersons, products, and regions. The D3.js v7 code positions nodes using trigonometric calculations based on the viewport dimensions, drawing SVG lines for edges. Node labels are placed directly on the chart without force-directed simulation, relying instead on a static circular arrangement. The visualization encodes two node types—salespersons and regions—through color differentiation, while products and connections form the remaining graph structure.

Vveenachowdarykavuri@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

78% match

Loading thumbnail…

Fork of 11

This visualization shows chocolate product sales across the USA and UK using a vertical hierarchical tree layout, with nodes representing sales representatives, products, and their associated sales values. Node size encodes sales figures, while color distinguishes product categories (Bars, Bites, Other). Built with D3.js v7, it uses the `d3.tree` layout, square link paths, and SVG rectangles for nodes. Interactive tooltips appear on hover, displaying product details or aggregated sales totals for organizational nodes, with smooth transitions applied to highlighting and tooltip visibility.

NNita

76% 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

76% match

Loading thumbnail…

Radial Tree

This interactive network graph visualizes connections between salespeople, regions, and chocolate products, using color-coded nodes (blue, green, and orange) to distinguish entity types. Built with D3.js version 7, it employs `d3.forceSimulation` for force-directed layout, `d3.zoom` for pan and zoom, and drag behavior for node repositioning. The interface includes search filtering, a details panel showing node information, and tooltips on hover. Links are weighted by relationship strength, with visual highlighting that emphasizes connections when a node is selected.

NNita

73% match

Loading thumbnail…

Tree Visualization

This example visualizes a hierarchical dataset of car types, including sedans, SUVs, and trucks, using an interactive SVG tree layout created with d3.tree. The root node is rendered as a red circle, first-level children as green rectangles, and leaf nodes as blue triangles, with curved links connecting parent and child nodes via cubic bezier paths. D3 v5 hierarchy is used to structure the data, while SVG shapes and text labels display each car model name. The visualization demonstrates a simple, color-coded dendrogram for categorical product categories.

RRamya19-hub

72% match

Loading thumbnail…

Tree Visualization

This tree visualization displays hierarchical data as a node-link diagram with circular nodes and connecting links, rendered as an SVG on a 600x600 canvas. The code uses D3 v5, loaded via UNPKG, to select the SVG container and draw the structure, while CSS styles the node circles with a steelblue stroke and the links in light gray. The visualization demonstrates importing D3 functions and local ES6 modules through VizHub, though the specific dataset is not visible in the provided files.

VVenkat-Sumith-Thota

72% match

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

72% match