Skip to main content
SimilarExport ZIP
100%

Fork of 11

✓ Published0🌍 Public
NNita
Last edited Apr 6, 2025
Created on Apr 6, 2025
Forked from 11702358-ice 8

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.

AI-generated description

Chocolate Sales Data Visualization

This project visualizes chocolate product sales data in the USA and UK using a hierarchical tree structure. The visualization shows sales representatives, their products, and sales values.

Features

  • Vertical tree layout showing the hierarchical relationship between regions, sales representatives, and products
  • Node size represents the sales value for each product
  • Color-coded nodes by product category (Bars, Bites, Other)
  • Interactive tooltips showing detailed information on hover
  • Clean, responsive design

Technologies Used

  • D3.js v7 for data visualization
  • Plain JavaScript, HTML, and CSS
  • No additional dependencies

How to Use

  1. Clone this repository
  2. Open index.html in your browser
  3. Explore the visualization:
    • Hover over nodes to see details
    • Node size indicates sales value
    • Colors represent different product categories

Data Structure

The visualization uses hierarchical data with the following structure:

MIT Licensed

Similar vizzes

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

Fork of Fork of 11702358-ice 8 -Network

This network graph visualizes sales data across the USA, UK, and Canada, showing the relationships between a central "Sales Data" node, country nodes, salespersons, and chocolate products. The d3.v7 library with a force simulation layout positions nodes, with light gray links connecting hierarchical categories. SVG circles and rectangles represent nodes with black borders, while text labels identify each element. The graph uses pinned coordinates for the central node, and the code defines a legend, making the data hierarchy and product-to-salesperson associations explicitly visible.

Ssowmyakancharla01@gmail.com
86% match
Loading thumbnail…

Fork of 11702358-ice 8 -Network

This network graph visualizes sales data across the USA, UK, and Canada, showing the hierarchical relationships between a central "Sales Data" node, country hubs, salespersons, and specific chocolate products. Using D3.js v7 with an SVG rendering, the code builds a force-directed layout with `d3.forceSimulation`? Actually it uses a manual spring-based positioning based on fixed coordinates and links. Nodes and links are drawn with `<circle>` and `<line>` elements, while labels and a legend clarify the node types and product categories. The graph is pinned at the center and branches outward to display the data structure.

JJahnavi Kopalli
85% 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
84% match
Loading thumbnail…

Fork of Fork of 11702358-ice 8 -Network

This network graph visualizes sales data across three countries—USA, UK, and Canada—using a force-directed layout. A central "Sales Data" node connects to country nodes, which branch to individual salespersons and their associated chocolate products. The SVG implementation uses d3.forceSimulation to position nodes and links, with distinct shapes and colors differentiating countries, salespersons, and product categories. Node labels appear directly on the canvas, and the data is embedded inline within the JavaScript code.

Ssowmyakancharla01@gmail.com
84% match
Loading thumbnail…

Fork of Fork of Fork of network ICE

This example shows a sales hierarchy tree with a root node for Global Sales, branching into country-level nodes (United States and United Kingdom), sales representatives, and individual products. The visualization uses D3.js v7 with the `d3.tree()` layout and `d3.hierarchy()` to compute node positions, then renders the structure as an SVG using `linkHorizontal()` for the connecting paths and colored circle nodes representing depth levels. Labels are positioned to the left for parent nodes and to the right for leaf nodes, with the data structure hardcoded in JavaScript.

Sshreyavallamsetla@gmail.com
81% match
Loading thumbnail…

Fork of Fork of Network Graph

This interactive network graph visualizes the relationships between sales people and products, with node size reflecting total sales and colors distinguishing persons (blue) from products (orange). The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCenter, and forceCollide to position nodes, while SVG circles and lines render the network. A tooltip appears on mouseover to display node details, and nodes are draggable via d3.drag. The sample data includes sales figures from an Excel spreadsheet, demonstrating a typical sales-product association structure.

Sshreyavallamsetla@gmail.com
78% match
Loading thumbnail…

Fork of Fork of Visualization: Sales Distribution by Country (Bar Chart)

A static bar chart displays sales quantities for 26 product descriptions, ranging from 2 to 32 units per item. Each vertical bar is labeled with its exact value above it. The visualization uses D3.v7 with an SVG rendering approach, creating a band scale for the categorical x-axis and a linear scale for the quantity y-axis. Product names on the x-axis are rotated 45 degrees to accommodate the long labels.

JJames Cruz
78% match