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.

I can't reproduce your problem here. Also, there's more code to this you aren't sharing with us. For instance, what's creating the px and py values? — Mark
– Mark, Commented Mar 3, 2018 at 22:12
Also, when you print to the console and expand, you are seeing what the values are currently in memory. Not what they were when you printed it. — Mark
– Mark, Commented Mar 3, 2018 at 22:12
Thank you Mark for your reply, I have pasted the entire code that I am working with. I cant see the circles I am trying to draw dynamically and the console suggests x and y values are Nan. Is there any other way to see/preserve the values of x and y for debugging. Sorry it might be a stupid question, I've just started with js — prog_noob
– prog_noob, Commented Mar 3, 2018 at 23:06

Mark · Accepted Answer · 2018-03-03 23:24:59Z

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:

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

Here it is running a bit better.

answered Mar 3, 2018 at 23:24

Mark

109k20 gold badges180 silver badges238 bronze badges

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

1 Comment

prog_noob Over a year ago

Thanks a lot for the tips and help :-)

Collectives™ on Stack Overflow

loading json through javascript/D3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related