Skip to main content
100%

Tree colors (sunburst, DBpedia)

✓ Published0🌍 Public
Aac1714
Last edited Feb 5, 2016
Created on Feb 5, 2016

This sunburst visualization applies the tree color scheme from Tennekes and de Jonge to a hierarchical representation of the DBpedia ontology. Hue differentiates sibling subtrees, while luminance and chroma encode depth. The data is drawn from a canonical JSON representation of DBpedia’s ontology, and the visualization is rendered as an SVG sunburst using D3.js v3. The implementation omits the five-element permutation feature of the original scheme, causing similar color pairs to repeat consecutively. The view highlights how hue differentiation is mainly effective at the first few levels, with the high number of root-level nodes in DBpedia reducing its overall impact.

AI-generated description

A partial implementation of the tree color scheme proposed in Tennekes, Jonge 2014, applied to a sunburst representation of the canonically sorted DBpedia hierarchical ontology.

Hue is used to differentiate subtrees, while luminance (and chroma) to encode depth.

This implementation misses the five-element permutation feature described in the paper above. The effect on the visualization is that similar pairs of different colors are repeated one after each other.

As in the original work, the effect of hue is mainly limited to the first levels. The case of DBpedia is especially bad, because of the high number of nodes at the first level.

forked from <a href='http://bl.ocks.org/nitaku/'>nitaku</a>'s block: <a href='http://bl.ocks.org/nitaku/a8aa67de3cd9f2e0554e'>Tree colors (sunburst, DBpedia)</a>

Similar vizzes

Loading thumbnail…

Semantic Arts Dataset Ontology II

This visualization displays the SemanticArts dataset ontology as a forest of distinct sunburst diagrams, each representing a top-level class hierarchy. It uses D3.js v3 with an SVG renderer and a zoom behavior that scales and translates the entire layout, while labels scale inversely and fade out based on a level-of-detail threshold. The code applies a D3 partition layout with custom angular and radial size mappings, colors each tree by its root using `d3.scale.category20`, and loads hierarchical data from `tree.json`.

TThanaporn-sk
73% match
Loading thumbnail…

d3 zoomable sunburst

This example visualizes a hierarchical dataset of plant classifications, organizing species into a zoomable sunburst layout that displays taxonomic relationships from kingdom down to species. Users can click on arcs to zoom into deeper levels of the hierarchy. The visualization uses d3.v5, leveraging the d3.partition and d3.hierarchy APIs to compute the sunburst layout and render it as SVG paths. The data consists of plant entries with taxonomic fields, which are transformed into a nested tree structure for display.

Aatree-rohit
71% match
Loading thumbnail…

Treemap navigator II (dbpedia)

An interactive treemap navigator visualizes the DBpedia ontology, showing hierarchical categories as colored rectangles. Users can drag subtrees to reposition them, click nodes to explode open subtrees, and click again to collapse them, with links connecting parent and child subtrees. The visualization uses D3 v3 layout, drag, zoom, and transition APIs, rendering SVG paths and rectangles with section-specific colors. Data loads from a remote JSON file describing the ontology structure, and the coordinate-based treemap layout is recalculated on each interaction.

TThanaporn-sk
70% match
Loading thumbnail…

Trees

This visualization presents a family tree as a horizontal dendrogram, using node labels to display names and colors to encode different individuals. The hierarchical data is rendered using D3.js, with a tree layout and horizontal link generator to create the branching structure. The visualization supports zooming via D3's zoom and event APIs. Text elements are dynamically positioned and scaled by depth, with font sizes decreasing for deeper nodes. The data is loaded from a local JSON file, and the SVG rendering includes custom styling and text shadows.

RRakshithaRao27
68% match
Loading thumbnail…

D3 sun-burst graph

This example shows a sunburst visualization built from a small hierarchical dataset, where each ring segment represents a node in the tree and its angular width is proportional to the node’s value. The code uses D3 v7’s `d3.hierarchy`, `d3.partition` layout, and `d3.arc` to generate the radial paths, with semi-transparent dark fills and white strokes separating segments. While labels are commented out, the structure (root A1 with children B1 and B2, and nested leaves C1–D1) is clearly visible. The SVG is sized to the container and translated to center the chart.

SSubhendu Karmakar
68% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from a JSON file using a radial partition layout. Clicking any arc smoothly zooms into that subtree, while clicking the center circle returns to the root. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, with color mapping via `d3.scaleOrdinal` and animation through `transition.attrTween`. SVG rendering with interactive transitions highlights the relationships between nested data categories.

Llucaele
68% match
Loading thumbnail…

zoomable sunburst with sunlight colors

This zoomable sunburst diagram displays hierarchical data with arc labels, using the Flare dataset. Clicking an arc zooms into that subtree, the center circle zooms back out, and the background resets the view. The visualization uses D3 v4’s `d3.partition`, `d3.arc`, and `d3.scaleOrdinal` with a 30-color palette from the Sunlight Foundation Style Guide. Labels render along curved paths via `d3.path` and `textPath`, with animated transitions driven by `transition.attrTween` and interpolated scales. A white contour stroke improves label readability.

FFrissAnalytics
67% match
Loading thumbnail…

Tree

This visualization displays a hierarchical tree of programming languages, organized by paradigms and categories, with node shapes indicating the level in the hierarchy: a circle for the root, squares for paradigms, triangles for categories, and rounded rectangles for individual languages. The data is defined as a JavaScript object and rendered using D3.js v7, specifically relying on the `d3.hierarchy` and `d3.tree` layout functions to position nodes and links. The SVG output uses custom styling for links and labels, and a fixed-size SVG canvas at 1200x800 pixels.

AAnurup Reddy
67% match