Skip to main content
SimilarExport ZIP
100%

Tree Chart

✓ Published0🌍 Public
Cchamarthisreenivasvarma@gmail.com
Last edited Apr 3, 2024
Created on Apr 3, 2024
Forked from Kartheek_ICE8

This interactive D3.js v3 tree chart, rendered as an animated SVG diagram, maps a dataset of technology company layoffs organized by continent and country. It shows the hierarchical structure of the data with a root node labeled “Tech-Layoffs” branching into three levels: continents, countries, and individual companies. The chart uses distinct geometric shapes—circles, rectangles, and squares—and color-coding to differentiate node types, as explained in an on-page legend. Built with the D3 library, it displays nodes and white connecting links with a sky-blue background, though user interaction like clicking is limited to cursor styling.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes

Loading thumbnail…

Kartheek_ICE8

This interactive tree chart visualizes tech layoffs across continents, countries, and companies. The hierarchical data is rendered as an animated SVG using D3.js (v3), with distinct node shapes and colors for each level: cyan circles for continents, green rectangles for countries, and cyan squares for companies. White links connect the nodes, and a legend explains the visual encoding. The chart uses D3’s tree layout, with nodes that respond to cursor events, and the entire graphic is set against a skyblue background.

Kkartheekgurijala2023@gmail.com
85% match
Loading thumbnail…

ice-8

This interactive tree chart visualizes tech industry layoffs, organizing companies by sector and country. The D3.js (version 3.5.17) layout renders an SVG hierarchy with distinct node shapes and colors: cyan circles for industries, aqua rectangles for countries, and yellow squares for companies, all linked by white strokes on a tan background. A fixed legend explains the mappings. The static dataset includes four industries—Finance, Security, Education, and Healthcare—with associated countries and named startups, though the animation capability implied by the metadata is not implemented in the shown code.

Ssaiyogesh9911@gmail.com
83% match
Loading thumbnail…

Fork of HTML Starter

This interactive tree chart visualizes tech layoffs by industry, country, and company. It uses D3.js version 3.5.17 to render an SVG with animated expandable nodes. Each node is color-coded by type—cyan circles for industries, aqua rectangles for countries, and yellow squares for companies—with a legend clarifying the shapes. The hierarchical data is embedded directly in the JavaScript. The chart uses CSS for styling and a tan background, while D3 manages the force-directed layout and node interactions.

Ssaiyogesh9911@gmail.com
82% match
Loading thumbnail…

Tree Chart

An animated hierarchical tree chart displays a dataset of continents, countries, cities, and local landmarks, with nodes color-coded by level: black for roots, blue for countries, red for cities, and green for landmarks. The visualization uses D3.js version 3 layout and diagonal SVG paths, with an in-memory JSON array as the data source. Transitions animate the tree’s expansion, while styling from CSS handles node circles and text.

LLakshmanRangisetti
80% match
Loading thumbnail…

TechLaidoffs

This visualization shows global layoffs over time, plotting each incident’s laid-off count against its timestamp to reveal trends in workforce reductions worldwide. The chart uses a D3 v5 line generator with a basis curve, mapping time to the x-axis and layoff counts to a linear y-axis with abbreviated tick formatting. Data is loaded from a CSV file via `d3.csv`, parsed into dates and numbers, and rendered as an SVG with maroon stroked paths and labeled axes. The y-axis labels are formatted using `d3.format`, and the line path is smoothed using `d3.curveBasis`. The visualization includes a title and axis labels, with scales created via `d3.scaleTime` and `d3.scaleLinear`.

Bbmurill2019
78% match
Loading thumbnail…

Tree Chart

This tree chart visualizes a hierarchical dataset of continents, countries, cities, and landmarks, using color-coded nodes to distinguish each level. The SVG visualization is built with D3.js version 3.5.17, employing the `d3.layout.tree` for node positioning and `d3.svg.diagonal` for curved connecting links. The interactive animation reveals the structure progressively, with each parent node expanding to display its children over a one-second duration. Data is hardcoded in the `plantGenerationsData` array, and the rendering uses a white node fill with steelblue strokes against gray links.

Ssuryavamsi00024
78% match
Loading thumbnail…

Tree Chart

This hierarchical tree chart displays geographic relationships, branching from continents to countries, cities, and landmarks. The data is hardcoded in JavaScript as nested JSON objects. The visualization uses D3.js version 3.5.17, specifically the `d3.layout.tree` and `d3.svg.diagonal` APIs to position nodes and draw curved links. Each node is color-coded by hierarchy level: black for continents, blue for countries, red for cities, and green for landmarks. The animation and SVG-based rendering apply a 1000-millisecond transition duration when updating the tree structure.

Ssrikkanth05
77% match
Loading thumbnail…

Sreenivas Varma_ICE8_Networkgraph

This interactive network graph visualizes tech layoffs across continents, countries, and specific companies. The visualization uses a hierarchical structure where the central node, "Tech-Layoffs," connects to six continental nodes, which then branch to country nodes and finally to individual company nodes. The graph is rendered as an SVG using D3 v6, with nodes positioned through a physical simulation driven by `d3.forceSimulation`, combining link, charge, collision, and center forces. Users can drag nodes, and the system updates positions in real-time via the simulation's tick event, with all styling and interactions defined in the accompanying CSS file.

Cchamarthisreenivasvarma@gmail.com
77% match