Fork of Tree

100%

✓ Published0🌍 Public

Last edited Mar 31, 2024

Created on Mar 31, 2024

This fork of a tree visualization displays weather data in a vertical hierarchical structure, showing cities with their timestamped readings and a final layer for temperature, pressure, wind speed, and humidity values. It fetches CSV data from a GitHub gist, transforms it into a tree using `d3.hierarchy` and `d3.tree`, and renders the result as an SVG. The network of links is drawn with `d3.linkVertical` paths, while nodes and labels are styled via CSS classes for circles, rectangles, polygons, and text.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Tree

A fork of a three-layer D3 v7 tree visualization renders a hierarchical dataset of continents, countries, and cities using SVG. The code builds a vertical tree layout with `d3.hierarchy` and `d3.tree()`, then draws curved links with `d3.linkVertical()`. Node shapes encode depth: rounded rectangles for the root and countries, diamonds for continents, and circles for leaf cities, with a legend explaining each.

Mmaddulanagasanjana@gmail.com

86% match

Loading thumbnail…

Fork of a

This visualization presents a hierarchical tree of branching numeric labels, with each node displaying its value in large, serif text that shrinks as depth increases. The layout uses the D3 tree layout to position nodes, renders horizontal curved links between parent-child relationships, and supports zooming and panning via the D3 zoom behavior. Data is loaded from a JSON file and visualized entirely as SVG elements, with node text drawn using the Playfair Display font.

RRakshithaRao27

82% match

Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228

81% match

Loading thumbnail…

Fork of World Countries Tree

A fork of the World Countries Tree example displays a hierarchical dataset as a horizontal tree layout, with node labels and curved links rendered as SVG elements. The visualization uses D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` path generator to position nodes and draw edges, while the `zoom` behavior enables panning and scaling of the entire graph. Data is loaded from a local `data.json` file, and node labels are styled with a Playfair Display font and white text shadow.

Ssmeiyin

81% match

Loading thumbnail…

TREE STRUCTURE

A hierarchical tree chart displays temperature, pressure, and humidity measurements for five US cities under a "Global Climate Data" root node. Each city branches into three leaf nodes showing specific values, with distinct shapes and colors marking measurement types: red crosses for temperature, blue squares for pressure, and green diamonds for humidity. The visualization uses D3 v5 APIs including `d3.tree`, `d3.hierarchy`, `d3.symbol`, and `d3.linkHorizontal` to compute the layout and render the SVG output.

CChaturyaAkhilaPallem@my.unt.edu

80% match

Loading thumbnail…

Tree Visualization

This example displays a static, hierarchical tree layout with the root node "WEATHER" branching into three seasonal categories, each with three child nodes. It uses the D3.js v5 library with a `d3.tree()` layout and custom aggregation via `d3.hierarchy()` to structure the data. The visualization renders as SVG, applying distinct fill colors and geometric shapes (circles, rectangles, and ellipses) to each tree depth, with curved links drawn as SVG paths using cubic Bézier commands. Node labels are positioned dynamically based on whether they have children.

UUVarshaReddy

80% match

Loading thumbnail…

Fork of Network Tree

This fork of a network tree visualizes the hierarchical breakdown of flight parts, showing root components like "Engine" and "Wings" branching into subcategories with percentage distributions. The D3 force-directed layout uses `d3.forceSimulation` with link, charge, collision, and centering forces to position nodes as circles with labels. Data from `data.json` feeds the SVG rendering, where links are drawn as lines with arrow markers and nodes are draggable, highlighting on hover. The visualization uses `d3.forceLink` for connections and `d3.forceCollide` to prevent overlap.

Nneeharika2023@gmail.com

80% match

Loading thumbnail…

d3.js Tree Visualization

A static tree visualization renders hierarchical weather data with three seasonal branches, each containing three related weather conditions. The example demonstrates loading D3 v5 via UNPKG and importing ES6 modules. Using `d3.tree()` and `d3.hierarchy`, it computes node positions and draws curved links with cubic Bézier paths (`C` commands) between parent and child nodes. SVG circles and text labels show each node, with labels offset above or below based on whether a node has children.

VVenkat-Sumith-Thota

80% match