loading json through javascript/D3

Question

I am trying to load a json file and then do some processing on it, however for some of the values that I load and display in the console I get Nans.

I pasted the code below and attached console output and I cannot figure out why I am getting a difference in the results/output on console. Any help is much appreciated

File Contents:

[
   {"sn": 12312312, "sc":0 , "dn": 42131221, "dc":1 }
 , {"sn": 42131221, "sc":1 , "dn": 21422111, "dc":2 }
]

Code:

<script src="js/d3-3-5-5.min.js"> </script>
<script type="text/javascript">
var margin = {top: 16, right: 0, bottom: 0, left: 0}
,width = 950 - margin.left - margin.right
,height = 700 - margin.top - margin.bottom;

var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");  

var dataParser = function(d) {
    var r= {
        act: Number(d.sc),
        id: Number(d.sn),
        x: parseFloat(d.sc) + Math.random(),
        y: parseFloat(d.sc) + Math.random(),
        radius: 5
    };
    return r

   }

var nodes = [];
var dataset;
d3.json("data/event.json", function(error, data) {    
dataset=data;
dataset.forEach(function(d) {
    new_r = dataParser(d);
    console.log(new_r);
    nodes.push(new_r);
    console.log(nodes);
 });   
});


// Force-directed layout
var force = d3.layout.force()
    .nodes(nodes)
    .size([width, height])
    .gravity(0)
    .charge(0)
    .friction(.91)
    .on("tick", tick)
    .start();



// Draw circle for each node.

var circle = svg.selectAll("circle")
    .data(nodes)
    .enter().append("circle")
    .attr("id", function(d) { return d.id; })
    .attr("class", "node")
    .style("fill", function(d) { return color(d.act); });  

function tick(e) {
   circle
     .style("fill", function(d) { return color(d.act); })
}

function color(activity) {

var colorByActivity = {
    "0": "#e0d400",
    "1": "#1c8af9",
    "2": "#51BC05",
    "3": "#FF7F00",
    "4": "#DB32A4",
    "5": "#00CDF8",
    "6": "#E63B60",
    "7": "#8E5649",
    "8": "#68c99e",
    "9": "#a477c8",
    "10": "#5C76EC",
    "11": "#E773C3",
    "12": "#799fd2",
    "13": "#038a6c",
    "14": "#cc87fa",
    "15": "#ee8e76",
    "16": "#bbbbbb",
  }

return colorByActivity[activity];

}

</script>

The weird thing is when I expand the json object on console even though it shows correct values for x and y the expanded object shows Nan and I can wrap my head around this.

I am using the developer tools in chrome. Thanks in advance.

Answer 1

Usually I close this question, as it's a duplicate many times over but I'll answer adding a little d3 help along the way.

First, your big problem, d3.json is an async operation. When it completes, it fires a callback function (your second argument to it). The code you have below d3.json that builds your force layour is actually executing before the d3.json finishes. It needs to execute in the callback.

Second, couple svg/d3 things:

1. Your circles have no radius, they won't appear
2. You don't position your circles in the tick function
3. You don't need all the number conversion and float parsing, it isn't doing anything

---

Here it is running a bit better.