D3.js tutorial - 10 - Loading External Data
Why Stack Overflow recommends it
Stack Overflow users cite it as the tutorial they were following when they hit errors loading JSON or CSV in D3, and one commenter said it helped them get their d3.json code working.
Recommended by 1 people across 1 different months, 2013 to 2018.
What it is
Part 10 of d3Vienno's D3.js tutorial series, a screencast showing how to load external JSON and CSV files into a D3 visualization and bind the data to SVG elements. It builds on earlier parts of the series that draw bar charts with rectangles.
What people said
Recommends user1552586 · 2013-06 · Stack Overflow · on “Javascript D3.js d3.json() function not accepting valid json, what to do to use it the same as d3.csv?”
Alright, Thach Mai was right about the format. I also had problems with the "map" and other stuff in the code. This video helped me nail it down. Thanks for the help! [this video]
Cites Amre · 2013-06 · Stack Overflow · on “Text doesn't appear in DOM object?”
I'm follow a youtube tutorial in which the the user is appending the the text to a rectangle, it seems to work for him, but it doesn't work for mine. src: [this video]
Cites user3588132 · 2014-05 · Stack Overflow · on “(anonymous function) Error with D3.Js”
When using D3.Js and following this exact tutorial [this video] I'm getting the error (anonymous function) in the console. In line 20 there is: canvas.selectALL Can anyone point me in the right direction? <script> d3.json("document.json", function (data) { var canvas = d3.select("body").append("svg") .attr("width", 500) .attr("height", 500) canvas.selectALL("rect") .data(data) .enter() .append("rect") .attr("width", function (d) { return d.age * 10; }) .attr("height", 50) .attr("y", function (d, i) { return i * 50; }) .attr("fill", "blue") }) </script>
Cites AndreyIto · 2017-02 · Stack Overflow · on “d3 javascript: reading json file”
I want to write a code snippet in d3js that will read a json file, and display a simple bar chart based on the contents of the json file. My json file, mydata.json , is: [ {“name”: “Apollo_Diomedes”, “age”: 300}, {“name”: “Bjorn_the_Fellhanded”, “age”: 900}, {“name”: “Jonah_Orion”, “age”: 500} ] d3js code snippet, from index.html : <body> <script> d3.json("mydata.json", function(data) { var canvas = d3.select("body").append("svg") .attr("width", 500) .attr("height", 500) canvas.selectAll("rect") .data(data) .enter() .append("rect") .attr("width", function(x) { return x.age; }) .attr("height", 45) .attr("y", function(x, i) { return i * 50; }) .attr("fill", "blue") }); </script> </body> I'm us
Cites nganlong · 2018-01 · Stack Overflow · on “Error when loading .json/.csv in”
I am trying to learn D3 with this video [this video] , but I got stuck when I try to load an external file. The codes are as below: index.html <html> <head> <meta charset="utf-8"> <title>D3 Example</title> <script type="text/javascript" src=" [LINK] "></script> <body> <script> d3.json("mydata.json", function(data){ var canvas=d3.select("body") .append("svg") .attr("width", 500) .attr("height", 500); canvas.selectAll("rect") .data(data) .enter() .append("rect") .attr("width", function(d){return d.age*10;}) .attr("height", 50) .attr("fill", "blue") .attr("y", function(d,i){return i * 60}); canvas.select("text") .data(data) .enter() .append("text") .attr("fill", "white") .attr("y", function(d, i){re