D3 Examples - Interactive Bar Graph With Duration Values

xxxxxxxxxx
 
<!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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>-->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!--<script type="text/javascript" src="OrganizingInteractiveBarsWithBarGraph.js"></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>
​
​
​
<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,400)") //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 dragrect = newg.append("rect") //this section needs to create multiple rectangles based on amount of data values
        .attr("id", "bars")
        //.attr("x",0)
        //.attr("y",0)
        .attr("x", function (d) {
            return d.x;
        })
        .attr("y", function(d, i) {
            return i * height;
        })
        /*.attr("y", function (d) {
            return d.y;
        })*/
        .attr("height", height) //height of rectangle bar itself, not its position
        //.attr("width", width) //width should be decided by duration Values
        .attr("width", function(d) {return xScale(d);})
        /////
        .attr("fill-opacity", .5)
        .attr("cursor", "move")
        .call(drag);
​
//////////////////////
​
    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>
​
    