Incorporate JSON code seamlessly into an HTML file with D3

I have been experimenting with a Sankey chart using the code available at this link: https://gist.github.com/d3noob/c2637e28b79fb3bfea13

Interestingly, I can view the chart in Firefox, but not in Chrome. I suspect this may be due to Chrome's restrictions on accessing data from external sources.

To resolve this, I attempted to integrate the JSON code directly into the script. However, despite my efforts, the chart still does not appear in Firefox.

I defined a variable containing the JSON dataset like so:

var dataset = {"nodes":[{"node":0,"name":"node0"},{"node":1,"name":"node1"},{"node":2,"name":"node2"},{"node":3,"name":"node3"},{"node":4,"name":"node4"}],"links":[{"source":0,"target":2,"value":2},{"source":1,"target":2,"value":2},{"source":1,"target":3,"value":2},{"source":0,"target":4,"value":2},{"source":2,"target":3,"value":2},{"source":2,"target":4,"value":2},{"source":3,"target":4,"value":4}]};

Then, I replaced the original line of code:

d3.json("sankey-formatted.json", function(error, graph) {

With this modified version (substituting the file name with the dataset variable):

d3.json(dataset, function(error, graph) {

Unfortunately, the chart still fails to display. I am puzzled as to why the Sankey chart is not visible. Any suggestions or insights are greatly appreciated.

Thank you

javascriptjsond3.jssankey-diagram

Answer №1

The issue at hand is related to using the d3.json function...

...which initiates a new request to retrieve the JSON file from the specified URL with the default MIME type of application/json.

To resolve this, the solution is actually quite straightforward: as you already have a variable containing all the data, simply name it as graph (since the d3.json function loads the file and creates a data array named graph):

var graph = {"nodes":[{"node":0,"name":"node0"},...

You can then remove the d3.json function entirely, making sure to delete the closing curly bracket/parenthesis as well:

d3.json("sankey-formatted.json", function(error, graph) {//remove this...

    //your function

});//...and make sure to remove this as well.

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

Angular controller fails to fetch scope variable in subsequent view

I'm currently working on implementing a login feature that directs a validated user to a personalized HTML view that greets them with their name. The initial view is a login page. When the user clicks the "Log In" button, the ng-click function is sup ...

javascriptangularjsscope

Utilize JavaScript to include HTTP headers in image requests

In my JS/HTML5 Project with angularjs, I have implemented protection for my API by setting an authorization token in the HTTP header. Now, I am also looking to secure access to images stored on the server. While I know how to accomplish this on the server ...

javascriptangularjs

Developing an interactive selector within the on() event handler

My goal is to utilize the on() event for managing dynamically created code. It functions properly when the selector is hardcoded in the on() event. However, I aim to enable it to select different elements depending on which box they choose. $("body").on( ...

javascriptjqueryhtml

Is it possible to implement a Promise.some() function that includes a timeout

Scenario - collect multiple URLs and cache the responses. URLs that are processed quickly (e.g. within 500ms) are included in the current pass, while those that take longer are still cached for use in the next round (approximately 10 minutes later in our a ...

javascriptnode.jspromisebluebird

The TypeScript factory class anticipates an intersection

In my code, I have a class factory called pickSomething that generates a specific type based on a key provided from a ClassMap: class A { keya = "a" as const; } class B { keyb = "b" as const; } type ClassMap = { a: A b: B } c ...

javascripttypescript

Show the button's value in the textbox and update the selected button's color using JavaScript

I am having difficulty changing the background color of a selected button after displaying its value in a textbox. The code below successfully displays the button value in the textbox, but I can't figure out how to change the background color of the s ...

javascriptjquery

Struggling with this mixed content problem

Encountering a problem while loading a js file: https://code.jquery.com/jquery-1.11.1.min.js, which is being loaded on my webpage in this manner: <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> Upon loading my webpage, an ...

javascriptcross-domainmixed-content

The next-auth/discord callbacks do not make any changes to the data

Currently, I am utilizing the next-auth/discord and facing an issue with the session callback not setting the user id to the session property as expected. [...nextauth].js import NextAuth from "next-auth/next"; import DiscordProvider from " ...

javascriptnext.jsnext-auth

Exploring JS Object Property Access and Iteration with an Illustrative Example

Something strange is happening... the code snippet below generates a table displaying a list of SNMP object/values from any OID provided for walking. Strangely, the variable 'jason' is not behaving as expected. Initially, I am unable to access t ...

javascriptajax

Passing an array through ajax from PHP to JavaScript using a properly formatted JSON structure

I began with an array generated by PHP and retrieved via ajax, which had the following structure: Array ( [0] => {id:"12",from:"09:00:00",to:"15:00:00"} [1] => {id:"13",from:"08:00:00",to:"10:00:00"} [2] => {id:"12",from:"15:00:00",to ...

javascriptphparraysjsonajax

Display a delete icon when hovering over a Chip component from Material-ui

Recently, I've been exploring ways to implement the on-hover functionality for a chip. What I'm looking for is when I hover over a chip in an array of chips, it should display a delete icon. Below is the code snippet I've been working on: ...

javascriptreactjsmaterial-ui

Ensuring JS consistently monitors changes in value

Is there an equivalent of (void update) in Unity that is called every frame in Web Development (using JavaScript)? "I want it to continuously check if certain values have changed and then update them accordingly." let governmentprice = parseFloat(select ...

javascripthtmlcss

What is the process for incorporating JavaScript-generated coordination into an HTML form?

As a newcomer to Javascript, I am on a mission to integrate geo coordination directly into an HTML form input field. After learning from W3Schools how to generate user latitude and longitude Coordination, I am now eager to input them directly into an HTML ...

javascripthtml

Is the confirmation window not showing up on the active tab in Chrome Extension? It only seems to appear on the popup.html tab

I have created a Chrome extension for an e-gym that is designed to prompt a confirm window after every hour of using the Chrome browser. The issue I am facing is that the confirm window only appears on popup.html. I want to activate my extension so that it ...

javascripthtmlcssgoogle-chrome-extensionbootstrap-5

Using Vue to perform multiplication on data table entries

Is there a way I can use Vue.js to multiply values in a table? The values provided are for 100g of the product. For example, if I input 200g, I would like the values to double: 318kcal, 12 fat, 48 carbs, 8 protein, and 2% iron. Similarly, inputting 50g sho ...

javascriptvue.jsvuetify.js

Converting Currency Codes to Symbols using PHP JSON

My goal is to develop a system that can accurately return the official currency symbol based on the input of a 3-letter currency code. For example, if the function receives 'USD', it should return the '$' sign, and likewise for all curr ...

phparraysjsoncurlcurrency

Collect user input from an array of checkboxes

After spending hours attempting to retrieve data from an array of checkboxes with the same name, I am still facing difficulties. <input type="checkbox" name="node"/> var selectedValues = []; $(document.getElementsByName("node")).each( ...

javascriptajaxmodel-view-controller

selecting a number at random from a defined array

I am looking to generate a series of lottery numbers like the following: my list could be between 1 - 100, or it might range from 1 - 200, or even 1 - 300 select 35 random numbers from the chosen list. choose another set of 25 numbers from the list. pic ...

javascriptarraysrandom

Is it possible to only make the text in a Bootstrap button act like a link, instead of the whole button itself?

As I start learning HTML and CSS with the help of Bootstrap, I'm encountering an issue with button functionality. The text within the button is acting like a link, but the entire button should be clickable. I'm not sure if I need more than just t ...

javascripthtmlcssbuttontwitter-bootstrap

How does Jackson manage to assign values to private properties without the use of setters?

I am intrigued by Jackson's ability to create objects with private properties/fields without using setters and only utilizing the object's empty constructor. The reason for my inquiry is that during deserialization, I want certain properties to ...

javajsonjackson