miniPianoRoll

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Chronological Diagram of Asia</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="notesOnlyJSON.js"></script>
    <style type="text/css">
        .chart {
            shape-rendering: crispEdges;
        }

.mini text {
            font: 9px sans-serif;
        }

.main text {
            font: 12px sans-serif;
        }

.miniItem0 {
            fill: darksalmon;
            stroke: black;
            stroke-width: 2;
        }

.miniItem1 {
            fill: darkolivegreen;
            fill-opacity: .7;
            stroke: black;
            stroke-width: 2
        }

.miniItem2 {
            fill: slategray;
            fill-opacity: .7;
            stroke: black;
            stroke-width: 2;
        }

.brush .extent {
            stroke: gray;
            fill: dodgerblue;
            fill-opacity: .365;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    //data
    var lanes = ["E4", "C4", "A3"],
        laneLength = lanes.length,
        timeBegin = 0,
        timeEnd = 65.33326800000005;

</script>
<script type="text/javascript">
    var m = [20, 15, 15, 120], //top right bottom left
        w = 960 - m[1] - m[3],
        h = 500 - m[0] - m[2],
        miniHeight = laneLength * 12 + 50,
        mainHeight = h - miniHeight - 50;

//scales
    var x = d3.scale.linear() //where is this positioned? at the top or bottom? this might be for main
        .domain([timeBegin, timeEnd])
        .range([0, w]);
    var x1 = d3.scale.linear()
    //.domain([timeBegin, timeEnd])
        .range([0, w]);
    var y1 = d3.scale.linear()
        .domain([0, laneLength])
        .range([0, mainHeight]);
    var y2 = d3.scale.linear()
        .domain([0, laneLength])
        .range([0, miniHeight]);

var //xAxis = d3.svg.axis().scale(x1).orient("bottom"),
        xAxis2 = d3.svg.axis().scale(x).orient("bottom"),

drag = d3.behavior.drag() //when moving rect from left side, other components of rectangle need to be resized   //so we must include this...i think
            .on("drag", dragmove);

chart = d3.select("body")
        .append("svg")
        .attr("width", w + m[1] + m[3])
        .attr("height", h + m[0] + m[2])
        .attr("class", "chart");

var mini = chart.append("g")
        .attr("transform", "translate(" + m[3] + "," + (mainHeight + m[0]) + ")")
        .attr("width", w)
        .attr("height", miniHeight)
        .attr("class", "mini");

//mini lanes and texts
    mini.append("g").selectAll(".laneLines")
        .data(minimalNotesFinal)
        //.data(notes)
        .enter().append("line")
        .attr("x1", m[1])
        .attr("y1", function(d) {return y2(d.lane);})
        .attr("x2", w)
        .attr("y2", function(d) {return y2(d.lane);})
        .attr("stroke", "lightgray");

mini.append("g").selectAll(".laneText")
        .data(lanes)
        .enter().append("text")
        .text(function(d) {return d;})
        .attr("x", -m[1])
        .attr("y", function(d, i) {return y2(i + .5);})
        .attr("dy", ".5ex")
        .attr("text-anchor", "end")
        .attr("class", "laneText");

mini.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + miniHeight + ")")
        .call(xAxis2);

/*var itemRects = mini.append("g")
        .attr("clip-path", "url(#clip)");*/

//mini item rects soon to be brushes
    mini.append("g").selectAll("miniItems")
        .data(minimalNotesFinal)
        .enter().append("rect") //"brush"
        .attr("class", function(d) {return "miniItem" + d.lane;}) //midi
        .attr("x", function(d) {return x(d.time);}) //time
        .attr("y", function(d) {return y2(d.lane + .5) - 5;}) //midi
        .attr("width", function(d) {
            return x(d.duration);})
        .attr("height", 10)
        .call(drag);

//brush on mini chart
   /*var brush = d3.svg.brush()
        .x(x)
        .on("brush", display);*/

mini.append("g")
        .attr("class", "x brush")
        //.call(brush)
        .selectAll("rect")
        .attr("y", 1)
        .attr("height", miniHeight - 1);
    //.call(drag);

//display();

function display() {
        var rects, labels, axis
        minExtent = brush.extent()[0],
            maxExtent = brush.extent()[1],
            visItems = minimalNotesFinal.filter(function(d) {
                end = d.time + d.duration;
                return d.time < maxExtent && (end) > minExtent;});//MAKE SURE THIS IS OKAY

//visItems = notes.filter(function(d) {return d.time < maxExtent && (d.duration + d.time) > minExtent;});
        mini.select(".brush")
            .call(brush.extent([minExtent, maxExtent]));

x1.domain([minExtent, maxExtent]);

//update main item rects //update main items brushes
        rects = itemRects.selectAll("rect")
            .data(visItems, function(d) { return d.name; }) //name
            .attr("x", function(d) {return x1(d.time);}) //time
            .attr("width", function(d) {return x1(d.time + d.duration) - x1(d.time);});

rects.exit().remove();

x1.domain(brush.empty() ? x.domain() : brush.extent());
        main.select(".main").attr("d", main); //area
        main.select(".x.axis").call(xAxis);

}

function dragmove(d) {

d3.select(this)
        //.attr("transform", "translate(" + d3.event.x + ")");
            .attr("x", d.x = Math.max(0, d3.event.x));

}
</script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.v2.js to a secure url

https://mbostock.github.com/d3/d3.v2.js