dang-sunburst


Welcome!

This page contains experiments with D3, Angular, and Pelican.

Let's start with a simple Angular.js Hello World:

Hello Angular World

 

Sunburst Angular.js Directives

These examples use Angular.js directives to define directives like <sunburst></sunburst> to build charts. Here are some examples.

This D3 sunburst chart shows two-level information about bi-gram frequencies (that is, the frequencies of occurrences of two letter combinations in the English language):

Interactive Sunburst: English Language Bi-Gram Frequencies

Exploring Sunburst Charts

There are a number of ways to construct suncharts from multidimensional data.

Orthogonal Dimensions - The first way is by displaying different, orthogonal dimensions on different radians, or radial rings. Ring 1 contains x, Ring 2 contains y, etc.:

Sunburst of Orthogonal Dimensions

 

Nested Dimensions - Another method is using radians to display nested information. In this case, radians display increasing levels of detail about the same dimension. Ring 1 contains x broken down into 10 groups, Ring 2 contains x broken down into 100 groups, etc.:

Sunburst of Nested Dimensions

 

Dynamic Sunburst Charts

A picture is worth a thousand words, but an interactive chart is worth a bazillion.

Sliders - Allows the user to select parts of the chart and change their value and size.

Sliders: Dynamic Sunburst

 

Pushing and Popping - Deals with data changing due to pushing/popping of nodes in the underlying tree.

Push/Pop: Dynamic Sunburst