Interactive Bar Graph With Duration Values

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">
        svg {
            border: solid 1px #aaa;
        }

#checks {
            margin: 10px;
        }

</style>
</head>
<body>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="gettingJSON.js"></script>
<script type="text/javascript" src="simpleGraph.js"></script>

accessData();

var w = 1000,  //SVG CANVAS
        h = 1000,
        r = 120;

//IN HORIZ. BAR CHART, we need width to be a dynamic variable and apply to multiple rect bars. Height will be 100
    var //width = 300, //ORIGINAL RECTANGLE ELEMENT MAX DIMENSIONS...this should be a dynamic variable
        //width1 = function(d) {return xScale(d);},
        height = 10, //DIMENSIONS OF RECTANGLE
        dragbarw = 4;
    //the domain should be [0,2], but scaled to range below
    //xScale range should be [0,740], since canvas is 750 MAX
    /*
    var width = function(d) {return xscale(d);};
    */

function range(start, end, step = 1) {
     const len = Math.floor((end - start) / step) + 1
     return Array(len).fill().map((_, idx) => start + (idx * step))
     }

var duration = range(0,2,0.08);

var pitches = range(1,89,1);
     //console.log(duration);

var xScale = d3.scale.linear()//scales the given DOMAIN to the range
     .domain([0,2]) //duration?--if "duration" bars are not shown and x axis has no ticks. We will scale [0,2] using duration variable
     .range([0,675]);

var xAxis = d3.svg.axis();
     xAxis
     .orient('bottom')
     .scale(xScale)
     .tickSize(1)
     .tickFormat(function (d,i) { return duration[i];}) //if this is duration
     .tickValues(duration);

var 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);

/////////////
    var dragleft = d3.behavior.drag()  //RESIZES LEFT END OF RECTANGLE BARS (make sure to select all rectangle bars)
        //.origin(Object)
        .on("drag", ldragresize);

////////////

var svg = d3.select("body").append("svg") // SETS THE SVG CANVAS WITH DEFINED VARIABLES
        .attr("width", w)
        .attr("height", h);

var x_xis = svg.append('g')
        .attr("transform", "translate(75,600)") //NEED TO MODIFY VALUES INSIDE TRANSLATE based on position of x axis with rectangle bar STARTING position
        .attr('id','xAxis')
        //.attr("axis")
        .call(xAxis);

var newg = svg.append("g")//new group of elements within SVG body
    //.data([{x:0, y: 0}])
    .attr("transform", "translate(75,100)")
        //.attr("transform", function(d){return "translate(0," + x(d) + ")"})
    .attr('id','bars')
    .selectAll('rect')
    .data(rangeOfDurationValues)
    .enter();
        //.data([{x: 0, y: 0}]); //THIS ESTABLISHES X AND Y POSITION OF THE RECTANGLE NOT ITS WIDTH AND HEIGHT. THAT IS ALREADY DEFINED
    //y position needs to be based on midi value and x position will always be 0 (or wherever the x coordinate of the vertical axis is)
    //for now, "y" should be based on the "duration" value's index number

//////////////////////

var dragbarleft = newg.append("rect") //this section needs to make multiple smaller dragging rectangles
        .attr("x", function(d) { return d.x - (dragbarw/2); })
        .attr("y", function(d,i) { return i * height + (dragbarw/2); })
        .attr("height", height - dragbarw)
        .attr("id", "dragleft")
        .attr("width", dragbarw) // width of this rectangle in particular stays constant
        .attr("fill", "lightblue")
        .attr("fill-opacity", .5)
        .attr("cursor", "ew-resize")
        .call(dragleft);

//////////////////////

function dragmove(d) {

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

d3.select(dragbarleft)
            .attr("x", function (d) {
                return d.x - (dragbarw / 2);
            })

}
//////////////////

function ldragresize(d) {
        var oldx = d.x;

d.x = Math.max(0, Math.min(d.x + function (d) {
                return xScale(d);
            } - (dragbarw / 2), d3.event.x));

width = function (d) {
                return xScale(d);
            } + (oldx - d.x);

d3.select(this) //dragbarleft

.attr("x", function (d) {
                return d.x - (dragbarw / 2);
            });

d3.select(dragrect)
            .attr("x", function (d) {
                return d.x;
            })
            .attr("width", width);

}

d3.select(this)
            .attr("x", d.x = Math.max(0, Math.min(d.x + function(d) {return xScale(d);} - (dragbarw / 2), d3.event.x)));

//Max x on the right is x + width - dragbarw
        //Max x on the left is 0 - (dragbarw/2)
        //d.x = Math.max(0, Math.min(d.x + width - (dragbarw / 2), d3.event.x));
        //d.x = Math.max(0, Math.min(d.x + function(d) {return xScale(d);} - (dragbarw / 2), d3.event.x));
        //d.x = Math.max(0, d3.event.x);
        //width = width + (oldx - d.x);
        width = function(d) {return xScale(d);} + (oldx - d.x);

dragbarleft
            .attr("x", function(d) { return d.x - (dragbarw / 2); });

dragrect
            .attr("x", function(d) { return d.x; })
            .attr("width", width);
            //.attr("width", function(d) {return xScale(d);});

}
 */

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

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

Modified http://d3js.org/d3.v3.min.js to a secure url

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

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

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js