All examples By author By category About

cool-Blue

Full window Github gist

Using d3 transitions on dummy nodes to transition data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/inputs/button/style.css">
    <link rel="stylesheet" type="text/css" href="https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/plot/fps-histogram.css">
    <style>
        body {
            margin: 0;
            position: relative;
        }
        #vis {
            background: steelblue;
        }
        text {
            white-space: pre;
        }
        .link {
            stroke: #000;
            stroke-width: 1.5px;
        }

.node {
            cursor: move;
            fill: #ccc;
            stroke: #000;
            stroke-width: 1.5px;
            opacity: 0.5;
        }

.node.fixed {
            opacity: 1;
            stroke: red;
        }
        button, input {display: inline-block}
        .input-div {
            position: absolute;
            top: 0;
            left: 0;
            /*white-space: pre;*/
            margin: 0;
        }
        #timeDisplay #xAxis {
            opacity: 0.6;
        }
        #timeDisplay .domain, #timeDisplay .tick line {
            fill: none;
            stroke: black;
        }
        #timeDisplay .tick text {
            font-size: 10px;
        }
        #timeDisplay {
            pointer-events: none;
        }
        .g-button {
            color: #804700;
            background: black;
            border-color: orange;
        }
        .g-button.g-active {
            color: orange;
            background: #333333;
            border-color: orange;
        }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/cool-blue/d3-lib/transitions/end-all/1.0.0/endall.js" charset="UTF-8"></script>
<script src="https://cdn.jsdelivr.net/gh/cool-blue/d3-lib/inputs/select/select.js" charset="UTF-8"></script>
<script src="https://cdn.jsdelivr.net/gh/cool-blue/d3-lib/tool-tip/0.0.0/tool-tip.js" charset="UTF-8"></script>
<script src="https://cdn.jsdelivr.net/gh/cool-blue/d3-lib/inputs/number/input-number.js" charset="UTF-8"></script>
<script src="https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/elapsedtime/elapsed-time-2.0.js"></script>
<script src="https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/inputs/button/2.0.0/button.js"></script>
<script src="https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/plot/plot-transform.js"></script>
<script src="https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/plot/fps-histogram.js"></script>
<script src="https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/inputs/select/select.js"></script>
<div id="input-div">

    <button onclick = 'refresh()'> refresh</button>
    steps <input id="steps-selector" onchange = 'refresh()' type="number"  name="steps" value = 5 min="1" max="100"/>
</div>
<div id="vis"></div>
<script>
    var graph  ={
        "nodes": [
            {"x": 469, "y": 410, move: true},
            {"x": 493, "y": 364, move: true},
            {"x": 442, "y": 365, move: true},
            {"x": 467, "y": 314, move: true},
            {"x": 477, "y": 248, move: true},
            {"x": 425, "y": 207, move: true},
            {"x": 402, "y": 155, move: true},
            {"x": 369, "y": 196, move: true},
            {"x": 350, "y": 148, move: true},
            {"x": 539, "y": 222, move: true},
            {"x": 594, "y": 235, move: true},
            {"x": 582, "y": 185, move: true},
            {"x": 633, "y": 200, move: true}
        ],
        "links": [
            {"source":  0, "target":  1},
            {"source":  1, "target":  2},
            {"source":  2, "target":  0},
            {"source":  1, "target":  3},
            {"source":  3, "target":  2},
            {"source":  3, "target":  4},
            {"source":  4, "target":  5},
            {"source":  5, "target":  6},
            {"source":  5, "target":  7},
            {"source":  6, "target":  7},
            {"source":  6, "target":  8},
            {"source":  7, "target":  8},
            {"source":  9, "target":  4},
            {"source":  9, "target": 11},
            {"source":  9, "target": 10},
            {"source": 10, "target": 11},
            {"source": 11, "target": 12},
            {"source": 12, "target": 10}
        ]
    };
/*
    var graph  ={
        "nodes": [
            {"x": 469, "y": 410, move: true},
            {"x": 477, "y": 248, move: false},
            {"x": 633, "y": 200, move: false}
        ],
        "links": [
            {"source":  0, "target":  1},
            {"source":  1, "target":  2},
            {"source":  2, "target":  0}
        ]
    };
*/

var width = 960,
        height = 500 - inputDiv.node().getBoundingClientRect().height - buttons.height - 3,
        steps = function(){return +d3.select("#steps-selector").property("value")};

var colors = d3.scale.category10();
    graph.nodes.forEach(function(d, i){
        d.color = colors(i), d.index = i
    });

var force = d3.layout.force()
        .size([width, height])
        .charge(-600)
        .linkDistance(40)
        .on("start", function() {
            elapsedTime.start(100);
        })
        .on("tick", tick);

var drag = force.drag()
        .on("dragstart", dragstart);

var svg = d3.select("#vis").append("svg")
        .attr("width", width)
        .attr("height", height);

var link = svg.selectAll(".link"),
        nodes = svg.selectAll("#nodes");

d3.ns.prefix.CB = "CB:emit/drag/transition/or-whatever-you-feel-like";

// create an object for mapping the transition timelines
    var mapTransitions = (function mapTransitions() {
        var timeInterval, t, w, tAxis = d3.svg.axis().orient("top").tickFormat(d3.time.format("%H:%M:%S:%L")),
            nodeTransitions = [],
            timeDisplay,
            nodes,
            lane,
            timeLines,
            timeSegments,
            mark;

return function mapTransitions(selection, update) {
            // build a data structure for the transitions on the proxy nodes
            // convert:
            // node {}
            //  transition []
            //      lock {}
            //          delay
            //          duration
            //          time
            //          event
            // to this:
            // node {}  <- nodes
            //  index
            //  color <string>
            //  transitions []
            //      transition {}   <- timeLines
            //          name
            //          color
            //          active
            //          stops []
            //              stop {} <- timeSegments
            //                  stop
            //                  id
            //                  active get:
            //                  duration
            //                  t0
            //                  t1
            //                  y
            //                  h
            //                  nop
            //                  overlaps function

// if a node is selected then it is an end event so flag it for deletion
            if(update/* && update.transaction === "disconnect"*/) {
                // get the location of the current transition of the event emitting node
                var node, transition, stop, exitNodeStops, exitStops,
                    stops = nodeTransitions.filter(function(n, i) {
                        var f = n.index == update.node;
                        if(f) node = i;
                        return f
                    })[0]
                        .transitions.filter(function(t, i) {
                            var f = t.name == update.attr;
                            if(f) transition = i;
                            return f
                        })[0]
                        .stops,
                    s, j = 0;

/*
                console.log(
                    [update.node, update.attr, update.transition.active].join("\t")
                );
*/

// get a reference to the active stop in the transition
                for(s = 0;
                    s < stops.length && stops[s].id != update.transition.active; s++)
                    /*console.log([s, "of", stops.length, stops[s].id].join("\t"))*/;
                stop = stops[s];

// collect all segments representing stops scheduled to end before the start time
                // of the current stop
                // include the current stop (event source) in this collection

// first get all of the stops from the earliest, up to and including the current one
                exitNodeStops = stops.slice(0, s + 1);

// filter out the stops that are scheduled to start later and remove them from the map
                exitNodeStops = exitNodeStops
                    .filter(function(s, i){
                        var past = stop.t0 > s.t1 ||
                            update.transaction == "disconnect" && (stop === s ||
                            +stop.id >= +s.id && stop.t1 >= s.t0);
                        if(past){
                            stops.splice(i + j--, 1);
                        }
                        return past
                    });
/*
                exitStops = exitNodeStops
                    .map(function(d) {
                        console.log([d.id, d.t1 - Date.now(), d.t1 - stop.t1].join("\t"));
                        return d.id
                    });
                console.log(
                    [stop.t1 - Date.now(), d3.time.format("%H:%M:%S:%L")(new Date(stop.t1)), stop.nop ? "nop" : "active"
                    ].join("\t")
                );
                printDiff();
                printState();
*/
            }

function printDiff(){
                console.log("exitStops " + (exitNodeStops ? exitNodeStops.length : "none"));
                if(exitNodeStops) {
                    exitNodeStops.forEach(function(s) {
                        var t1 = s.t1;
                        console.log([ "delete " +
                                      s.id,
                                      d3.time.format("%H:%M:%S:%L")(new Date(t1)),
                                      (s.nop ? "nop" : "active")
                        ].join("\t"))
                    })
                }
            }
            function printState() {

console.log("state");
                nodeTransitions.forEach(function(n) {
                    n.transitions.forEach(function(t) {
                        t.stops.forEach(function(s) {
                            var t0 = s.t1, t1 = s.t1;
                            console.log([
                                n.index, t.name, s.id,
                                t0, d3.time.format("%H:%M:%S:%L")(new Date(t0)),
                                t1, d3.time.format("%H:%M:%S:%L")(new Date(t1)),
                                (s.nop ? "nop" : "active"),
                                (s.node ? "node" : "deleted")
                            ].join("\t"))
                        })
                    })
                });
            }

// build a visualisation based on the map

var oldScales = null;

// for a normal update, keep the same time scale
            // otherwise, calculate the time scale based on the transitions data in the map
            if(!update) {

//                console.log("initialise " + initEvents++);

// make a clean snap-shot of the transitions
                nodeTransitions = [];

// create a map of the transitions structure on the proxy nodes
                // with transition stops sorted by id (temporal order)
                selection.each(function d(nodeData) {
                    var n              = this,
                        transitionNames = Object.keys(n).filter(function(k) {return k.match(/^__transition/)}),
                        transitions    = transitionNames.map(function(k) {
                            return {
                                name: k.match(/^__transition_(.*?)__/)[1],
                                stops: Object.keys(n[k]).filter(function(id, i) {
                                    //only include the stops and exclude the last one added by positionNodes
                                    return id.match(/\d+/) &&  i != n[k].count-1;
                                }).sort(function(a, b){return a - b}).map(function(index, i) {
                                    var l = n[k][index];
                                    return {
                                        stop: i,
                                        id: index,
                                        get active() { return n[k] ? n[k].active == index : null},
                                        duration: l.duration,
                                        t0: l.time + l.delay,
                                        t1: l.time + l.delay + l.duration,
                                        nop: l.tween.empty(),
                                        h: size.h,
                                        y: 0,
                                        overlaps: function(seg2) {
                                            var seg1 = this;
                                            return (
                                                seg1.t1 >= seg2.t0 && seg2.t1 >= seg1.t0 ||
                                                seg2.t1 >= seg1.t0 && seg1.t1 >= seg2.t0
                                            )
                                        }
                                    }
                                }),
                                active: n[k].active,
                                color: d3.select(n).datum().color
                            }
                        });
                    nodeTransitions.push({
                        index: nodeData.index,
                        color: nodeData.color,
                        transitions: transitions});
                });

t = d3.time.scale()
                    .range([0, size.margin.width])
                    // find the min delay and the maximum finish time for all transitions
                    .domain([
                        d3.min(nodeTransitions, function(node) {
                            return d3.min(node.transitions, function(transition) {
                                return d3.min(transition.stops, function(stop) {
                                    return stop.t0
                                })
                            })
                        }),
                        d3.max(nodeTransitions, function(node) {
                            return d3.max(node.transitions, function(transition) {
                                return d3.max(transition.stops, function(stop) {
                                    return stop.t1
                                })
                            })
                        })
                    ]);
                // record the time interval, before nicing the domain
                timeInterval = t.domain();
                t.nice();
                // a line segment for each transition
                // width scale
                w = d3.scale.linear()
                    .range(t.range().map(function(d) {
                        return d - t.range()[0];
                    }))
                    .domain(t.domain().map(function(d) {
                        return d - t.domain()[0];
                    }));
                tAxis.scale(t);
                // outer wrapper
                timeDisplay = svg.selectAll("#timeDisplay").data([nodeTransitions]);
                timeDisplay.enter().append("g")
                    .attr({
                        id: "timeDisplay",
                        transform: "translate(" + [size.margin.left, size.margin.top] + ")"
                    })
                    .append("g")
                    .attr({
                        id: "xAxis",
                        transform: "translate(0," + -size.leading + ")"
                    });
                timeDisplay.exit().call(nodeTransition, fadeOut, {name:  "timeDisplay", target:  "opacity"});

// node wrappers
                // bind node transition structures
                nodes = timeDisplay.selectAll(".node-timeline").data(function(d) {
                    return d
                }, function(d){return d.index});
                nodes.enter().append("g")
                    .attr({
                        class: function(d){return "node-timeline _" + d.index},
                        opacity: 1
                    });
                nodes.attr({
                    transform: function(d, i) {
                        return "translate(0," + (i * (2 * (size.h + size.leading))) + ")"
                    },
                    fill: function(d) {
                        return d.color;
                    }
                });
                if(buttons.cleanUp) {
                    nodes.exit().call(nodeTransition, {
                        then: fadeOut,
                        name: "nodes",
                        attr: ["opacity"],
                        data: [function(d) {return "transitions: " + d.transitions.length}]
                    });
                }
                // set up the selection for the time cursor early because it has the previous scales attached
                // and this is needed for the pre-transition positioning the time segments
                mark = nodes.selectAll(".mark")
                    .data([{scales: {t: t.copy(), w: w.copy()}}], function(d) {
                        // the key function is called before the new data is bound, so oldScales gets
                        // the previously bound value
                        if(!Array.isArray(this)) oldScales = d.scales;
                        return d;
                    })
                    .attr("class", "mark");
                // add the cursor for current time
                mark.enter().append("line")
                    .attr({
                        stroke: "black", "stroke-width": 1,
                        class: "mark"
                    });

// a lane for each attribute transitioning on each node
                lane = d3.scale.ordinal().range([0,1]).domain(["cx","cy"]);
                timeLines = nodes.selectAll(".timeLine").data(function(d) {
                        return d.transitions;
                    }, function(d){
                        return d.name
                    });
                if(buttons.cleanUp) {
                    timeLines.exit().call(nodeTransition, {
                        then: fadeOut,
                        name: "timeLines",
                        attr: ["opacity"],
                        data: ["name", "active", function(d) {return "stops: " + d.stops.length}]
                    });
                }
                timeLines.enter().append("g").attr({
                    class: function(d){return "timeLine " + d.name},
                    opacity: 1
                });
                timeLines.attr({
                    transform: function(d) {
                        return "translate(0," + (lane(d.name) * (size.h + size.leading)) + ")";
                    }
                });

// re-build the visualisation for the transition stops
                timeSegments = timeLines.selectAll(".segment")
                    .data(function(d) {return d.stops}, function(d) {
                        return d.id;
                    });

// mark the exit nodes for disposal, fade them out and remove them
                var tsExit       = timeSegments.exit()
                    .attr({class: "garbage"});
                tsExit.filter(function(d) {
                    return !d.nop;
                }).call(nodeTransition, {
                    then: fadeOut,
                    name: "exit",
                    attr: ["opacity"],
                    data: ["id"],
                    debug: false
                });
                tsExit.filter(function(d) {
                    return d.nop;
                }).remove();

// enter new nodes, faded out and position on the previous scale
                // sort them to match the data sequence (temporal order)
                timeSegments.enter().append("rect")
                    .attr({
                        class: function(d) {return "segment _" + d.id},
                        stroke: "black",
                        "stroke-opacity": 0,
                        opacity: 0,
                        x: function(d) {
                            return (oldScales ? oldScales.t : t)(d.t0)
                        },
                        width: function(d) {
                            return (oldScales ? oldScales.w : w)(d.duration)
                        },
                        y: 0, height: size.h
                    }).order();
                timeSegments.each(function(d){
                    d.node = this;
                });

// on the first pass, fade the new nodes in and slide all nodes into the new scale
                // if its not just an update, slide the nodes into place
                timeSegments
                    .call(nodeTransition, {
                        then: function(selection) {
                            selection.attr({
                                opacity: function o(d) {
                                    return d.nop ? 0 : 0.6
                                },
                                x: function(d) {
                                    return t(d.t0)
                                },
                                width: function(d) {
                                    return w(d.duration)
                                }
                            });
                        },
                        name: "x",
                        attr: ["opacity"],
                        data: ["id"],
                        debug: false
                    });
                // offset colliding segments
                timeLines
                    .each(function() {
                        var segments = d3.select(this).selectAll(".segment");
                        segments.each(function(s1) {
                            // for each segment...
                            if(!s1.nop) {
                                // if the segment is not just a spacer
                                // create an array of overlapping siblings and store it on the node datum object
                                var l;
                                var key1 = this.t0 + "" + this.t1;
                                s1.group = [d3.select(this)];
                                s1.map = d3.map();

segments.each(function(s2, j) {

if(s2 !== s1 && (!s2.map || !s2.map.has(key1)) && !s2.nop && s1.overlaps(s2)) {
                                        var key2 = this.t0 + "" + this.t1;

s1.group.push(d3.select(this));
                                        s1.map.set(this, key2);

}
                                });

// if there are overlapping siblings...
                                if((l = s1.group.length) > 1) {
                                    // divide them evenly in the vertical slot
                                    s1.group.forEach(function(n, i) {
                                        var h = size.h / l;
                                        n.call(nodeTransition, {
                                            then: function(transition) {
                                                transition.attr({y: h * i, height: h})
                                            },
                                            name: "y"
                                        })
                                    })
                                }
                            }
                        })
                    });
            } else{
                // if refresh only, manually exit completed segments
                if(update.transaction === "disconnect") {
//                    printState();

// exit the expired stops on the updating node
                    exitNodeStops.forEach(function ex(s){
                        var n = d3.select(s.node);
                        delete s.node;
                        if(n.datum().nop){
                            dummyElement(n);
                            n.remove();
                        }else
                            n.call(nodeTransition, {
                                then: fadeOut,
                                name: "exit",
                                attr: ["opacity"],
                                data: ["id"],
                                debug: false
                            });
                    })
                }
                // if only an update, pop the active nodes and restore their full height
                var activeSegment = d3.select(stop.node);
                if(activeSegment.size() && !activeSegment.datum().nop)
                    activeSegment
                        .attr({
                            opacity: 0.8,
                            "stroke-opacity": 1
                        })
                        .call(nodeTransition, {
                            name: "restoreHeight",
                            ease: "linear",
                            then: function restore(selection) {
                                // eagerly restore to full height
                                selection.attr({
                                    y: 0, height: size.h
                                });
                                d3.select(selection.node()).datum().active = false;
                            }
                        });
            }

var currentX = t(Date.now());

mark.attr({
                y2: 2 * (size.h + size.leading),
                x1: currentX,
                x2: currentX
            }).interrupt()
                .transition().duration(t.domain()[1] - Date.now()).ease("linear")
                .attr({x1: t.range()[1], x2: t.range()[1]})
                .each("start", function() {
                    mark.attr({running: true})
                })
                .each("end", function() {
                    mark.attr({running: null})
                });

if(!update) timeDisplay.select("#xAxis").attr("opacity", 1).call(scaleTransition, {
                then: tAxis,
                name: "tAxis",
                attr: ["opacity"],
                data: ["id"],
                debug: false
            });

function fadeOut(selection){
                dummyElement(selection);
                selection.attr({opacity: 0}).remove();
                selection.attr({opacity: 0.3});
            }

//d3.json("graph.json", function(error, graph) {
    // if (error) throw error;

force
        .nodes(graph.nodes)
        .links(graph.links);

link = link.data(graph.links)
        .enter().append("line")
        .attr("class", "link");

nodes = nodes.data([graph.nodes])
        .enter().append("g")
        .attr({id: "nodes"});

var node = nodes.selectAll(".node")
        .data(function(d){return d})
        .enter().append("g")
        .attr("class", "node")
        .classed("fixed", function(d){return d.move})
        .on("dblclick", dblclick)
        .call(drag)
        .call(positionnodes);

var circle = node.append("circle")
            .attr({
                r: 12
            })
            .style({
                fill: function(d) {return d.move ? d.color : null}
            }),
        label = node.append("text")
            .attr({
                "text-anchor": "middle",
                "font-size": "12px",
                dy: "0.35em"
            });
    //});

d3.timer(function(){
        elapsedTime.mark();
        if(elapsedTime.aveLap.history.length)
            hist(elapsedTime.aveLap.history);
    });

function tick(e) {

if(link && label && node) {
            link.attr({
                "x1": function a(d) { return d.source.x; },
                "y1": function a(d) { return d.source.y; },
                "x2": function a(d) { return d.target.x; },
                "y2": function a(d) { return d.target.y; }
            });

label.text(function(d) {
                // return an array of transition stop counts
                return d ?
                       d.transitions ?
                       d.transitions.map(function(t) {
                           return t.stops.filter(function(s) {
                               return !s.nop
                           }).length
                       }) :
                       null :
                       null;
            });

node.attr("transform", function n(d) {return "translate(" + [d.x, d.y] + ")"})
        }
        force.alpha(0.1)
    }

function refresh(){
        node.call(positionnodes)
    }

function dblclick(d) {
        d3.select(this).classed("fixed", d.move = false)
            .selectAll("circle").style("fill", null);
    }

var dragFlag = {cx: 16, cy: 32};

function dragstart(d, attr) {
        d.fixed |= dragFlag[attr] || 2;
        d3.select(this).classed("fixed", d.move = true)
            .selectAll("circle").style("fill", d.color);
    }
    function dragend(d, attr) {
        d3.select(this).classed("fixed", d.fixed &= ~(dragFlag[attr] || 2))
    }

function positionnodes(selection){
        // reset the groups in the endAll detector
        var endAll = d3.cbTransition.endAll(),
            ease = {cx: xEase, cy: yEase},

// set up a structure of privately namespaced elements as transition proxies
            // for the nodes with move set to true and bind to the same data
//            ns = "CB:emit/drag/transition/or-whatever-you-feel-like",

// get the parent data with grouping preserved
            // todo generalise this for a complex group structure
            selectionData = selection.map(function(g){return d3.select(g.parentNode).datum()})[0],

transitions = d3.select("body").selectAll("transitions")
                .data([selectionData.filter(function(d){
                    return d.move
                })], function(d){return d.index}),
            transitionsEnter = transitions.enter().append("CB:transitions"),
            shadowNodes = transitions.selectAll("emitdrag")
                .data(function(d){return d});
        shadowNodes.enter().append("CB:emitdrag");

selection.style("fill", null); // reset the node colors

function updateTransitions(selection, update){
//            if(!showTimeLines.checked) return;
            selection = selection || d3.select("body").selectAll("transitions").selectAll("emitdrag");
            return selection.call(mapTransitions, update);
        }

// create a chain of transitions on the shadow nodes cx and cy attributes

["cx", "cy"].forEach(function(attr, index) {
            var routes = {cx: ["x", "px"], cy: ["y", "py"]};

d3.range(steps()).reduce(function(o, s) {
                var minTime = 20;
                function tms() {return (aveTransTime()[0] * 1000)}

return (
                    o.transition(attr)
                        // nop transition for delay
                        .duration(function(d) {
                            return d.delay = (minTime + Math.random() * tms()).toFixed()
                        })
                        .each("start.step", onStart)
                        .each("interrupt.nop", onInterrupt)
                        .each("end.nop", onEnd))
                        // operative transition
                        .transition()
                        .duration(function(d) {
                            return d.duration = (minTime + Math.random() * tms()).toFixed()
                        })
                        .ease(ease[attr].value())
                        .attr(Object.defineProperty({}, attr, {
                            value: function(d) {
                                var m = 1/5;
                                return (m + (1 - 2 * m) * Math.random()) * [width, height][index]
                            },
                            enumerable: true
                        }))
                        .each("start.step", onStart)
                        .each("interrupt", onInterrupt)
                        .each("end.step", onEnd)
            }, shadowNodes.interrupt()) // delete any existing transitions on the initial object
                // add a cleanup on the last transition in the chain
                .transition("service").duration(0)
                .call(cleanUp, attr);
        });

shadowNodes.call(updateTransitions);

}

force.start();
</script>
</body>
</html>

Updated missing url https://rawgit.com/cool-Blue/d3-lib/master/transitions/end-all/1.0.0/endAll.js to https://cdn.jsdelivr.net/gh/cool-blue/d3-lib/transitions/end-all/1.0.0/endall.js

Updated missing url https://rawgit.com/cool-Blue/d3-lib/master/inputs/select/select.js to https://cdn.jsdelivr.net/gh/cool-blue/d3-lib/inputs/select/select.js

Updated missing url https://rawgit.com/cool-Blue/d3-lib/master/tool-tip/0.0.0/tool-tip.js to https://cdn.jsdelivr.net/gh/cool-blue/d3-lib/tool-tip/0.0.0/tool-tip.js

Updated missing url https://rawgit.com/cool-Blue/d3-lib/master/inputs/number/input-number.js to https://cdn.jsdelivr.net/gh/cool-blue/d3-lib/inputs/number/input-number.js

Updated missing url https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/elapsedTime/elapsed-time-2.0.js to https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/elapsedtime/elapsed-time-2.0.js

Updated missing url https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/inputs/button/2.0.0/button.js to https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/inputs/button/2.0.0/button.js

Updated missing url https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/plot/plot-transform.js to https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/plot/plot-transform.js

Updated missing url https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/plot/fps-histogram.js to https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/plot/fps-histogram.js

Updated missing url https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/inputs/select/select.js to https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/inputs/select/select.js