how to import data into d3js correctly

StackOverflow https://stackoverflow.com/questions/17794704

  •  03-06-2022
  •  | 
  •  

Question

I get pretty excited about the D3.js studying and presentation. And I get stuck on the data importing part. I've tried one month now, and couldn't find a solution for it.

If the data is simply pasted in the code, the scripts works perfectly fine. But once I tried to import the data from outside the script. The webpage won't show anything.

Can someone be kind enough to give me a hand?

Here are my scripts and data:

Working version:

<!DOCTYPE html>
<html>
<head>    
    <charset=utf-8">
    <title>Successful Data Comination In Bar Chart</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
    <script>

    var dataset = [{"name":"AAA", "age":10},{"name":"BBB", "age":20},{"name":"CCC", "age":30}];

    var canvas = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 500);

    canvas.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("width", function (d) { return d.age*10; })
            .attr("height", 48)
            .attr("y", function (d,i) { return i*50; })
            .attr("fill", "gray");

    canvas.selectAll("text")
            .data(dataset)
            .enter()  
            .append("text")
            .attr("fill", "white")
            .attr("x", 2)
            .attr("y", function (d,i) { return i*50 +27; })
            .text(function (d) { return d.name + " "  + d.age; }); 

    </script>
</body>
</html>

Not working version:

<!DOCTYPE html>
<html>
<head>    
    <charset=utf-8">
    <title>Testing Pie Chart</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>

<body>
    <script>

    var dataset = [];

    d3.json("mydata.json", function(data) {

        dataset = data;

        var canvas = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 500);



        canvas.selectAll("rect")
            .data(dataset)
            .enter()
                .append("rect")
                .attr("width", function (d) { return d.age*10; })
                .attr("height", 48)
                .attr("y", function (d,i) { return i*50; })
                .attr("fill", "gray");

        canvas.selectAll("text")
            .data(dataset)
            .enter()  
                .append("text")
                .attr("fill", "white")
                .attr("x", 2)
                .attr("y", function (d,i) { return i*50 +27; })
                .text(function (d) { return d.name + " "  + d.age; }); 
    });

    </script>
</body>
</html>

The json data named "mydata.json" is like:

[
    {"name": "AAA", "age": 10},
    {"name": "BBB", "age": 20},
    {"name": "CCC", "age": 30}
]

I am new to Stackoverflow, and trying to edit it as I want, but not perfect. Please feel free to let me know if you get confused about the codes. I will explain, cause I really want to solve this. Thanks a lot!

Thanks for tipping me off! Looking forward to your reply keenly!

Was it helpful?

Solution

This is a security feature in browsers known as the same-origin policy. You can view this in action by firing up your browser-of-choice's dev tools and seeing what happens when it tries to fetch your JSON file.

There are various methods to work around this. If you have access to web hosting, throw it up there. Otherwise, choose a method to run a lightweight server locally. The simplest one that people are routinely told is to serve an index.html file in python:

#(in v2.x)
python -m SimpleHTTPServer 8000

#(in v3.x)
python -m http.server 8000

then browsing to localhost:8000. This is explained in slightly more detail on the d3 wiki. For more in-depth explanations and whatnot, I recommend some reading.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top