Search code examples
javascriptjsond3.jsbundle-layout

Understanding of Hierarchical Edge Bundling json dataset construction

I would like to understand how to construct the dataset to visualize via hierarchical edge bundling.

Here is my test dataset

  [
        {"name":"Flare.Expertise.Informatics","imports":["Flare.Expertise.Informatics.Programming","Flare.Expertise.Informatics.Networking","Flare.Expertise.Informatics.Security","Flare.Expertise.Informatics.BioInformatics","Flare.Expertise.LifeScience.Zoology","Flare.People.APerson","Flare.People.BPerson","Flare.People.CPerson","Flare.People.DPerson"]},
        {"name":"Flare.People","imports":["Flare.People.APerson","Flare.People.BPerson","Flare.People.DPerson"]},
        {"name":"Flare.Expertise.LifeScience","imports":["Flare.Expertise.LifeScience.Biology","Flare.Expertise.LifeScience.Zoology","Flare.People.APerson","Flare.People.CPerson"]},
        {"name":"Flare.Expertise.Informatics.Programming","imports":["Flare.People.APerson","Flare.People.BPerson"]},
        {"name":"Flare.Expertise.Informatics.Networking","imports":["Flare.People.APerson","Flare.People.DPerson"]},
        {"name":"Flare.Expertise.Informatics.Security","imports":["Flare.People.BPerson","Flare.People.DPerson"]},
        {"name":"Flare.People.BPerson","imports":["Flare.Expertise.Informatics.Security","Flare.Expertise.Informatics.Programming"]},
        {"name":"Flare.People.APerson","imports":["Flare.LifeScience.Zoology","Flare.Expertise.Informatics.Networking","Flare.Expertise.Informatics.Programming"]},
        {"name":"Flare.People.DPerson","imports":["Flare.Expertise.Informatics.Networking","Flare.Expertise.Informatics.Security","Flare.Expertise.Business.Commerce"]},
        {"name":"Flare.People.CPerson","imports":["Flare.Informatics.BioInformatics","Flare.LifeScience.Biology","Flare.Expertise.Business.Marketing"]},
        {"name":"Flare.Informatics.BioInformatics","imports":["Flare.People.CPerson"]},
        {"name":"Flare.LifeScience.Zoology","imports":["Flare.People.APerson"]},
        {"name":"Flare.Expertise.Business","imports":["Flare.Expertise.Business.Marketing","Flare.Expertise.Business.Commerce","Flare.People.CPerson","Flare.People.DPerson"]},
        {"name":"Flare.Expertise.Business.Commerce","imports":["Flare.People.DPerson"]},
        {"name":"Flare.LifeScience.Biology","imports":["Flare.People.CPerson"]}
        ]

So there are 2 main categories

  1. Flare.Expertise

  2. Flare.People

    Flare.Expertise has 3 main categories : Informatics, LifeSicence, Business . Each subcategories has further categories like for LifeScience it is : Zoology and Biology

Flare.People have 4 persons: APerson, BPerson, CPerson and DPerson

I need to show that who all people have different Expertise. For example CPerson has information about Bioinformatics and Biology. Thus one person could have expertise in more than one main categories and then respective subcategories

I am trying to implement algorithm at D3 Hierarchical bundling example. I am getting an error as Uncaught TypeError: Cannot read property 'push' of undefined

I am unable to fix this error. If I change the push operator, I get blank page. To me the problem seems with dataset. I don't understand where is the error in dataset. So, please help me to fix this error. Else, please let me know how can I visualize the above relationship within my data

Solution

  • I found solution from this blog

    http://ianh.co/modeling-data-with-the-d3-js-bundle-layout/

    According to that all the categories that are in "imports" mandatory to be present for "name".

    Through that, I was able to correct my dataset and was able to work with that.