d3.js filter() not displaying expected results

Question

The filter command is not working as I expected. How would I refactor the code to get the requested output?

In the .filter((d,i) => condition) syntax, d is an object with the x (date/time string) and y (num cars produced that shift) axis values for that datapoint and i is the index of that datapoint on the linechart. Why does d.x != testdate#? ^{Note: testdate1 and testdate2
are datetime strings that precisely match two of the date/time strings in the datapoints}
While troubleshooting this, I also tried to view the typeof for d.x with no success.

Test1 - commented out - inverse of tests 2 and 3, and it works (demonstrates that the condition in tests 2 and 3 is not being matched because the code to show the dots works)
Test2 - Not seeing greendot class on Mon Jan 04 08:00 data point (shorthand syntax)
Test3 - Not seeing reddot class on Sat Jan 02 08:00 data point (traditional syntax, diff datapoint)
Test4 - Similar to above, using console.log
Test5 - testing typeof - console.log displays nothing, console.dir displays only text word "object" Test6 - console.log shows that one of the datapoints is a perfect match for testdate1

jsFiddle for experimenting

clearconsole();
var chartWidth = 500;
var myCSV = [ 
{"shift":"1","date":"01/01/2016/08/00/00","car":"178","truck":"125","bike":"317","moto":"237"},
{"shift":"2","date":"01/01/2016/17/00/00","car":"125","truck":"189","bike":"125","moto":"273"},
{"shift":"3","date":"02/01/2016/08/00/00","car":"140","truck":"219","bike":"328","moto":"1252"},
{"shift":"4","date":"02/01/2016/17/00/00","car":"222","truck":"290","bike":"432","moto":"378"},
{"shift":"5","date":"03/01/2016/08/00/00","car":"200","truck":"250","bike":"420","moto":"319"},
{"shift":"6","date":"03/01/2016/17/00/00","car":"230","truck":"220","bike":"310","moto":"413"},
{"shift":"7","date":"04/01/2016/08/00/00","car":"155","truck":"177","bike":"377","moto":"180"},
{"shift":"8","date":"04/01/2016/17/00/00","car":"179","truck":"203","bike":"405","moto":"222"},
{"shift":"9","date":"05/01/2016/08/00/00","car":"208","truck":"185","bike":"360","moto":"195"},
{"shift":"10","date":"05/01/2016/17/00/00","car":"150","truck":"290","bike":"315","moto":"280"},
{"shift":"11","date":"06/01/2016/08/00/00","car":"200","truck":"220","bike":"350","moto":"205"},
{"shift":"12","date":"06/01/2016/17/00/00","car":"230","truck":"170","bike":"390","moto":"400"},
];
var testdate1 = 'Mon Jan 04 2016 08:00:00 GMT-0500 (Eastern Standard Time)';
var testdate2 = 'Sat Jan 02 2016 08:00:00 GMT-0500 (Eastern Standard Time)';
lc1 = dc.lineChart("#line1");

var dateFormat = d3.time.format("%d/%m/%Y/%H/%M/%S");
myCSV.forEach(function (d) {
 d.date = dateFormat.parse(d.date);
});

myCSV.forEach(function (d) {
 d['car'] = +d['car'];
});

//console.log(myCSV);

var facts = crossfilter(myCSV);
var dateDim = facts.dimension(function (d) {return d.date});

var carDim = facts.dimension(function (d) {return d['car']});
var dgCar = dateDim.group().reduceSum(function (d) {return d['car']});

var minDate = new Date ("2016-01-01T08:00:00.000Z");
var maxDate = new Date ("2016-01-06T17:00:00.000Z"); 

var maxY = d3.max(myCSV, function(d) {return d['car']});

lc1
.renderArea(false)
.width(chartWidth)
.height(250)
.dimension(dateDim)
.group(dgCar)
.defined(function(d) {if(d.y !==null) {return d.y;}})
.transitionDuration(1000)
.margins({top: 30, right: 20, bottom: 35, left: 60})
.yAxisLabel('Cars')
.renderHorizontalGridLines(true)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]));
lc1.yAxis().ticks(5);
lc1.xAxis().ticks(3);

lc1.on('renderlet', function(lc1) {
console.log('myCSV.length: '+myCSV.length);
   var allDots1 = lc1.selectAll('circle.dot');
   //allDots1.filter((d,i) => i != testdate1).classed('pinkdot',true);
   allDots1.filter((d,i) => i === testdate1).classed('greendot',true);
   allDots1.filter(function(d){ return d.x===testdate2 }).classed('reddot',true);
   allDots1.filter(function(d){ if (d.x===testdate2) console.log('Found it') });
   allDots1.filter(function(d){ var xyz = d.x; console.dir(typeof xyz) });
   allDots1.filter((d, k) => console.log("\r\n["+d.x+"]\r\n["+testdate1+"]") );

});//END lc1.on(renderlet)

dc.renderAll();
dc.redrawAll();

function clearconsole(){
console.API;
if (typeof console._commandLineAPI !== 'undefined') {
    console.API = console._commandLineAPI; //chrome
} else if (typeof console._inspectorCommandLineAPI !== 'undefined') {
    console.API = console._inspectorCommandLineAPI; //Safari
} else if (typeof console.clear !== 'undefined') {
    console.API = console;
}
console.API.clear();
}

svg{height:280px;width:500px;}
.greendot{stroke:green !important; fill:green !important; fill-opacity:1 !important;} 
.reddot{stroke:red !important; fill:red !important; fill-opacity:1 !important;}
.pinkdot{stroke:pink; fill:pink; fill-opacity:1 !important;}

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link href="http://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet"/>

<svg id="line1"></svg>

score 4 · Accepted Answer · answered May 22 '17 at 18:20

4

When you compare dates, use getTime() method, eg.:

allDots1.filter(function(d){ 
    console.log(d.data.value, d.x, +d.x, testdate2, d.x===testdate2, +d.x===testdate2); 
    return +d.x===testdate2; // + is a shortcut for .getTime() 
  }).classed('reddot',true);

Additionally, you should set the timezone's offset,

var myCSV = [   
  {"shift":"1","date":"01/01/2016/08/00/00/+0500","car":"178","truck":"125","bike":"317","moto":"237"},
  {"shift":"2","date":"01/01/2016/17/00/00/+0500","car":"125","truck":"189","bike":"125","moto":"273"},
  {"shift":"3","date":"02/01/2016/08/00/00/-0500","car":"140","truck":"219","bike":"328","moto":"1252"},
  //...
];

//...

var dateFormat = d3.time.format("%d/%m/%Y/%H/%M/%S/%Z");

Demo

Reference #1: Comparison of dates

Reference #2: Javascript's '+' unary operator

Reference #3: D3 v3 timeFormat

answered May 22 '17 at 18:20

davcs86

3,926
2
18
30

Thanks - great answer. Question: what is the `typeof` of `d.x` before you used the unary operator to convert it to a date? – crashwap May 22 '17 at 22:44
1

`d.x` is an `Date Object`, but `typeof` returns `object` [MDN ref](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/typeof), but there are alternatives to check if an object is a `Date object`, like [these](https://stackoverflow.com/a/643827/2423859) – davcs86 May 22 '17 at 22:58
I recommend using `lodash` [https://lodash.com/docs/4.17.4#isDate](https://lodash.com/docs/4.17.4#isDate) – davcs86 May 22 '17 at 22:59
1

Note - I am discovering new easter eggs you put into your answer every day. If there was a way to further upvote your answer I would do so. *Thanks for including/demonstrating the first/last date range trick in your jsFiddle demo.* – crashwap May 26 '17 at 20:47

score 3 · Answer 2 · answered May 22 '17 at 17:35

testdate and testdate2 are still strings when you're doing the equality check. Try parsing them with vanilla new Date() or d3's date/time functions:

.filter(function(d){ return d.x >= new Date(testdate2); }).

Careful to check what time zone the JS Date format is coming back in - the values might not be equal, even when they're both coming back as valid JS dates, if one is in a different time zone.

d3.js filter() not displaying expected results

2 Answers2

Linked