CODEWITHSUNDEEP
d3.js
Mika
Mika

Reputation: 53

Cannot read property 'values' of null

I am following this example, but I am using d3 v4. My d.date have no values. Can't figure out why. The csv file has correct time format. Can you help me? 

  <script type="text/javascript">
  
    var margin = {top: 20, right: 80, bottom: 30, left: 50},
    w = 800 - margin.left - margin.right,
    h = 600 - margin.top - margin.bottom;


   
      var x = d3.scaleTime()
          .domain([new Date("January 1, 2012"), new Date("May 31, 2017")])
          .range([0, w]);

     
     var y = d3.scaleLinear()
     .range([h, 0]);

    var xAxis = d3.axisBottom()
        .scale(x)
        .tickFormat(d3.timeFormat("%m/%Y"));

    var yAxis = d3.axisLeft()
        .scale(y)

    var parseDate = d3.timeParse("%d%m%Y");
    console.log(parseDate);
    
    var color = d3.scaleOrdinal(d3.schemeCategory10);
    
    var line = d3.line()
       .x(function(d) { return x(d.date); })
       .y(function(d) { return y(d.stat); });
       
    var svg = d3.select("body").append("svg")
        .attr("width", w + margin.left + margin.right)
        .attr("height", h + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

     svg.append("svg:g")
      .attr("class", "x_axis")
      .attr("transform", "translate(0," + h + ")")
      .call(xAxis);

    svg.append("svg:g")
        .attr("class", "y_axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("fill", "#000")
        .text("Numbers");
     
    var menu = d3.select("#menu select")
    .on("change", change);    


d3.csv("Data4.csv", function(csv) {
  console.log(csv);
  medias = csv
  redraw();
  
});


d3.select(window)
    .on("keydown", function() { altKey = d3.event.altKey; })
    .on("keyup", function() { altKey = false; });

var altKey;
  
function change() {
  clearTimeout(timeout);

  d3.transition()
      .duration(altKey ? 7500 : 1500)
      .each(redraw);
}

function redraw() {
    var nested = d3.nest()
		.key(function(d) { return d.indicatorCode;})
		.object(medias)
   
    var series = menu.property("value");
    var data = nested[series];
    console.log(data);


    var keyring = d3.keys(data[0]).filter(function(key) { 
     	    return (key !== "Sel_name" && key !== "monthCode" && key !== "indicatorCode" && key !== "date");
          // console.log(keyring);
     	});

    var transpose = keyring.map(function(name) {
      return {
        name: name,
        values: data.map(function(d) {
          return {date: new Date(parseDate(d.date)), stat: d[name]};
        })
      };
    });
     console.log(transpose);

    x.domain([
      d3.min(transpose, function(c) { return d3.min(c.values, function(d) { return d.date; }); }),
      d3.max(transpose, function(c) { return d3.max(c.values, function(d) { return d.date; }); })
      ]); 

    y.domain([
      d3.min(transpose, function(c) { return d3.min(c.values, function(d) { return d.stat; }); }),
      d3.max(transpose, function(c) { return d3.max(c.values, function(d) { return d.stat; }); })
      ]);

    var media = svg.selectAll(".media")
      .data(transpose)
      .enter().append("g")
      .attr("class", "media")
      .attr("id", function(d) { return d.name; });
   
    media.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });

    media.append("text")
     .attr("class", "names")
     .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
     .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.stat) + ")"; })
     .attr("x", 4)
     .attr("dy", ".35em")
     .text(function(d) { return d.name; });

    var mediaUpdate = d3.transition(media);
    
    mediaUpdate.select("path")
      .attr("d", function(d) { return line(d.values); });
      
    mediaUpdate.select("text")
       .attr("transform", function(d) { return "translate(" + x(d.values[d.values.length - 1].date) + "," + y(d.values[d.values.length - 1].stat) + ")"; });
     
      d3.transition(svg).select("y_axis")
          .call(yAxis);   
          
      d3.transition(svg).select("x_axis")
            .attr("transform", "translate(0," + h + ")")
          .call(xAxis);
}

var timeout = setTimeout(function() {
  menu.property("value", "NSPM").node().focus();
  change();
}, 7000);

function smedia() {
    var chkbox = document.getElementById("statmedia");
    if (chkbox.checked) {
        document.getElementById("media5").style.cssText = "opacity:1;",
        document.getElementById("media6").style.cssText = "opacity:1;",
        document.getElementById("media7").style.cssText = "opacity:1;",
        document.getElementById("media8").style.cssText = "opacity:1;"
    } else { 
        document.getElementById("media5").style.cssText = "",
        document.getElementById("media6").style.cssText = "",
        document.getElementById("media7").style.cssText = "",
        document.getElementById("media8").style.cssText = "";
    }};
    
function nstmedia() {
    var chkbox = document.getElementById("nonstmedia")
    if (chkbox.checked) {
        document.getElementById("media1").style.cssText = "opacity:1;",
        document.getElementById("media2").style.cssText = "opacity:1;",
        document.getElementById("media3").style.cssText = "opacity:1;",
        document.getElementById("media4").style.cssText = "opacity:1;",
        document.getElementById("media5").style.cssText = "opacity:1;",
        document.getElementById("media6").style.cssText = "opacity:1;",
        document.getElementById("media7").style.cssText = "opacity:1;",
        document.getElementById("media8").style.cssText = "opacity:1;",
        document.getElementById("media9").style.cssText = "opacity:1;"
    } else { 
        document.getElementById("media1").style.cssText = "",
        document.getElementById("media2").style.cssText = "",
        document.getElementById("media3").style.cssText = "",
        document.getElementById("media4").style.cssText = "",
        document.getElementById("media5").style.cssText = "",
        document.getElementById("media6").style.cssText = "",
        document.getElementById("media7").style.cssText = "",
        document.getElementById("media8").style.cssText = "",
        document.getElementById("media9").style.cssText = "";
    }};

	</script>

My cvs file looks like following:

Sel_name,indicatorCode,date,monthCode,media1,media2,media3,media4,media5,media6,media7,media8,media9,media10,media11,media12,media13 Num_posts_pmon,NPPM,31/01/2012,m1201,217,146,0,1114,0,0,0,0,0,0,0,0,54 Num_posts_pmon,NPPM,29/02/2012,m1202,159,161,0,1402,0,0,0,0,0,0,0,0,31 Num_posts_pmon,NPPM,31/03/2012,m1203,8,7,0,1212,0,0,0,24,0,0,0,28,17 Num_posts_pmon,NPPM,30/04/2012,m1204,10,14,0,1004,0,0,0,111,0,0,26,28,6 Num_posts_pmon,NPPM,31/05/2012,m1205,15,73,0,1070,0,0,0,76,0,0,127,557,6 Num_posts_pmon,NPPM,30/06/2012,m1206,102,396,0,834,0,0,0,97,0,0,23,893,1 Num_posts_pmon,NPPM,31/07/2012,m1207,148,276,0,993,0,0,0,63,0,0,67,602,0 Num_posts_pmon,NPPM,31/08/2012,m1208,167,189,0,909,34,0,0,54,0,0,31,606,3 Num_posts_pmon,NPPM,30/09/2012,m1209,176,196,0,991,254,0,0,80,0,0,81,608,8 Num_posts_pmon,NPPM,31/10/2012,m1210,121,184,0,1064,190,0,0,41,0,0,93,600,100 Num_posts_pmon,NPPM,30/11/2012,m1211,107,137,0,1301,78,0,0,68,0,0,110,416,116 Num_posts_pmon,NPPM,31/12/2012,m1212,73,108,0,1190,40,0,0,41,0,0,163,306,158 Num_posts_pmon,NPPM,31/01/2013,m1301,98,122,0,1266,121,0,0,53,0,0,137,329,201 Num_posts_pmon,NPPM,28/02/2013,m1302,92,108,0,1248,175,0,0,32,0,0,86,221,205 Num_posts_pmon,NPPM,31/03/2013,m1303,95,101,0,1330,88,0,0,59,0,0,112,160,243 Num_posts_pmon,NPPM,30/04/2013,m1304,122,127,0,1764,280,0,0,61,0,0,151,264,189 Num_posts_pmon,NPPM,31/05/2013,m1305,89,90,0,1645,630,0,785,123,715,0,144,275,203 Num_posts_pmon,NPPM,30/06/2013,m1306,83,103,0,1541,830,0,1105,130,1425,0,99,260,268 Num_posts_pmon,NPPM,31/07/2013,m1307,89,111,0,1468,895,0,1515,133,1443,0,40,145,318 Num_posts_pmon,NPPM,31/08/2013,m1308,82,86,0,1508,1105,0,1720,125,1488,0,65,227,250 Num_posts_pmon,NPPM,30/09/2013,m1309,264,117,0,1690,1900,14,1507,195,2515,0,105,226,251

Upvotes: 0

Views: 875

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

Your specifier is wrong, you're forgetting the forward slashes.

Since your dates are like this:

31/01/2012

Your specifier should be:

var parseDate = d3.timeParse("%d/%m/%Y");

Besides that, you don't need the new Date in the map function:

var date = "31/01/2012";
var parseDate = d3.timeParse("%d/%m/%Y");
console.log(parseDate(date))
console.log(new Date(parseDate(date)))
<script src="https://d3js.org/d3.v4.min.js"></script>

Upvotes: 2

Related Questions