CODEWITHSUNDEEP
javascriptd3.js
tadon11Aaa
tadon11Aaa

Reputation: 420

Return values from a map

I have a script that originated in D3 V3 and I'm trying to rebuild it in V5.

I'll go through the code and then the problem. This is the relevant part of code.

var height = 570
var width = 510

var svg = d3.select("#chart").append("svg")
    .attr("width", width + 160)
    .attr("height", height + 90)
    .append("g")
    .attr("transform", "translate(" + 160 + "," + 90 + ")");

// this has a count for how many are in each group
var grpcnts = {
    met: { '1960': 0, '1970': 0, '2010': 0, label: "First Met", x: 1, y: 1 },
    romantic: { '1960': 0, '1970': 0, '2010': 0, label: "Romantic", x: 2, y: 1 },
    lived: { '1960': 0, '1970': 0, '2010': 0, label: "Live Together", x: 3, y: 1 },
    married: { '1960': 0, '1970': 0, '2010': 0, label: "Married", x: 4, y: 3 },
}

var x = d3.scaleBand()
    .domain([1950, 1970, 1980, 2010])
    .range([0, width]);

var y = d3.scaleBand()
    .domain(d3.keys(grpcnts))
    .range([height, 0]);

var sched_objs = [],
    curr_index = -1;

// Load data 
d3.tsv("timelines.tsv")
    .then(function(data) {

    data.forEach(function(d) {
        var day_array = d.timeline.split(",");
        var activities = [];
        for (var i=0; i < day_array.length; i++) {
            // Duration
            if (i % 2 == 1) {
                activities.push({'act': day_array[i-1], 'duration': +day_array[i]});
            }
        }
        sched_objs.push(activities);
    });

    // A node for each person's schedule
    var nodes = sched_objs.map(function(o,i) {
          var act = o[0].act;
          var init_x = x(+data[i].decade) + Math.random();
          var init_y = y('met') + Math.random();
          var col = "#cccccc";
          grpcnts[act][data[i].decade] += 1;

        return {
      act: act,
      radius: maxRadius,
      x: init_x,
      y: init_y,
      decade: data[i].decade,
      color: color(act),
      married: false,
      moves: 0,
      next_move_time: o[0].duration,
      sched: o
        }
      });
    }) // end tsv

This is a sample of the dataset.

"decade"    "timeline"
1970    "met,4,romantic,14,lived,1,married,-99"
1970    "romantic,2,married,-99"
1970    "met,9,romantic,48,married,-99"
1970    "romantic,20,married,-99"
1970    "met,2,romantic,10,married,-99"
1970    "met,13,romantic,16,married,-99"

The problem is that the x and y fields show up as NaN.

enter image description here

I've added console.log statements before the return clause and the init_x and init_y values print out the right numbers.

I've tested the x() and y() functions with all the valid inputs and they return the right values. I've tested Math.random() which appears to work just fine.

None of the other fields show up as NaN which leads me to believe that the syntax for returning multiple values is right. I've also tried wrapping init_x and init_y in Number().

Upvotes: 0

Views: 190

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102188

Unfortunately your code is full of errors, to the point that we cannot make it run without a major refactor.

However, just to answer your current specific question ("where are the NaNs coming from?"), this is the problem (line 212 in your pasteBin):

var k = 0.03 * this.alpha;

Since there is no alpha, but alpha() instead, when you use k (which is undefined) latter on...

o.x += (x(+o.decade) - o.x) * k * damper;

... you get that nice and beautiful NaN.

I'd like to emphasise again that this change will not make your code work, you have a lot of other problems to fix.

Upvotes: 1

Related Questions