Skip to main content
SimilarExport ZIP
100%

ice8_task2

✓ Published0🌍 Public
Kkmohithkumar7@gmail.com
Last edited Nov 3, 2025
Created on Nov 3, 2025
Forked from ICE8 Family Tree

A dark-themed visualization gallery presents two interactive D3 v7 diagrams: a hierarchical tree of programming languages and a force-directed network of authors and papers. The tree uses `d3.hierarchy` and `d3.tree` to arrange nodes by depth, with shapes varying by level and colors by layer, while hover highlights links. The network uses `d3.forceSimulation` with link, charge, and center forces, representing authors as circles and papers as squares, with drag repositioning and tooltips. Both render as SVG with original data.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 assignment

This example presents two complementary D3.js visualizations: a hierarchical family tree and a force-directed social network. The family tree uses a `d3.tree` layout with `d3.linkHorizontal` curves to connect nodes representing three generations. The social network applies `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position seven interconnected individuals, with draggable nodes. Both visualizations render as SVG elements, and the force graph includes labels beside each node, allowing users to explore relationships through interactive dragging.

BBHUMIKA CHUNDU
82% match
Loading thumbnail…

ice8_task2b

This network visualization shows research collaborations among people, papers, and topics, with node color encoding the node type (green for people, orange for papers, blue for topics). The graph includes coauthorship connections alongside authorship links, presented in an interactive force-directed layout. The code uses D3 v7's `forceSimulation` API with `forceLink`, `forceManyBody`, and `forceCenter` forces to compute node positions, while `d3.drag` handles interaction. Links are rendered as SVG lines, nodes as circles, and labels as text elements within the SVG canvas.

Ssahasrakaturi91@gmail.com
81% match
Loading thumbnail…

ICE-8-2

This interactive tree visualization displays the hierarchy of programming languages, organized by paradigms and domains, with depth and node type encoded through color and shape. Built with D3 v7, it uses `d3.hierarchy` and `d3.tree` to compute the layout, while `d3.linkHorizontal` draws the connecting paths. Node symbols are rendered via `d3.symbol` with diamond, square, and circle shapes for root, internal, and leaf nodes, and a custom tooltip appears on mouse movement.

SSainathreddypotu@gmail.com
81% match
Loading thumbnail…

ICE_8_NIHARIKA_NETWORK

This interactive force-directed network visualizes the hierarchical relationships among programming languages, paradigms, families, and a root node. Node colors and radii encode type via `d3.scaleOrdinal`, while parent-child links are parsed from a CSV gist. The visualization uses `d3.forceSimulation` for layout and renders animated SVG elements in a dark-themed canvas. A fixed HTML legend overlays the chart, and the code is built with D3 v7.

118121a1545
81% match
Loading thumbnail…

ice8

The ICE-8 Tree & Network visualization presents two distinct views of relational data, toggled via buttons. The Tree View displays a hierarchical structure, while the Network View maps interconnected nodes, both rendered as scalable vector graphics. The example uses D3.js version 7, leveraging its core selection and layout APIs, with the force-directed simulation handling node positioning in the network mode. The SVG canvas is dynamically redrawn based on the selected view.

Ssdarsi2404@gmail.com
80% match
Loading thumbnail…

ice82

This example presents hierarchical population data as an interactive tree and network visualization. Buttons toggle between a `d3.tree` layout showing parent-child relationships with node sizes scaled by population, and a `d3.forceSimulation` network view with draggable nodes and link lines. The code uses D3 v7 with SVG rendering, drawing colored circles and labels for world regions and countries from embedded sample data.

Ssdarsi2404@gmail.com
80% match
Loading thumbnail…

ICE 8 2Q Sharanya

This example presents two linked D3.js visualizations side by side. The first, a family tree, displays three generations of a family using a hierarchical layout. The second, a social network diagram, shows relationships between seven individuals arranged through a force-directed simulation, where nodes can be repositioned via an interactive drag. Both visualizations use SVG canvases for rendering, with the family tree employing `d3.hierarchy` and `d3.tree` for layout, and the network using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` for physics-based positioning and interaction.

Cchengalvasharanya@gmail.com
80% match
Loading thumbnail…

ICE-8 Network

This network visualization shows a bipartite graph of three authors connected to three papers through authorship relations, with authors as circles and papers as squares. The layout is generated using D3's `d3.forceSimulation` with link, many-body charge, center, and collision forces, allowing nodes to be repositioned via mouse drag. The rendering uses D3's `symbol` API for distinct node shapes, SVG paths for nodes, and `d3.select` joins for interactive elements like hover tooltips and a legend. The example demonstrates D3 v7's force-directed graph capabilities in a simple, self-contained dataset.

SSainathreddypotu@gmail.com
80% match