Bubble visualization with a JSON file

I am a completely new to D3.

I'd like to visualize easy results of tests in bubbles, e.g. Name: mathematics, completed-tests: 340, name: Latin, completed tests: 550.

When I look at the example on https://bl.ocks.org/mbostock/4063269, I can see that only a CSV file is loaded.

According to the documentation it is also possible to load a JSON file, but I didn't find the correct "semantic" for the JSON file.

What should the JSON file look like and how should it be called in the JavaScript section of the index.html?

Note: I want to use version 4.0. Does it matter?

1 answer

  • answered 2017-06-17 19:22 Gerardo Furtado

    Your question here is not about the correct structure of the JSON file, since there is no correct structure: it depends on the code.

    Your question here is, given that specific code you linked, how can you change the CSV for a JSON.

    To answer that, you have to understand how d3.csv creates an array of objects. In the Bostock's code you linked, each object in that array has an id and a value key/value pair.

    Therefore, your JSON need to have a structure like this:

        "id": "flare.analytics.cluster.AgglomerativeCluster",
        "value": 1938
    }, {
        "id": "flare.analytics.cluster.CommunityStructure",
        "value": 3812
    }, {
        "id": "flare.analytics.cluster.HierarchicalCluster",
        "value": 2714
    }, {
        "id": "flare.analytics.cluster.MergeEdge",
        "value": 1743

    Since you are creating your own JSON you don't need to mind the row function, which removes the objects without value and coerces their values to a number.

    Here is the updated bl.ocks using a JSON file (with just some objects): https://bl.ocks.org/anonymous/4ca57ea4393a37bc92091325eba295dd

    Have in mind that, if you use the data structure you described in your question...

    [{"Name": "mathematics", "completed-tests": 340}, etc...]

    ... you will have to make several changes in Bostock's code, both in d3.hierarchy and in the node selection.