CODEWITHSUNDEEP
javascriptjsond3.jsgraph
Jimmy
Jimmy

Reputation: 12487

Sunburst Chart - Adding an extra layer of data

I'm following this tutorial:

https://bl.ocks.org/denjn5/3b74baf5edc4ac93d5e487136481c601

It works fine but only has two "rings" of data. I want to add a third. It is pulling data from a data.json file with the following data:

{

    "name": "TOPICS", "children": [{
        "name": "Topic A",
        "children": [{"name": "Sub A1", "size": 5, "text": "A story", "sentiment": 1, "source": "dictionary"},
            {"name": "Sub A2", "size": 5, "text": "A note", "sentiment": 0.5, "source": "dictionary"}]
    }, {
        "name": "Topic B",
        "children": [{"name": "Sub B1", "size": 5, "text": "A vignette", "sentiment": 1, "source": "newspaper"},
            {"name": "Sub B3", "size": 5, "text": "A joke", "sentiment": 0.5, "source": "email"}]
    }, {
        "name": "Topic C",
        "children": [{"name": "Sub A1", "size": 5, "text": "A narrative", "sentiment": 1, "source": "newspaper"},
            {"name": "Sub A2", "size": 5, "text": "A chronology", "sentiment": 0.5, "source": "email"}]
    }]
}

My question is, how do I add a third ring of data on the outside? It seems like this is in JSON format but I can't get my head around it.

Upvotes: 2

Views: 302

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

Given that specific bl.ocks you shared, all you need to do is creating a children array inside the item you want to be the parent of the new layer, and removing the size property of the parent:

For instance, creating a new layer inside Sub A1:

{
    "name": "TOPICS",
    "children": [{
        "name": "Topic A",
        "children": [{
            "name": "Sub A1",
            "text": "A story",
            "sentiment": 0.8,
            "source": "dictionary",
            "children": [{
                "name": "New Layer 1",
                "size": 5,
                "text": "A story",
                "sentiment": 0.8,
                "source": "dictionary"
            },{ 
            ...etc
            }]
        }, {
            "name": "Sub A2",
            "size": 5,
            "text": "A note",
            "sentiment": 0.3,
            "source": "dictionary"
        }]
    },{
    ...etc
    }]
}

I'm just copy/pasting here... of course, you'll have to adjust the values accordingly.

Here is the updated bl.ocks: https://bl.ocks.org/GerardoFurtado/7c30efbc20232abda294cd71a959c79d/f211ca864503860dfa181c5e9e142e38897abb56

Upvotes: 1

Related Questions