D4mations.com

D3.js tutorial – 10 – Loading External Data



Part 10 of a series of tutorials on the Javascript library D3. In this video we load external JSON and CSV data.

Original source

d4mer

, , , ,

32 responses to “D3.js tutorial – 10 – Loading External Data”

  3. for people using d3 v5.2.0 onwards, the .json syntax has now been changes too d3.json("data.json").then(function(data){.

    Please upvote so people can see, i spent a lot of hours working out what the problem is!

  4. Does anyone know how to use the json or csv function in version 5? I was searching for hours on how to set up a local server, i thought I was doing something wrong there. I didn't even get any error message, the callback was just never called. Now i just changed my version from 5 to 4 and suddenly it worked 😀

  5. Hello every one. I checked my data in my .json file and there isn't any extra comma or… but still I get this error:
    Uncaught TypeError: Cannot read property 'length' of null

    What's the problem? I even added Format JSON in manage external tools in my gedit file, but it also couldn't solve the problem.

  12. Thank for the video.
    Can you tell me how I can access a variable from another script? This is what I trying to do. I have a main webpage with main.js that asks for validation (just password). If the password is correct I set a variable (in main.js) true. Then when I try loading a dependent webpage with dep.js, how can I access and get the value of the variable I had set in main.js using the dep.js file? My goal is to make sure that the dependent page does load until the correct login is issued on the main page.Unless if there's another effective way of doing, please let me know. I'm NOT using C# or PHP….just HTML and .js file…..

  17. For those using JavaScript. If you are attempting this and it says XMLRequest cannot insert bullshit — in your console(ctrl-shift-i)
    You need a server to run it.
    1. download nodejs, google nodejs lol (open your terminal)
    2.In your terminal run this command: npm install express -g
    3.find the directory(folder) you have index.html and json file.(drag and drop it in your text editor)
    4. create a new file, name it server.js, make sure its a javascript file with the js extension.
    5.copy and paste code below

    var express = require('express');
    var app = express();

    app.use(express.static(__dirname));

    app.listen(8888, function(){
    console.log("Your code is running on port 8888");
    });

    6.after you save this, go back to your terminal. and type in the command

    node server.js

    7.go to your browser and type in: localhost:8888

    If your code matches what the instructor has, you should see results.
    I hope this helps

  23. It didnt work for me too:
    XMLHttpRequest cannot load file:///C:/Users/Alexander/Documents/NetBeansProjects/overview/src/main/webapp/delete/mydata.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.Cn.i.send @ d3.v3.min.js:1i.(anonymous function) @ d3.v3.min.js:1Cn @ d3.v3.min.js:1oa.json @ d3.v3.min.js:5(anonymous function) @ pageTest.html:17
    d3.v3.min.js:3 Uncaught TypeError: Cannot read property 'length' of null

  25. Hur gör jag om använder node.js, mysql och har ett json-objekt innehållandes massor av data, men vill skriva ut det i D3? 🙂 Jag har till exempel en route innehållandes JA och NEJ-svar på en viss fråga, och jag skulle vilja göra ett pie chart av detta 🙂 Bra tutorials dock!

  26. Hello, Great tutorial! Just wanted to let people know, if you are following along on windows and are having issues with the json file not loading, follow these steps.
    1. Install latest version of Python.
    2. Add Directory listing to the windows "Path" environment variable. (google for instructions if you don't know what this means)
    3. Open windows command line and type "python" to test if python is working. (If not, path variable is probably wrong)
    4. Navigate to folder where webpage exists in the windows command line (example: C:D3DEMO)
    5 enter "python -m SimpleHTTPServer 8000" into command line. (leave this running)
    6. in web browser enter "http://localhost:8000"

    I know this has been addressed before but hopefully this will short cut the completely lost to get this up and running quickly.

  29. You need a comment or mini tutorial here about how to run this portion of the D3 test in a browser through a localhost, or some other method of getting it to work in the Chrome browser. My file will not load in any of my browsers, Chrome, Firefox, or Safari.

  31. I have the exact same code but I get the following errors when I looked up on Console, why I couldn't execute them:
    XMLHttpRequest cannot load file:///C:/D3/mydata.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.Nt.i.send @ d3.v3.min.js:1
    d3.v3.min.js:3 Uncaught TypeError: Cannot read property 'length' of null
    d3.v3.min.js:1 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/D3/mydata.json'.

    Can anyone tell me how do I resolve this

Leave a Reply