Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Ssaiyogesh9911@gmail.com
Last edited Apr 3, 2024
Created on Apr 3, 2024
Forked from 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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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 a hierarchy of physical activity levels across demographic categories. The radial layout displays branches for gender, age, and activity rating, with distinct colors and shapes distinguishing each level. Built with D3.js version 3, the visualization uses the `d3.layout.tree` API to position nodes and `d3.svg.diagonal` for connecting links. The SVG rendering includes clickable nodes and a color-coded legend, with data structured as nested JSON objects within the HTML page.

Mmounishnaidu96@gmail.com
83% match
Loading thumbnail…

Tree Chart

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.

Cchamarthisreenivasvarma@gmail.com
82% match
Loading thumbnail…

Tree graph

This interactive tree chart, titled “MY Tree ICE-8,” visualizes a hierarchy of tech layoffs categorized by continent, country, and company. The code uses the D3.js library (version 3.5.17) to construct the tree layout and render it as an animated, scalable vector graphic (SVG). D3’s `d3.layout.tree` and diagonal path generator create the node-link diagram, with distinct shapes and colors (circles, rectangles, and squares) for each hierarchy level. The visualization includes a legend explaining the shape mappings, and its interactive cursor styling suggests nodes can be clicked or hovered.

Cchamarthisreenivasvarma@gmail.com
80% match
Loading thumbnail…

Fork of HTML Starter

This example presents a hierarchical tree visualization of movies organized by year, genre, and title. It uses D3.js version 3 to render SVG shapes—circles for years, rectangles for genres, and ellipses for individual movies—with distinct color coding per category. The tree layout is built from a static JavaScript data structure that lists movies under release years and genres. A legend in the top-right corner explains the shape-color mappings, while CSS styling controls the visual appearance, including node cursors and link colors. The visualization demonstrates a simple, static branching structure without interactive behavior.

Ppavan vasamsetti
80% match
Loading thumbnail…

Network Graph

This network graph visualizes startup layoffs across industries and countries, with nodes colored by category (red for tech layoffs, blue for industry sectors, green for countries, yellow for individual companies). The graph uses d3.forceSimulation with link distance and many-body charge forces to position nodes, while d3.drag enables interactive node movement. Links connect companies to their respective industry and country, revealing geographic distribution patterns. The visualization renders in SVG and uses D3 v7 within a plain HTML page.

Ssaiyogesh9911@gmail.com
80% match
Loading thumbnail…

Fork of HTML Starter

This example shows an interactive tree diagram visualizing a hierarchical data model of actions, children, and parents with attributes. Built with D3.js v3 and React, it renders nodes as blue circles connected by lines, using a tree layout with animated transitions as nodes expand or collapse on click. The data structure contains nested objects with type and name properties, while SVG rendering and D3’s hierarchy and tree APIs handle positioning and updates.

SShinyaHosoyamada
80% match
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
79% match