Wednesday, October 29, 2014
Using D3.js to create a treeview for drilling down into problems
I was intrigued by the drilldown method of probing into where a particular problem lay within some structure. Bear in mind that this still needs a method of creating the json file in the correct flare.js type style. I will probably add the php file at a later stage.
The idea is that when facing a lot of data such as messages or other information that you would like to search out where the error might be, this way would show you a color tree based on green for no problem, orange denotes an upcoming issue and red denotes a problem. This way you drill down into the issue and see visually where the issue lies.
This code is taken from a website https://leanpub.com/D3-Tips-and-Tricks/read where a number of tricks are shown how to use D3 javascript library.
I just changed the code according to the chapter in this ebook. A chapter on autostyling nodes:
https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-styling-nodes-in-a-tree-diagram
Here is the code and the json file used to create this demo: Click here for demo
I was intrigued by the drilldown method of probing into where a particular problem lay within some structure. Bear in mind that this still needs a method of creating the json file in the correct flare.js type style. I will probably add the php file at a later stage.
The idea is that when facing a lot of data such as messages or other information that you would like to search out where the error might be, this way would show you a color tree based on green for no problem, orange denotes an upcoming issue and red denotes a problem. This way you drill down into the issue and see visually where the issue lies.
This code is taken from a website https://leanpub.com/D3-Tips-and-Tricks/read where a number of tricks are shown how to use D3 javascript library.
I just changed the code according to the chapter in this ebook. A chapter on autostyling nodes:
https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-styling-nodes-in-a-tree-diagram
Here is the code and the json file used to create this demo: Click here for demo
