Chart based on month, date, hour and minutes.

[happytm]

I would like to create sunburst chart for front end of home automation system with following requirement.

• The inner most ring is of 12 children named 1 to 12 for months all equal size.

• The next rings consists of 31 children named 1-31 representing dates of each month mentioned above (total of 372 children of same size for this ring).

• The next rings consists of 24 children named 1-24 representing hours of each date mentioned above (total of 8928 children of same size for this ring).

• The next rings consists of 60 children named 1-60 representing minutes for each hour mentioned above (total of 535680 children of same size for this ring).

Is this possible? if so can you show me example code to create this chart?

Thanks.

[vasturiano]

@happytm all you should need to do is to define the data structure with the architecture you've described above.

As for the slice sizes, you just need to add size to the very last children of the tree (the minutes in your case). If you want all the minutes to be of equal angular size, you can just define each as 1, so everything is proportional.

[happytm]

@vasturiano I am sorry I am not good in javascript. Is there any example function you can provide which automatically create this graph like you show it with random math in couple of your examples. Here I do not need random but fixed number of children of same size in each ring?

Thanks.

[happytm]

@vasturiano Is there any easy way to define data structure without manually defining 545000 data points ?

I tried to do it manually but gave up due to huge data.

 "name": "Home",
 
 "children": [
  {
   "name": "Outdoor",
   "children": [
    {
     "name": "Battery V",
     "children": [
      {"name": "1", "size": 1},
      {"name": "2", "size": 1},
      {"name": "3", "size": 1},
      {"name": "4", "size": 1},
      {"name": "5", "size": 1},
      {"name": "6", "size": 1},
	  {"name": "7", "size": 1},
      {"name": "8", "size": 1},
      {"name": "9", "size": 1},
      {"name": "10", "size": 1},
      {"name": "11", "size": 1},
      {"name": "12", "size": 1},
      
     ]
    },
	
	{
     "name": "Temperature F",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Light Lux",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	
   ]
  },  
 
 {
   "name": "Livingroom",
   "children": [
    {
     "name": "Battery V",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Temperature F",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Light Lux",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	
   ]
  },  
  
 
 {
   "name": "Kitchen",
   "children": [
    {
     "name": "Battery V",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Temperature F",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Light Lux",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	
   ]
  },  
  
{
   "name": "Bedroom",
   "children": [
    {
     "name": "Battery V",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Temperature F",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Light Lux",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	
   ]
  },  
  
  
  
 ]

Thanks.

[mattsgreen]

Something like this? Takes a while to run, though!

function genNode() {
  return {
    name: "Clock",
    children: [...Array(12)].map((_, i) => ({
      name: "Months " + ++i,
      children: [...Array(31)].map((_, i) => ({
        name: "Days " + ++i,
        children: [...Array(24)].map((_, i) => ({
          name: "Hours " + ++i,
          children: [...Array(60)].map((_, i) => ({
            name: "Minutes " + ++i,
            value: 1
          }))
        }))
      }))
    }))
  }
}

console.log(genNode());

[happytm]

@mattsgreen Thank you for help. Console log show it is working but how do I implement in chart ? I tried to do this but did not work.

  <script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/sunburst-chart.min.js"></script>

  <style>body { margin: 0 }</style>
</head>
<body>
  <div id="chart"></div>

  <script>
  
  function genNode() {
  return {
    name: "Clock",
    children: [...Array(12)].map((_, i) => ({
      name: "Months " + ++i,
      children: [...Array(31)].map((_, i) => ({
        name: "Days " + ++i,
        children: [...Array(24)].map((_, i) => ({
          name: "Hours " + ++i,
          children: [...Array(60)].map((_, i) => ({
            name: "Minutes " + ++i,
            value: 1
          }))
        }))
      }))
    }))
  }
}
console.log(genNode());

const data =  genNode();


const color = d3.scaleOrdinal(d3.schemePaired);

    Sunburst()
     .data(data)
        .label('name')
        .size('size')
		.excludeRoot("true")
		
        .color((d, parent) => color(parent ? parent.data.name : null))
        .tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
        (document.getElementById('chart'));
  </script>
</body>

[mattsgreen]

Call the function within the data parameter:

Sunburst() .data(genNode())

You can remove the console.log line, too 😊

const color = d3.scaleOrdinal(d3.schemePaired); Sunburst() .data(data .excludeRoot("true") .color((d, parent) => color(parent ? parent.data.name : null)) .tooltipContent((d, node) => Size: ${node.value}) (document.getElementById('chart'));

[happytm]

@mattsgreen I did following and no error in console log but still no chart showing up.

  <script src="https://unpkg.com/[email protected]/dist/d3.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/sunburst-chart.min.js"></script>

  <style>body { margin: 0 }</style>
</head>
<body>
  <div id="chart"></div>

  <script>
  
  function genNode() {
  return {
    name: "Clock",
    children: [...Array(12)].map((_, i) => ({
      name: "Months " + ++i,
      children: [...Array(31)].map((_, i) => ({
        name: "Days " + ++i,
        children: [...Array(24)].map((_, i) => ({
          name: "Hours " + ++i,
          children: [...Array(60)].map((_, i) => ({
            name: "Minutes " + ++i,
            value: 1
          }))
        }))
      }))
    }))
  }
}
console.log(genNode());

const data =  genNode();
console.log(data);

const color = d3.scaleOrdinal(d3.schemePaired);

    Sunburst()
     .data(data)
        .label('name')
        .size('size')
		.excludeRoot("true")
		
        .color((d, parent) => color(parent ? parent.data.name : null))
        .tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
        (document.getElementById('chart'));
  </script>
</body>

     

[mattsgreen]

Remove

.label('name') .size('size')

[happytm]

@mattsgreen It works ! Thank you very much.

[happytm]

@mattsgreen I have created simple home automation dashboard using uPlot but like to use sunburst-chart. I am not very good with javascript as you can see above. Can you please look at my repository linked below and help me?

https://github.com/happytm/BatteryNode

Thanks.