• Tuesday , 23 October 2018

D3.js tutorial – 10 – Loading External Data

Code Canyon



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

Original source

3d Ocean

Related Posts

32 Comments

  1. iloveJesus
    October 11, 2018 at 22:28

    Thank you for the tutorial, however, i'm not able to use d3.json with my local file and does it need to be on a web server?

  2. Milind Kulkarni
    October 11, 2018 at 22:28

    d3.v5.min.js:2 Fetch API cannot load error

    what should i do? doesn't work

  3. TJ Detweiler
    October 11, 2018 at 22:28

    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. Jack42
    October 11, 2018 at 22:28

    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. Maede Nouri
    October 11, 2018 at 22:28

    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.

  6. Mixel Laquoa
    October 11, 2018 at 22:28

    code please?

  7. KAICHENG WANG
    October 11, 2018 at 22:28

    Use Brackets to run it.

  8. Bimal Grg
    October 11, 2018 at 22:28

    Here is the simple 3 step solution . ..
    – Download atom text editor from http://www.atom.io
    – Go to atom text editor settings and install atom-live-server.
    – Press ctrl + alt + 3 which activates server on localhost:3000 url.

  9. Jaewoo KO
    October 11, 2018 at 22:28

    Thanks for nice tutorial.

  10. Vinoth Kumar
    October 11, 2018 at 22:28

    HI i need to change my code: i am using dynamic data in my d3.js can you post tutorial about to change dyanamic data to json file. here i have attached my sample code https://jsfiddle.net/eby9cxmq/ can you change my dynamic code into json file

  11. Daniel Chemey
    October 11, 2018 at 22:28

    Hey! Love the videos btw. I was wondering if you could attach your files to the description in the link so it would be easier to follow along? Thank you!

  12. Sleeks Jay
    October 11, 2018 at 22:28

    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…..

  13. Pranav Singh
    October 11, 2018 at 22:28

    A beginner must watch very good tutorials.

  14. pcfbeck24
    October 11, 2018 at 22:28

    These tutorials helped me immensely! Tried reading other tutorials, but none were as simple & straight forward as yours. I really appreciate the step by step walk through.

  15. David Bingham
    October 11, 2018 at 22:28

    I am getting error: canvas.selectAll(…).data(…).enter is not a function

  16. Troy Dawson
    October 11, 2018 at 22:28

    Great video thank you.. the way you explain it makes perfect sense…

  17. CandidatesVoice
    October 11, 2018 at 22:28

    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

  18. Mulagura
    October 11, 2018 at 22:28

    Good One Swedish

  19. Danny. O'donoghu.
    October 11, 2018 at 22:28

    How to give a fill color to the Canvas ??
    it is not showing color

  20. Joseph Blackwell
    October 11, 2018 at 22:28

    The Csv wouldn't load, I think it would load the "age" but none of the names, I'd have blank text fields in the elements tab, any suggestions?

  21. Андрей Филиппов
    October 11, 2018 at 22:28

    Mysql+PHP+D3.js That would be an example!

  22. Abdul-Baqi Sharaf
    October 11, 2018 at 22:28

    mydata.json is loading fine but not mydata.csv

  23. GlassedUA
    October 11, 2018 at 22:28

    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

  24. Pongsakorn Thawornpan
    October 11, 2018 at 22:28

    Excuse me,
    I have a problem when I used d3.jason(" ")
    It didn't work
    I cannot run the script It turned out to be an empty page

  25. Linus Svahn
    October 11, 2018 at 22:28

    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. John Rinker
    October 11, 2018 at 22:28

    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.

  27. mimiraluna
    October 11, 2018 at 22:28

    Thank you very much for this great tutorial!!

  28. Alf Bae
    October 11, 2018 at 22:28

    Hi. if you have similar problem with Gogolye in Python 3, it should be "python -m http.server [portnumber]"

  29. Monique Grimord
    October 11, 2018 at 22:28

    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.

  30. sivasaravanakumar k
    October 11, 2018 at 22:28

    how load data mongodb into d3.js…how to process TB Data in d3.s it is possible or not

  31. Gogolye
    October 11, 2018 at 22:28

    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

  32. Knil Sama
    October 11, 2018 at 22:28

    I wish saw this video a few days before, really sum it up

Leave A Comment

You must be logged in to post a comment.