100%

Radial Tree

✓ Published0🌍 Public

Last edited Aug 7, 2017

Created on Jan 17, 2017

This radial tree visualization displays the sequence of U.S. presidents, branching by party affiliation and home state, using data from a CSV file. The chart, built with dex.js and D3 v4, renders a hierarchical layout with a color scale mapping parties to red, blue, green, and black. It uses `d3.csv` to load the data and `d3.scaleOrdinal` for the color scheme, though it is not interactive. The example adapts Mike Bostock’s radial tree technique for reusable presentation.

AI-generated description

Radial Tree

This is a reusable dex.js radial tree based upon Mike Bostock's example.

Comments

Presently, this chart is highly configurable, but not interactive yet.

References

dex.js The main site

mit Licensed

Similar vizzes

Loading thumbnail…

Dendrogram

A dendrogram visualizes the hierarchical relationship among U.S. presidents, grouping them by party, then home state, and finally by presidency number. The example loads data from `presidents.csv` using D3’s `d3.csv` method and renders an interactive tree chart through the DEX library’s `dex.charts.d3.Dendrogram` component. The chart is embedded in a full-page `div` and styled with Bootstrap and jQuery UI, while the underlying D3 layout computes the branching structure.

PPatMartin

79% match

Loading thumbnail…

NVD3 Bubble Chart

This example uses a D3 Plus ring network to visualize the relationships among U.S. presidents, their political parties, and home states. The interactive chart arranges nodes in concentric rings, with arrows indicating edges between connected data points. The code loads data from a JavaScript array and renders the visualization using the `dex.charts.d3plus.RingNetwork` API, which leverages D3’s v3 force simulation for layout, along with jQuery, Bootstrap, and underscore libraries for interaction and styling. The visualization highlights categorical groupings and connections within the presidential dataset.

PPatMartin

76% match

Loading thumbnail…

dex.js : Clustered Force

The dex.js Sunburst visualization organizes U.S. presidential data by party and home state, using a radial hierarchical layout with colored arcs and labels. It loads `presidents.csv` via `d3.csv`, then processes the data with a `dex.csv` object and renders the chart through `dex.charts.d3.Sunburst`. The example includes an interactive configuration pane, built with `dex.ui.ConfigurationPane`, for adjusting chart settings. D3.js powers the underlying rendering, while jQuery UI and Bootstrap handle the page layout and styling. The visualization focuses on displaying categorical relationships, with label placement and dynamic sizing noted as areas for future improvement.

PPatMartin

75% match

Loading thumbnail…

Chord Diagram

This chord diagram visualizes the relationships between U.S. Presidents, their political parties, and home states, using data loaded from a CSV file. The code relies on the dex.js library’s `dex.charts.d3.Chord` component to render the diagram and includes an interactive `dex.ui.ConfigurationPane` for adjusting chart settings. The visualization uses D3.js internally, as dex.js builds on it, and the layout is managed with jQuery UI’s layout plugin to keep the chart and configuration panel responsive.

PPatMartin

75% match

Loading thumbnail…

dex.js : Sankey Diagram

This example uses dex.js to render a Sankey diagram from a CSV of U.S. presidents, linking each presidency to its president, party, and home state. The code loads the data with `d3.csv`, then the `dex.charts.d3.Sankey` component visualizes the flow between categorical fields, with a configuration pane enabling interactive exploration of the chart’s options. The visualization relies on dex.js’s Bootstrap and jQuery UI integrations to manage layout and resizing.

PPatMartin

74% match

Loading thumbnail…

RADIAL TREE 3

This radial tree visualization displays a hierarchical dataset of part numbers and associated values, branching from a single root node. The layout uses D3’s `d3.cluster` to arrange nodes radially, with curved paths rendering parent–child links. Panning and zooming are supported via D3’s `zoom` behavior, while node labels are rotated to follow the radial angle. Data is loaded from a CSV file and processed with `d3.stratify` to build the tree structure, rendered as SVG.

Nnadia-el

73% match

Loading thumbnail…

RADIAL TREE 2

This radial tree visualization displays a hierarchical dataset from a CSV file, using a circular layout where branches extend from a central root. The visualization supports panning and zooming interaction, allowing users to explore the hierarchy. Built with D3 v4, the code uses `d3.stratify`, `d3.tree`, `d3.linkRadial`, and `d3.csv` to process and render the data as an SVG. Nodes are drawn as circles with text labels, and links are rendered as curved paths with light blue strokes. The tree is positioned within a large SVG canvas, with labels rotated to follow the radial structure.

Nnadia-el

73% match

Loading thumbnail…

Fork of RADIAL TREE 3

A radial tree visualization displays a hierarchical dataset of agricultural processes, from preplanting through storage and processing, with linked leaf nodes representing specific data items. The D3 v4 code uses `d3.stratify` and `d3.cluster` to compute the radial layout, rendering curved links via SVG paths and placing labeled nodes with circles. Interaction includes panning and zooming through `d3.zoom`. The visualization adapts Curran Kelleher’s world countries hierarchy block, using CSV data with pipe-delimited IDs to define parent-child relationships.

Ccheikh.m.m.thiaw@aims-senegal.org

73% match