hide timeline even elements if its cramped

js/timeline.js

 function Timeline() {
-
-    var fontScaleYear = d3.scale.linear()
+  var fontScaleYear = d3.scale
+    .linear()
     .domain([1, 9])
     .range([9, 20])
-        .clamp(true)
+    .clamp(true);
 
-    var timelineFontScale = d3.scale.linear()
+  var timelineFontScale = d3.scale
+    .linear()
     .domain([40, 8])
     .range([2, 10])
-        .clamp(true)
+    .clamp(true);
 
-    var timelineScale = d3.scale.threshold()
+  var timelineScale = d3.scale
+    .threshold()
     .domain([3, 10, 20])
-        .range(["none", "small", "middle", "large"])
+    .range(["none", "small", "middle", "large"]);
 
   var timelineHover = false;
-    var container
-    var timeDomain
-    var fontSize = 1
-    var disabled = false
+  var container;
+  var timeDomain;
+  var fontSize = 1;
+  var disabled = false;
 
   function timeline() {}
 
   timeline.init = function (_timeDomain) {
-        timeDomain = _timeDomain
-        container = d3.select(".viz").append("div").classed("timeline", true)
-        container.style("transform", "translate(" + 0 + "px," + (canvas.height() - 30) + "px)");
-    }
+    timeDomain = _timeDomain;
+    container = d3.select(".viz").append("div").classed("timeline", true);
+    container.style(
+      "transform",
+      "translate(" + 0 + "px," + (canvas.height() - 30) + "px)"
+    );
+  };
 
   timeline.rescale = function (scale) {
     timeDomain.forEach(function (d) {
       d.x = canvas.x(d.key);
     });
-        fontSize = timelineFontScale(scale)
-    }
+    fontSize = timelineFontScale(scale);
+  };
 
   timeline.setDisabled = function (d) {
-        disabled = d
-        container.style("display", disabled ? "none" : "block")
-    }
+    disabled = d;
+    container.style("display", disabled ? "none" : "block");
+  };
 
   timeline.update = function (x1, x2, scale, translate) {
-        if (disabled) return
+    if (disabled) return;
 
     timeDomain.forEach(function (d) {
-            d.pos = ((d.x - x1) * scale);
-            d.visible = (d.pos > (-canvas.rangeBand() * scale) && d.pos < canvas.width() + 100);
-        })
+      d.pos = (d.x - x1) * scale;
+      d.visible =
+        d.pos > -canvas.rangeBand() * scale && d.pos < canvas.width() + 100;
+    });
 
-        var timeY = ((canvas.height()) * scale - (-1 * translate[1]) - canvas.rangeBandImage() * scale);
+    var timeY =
+      canvas.height() * scale -
+      -1 * translate[1] -
+      canvas.rangeBandImage() * scale;
 
     container
       .attr("class", "timeline " + timelineScale(scale * (fontSize / 2)))
@@ -57,8 +66,7 @@ function Timeline() {
       })
       .style("transform", "translate3d(" + 0 + "px," + timeY + "px, 0px)");
 
-        var select = container.selectAll(".container")
-            .data(timeDomain)
+    var select = container.selectAll(".container").data(timeDomain);
 
     var enter = select
       .enter()
@@ -71,13 +79,14 @@ function Timeline() {
       })
       .on("mouseleave", function (d) {
         timelineHover = false;
-            })
+      });
 
-        enter.append("div")
+    enter
+      .append("div")
       .classed("year", true)
       .text(function (d) {
         return d.key;
-            })
+      });
 
     var e = enter
       .append("div")
@@ -88,52 +97,43 @@ function Timeline() {
       })
       .enter()
       .append("div")
-            .classed("entry", true)
+      .classed("entry", true);
 
-        e
-            .append("div")
+    e.append("div")
       .classed("small", true)
       .append("div")
       .classed("title", true)
       .text(function (d) {
         return d.titel;
-            })
+      });
 
-        var m = e
-            .append("div")
-            .classed("middle", true)
+    var m = e.append("div").classed("middle", true);
 
-        m
-            .append("div")
+    m.append("div")
       .classed("title", true)
       .text(function (d) {
         return d.titel;
-            })
+      });
 
-        m
-            .append("div")
+    m.append("div")
       .classed("text", true)
       .text(function (d) {
         return d.text + ".";
-            }) //…
+      }); //…
 
-        var l = e
-            .append("div")
-            .classed("large", true)
+    var l = e.append("div").classed("large", true);
 
-        l
-            .append("div")
+    l.append("div")
       .classed("title", true)
       .text(function (d) {
         return d.titel;
-            })
+      });
 
-        l
-            .append("div")
+    l.append("div")
       .classed("text", true)
       .html(function (d) {
         return d.text + ".<br><br>" + d.extra;
-            })
+      });
 
     select
       .style("transform", function (d) {
@@ -141,15 +141,14 @@ function Timeline() {
       })
       .style("height", canvas.rangeBand() * scale + "px")
       .style("width", canvas.rangeBand() * scale + "px")
-            .style("display", function (d) {
-                return d.visible ? "block" : "none";
-            })
-
-        select
-            .select(".year")
-            .style("font-size", fontScaleYear(scale) + "px")
-    }
+      .style("display", function (d, i) {
+        var width = canvas.rangeBand() * scale;
+        var hideBecauseOfSpace = width / d.key.length > 5 || i % 2 == 0;
+        return hideBecauseOfSpace && d.visible ? "block" : "none";
+      });
 
-    return timeline
+    select.select(".year").style("font-size", fontScaleYear(scale) + "px");
+  };
 
+  return timeline;
 }