How to make use blackhole.js in blogger post in 5 mintues

Back>

Example

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<script src="https://cdn.rawgit.com/artzub/blackhole.js/9c7b90ff64b3bc61decdf47c6de9a71abcf7e76a/blackhole.min.js"></script>

<script>
var choice = 'KMP';
var text = "KMP R-way-Trie TST LSD MSD 3-way-QuickSort Boyer-Moore Rabin-Karp Brutal-Force".split(' ')
    , rawData = []
    , l = 1000
    , pl = 2
    , p, c
    , parents = []
    , ONE_STEP = 108e5
    , now = Date.now() - l*2*ONE_STEP
    ;

function rand(max, min) {
    min = min || 0;
    return Math.random() * (max - min) + min;
}

while(pl--) {
    parents.push({ name: text[Math.random() * (text.length - 1) | 0], key: pl});
}

c = text[Math.random() * (text.length - 1) | 0];
while(l--) {
    p = parents[rand(parents.length-1) | 0];
    c = text[Math.random() * (text.length - 1) | 0];
 
    rawData.push({
        key : l % (rand(500, 50) | 0),
        category : c,
        parent : p,
        date : new Date(now += ONE_STEP * rand(2, 1))
    });

    choice = p.name;
}
</script>

<br />
<div class="body">
<br />
<header class="slidebar">
    <div class="info">
<h1>
String</h1>
<div class="desc">
Symbol sorting and matching</div>
</div>
<div class="btn-hide bottom">
<div>
</div>
</div>
</header>
<br />
<div id="canvas">
</div>
<br />
<footer class="slidebar">
    <div class="source">
<h2 id="source-data">
Source data</h2>
<textarea id="source" rows="40"></textarea></div>
<div class="btn-hide top">
<div>
</div>
</div>
</footer>

</div>
<br />
<br />
<a href="https://xyzcode.blogspot.com/2019/04/library.html">Tunnel back</a>


<style>
.body, .html {
  margin: 0;
  padding: 0;
  #overflow: hidden;
  width: 100%;
  height: 100%;
  color: #999;
  position: relative;
}



body > header,
body > footer {
    width: 100%;
    background: rgba(0, 0, 0, .5);
}
body > header > div:first-child,
body > footer > div:first-child {
  overflow: hidden;
  max-height: 0;
  transition: all .5s .2s;
}

body > header.open > div:first-child,
body > footer.open > div:first-child {
  max-height: 1000px;
  transition: all .5s .2s;
}

body > header {
  border-bottom: 1px solid #999;
  position: relative;
  z-index: 2;
}

.info {
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }
  .info footer {
    text-align: right;
    padding: 0 3px;
  }

.btn-hide {
    position: absolute; 
    width: 0%;
  }
  .btn-hide.bottom {
    bottom: -16px;
    width: 0%;
  }
  .btn-hide.top {
    top: -16px;
    width: 0%;
  }
  .btn-hide > div {
    width: 0px;
    height: 0px;
    background: #999;
    margin: 0 auto; 
    text-align: center;
    color: #1D1F20;
    cursor: pointer;
  }
  .btn-hide.bottom:hover > div {
    background: linear-gradient(to bottom, rgba(153,153,153,1) 0%,rgba(204,204,204,1) 100%);
  }
  .btn-hide.top:hover > div {
    background: linear-gradient(to bottom, rgba(204,204,204,1) 0%, rgba(153,153,153,1) 100%);
  }
  .btn-hide.bottom > div {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .btn-hide.top > div {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .btn-hide.bottom > div:before,
  .open .btn-hide.top > div:before {
    content: '';
  }
  .btn-hide.top > div:before,
  .open .btn-hide.bottom > div:before {
    content: '';
  }

body > footer {
  border-top: 1px solid #999;
  bottom: 0;
  position: absolute;
  z-index: 5;
}

.source {
    text-align: center;
    padding: 0 5px;
  }
  .source h2 {
    text-align: left;
    font-size: 12px;
  }
  .source textarea {
    background: #999;
    color: #000;
    width: 100%;
    display: hidden;
  }

#canvas {
  width:100%;
  height : 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

</style>

<script>
document.getElementById("source-data").innerHTML="<a href='https://xyzcode.blogspot.com/2019/04/black-hole.html'>" + choice + "</a>";

d3.select('#source').text(choice);

d3.selectAll('.btn-hide')
  .on('click', function() {
    var p = d3.select(this.parentNode);
    p.classed('open', !p.classed('open'));
  });

var data = rawData.map(function(d) {
    d.date = new Date(d.date);
    return d;
  })
  , stepDate = 864e5
  ,  bh = d3.blackHole("#canvas")
  ;

bh.setting.drawTrack = true;
bh.on('calcRightBound', function(l) {
  return +l + stepDate;
}).start(data);


</script>