Florian Bury Florian Bury - 4 months ago 21
JSON Question

Initialize data from json variable d3js (javascript)

to create a dynamic graphic, i get a json variable from a REST server. I found a way to initialize my graphic from this variable, but i have to apply a function on each data inside before.

Here is a part of my current code :

d3.json("test.json", function(data) {
var parse = d3.time.format("%Y-%m-%d %H").parse;

types = d3.nest()
.key(function(d) { return d.type; })
.entries(stocks = data);

types.forEach(function(s) {
s.values.forEach(function(d) { d.jour = parse(d.jour); d.count = +d.count; });
s.maxCount = d3.max(s.values, function(d) { return d.count; });
s.sumCount = d3.sum(s.values, function(d) { return d.count; });
});
var g = svg.selectAll("g")
.data(types)
.enter().append("g")
.attr("class", "type");

setTimeout(lines, duration);
});


As you can see , my code use a json file, but it's just for some tests. I can't use this method because my data come from a REST server. Do you have any idea to replace utilisation of the json file to a variable containing the json.

Here, is an example of content from my json :

[
{"type":"CAD","jour":"2016-03-29 00","count":28697},
{"type":"CAD","jour":"2016-03-29 01","count":29156},
{"type":"CAD","jour":"2016-03-29 02","count":29799},
{"type":"CAD","jour":"2016-03-29 03","count":30095},
{"type":"CAD","jour":"2016-03-29 04","count":28430},
{"type":"CAD","jour":"2016-03-29 05","count":29124},
{"type":"CAD","jour":"2016-03-29 06","count":28073},
{"type":"CAD","jour":"2016-03-29 07","count":29398},
{"type":"CAD","jour":"2016-03-29 08","count":28522},
{"type":"CAD","jour":"2016-03-29 09","count":15685},
{"type":"ISM","jour":"2016-03-29 00","count":39170},
{"type":"ISM","jour":"2016-03-29 01","count":39143},
{"type":"ISM","jour":"2016-03-29 02","count":39061},
{"type":"ISM","jour":"2016-03-29 03","count":39066},
{"type":"ISM","jour":"2016-03-29 04","count":38529},
{"type":"ISM","jour":"2016-03-29 05","count":39019},
{"type":"ISM","jour":"2016-03-29 06","count":38354},
{"type":"ISM","jour":"2016-03-29 07","count":38195},
{"type":"ISM","jour":"2016-03-29 08","count":37907},
{"type":"ISM","jour":"2016-03-29 09","count":20015}
]


Thanks in advance.

Answer

Just make your server call and initialize the D3 graphic when you received the data from it. Just put your code in the success callback:

$.getJSON('/getGraphicData', function(data) {
  var parse = d3.time.format("%Y-%m-%d %H").parse;

  types = d3.nest()
    .key(function(d) {
      return d.type;
    })
    .entries(stocks = data);

  types.forEach(function(s) {
    s.values.forEach(function(d) {
      d.jour = parse(d.jour);
      d.count = +d.count;
    });
    s.maxCount = d3.max(s.values, function(d) {
      return d.count;
    });
    s.sumCount = d3.sum(s.values, function(d) {
      return d.count;
    });
  });
  var g = svg.selectAll("g")
    .data(types)
    .enter().append("g")
    .attr("class", "type");

  setTimeout(lines, duration);
});
Comments