Troubleshooting issues with JSON data in d3 Sankey charts

I seem to be encountering an issue with creating a graph and could really use some assistance. I am attempting to create the following chart: http://bl.ocks.org/wvengen/cab9b01816490edb7083

However, every time I try, an error occurs and causes the browser to crash. This error seems to be related to certain items in my json data, but I can't pinpoint the exact reason for it.

The json data from the documentation example is as follows:

This is my json data:

    {  
   "nodes":[  
      {  
         "name":"Biblioteca",
         "hotspot":169,
         "id":"biblioteca_score"
      },
      {  
         "name":"Parque da Cidade",
         "hotspot":171,
         "id":"parque_da_cidade_score"
      },
      ... (Additional node data)
   ],
   "links":[  
      {  
         "value":1,
         "source":2,
         "target":0
      },
      ... (Additional link data)
   ],
   "colors":{  
      ... (Color data)
   }
}

When I include all the data in the json file, I encounter an error. However, if I only include the data below, it works fine:

{  
   "nodes":[  
      {  
         "name":"Biblioteca",
         "hotspot":169,
         "id":"biblioteca_score"
      },
      {  
         "name":"Parque da Cidade",
         "hotspot":171,
         "id":"parque_da_cidade_score"
      },
      ... (Additional node data)
   ],
   "links":[  
      {  
         "value":1,
         "source":2,
         "target":0
      },
      ... (Additional link data)
   ],
   "colors":{  
      ... (Color data)
   }
}

Does anyone have any insights on why this may be happening?

Answer №1

I have created a demo using the example you mentioned and integrated it with your JSON data.

Everything seems to be working fine :)

You can view the live demo here

var jsonData = {
    "nodes": [{
        "name": "Library",
            "hotspot": 169,
            "id": "library_score"
    }, {
        "name": "City Park",
            "hotspot": 171,
            "id": "city_park_score"
    }, {
        "name": "Vila Arens Terminal",
            "hotspot": 172,
            "id": "vila_arens_terminal_score"
    }, {
        "name": "Cecap Terminal",
            "hotspot": 175,
            "id": "cecap_terminal_score"
    }, {
        "name": "Central Terminal",
            "hotspot": 177,
            "id": "central_terminal_score"
    }, {
        "name": "Vila Rami Terminal",
            "hotspot": 178,
            "id": "vila_rami_terminal_score"
    }, {
        "name": "Hortolandia Terminal",
            "hotspot": 180,
            "id": "hortolandia_terminal_score"
    }, {
        "name": "Colonia Terminal",
            "hotspot": 181,
            "id": "colonia_terminal_score"
    }],
        "links": [{
        "value": 1,
            "source": 2,
            "target": 0
    }, {
        "value": 1,
            "source": 3,
            "target": 0
    }, {
        "value": 1,
            "source": 2,
            "target": 1
    }, {
        "value": 3,
            "source": 3,
            "target": 2
    }, {
        "value": 1,
            "source": 3,
            "target": 2
    }],
        "colors": {
        "library": "#d0b011",
            "city_park": "#c46be7",
            "cecap_terminal": "#3d64e5",
            "central_terminal": "#171daf",
            "vila_rami_terminal": "#fec7ea",
            "hortolandia_terminal": "#af2dfd",
            "colonia_terminal": "#dad439"
    }
};
var nodeColors = jsonData.colors;
var chart = d3.select("#chart").append("svg").chart("Sankey.Path");
chart.name(label)
    .colorNodes(function (name, node) {
    return color(node, 1) || nodeColors.fallback;
})
    .colorLinks(function (link) {
    return color(link.source, 4) || color(link.target, 1) || nodeColors.fallback;
})
    .nodeWidth(15)
    .nodePadding(10)
    .spread(true)
    .iterations(0)
    .draw(jsonData);

function label(node) {
    return node.name.replace(/\s*\(.*?\)$/, '');
}

function color(node, depth) {
    var id = node.id.replace(/(_score)?(_\d+)?$/, '');
    if (nodeColors[id]) {
        return nodeColors[id];
    } else if (depth > 0 && node.targetLinks && node.targetLinks.length == 1) {
        return color(node.targetLinks[0].source, depth - 1);
    } else {
        return null;
    }
}
body {
    padding: 10px;
    min-width: 600px;
    max-width: 1200px;
    margin: auto;
}
#chart {
    height: 500px;
    font: 13px sans-serif;
}
.node rect {
    fill-opacity: .9;
    shape-rendering: crispEdges;
    stroke-width: 0;
}
.node text {
    text-shadow: 0 1px 0 #fff;
}
.link {
    fill: none;
    stroke: #000;
    stroke-opacity: .2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/newrelic-forks/d3-plugins-sankey/master/sankey.js"></script>
    <script src="https://rawgit.com/misoproject/d3.chart/master/d3.chart.min.js"></script>
    <script src="https://rawgit.com/q-m/d3.chart.sankey/master/d3.chart.sankey.min.js"></script>
  <body>
    <div id="chart"></div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for freezing an HTML element in relation to a container using either CSS or JavaScript?

I've been diligently researching this topic up until the final day, but unfortunately, I have yet to find a solution. I am in dire need of assistance with my project. Could someone please help me out? One of my related searches led me to Can I positi ...

The clickable functionality of buttons and text labels in Vue is currently not working

When I try to input text into the registration page in vue, nothing happens when I click the register/login button. However, if I press TAB and then enter my password followed by another TAB and ENTER, it works. This is the code snippet for the login-box: ...

Encountered a network error: A rogue token < was found in JSON at position 0 within a new Apollo

https://i.sstatic.net/D25ai.png const httpLink = createHttpLink({ uri: 'http://localhost:3090/' }) const client = new ApolloClient({ link: httpLink, cache: new InMemoryCache() }) client.query({ query: gql` query users { ...

Why Doesn't Vue Scoped SCSS Support the Display Flex Property?

Greetings! I am working on a Vue Formulate form and here is the code snippet: <template> <div class="repeatable-container"> <FormulateForm> <FormulateInput type="text" label="strength" placeh ...

Creating a custom calculator using Javascript

As a beginner in Javascript, I am seeking assistance in creating a simple calculator that can add numbers as buttons are clicked and display the running total. For example: If I click the button "20," it should display the number 20. Then, if I click the ...

<FormattedMessage /> extract text from within tags

I'm struggling to articulate this issue clearly. Currently, I am utilizing a Bootstrap Table to showcase my data which includes search filters, sorting, and other functionality. As I began working on internationalization, I initially formatted direc ...

The use of DIV tags allows the element to be displayed in an inline

In my project, I decided to add three div tags. The first two are positioned next to each other with the third div tag placed below them. However, when I tried to insert a slideshow into the first div tag, all of the div tags ended up displaying as "block" ...

Javascript: Executing a interval, delay, and another interval

My challenge is to reveal a list of elements one after another using setInterval for 5 seconds. However, I want to introduce a 60-second timeout after the 7th element and then continue the interval without repeating the timeout for every 7th element. Here ...

Improve rotation smoothness in panorama using arrow keys with Three.js

In order to create an interactive panorama application using three.js based on the example provided Panorama, I needed to incorporate rotation functionality with arrow keys (left and right arrow keys). I implemented an event listener to achieve this, adjus ...

Error: Unable to split function. Attempting to retrieve API response via GET request using ngResource

I am trying to retrieve some data from an API using ngResource by utilizing the get method. Even though I have set up a factory for my resource, when implementing it in my controller, I encounter an error stating URL.split is not a function. I'm stru ...

Access Vuex Getters in a separate JavaScript file

Within the file /store/user/getters.js: function getLoggedIn (state) { return state.loggedIn } In a different file, router-auth.js, I attempted to access the value (true or false) of getters.getLoggedIn in the following manner: import user from '.. ...

Utilizing Response Entity to Create Dynamic JSON Objects in Spring

When using Spring's ResponseEntity to return an HTTP response, passing a POJO or MAP in the entity will convert it to a JSON Object. For example: return new ResponseEntity<Object>(result, HttpStatus.OK); The result may be a POJO class with g ...

Bind a tree structure in Knockout by linking parent IDs to the primary key column

I want to organize data returned from a stored procedure into a tree structure using the guidance provided in the Knockout documentation. The data I am working with has the following format: ID | Name | ParentID 1 | Parent 1 ...

Issue encountered while transforming the data buffer into the video within a Node.js environment

I am attempting to create a buffer from the mp4 video, and then convert that buffer back into the video. The buffer is being generated as follows: const buffer = Buffer.from("Cat.mp4"); console.log(buffer); The output I receive is <Buffer 43 61 74 2e ...

Assistance needed for iterating through JSON data

I need assistance retrieving specific data from a JSON response in my JavaScript code. Unfortunately, the current approach is not providing the desired results: This is my JavaScript code snippet: function retrieveArtists(response){ var artistList ...

Placing an iframe at the end of a container

I am attempting to use jQuery to insert an iframe into a div. The current code accomplishes this, but it also erases all existing content within the div#off. How can I make the iframe appear at the bottom of the content in the div#off without removing any ...

Having issues with validating a form using Yup for a Checkbox input?

My form is built using mui, formik, and yup. If the input fields are empty (e.g. "surname") after clicking the submit button, an error is displayed. However, the issue arises when the checkbox for Terms of Service isn't checked as no error shows up. ...

Transform the features of a website into a sleek iOS application using Swift

Can I take an HTML website coded with JavaScript and integrate its functionality into my app using WebKit or another method? By using WebKit or WebViews, I can load an entire webpage into my app, automatically bringing along its functionality. However, i ...

Tips for Accessing a New Website Using the Floating Layer Close Button

How can I trigger the opening of a new browser window when a visitor clicks the close "x" on my floating layer ad? The close button is within an HTML link code ("a href"), but simply putting a URL in there does not seem to work. <script language=" ...

Shift an image to the left or the right

Is there a way to smoothly slide an image left or right using JavaScript? I am looking to have the image move gradually to the right. Could the setTimeout function in JavaScript be used to incrementally adjust the "left" value of the element's style? ...