patternjavascriptMinor

Approximating Date for a D3.js timeline

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

timelineforapproximatingdate

Problem

I've updated code from a couple weeks back so I've come back to get more feedback. The original post can be found over here:

Approximating/Sorting groups of dates into buckets

```
/*
* @Author: Gowiem
* @Date: 2013-12-17 14:21:17
*/

var Hist = Hist || {};

// Timeline Utils
//////////////////
Hist.TLUtils = (function() {
var timeConversions = { "year": 31557600000,
"month": 2628000000,
"day": 86400000 };

var pubConvertTime = function(howMany, type) {
if (timeConversions.hasOwnProperty(type)) {
return howMany * timeConversions[type];
} else {
console.assert(false, "Hist.TLUtils.convertTime was given unknown type: ", type);
}
};

var pubRoundToDecade = function(date, shouldFloor) {
var year = date.getFullYear(),
remainder = year % 10,
roundedYear = shouldFloor ? (year - remainder) - 10 : (year - remainder) + 10,
roundedDate = new Date(date.getTime()).setFullYear(roundedYear);
return roundedDate;
};

var pubGenerateRandomId = function() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
};

return {
roundToDecade: pubRoundToDecade,
convertTime: pubConvertTime,
generateRandomId: pubGenerateRandomId
};
})();

// Timeline Objects
////////////////////
Hist.TLO = Hist.TLO || {};
Hist.TLO.range = function(beginEpoch, endEpoch) {
return {
begin: new Date(beginEpoch),
end: new Date(endEpoch),
differenceInYears: new Date(endEpoch).getYear() - new Date(beginEpoch).getYear(),
halfwayDate: new Date(beginEpoch + ((endEpoch - beginEpoch)/2)),
toString: function() {
return "Range - begin: " + this.begin.toString() + " end: " + this.end.toString() + " halfwayDate: " + this.halfwayDate.toString();
}
};
};

// Our Collection of Point Objects
Hist.TLO.pointCollection = function(pages) {
var collection = {},
allPoints = [],
current

Solution

For this

if (rangeDifference >= 80) {
  approximaterMod = 10;
  console.log("=========== range is 80+");
} else if (rangeDifference >= 60) {
  approximaterMod = 8;
  console.log("=========== range is 60+");
} else if (rangeDifference >= 45) {
  approximaterMod = 6;
  console.log("=========== range is 45+");
} else if (rangeDifference >= 30) {
  approximaterMod = 4;
  console.log("=========== range is 30+");
} else if (rangeDifference >= 20) {
  approximaterMod = 2;
  console.log("=========== range is 20+");
} else if (rangeDifference >= 10) {
  approximaterMod = 6; 
  console.log("=========== range is 10+");
} else if (rangeDifference >= 4) {
  approximaterMod = 2;
  console.log("=========== range is 4+");
} else {
  approximaterMod = null
  console.log("=========== range is 4-");
}

You could use a datastructure to store your values:

var ranges = [
               {limit: 80, mod: 10}, 
               {limit: 60, mod: 8}, 
               {limit: 45, mod: 6}, 
               {limit: 30, mod: 4}, 
               {limit: 20, mod: 2}, 
               {limit: 10, mod: 6}, 
               {limit: 4, mod: 2}, 
               {limit: null, mod: null}
             ];
for(var i = 0; i = range.limit || range.limit === null){
       approximaterMod = range.mod;
       if(range.limit !== null){
           console.log("=========== range is "+range.limit+"+");
       } else {
           console.log("=========== range is "+ranges[i-1].limit+"-");
       }
       break;
   }
}

By doing so, it's easier to see what difference maps to what mod value. It looks like a complex for loop at the moment, but that's because of the handling for your console logging... if we could take that out, it would look like so:

var ranges = [
               {limit: 80, mod: 10}, 
               {limit: 60, mod: 8}, 
               {limit: 45, mod: 6}, 
               {limit: 30, mod: 4}, 
               {limit: 20, mod: 2}, 
               {limit: 10, mod: 6}, 
               {limit: 4, mod: 2}
             ];
approximaterMod = null;
for(var i = 0; i = range.limit){
       approximaterMod = range.mod;
       break;
   }
}

Code Snippets

if (rangeDifference >= 80) {
  approximaterMod = 10;
  console.log("=========== range is 80+");
} else if (rangeDifference >= 60) {
  approximaterMod = 8;
  console.log("=========== range is 60+");
} else if (rangeDifference >= 45) {
  approximaterMod = 6;
  console.log("=========== range is 45+");
} else if (rangeDifference >= 30) {
  approximaterMod = 4;
  console.log("=========== range is 30+");
} else if (rangeDifference >= 20) {
  approximaterMod = 2;
  console.log("=========== range is 20+");
} else if (rangeDifference >= 10) {
  approximaterMod = 6; 
  console.log("=========== range is 10+");
} else if (rangeDifference >= 4) {
  approximaterMod = 2;
  console.log("=========== range is 4+");
} else {
  approximaterMod = null
  console.log("=========== range is 4-");
}

var ranges = [
               {limit: 80, mod: 10}, 
               {limit: 60, mod: 8}, 
               {limit: 45, mod: 6}, 
               {limit: 30, mod: 4}, 
               {limit: 20, mod: 2}, 
               {limit: 10, mod: 6}, 
               {limit: 4, mod: 2}, 
               {limit: null, mod: null}
             ];
for(var i = 0; i < ranges.length; i++){
   var range = ranges[i];
   if(rangeDifference >= range.limit || range.limit === null){
       approximaterMod = range.mod;
       if(range.limit !== null){
           console.log("=========== range is "+range.limit+"+");
       } else {
           console.log("=========== range is "+ranges[i-1].limit+"-");
       }
       break;
   }
}

var ranges = [
               {limit: 80, mod: 10}, 
               {limit: 60, mod: 8}, 
               {limit: 45, mod: 6}, 
               {limit: 30, mod: 4}, 
               {limit: 20, mod: 2}, 
               {limit: 10, mod: 6}, 
               {limit: 4, mod: 2}
             ];
approximaterMod = null;
for(var i = 0; i < ranges.length; i++){
   var range = ranges[i];
   if(rangeDifference >= range.limit){
       approximaterMod = range.mod;
       break;
   }
}

Context

StackExchange Code Review Q#41671, answer score: 3

Revisions (0)

No revisions yet.