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

The function Expo.Fingerprint.isEnrolledAsync will provide an output that includes information about fingerprint

ngSanitize continues to present plain text rather than rendering HTML code

Bringing in a JavaScript file into a Svelte component

Converting DataSet to JSON using ServiceStack.Text

Exports for Express Router Module/Functions

Display a loading bar or prevent any user interface actions until the server has finished generating the file

Decoding information from Onedrive's REST API

What is the best approach to dynamically enable or disable a button depending on the state of multiple checkboxes in React.js?

Executing a PHP script after successful execution of another script

Enhance your user experience with real-time autocomplete using AJAX to automatically fill in input

BottomNavigation wrapping React Router is failing to load the updated component

Prevent the sender from receiving notifications from Firestore

Exporting a object in Angular2 Using TypeScript

angular click triggers the following content

Angular sing ng-view to load images from a file

Exploring the intersection of JavaScript and PostgreSQL: Leveraging timezones and timestamps

Tips for accessing the JSON file containing Spark driver metrics:

Enhancing Javascript functionality with additional on.change customization opportunities

Looking for assistance with deleting a child element in an XML file using PHP

Converting a List of Strings to a JSON String