Creating data for a sunburst chart using Javascript

Question

Creating data for a sunburst chart using Javascript

I am looking to create a dynamic sunburst chart using echarts, specifically with a children -> grandchildren structure. I found inspiration from this example on the Echarts website. Initially, the data I received from the backend was in a flat format.

const data = [
  {
    region: 'EMEA',
    username: 'MG',
    priority: 'P3',
    application: 'G1',
    count: 1
  },
  ...
]

To build the child list dynamically, I have defined it as follows: const children = ['region','application','priority'];

I need guidance on how to aggregate this data into nested structures as shown below:

const dataSet =[
name: 'India', 
value: 16,
children:[
  {name: 'E5',
  value: 3,
     children:[
         {name: p3, value: 1},
         {name: p2, value: 2}
     
    ]
   },
   ...
]

Your insights and suggestions would be greatly appreciated. Thank you.

javascript

Answer 1

Answer №1

There is a method I have discovered (although it may not be the most efficient)...

const children = ['region','application','priority'];
const dataArray = new Array();
data.forEach((d, idx)=>{
                        const count = d.count
                        
                        children.forEach((child,index)=>{
                            const name = d[child];
                            const item = {name: name, value: count}
                            if(index === 0){
                                let temp = dataArray.find((o)=>{return o.name === name})
                                if(temp){
                                    temp.value += count
                                }else{
                                    dataArray.push(item)                                
                                }
                            }else{
                            
                                const previousKeys = children.slice(0, index)
                                const firstKey = previousKeys.shift()
                                const firstValue = d[firstKey]
                                let temp = dataArray.find((o)=>{return o.name === firstValue})
                                previousKeys.forEach((key,i)=>{
                                    const v = d[key]
                                    
                                
                                     temp = temp.children.find((o)=>{return o.name ===v})
                                    
                                     
                                
                                     
                                
                                
                                });
                                
                                
                                if(!temp.children)
                                {
                                     temp.children = new Array()
                                 }
                                 
                                 let m = temp.children
                                 let n = m.find((o)=>{return o.name === item.name})
                                 if(n){
                                    n.value += item.value
                                 }else{
                                    m.push(item)
                                 }
                                
                            }
                        
                        });
                        
                        
                    });

An important aspect to note is that when constructing the next level, the previous level must already have been constructed. This concept is utilized in the `previousKeys.forEach((key,i)=>{}` loop. It shifts the `temp` variable to the "just one level up" of the current `item`, and then checks for the existence of the `item` name to determine whether to add a new item or merge it into an existing slot.

The `children` variable dictates the sequence and hierarchy levels of the sunburst chart (from innermost to outermost).

Answer 2

There is a method I have discovered (although it may not be the most efficient)...

const children = ['region','application','priority'];
const dataArray = new Array();
data.forEach((d, idx)=>{
                        const count = d.count
                        
                        children.forEach((child,index)=>{
                            const name = d[child];
                            const item = {name: name, value: count}
                            if(index === 0){
                                let temp = dataArray.find((o)=>{return o.name === name})
                                if(temp){
                                    temp.value += count
                                }else{
                                    dataArray.push(item)                                
                                }
                            }else{
                            
                                const previousKeys = children.slice(0, index)
                                const firstKey = previousKeys.shift()
                                const firstValue = d[firstKey]
                                let temp = dataArray.find((o)=>{return o.name === firstValue})
                                previousKeys.forEach((key,i)=>{
                                    const v = d[key]
                                    
                                
                                     temp = temp.children.find((o)=>{return o.name ===v})
                                    
                                     
                                
                                     
                                
                                
                                });
                                
                                
                                if(!temp.children)
                                {
                                     temp.children = new Array()
                                 }
                                 
                                 let m = temp.children
                                 let n = m.find((o)=>{return o.name === item.name})
                                 if(n){
                                    n.value += item.value
                                 }else{
                                    m.push(item)
                                 }
                                
                            }
                        
                        });
                        
                        
                    });

An important aspect to note is that when constructing the next level, the previous level must already have been constructed. This concept is utilized in the `previousKeys.forEach((key,i)=>{}` loop. It shifts the `temp` variable to the "just one level up" of the current `item`, and then checks for the existence of the `item` name to determine whether to add a new item or merge it into an existing slot.

The `children` variable dictates the sequence and hierarchy levels of the sunburst chart (from innermost to outermost).

Creating data for a sunburst chart using Javascript

Answer №1

Similar questions

How to manage multiple controllers for the same template in AngularJS?

JavaScript - Populate canvas with selected image from gallery upon clicking an image

Learn to save Canvas graphics as an image file with the powerful combination of fabric.js and React

Associating checkbox options with an array that is void of elements

Are jQuery plugins offering accessible public functions?

Node.js Sparse Array Memory Usage Explained

Dealing with ASP.NET forms that involve a javascript plugin generating substitute input

What is the best way to send multiple input box values to a function set in the controller?

Does applying a style to an element that already has the same value result in a decrease in performance? Alternatively, do all browsers simply overlook it?

Activating Ionic6 Stack Modal through JavaScript or TypeScript

Tips on running methods consecutively within ngOnInit in Angular

Javascript string manipulation operation

FirebaseError encountered: Unable to update document due to absence of document. Updating document is only possible if document id is hard coded

Utilizing jQuery and JSON to showcase the contents of an array

Using AngularJS to automatically include predefined data in an $http request

Adding input fields that change dynamically along with their corresponding radio buttons using AngularJS

What method can be used to verify if Handlebar.js is integrated into the application?

When using Vue.js, pressing the enter key will automatically insert a <br> tag into the text output

Invoking a bean using a Javascript Birt Expression

Using the prop callback in a React test renderer does not trigger updates in hooks