Skip to content

Example of using the d3js library to create radial histogram with hover effects and labels.

Notifications You must be signed in to change notification settings

hijarian/d3-example-radial-histogram

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

d3js Radial Histogram

This is an example of displaying radial chart using d3.js for the data in the following format:

[
    {
        title: "Творчество",
        level: 2
    },
    {
        title: "Профессионализм",
        level: 5
    },
    {
        title: "Контакты",
        level: 2
    }
]

Title is being displayed outside its respective sector of the radial chart. Level affects the outside radius of the respective sector of the radial chart. All sectors have identical angles. So this chart is not a pie chart, but something called in one source an "Aster Plot".

This is not a fully generic charting solution, but just an example. The logic for placing the titles is hardwired to exactly 8 sectors. Also, top level is 10 and all sectors are scaled the same way (0-10).

Some onhover effects were added because it's always cool to have onhover animated effects.

It is a personal project to visualise the result of a psychological exercise called "wheel of life" using d3.js.

I am very pleased in what can be accomplished with d3.js, this is truly powerful library. After you'll understand how it works, ofc.

About

Example of using the d3js library to create radial histogram with hover effects and labels.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published