d3.js & json - simple sample code?

Question

There are some examples to get data from external json file in d3.js. But these samples do not show the json, so I really want to see how it works.

I have this json file test.json, and it looks like

[
    {"a":"-1.14","b":"4.14"},
    {"a":"-0.13","b":"1.38"},
    {"a":"-4.19","b":"1.43"},
    {"a":"-0.21","b":"3.34"}
]

And I want to make a scatterplot with these data.

In the d3.js script. I added so far.

var width = 400;
var height = 400;

var x = d3.scale.linear()
    .domain ([-5, 5])
    .range([0, width]);
var y = d3.scale.linear()
    .domain ([-5, 5])
    .range([0, height]);

var chart = d3.select("body").append("svg")
    .attr("width", width+70)
    .attr("height", height+70)
    .attr("class", chart)
    .append("g")
        .attr("transform", "translate(30, 30)");


chart.selectAll("xline")
    .data(x.ticks(11))
    .enter().append("line")
        .attr("x1", x)
        .attr("x2", x)
        .attr("y1", 0)
        .attr("y2", height)
        .style("stroke", "#ccc");

chart.selectAll("yline")
    .data(y.ticks(11))
    .enter().append("line")
        .attr("y1", y)
        .attr("y2", y)
        .attr("x1", 0)
        .attr("x2", width)
    .style("stroke", "#ccc");

If I use this dataset:

var dataset = [ [-1, -3], [2, 4], [3, -4], [-3, 1]];

I added this and it works fine.

   chart.selectAll("scatter-dots")
      .data(dataset)
      .enter().append("circle")
        .attr("cx", function (d) { return x(d[0]); } )
        .attr("cy", function (d) { return y(d[1]); } )
        .attr("r", 10)
        .style("opacity", 0.6);

I am wondering how I should change this part that calls data, if I use an external json file. I will really appreciate someone can teach me this! Many thanks.

paxRoman · Accepted Answer · 2012-05-13 19:52:33Z

29

Try something like this

d3.json("data.js", function(data) {
alert(data.length)
});

where data.js or data.json or whatever you want to call it as long as it has js content is your json file. Also try reading: https://github.com/mbostock/d3/wiki/Requests. All your code that uses the json data will be called from the json callback function.

answered May 13, 2012 at 19:52

paxRoman

2,0723 gold badges19 silver badges32 bronze badges

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

5 Comments

laycat Over a year ago

this was helpful to me on 5th june 2013

HIRA THAKUR Over a year ago

@laycat:is it possible to render it locally...i mean if i dont have a json on server and just on my local machine how do i go about it.. I cant even give you a fiddle..bcoz you have to upload you json on server first...

laycat Over a year ago

@MESSIAH I maybe wrong however it depends on your framework. for me I am using django, I could read the json from a localhost directory to django at views.py and pass it as a context to the "template" aka .html page

laycat Over a year ago

@MESSIAH i may be wrong however you could do a manual generation of your json data on a localhost html page and grab it via d3.json

Everett Over a year ago

This is old, but in case anyone comes across this, the syntax for the d3.json() method changed in D3 version 5. D3 Version 4: d3.json("some_source_url", function(response) { ... } D3 Version 5: d3.json("some_source_url").then(function(response) {...}

strack · Accepted Answer · 2012-05-14 18:53:11Z

15

You can also use Jquery JSON calls if you're more familiar with those. Or you can even just use a script tag that references a variable being assigned to JSON, like so:

<script src="us-pres.json" type="text/javascript"></script>

where us-pres.json starts like this:

var dataset = {"state":"US",...

As long as you get the JSON into a variable (collection), d3 doesn't really care how you do it. Once it's there, you just assign it using the d3 .data(dataset) call.

answered May 14, 2012 at 18:53

strack

5744 silver badges12 bronze badges

1 Comment

Rafael Emshoff Over a year ago

... and in the "cx" and "cy" attributes do return x(d.property1) return y(d.property2).

Collectives™ on Stack Overflow

d3.js & json - simple sample code?

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related