Generate JSON key-value pairs by nesting them in D3

Question

Generate JSON key-value pairs by nesting them in D3

Looking to convert a JSON into key-value pairs using d3.nest().

The initial JSON structure is as follows:

[
{
    "Country": "Mexico", 
    "Climate": 100,
    "Safety Index": 50,
    "Life Expectancy": 80,
    "Corruption": 30,
    "Per Capita Income": 20
},
{
    "Country": "UK",
    "Climate": 70,
    "Safety Index": 80,
    "Life Expectancy": 70,
    "Corruption": 70,
    "Per Capita Income": 80
},
{
    "Country": "US",
    "Climate": 80,
    "Safety Index": 70,
    "Life Expectancy": 90,
    "Corruption": 70,
    "Per Capita Income": 80
}
]

The desired output format should be:

[
{"key": "Mexico", "value":
    [ 
        { "key": "Climate", "value": 100 },
        { "key": "Safety Index", "value": 50 },
        { "key": "Life Expectancy", "value": 80 },
        { "key": "Corruption", "value": 30 },
        { "key": "Per Capita Income", "value": 20 }
    ]},
{"key": "UK", "value":
    [ 
        { "key": "Climate", "value": 70 },
        { "key": "Safety Index", "value": 80 },
        { "key": "Life Expectancy", "value": 70 },
        { "key": "Corruption", "value": 70 },
        { "key": "Per Capita Income", "value": 80 }
    ]},
{"key": "US", "value":
    [ 
        { "key": "Climate", "value": 80 },
        { "key": "Safety Index", "value": 70 },
        { "key": "Life Expectancy", "value": 90 },
        { "key": "Corruption", "value": 70 },
        { "key": "Per Capita Income", "value": 80 }
    ]}
    ]

Here's the code snippet I've tried:

var nest = d3.nest()
             .key(function(d) { return d.Country; })
             .entries(data);

I am new to D3 and seeking guidance on restructuring the JSON data.

UPDATE

The end goal is to create individual bar charts per country based on different categories, similar to this example: http://bl.ocks.org/mbostock/5872848. Any suggestions for a more efficient approach are welcome.

javascript json d3.js

Answer 1

Answer №1

If you are looking for an exact replication of the provided output and prefer to use nesting, you can implement the following code snippet:

var nest = d3.nest()
         .key(function(data) { return data.Country; })
         .rollup(function(data) {
              var groupedObject = data[0];
              return d3.nest()
                       .key(function(innerKey) { return innerKey; })
                       .rollup(function(innerKey) { return groupedObject[innerKey]; })
                       .entries(Object.keys(groupedObject));
          })
         .entries(dataset);

One possible concern is that the assumption is made that each country will have a unique entry (e.g. no duplicate "Mexico" entries). Therefore, the inner nest only works on data[0] (which represents the first item for a specific country).

Edit: However, this solution doesn't precisely match your initial requirements as the country key-value pair is included in the nested grouping. To address this issue, you can exclude it by adding the following line before the inner nest: delete groupedObject.Country;

Edit 2: While the above code utilizes nested nest functions based on the question's specifications, in practical applications, utilizing pure JavaScript for the inner nest function seems more reasonable. Here is an alternative approach:

function getParameters(countryData){
    return Object.keys(countryData)
                   .filter(function(key){ return key !== "Country"; })
                   .map(function(key){ return { key: key, value: countryData[key] }; })
}

Answer 2

If you are looking for an exact replication of the provided output and prefer to use nesting, you can implement the following code snippet:

var nest = d3.nest()
         .key(function(data) { return data.Country; })
         .rollup(function(data) {
              var groupedObject = data[0];
              return d3.nest()
                       .key(function(innerKey) { return innerKey; })
                       .rollup(function(innerKey) { return groupedObject[innerKey]; })
                       .entries(Object.keys(groupedObject));
          })
         .entries(dataset);

One possible concern is that the assumption is made that each country will have a unique entry (e.g. no duplicate "Mexico" entries). Therefore, the inner nest only works on data[0] (which represents the first item for a specific country).

Edit: However, this solution doesn't precisely match your initial requirements as the country key-value pair is included in the nested grouping. To address this issue, you can exclude it by adding the following line before the inner nest: delete groupedObject.Country;

Edit 2: While the above code utilizes nested nest functions based on the question's specifications, in practical applications, utilizing pure JavaScript for the inner nest function seems more reasonable. Here is an alternative approach:

function getParameters(countryData){
    return Object.keys(countryData)
                   .filter(function(key){ return key !== "Country"; })
                   .map(function(key){ return { key: key, value: countryData[key] }; })
}

Answer 3

Answer №2

Check out this alternative solution that doesn't involve D3:

let originalArray = ...; // Array of JSON data
let newArray = [];
originalArray.forEach(function(item) {
    let newObj = {};
    newObj.key = item.Country;
    newObj.value = [];
    for (let key in item) {
        if (key === "Country") { continue; }
        newObj.value.push({"key": key, "value": item[key]});
    }
    newArray.push(newObj);
});

I'm curious about the use of only "key" and "value" as keys in your new object structure. It seems to diverge from the usual implicit keys and values concept of JSON. But I trust you have a specific reason behind this approach.

Answer 4

Check out this alternative solution that doesn't involve D3:

let originalArray = ...; // Array of JSON data
let newArray = [];
originalArray.forEach(function(item) {
    let newObj = {};
    newObj.key = item.Country;
    newObj.value = [];
    for (let key in item) {
        if (key === "Country") { continue; }
        newObj.value.push({"key": key, "value": item[key]});
    }
    newArray.push(newObj);
});

I'm curious about the use of only "key" and "value" as keys in your new object structure. It seems to diverge from the usual implicit keys and values concept of JSON. But I trust you have a specific reason behind this approach.

Answer 5

Answer №3

Your statement:

If there is a more efficient approach to consider, please share.

When modifying your data structure, why not transform it into the following format?

[
    ["Brazil", 90, 60, 70, 40, 30],
    ["Germany", 80, 90, 80, 80, 90],
    ["China", 85, 75, 95, 75, 85],
]

This version is compact and does not have any unnecessary repetitions.

If you aim to closely match the code example's data structure, I suggest maintaining your original data structure. This is because the JSON file resulting from the CSV conversion aligns closely with your existing JSON format.

Answer 6

Your statement:

If there is a more efficient approach to consider, please share.

When modifying your data structure, why not transform it into the following format?

[
    ["Brazil", 90, 60, 70, 40, 30],
    ["Germany", 80, 90, 80, 80, 90],
    ["China", 85, 75, 95, 75, 85],
]

This version is compact and does not have any unnecessary repetitions.

If you aim to closely match the code example's data structure, I suggest maintaining your original data structure. This is because the JSON file resulting from the CSV conversion aligns closely with your existing JSON format.

Generate JSON key-value pairs by nesting them in D3

Answer №1

Answer №2

Answer №3

Similar questions

Transform an array into an object, organizing values according to their even or odd index positions

The concept of recursively exporting modules in Node.js modules

Display images that have been uploaded on the page either as a grid view or a list of

Ways to dynamically manipulate HTML elements in Angular 5

Developing a Navigation Bar Menu using JSON data and the power of Lodash

An error occurs when attempting to upload an image in cropper js due to a violation of the Content Security Policy directive: "img-src * data:"

Transforming the data retrieved from the API into a well-organized object in Vue.js

In the Android Chrome browser, the settings of the meta viewport attribute do not take effect when the device is in full screen mode

Loop through the CSS classes and add a number to the end of each class using JavaScript

Different ways to make jQuery attr() method include the attribute by using single quotation marks

In Firefox, the Ajax Call is failing to initiate a response automatically

Updating Content Dynamically with AJAX, JavaScript, and PHP without requiring a page reload or user action

Is there a way to incorporate the load page plugin specifically for JavaScript while ensuring that my PHP code is still functional?

Using PHP to send a JSON request via cURL

The jqxgrid from jqwidget is displaying all content in a single, messy column

Exploring search capabilities within D3 graph nodes

Utilize the return function to showcase the organized outcomes on the webpage

"Making a POST request from Postman and include nested JSON data along with an image or file attachment in

Learn how to extract precise information from a JSON array by utilizing Angular 6

How do I connect a group of models in an Azure Function triggered by HTTP?