Transforming a CSV document into a JSON format in order to generate a hierarchical tree structure for constructing a D3 categorical tree diagram

Question

Transforming a CSV document into a JSON format in order to generate a hierarchical tree structure for constructing a D3 categorical tree diagram

I have a CSV file that is structured like this:

"","Sequence","Paths","sequence_length"
"1","Social -> Social -> Social -> Social -> Social -> Social -> Social -> Social",29,8
"2","Social -> Social -> Social -> Social -> Social -> Social -> Social",30,7
"3","Social -> Social -> Social -> Social -> Social -> Social",40,6
"4","Social -> Social -> Social -> Social -> Social",71,5
"5","Social -> Social -> Social -> Social",156,4
"6","Social -> Social -> Social",273,3
"7","Social -> Social -> SEO",40,3
"8","Social -> Social",729,2
"9","Social -> SEO -> Social",51,3
"10","Social -> SEO",180,2
"11","Social -> SEM",56,2

My goal is to transform this data into a JSON tree structure as shown below:

{
"name": "Social",
"children": [{
    "name": "Social",
    "children": [{
        "name": "Social",
        "children": [{
            "name": "Social",
            "children": [{
                "name": "Social",
                "children": [{
                    "name": "Social",
                    "children": [{
                        "name": "Social",
                        "children": [{
                            "name": "Social",
                            "Path": 29
                        }]
                    }]
                }]
            }]
        }]
    }]
}]
}

Each touchpoint represented by 'Social' in the CSV file signifies a child node of the previous one, with the number of paths being added to the final node.

To achieve this, I am splitting the 'Social' elements into an array like this:

data.forEach(function(d){
var x =  d.Sequence.split(' -> ');

If anyone could assist me with parsing this information into JSON format, it would be greatly appreciated. Thank you!

javascript json d3.js

Answer 1

Answer №1

I completed the task for only the first row in the csv file, similar to the example you provided. I believe it achieves the desired outcome.

Simply create an array of items and pass each one through the parseItem function. Note: the final result is an array, not an object.

Although not necessary, I implemented it as a recursive function.

The .innerHTML code is purely for display purposes. Feel free to remove those lines if you prefer.

You can continue from here, correct?

<div id="log"></div>
<hr/>
<div id="result"></div>
<script>
    var myitem = ["1", "Social -> Social -> Social -> Social -> Social -> Social -> Social -> Social", 29, 8];

    function parseItem(item) {
        // var id = item[0];
        var paths = item[1];
        var value = item[2];
        // var length =  item[3];
        var splitPath = paths.split(' -> ');

        var threeDpath = path2tree(splitPath, value);
        return threeDpath;

    }

    // recursive function
    function path2tree(paths, value) {
        // for testing and trying to understand what happens
        document.getElementById('log').innerHTML += JSON.stringify(paths) + '<br/>';

        if (paths.length == 1) { // this will only be true the last time
            return [{
                "name": paths[0],
                "Path": value
            }];
        } else {
            // splice paths[0], send the rest to the recursive function
            var path = paths.splice(0, 1);
            return [{
                "name": path[0],
                "children": path2tree(paths, value)
            }];
        }
    }

    window.onload = function() {
        var threeDpath = parseItem(myitem);
        document.getElementById('result').innerHTML = JSON.stringify(threeDpath);
    }
</script>

Answer 2

I completed the task for only the first row in the csv file, similar to the example you provided. I believe it achieves the desired outcome.

Simply create an array of items and pass each one through the parseItem function. Note: the final result is an array, not an object.

Although not necessary, I implemented it as a recursive function.

The .innerHTML code is purely for display purposes. Feel free to remove those lines if you prefer.

You can continue from here, correct?

<div id="log"></div>
<hr/>
<div id="result"></div>
<script>
    var myitem = ["1", "Social -> Social -> Social -> Social -> Social -> Social -> Social -> Social", 29, 8];

    function parseItem(item) {
        // var id = item[0];
        var paths = item[1];
        var value = item[2];
        // var length =  item[3];
        var splitPath = paths.split(' -> ');

        var threeDpath = path2tree(splitPath, value);
        return threeDpath;

    }

    // recursive function
    function path2tree(paths, value) {
        // for testing and trying to understand what happens
        document.getElementById('log').innerHTML += JSON.stringify(paths) + '<br/>';

        if (paths.length == 1) { // this will only be true the last time
            return [{
                "name": paths[0],
                "Path": value
            }];
        } else {
            // splice paths[0], send the rest to the recursive function
            var path = paths.splice(0, 1);
            return [{
                "name": path[0],
                "children": path2tree(paths, value)
            }];
        }
    }

    window.onload = function() {
        var threeDpath = parseItem(myitem);
        document.getElementById('result').innerHTML = JSON.stringify(threeDpath);
    }
</script>

Transforming a CSV document into a JSON format in order to generate a hierarchical tree structure for constructing a D3 categorical tree diagram

Answer №1

Similar questions

Having difficulty generating a Meteor.js helper using a parse.com query

Can you create a stroke that is consistently the same width as the container BoxElement?

Guide for using two Async Pipe functions in Angular 7

Strategies for extracting data from multiple Textareas in React

Trigger a drop-down list in React when typing a specific character, like {{ or @, in an input field

What could be the reason behind Typescript's unexpected behavior when handling the severity prop in Material UI Alerts?

Putting a Pause on CSS Transition using jQuery

Server with minimal setup requirements

What steps should I follow to ensure that the processData function waits for the data returned by the getData function in Angular?

Decoding the `this` Mystery in VueJS

The margin and width of a div element with the position set to fixed and display set to table-cell are not rendering correctly

Exploring the possibilities of ReactJS and the sleek design of

React components do not re-render when the context value changes

The difference between importing CSS in JavaScript and importing it directly in CSS lies in the way

utilizing the .on method for dynamically inserted elements

How to Animate an Object's Rotation Gently using React Three Fiber App and Use Cannon Library?

Unable to properly load the Kendo Tree View based on the selected option from the combo box in the Kendo UI framework

Emulate a link click using key input

Prevent the bootstrap dropdown menu from closing when encountering a login error during form validation using ajax and codeigniter

Unable to integrate bower with gulp for automation