Code Monkey home page Code Monkey logo

d3.layout.timeline's Issues

upgrade path to d3.v4

To upgrade d3.timeline.layout to d3.layoutTimeline (what a name ?!) there's very little to do in the code โ€” there's only two scale.linear to change to scaleLinear. It's going to be mostly re-packaging so that it's a standard d3 plugin.

Update for npm?

Hello!

I would like to ask if it is possible to publish the latest version using d3 v4 in npm.

Thank you very much,
Vanessa

abstract layout

One issue I have with the current layout is that it computes x,y positions in pixels, and I think it would be better to have positions in abstract units (like "[ lane 1, datestart, dateend ]") and use X() and Y() scales to convert them to pixels. I feel it would be more logical this way.

Optimization Questions

Hello!

Thank you so much for the library! It's worked great for smaller sets, but for a set of 8k events I'm starting to see longer execution times (~10s). I'd like to optimize it, but have some questions first...

  1. It looks like findLane() is O(n^2) because it iterates through the bands already present in the lane. I've had promising results (10s->3s) using a WeakMap to reduce this to O(n). Does this seem like a reasonable solution? Am I missing anything? See WeakMap solution at the bottom of this post.
  2. In timeline.js:186 we call processedTimelines.sort() before returning them. What would be the effect of removing this sort()?

Thanks!

WeakMap solution

$ git diff /tmp/timeline.old.js /tmp/timeline.new.js
diff --git a/tmp/timeline.old.js b/tmp/timeline.new.js
index cbad47fd1..339d68719 100644
--- a/tmp/timeline.old.js
+++ b/tmp/timeline.new.js
@@ -98,13 +98,27 @@ module.exports = function() {
         });
     }

-    function fitsIn(lane, band) {
+    var laneIdMap = new WeakMap();
+    var laneOutOfRangeDataMap = {};
+    var laneIdCounter = 0;
+    function addToLane(lane, band) {
+        if (!laneIdMap.has(lane)) {
+            laneIdMap.set(lane, laneIdCounter++);
+        }
+        var hasOutOfRangeData = laneOutOfRangeDataMap[laneIdMap.get(lane)];
+        if (!hasOutOfRangeData && (
+            !(lane.end < band.start || lane.start > band.end)
+        )) {
+            laneOutOfRangeDataMap[laneIdMap.get(lane)] = true;
+        }
+        lane.push(band);
+    }

+    function fitsIn(lane, band) {
       if (lane.end < band.start || lane.start > band.end) {
         return true;
       }
-      var filteredLane = lane.filter(function (d) {return d.start <= band.end && d.end >= band.start});
-      if (filteredLane.length === 0) {
+      if (!laneOutOfRangeDataMap[laneIdMap.get(lane)]) {
         return true;
       }
       return false;
@@ -118,7 +132,8 @@ module.exports = function() {
         }

         if (swimlane === undefined) {
-            swimlanes[band.parent.id] = [[band]];
+            swimlanes[band.parent.id] = [[]];
+            addToLane(swimlanes[band.parent.id][0][0], band)
             swimlane = swimlanes[band.parent.id];
             swimlaneNumber++;
             return;
@@ -128,12 +143,13 @@ module.exports = function() {

       while (x <= l) {
         if (fitsIn(swimlane[x], band)) {
-          swimlane[x].push(band);
+          addToLane(swimlane[x], band);
           return;
         }
         x++;
       }
-      swimlane[x] = [band];
+      swimlane[x] = [];
+      addToLane(swimlane[x], band);
       return;
     }

Update examples for d3 v4

The examples linked from README.md still use d3.scale and d3.layout.timeline, which are coming from d3 v3.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.