Cannot read property 'values' of null - d3.js

Question

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

Answer 1

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>