JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<div id="vis" class="scrollable"></div>

CSS

div.scrollable {
    
    overflow:scroll;
    height: 400px;
}

svg {
  background-color: black;
}

JavaScript

d3.select("div#vis")
    .append("svg")
.attr({"id":"svg", "width": 15*10, "height":15*(1000/10)})


//Is this the correct way to access the scroll bar? 
//It seems wrong since a small scroll event seems return more pixels
//than it should

$scrollable = $(".scrollable")

var row1 = 0, row2 = 13*10;

//Everything Below is d3 stuff
var predata = d3.range(1000)
var data = predata.map(function(d){ return {key: d, value: Math.random()} } )
var rects = 

    
$(".scrollable").on("scroll", function(e){
    var top = $scrollable.scrollTop(),
        height = $scrollable.height(),
        bottom = top + height;
        row1 =rows( top, bottom)[0] ;
        row2 = rows( top, bottom)[1];
        draw()

});

function rows(top, bottom){
    return [Math.floor(top / 15)*10, (Math.floor(top / 15)+ (13)) *10 ]
}
    



function draw(){ 
    
    var newdata = data.slice(row1,row2)
    
    var rects = d3.select("svg").selectAll("rect").data(newdata, function(d){return d.key})
    
    rects.enter()
        .append("rect")
        .attr({
                "x": function(d, i){
                    return 15*(d.key % 10) ;
                },
               "y": function(d, i){
                   return 15*(Math.floor(d.key / 10) ) + 20;
               },
               "width": 13,
               "height":13, 
               "fill": function(d, i){
                   return (d.value >= .5)? "yellow" : "blue";
               }
              })
        .append("title").text(function(d, i){return d.key})
    
    rects.exit().remove()
    
    console.log(d3.select("svg").selectAll("rect")[0].length);

};

draw();