d3 javascript: reading json file

Question

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 using d3 v4: <script src="http://d3js.org/d3.v4.js"></script>.

I've tried opening the index.html file directly, and opening a local server and navigating to localhost:8080 as directed here; both just show me a blank screen. Both index.html and mydata.json are saved in the same folder on my desktop.

For those interested, it's actually this slightly outdated youtube tutorial; it runs d3 v3.

P.S. I can read in info from a CSV, but not json.

you have a problem with parsing the JSON data. The problem is in your JSON formatted data not how you call it. i just replace your “ with ' and it works just fine [ {"name": "Apollo_Diomedes", "age": 300}, {"name": "Bjorn_the_Fellhanded", "age": 900}, {"name": "Jonah_Orion", "age": 500} ] — monesul haque
– monesul haque, Commented Feb 26, 2017 at 15:50

Johannes Filter · Accepted Answer · 2017-02-26 15:24:00Z

1

It sounds like you have problems with parsing the JSON data. Try replacing your quotation marks to the English ones (").

And in general, always check the console log of your Web browser. I am certain that you will some error printed there.

answered Feb 26, 2017 at 15:24

Johannes Filter

1,9313 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

d3 javascript: reading json file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related