Bisector yield/generator

Visualize `bisector`

Application of yield/generator Please use browsers of latest version

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

rect.omitted {
     fill: #eee;
     transition-property: all;
     transition-duration: .5s;
     transition-timing-function: ease-out;
 }

</style>
<div class="cycle"></div>
<svg width="960" height="500"></svg>

const data = d3.range(100, 200);
 const compared = 120;

svg.attr('width', width)
    .attr('height', height);

g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const defs = svg.append('defs');

defs
   .append("marker")
     .attr("id","arrow-def")
     .attr("viewBox","0 -5 10 10")
     .attr("refX",5)
     .attr("refY",0)
     .attr("markerWidth",4 * 1.5)
     .attr("markerHeight",4 * 1.5)
     .attr("orient","auto")
   .append("path")
     .attr("d", "M0,-5L10,0L0,5")
     .attr("class","arrowHead");

const x = d3.scaleLinear();
 x.domain([ 0, data.length ]);
 x.range([ 0, width ]);

const y = d3.scaleLinear();
 y.domain([ d3.min(data), d3.max(data) ]);
 y.rangeRound([ height, 0 ]);

const comparedGroup = g
   .append('g')
     .attr('class', 'compared-group')
     .attr("transform", "translate(" + margin.left + "," + 0 + ")");

const widerBarW = barW * 20;
 const comparedGroupFontSize = 22;
 const comparedBar = comparedGroup
   .append('rect')
     .attr('class', 'comparedBar')
     .attr('x', x(0) - widerBarW/2)
     .attr('y', y(compared) )
     .attr('height', height - y(compared) )
     .attr('width', widerBarW )
     .attr('fill', 'skyblue')

const comparedBarLabel = comparedGroup
   .append('text')
     .attr('x', x(0))
     .attr('y', y(compared) - 10)
     .attr('dominant-baseline', 'middle')
     .attr('text-anchor', 'middle')
     .text(compared)

const comparedGroupInequality = comparedGroup
   .append('text')
     .attr('x', x(0) + widerBarW * 1.1 )
     .attr('y', y((compared + d3.min(data))/2 ))
     .attr('dominant-baseline', 'middle')
     .attr('text-anchor', 'start')
     .attr('font-size', comparedGroupFontSize)

const comparedGroupSubstitution = comparedGroup
   .append('text')
     .attr('x', x(0) + widerBarW * 1.2 )
     .attr('y', y(compared) - 10 * 3)
     .attr('dominant-baseline', 'middle')
     .attr('text-anchor', 'end')
     .attr('font-size', comparedGroupFontSize)

const pointer2MidBar = g
   .append('line')
     .attr('class', 'pointer-midbar')
     .attr('stroke-width', 1)
     .attr('marker-end', 'url(#arrow-def)')
     .attr('stroke', 'black')

const midValText = rangeGroup
   .append('text')
     .attr('text-anchor', 'middle')
     .attr('dominant-baseline', 'central');

function update(data, curr_scene) {
     const state = curr_scene.value;
     cycle_counter.text(`cycle: ${state.cycle}`);
     const dataWithState = data.map((d, i) => ({
         v: d,
         hi: i === state.hi,
         lo: i === state.lo,
         mid: i === state.mid,
         omitted: i < state.lo || state.hi < i
     }) );

const targetRange = rangeGroup.selectAll('.range')
                                   .data([state]);

const labels = ['lo', 'mid', 'hi'];
     const labelData = labels.map(d => ({x: state[d], text: d}) )
     const rangeLabel = rangeGroup.selectAll('.label')
                                  .data(labelData);

const arrow2Mid = rangeGroup.selectAll('.arrow')
                                 .data([state.lo, state.hi]);

const rects = bars.selectAll('rect')
                       .data(dataWithState, (d,i) => i);

new Promise((res) => {res()})
         .then( useAsPromise(transitions.comparedGroup) )
         .then( useAsPromise(transitions.targetRange) )
         .then( useAsPromises([ transitions.arrow2Mid, transitions.rangeLabel ]) )
         .then( useAsPromise(transitions.point2MidBar) )
         .then( useAsPromise(transitions.showMidVal) )
         .then( useAsPromise(transitions.compareWithMidBar) )
         .then( useAsPromise(transitions.substituteMid) )
         .then( useAsPromise(transitions.bars) )
         .then(() => {
             if (curr_scene.done) finalize(state);
             else update(data, scene.next())
         });

}

function finalize(state) {
     midValText
         .attr('fill', 'red')
         .text(state.res);
 }

function useAsPromises(transitions){
     return Promise.all(
         transitions.map( transition => useAsPromise(transition)() )
     )
 }

function useAsPromise(transition, duration=500){
     return () => {
         return new Promise( (resolve, reject) => {
             let t = d3.transition()
                       .duration(duration)
                       .ease(d3.easeLinear)
                       .on('end', resolve);
             transition(t)
         })
     }
 }

// based on https://github.com/d3/d3-array/blob/master/src/bisector.js
 function bisector (compare) {
     if (compare.length === 1) compare = ascendingComparator(compare);
     return {
         left: function*(a, x, lo, hi) {
             let cycle = 0;
             if (lo == null) lo = 0;
             if (hi == null) hi = a.length;
             yield {lo: lo, hi: hi, mid: 0, cycle: cycle};
             while (lo < hi) {
                 var mid = lo + hi >>> 1;
                 yield {lo: lo, hi: hi, mid: mid, cmp: "calc-mid", cycle: cycle};
                 if (compare(a[mid], x) < 0) lo = mid + 1;
                 else hi = mid;
                 yield {lo: lo, hi: hi, mid: mid, cmp: "compare", cycle: cycle};
                 cycle++;
             }
             return {lo: lo, hi: hi, mid: mid, res: lo, cycle: cycle, cmp: 'complete'};
         }
     };
 }

function ascendingComparator(f) {
     return function(d, x) {
         return d3.ascending(f(d), x);
     };
 }

const bisect = bisector(d => d)
 const scene = bisect.left(data, compared)
 let curr_scene = scene.next();
 update(data, curr_scene);

</script>

https://d3js.org/d3.v4.min.js