fall16mis/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .y line {
      display: none;
      stroke:none;
    }

    .y path {
      stroke:none;
    }

    .legend{
     	color:#005ebc;
      z-index:0;
    }

    .legend_font{
      font-family: sans-sarif;
      font-size: 20px;
    }

    /*.bar{
      fill: #0091a8;
    }*/

    .bar:hover{
      fill:#0f9fff;
    }

    .tooltip {
      opacity: 0;
      background-color: #ffe047;
      position: absolute;
		}

    .label {
      position: absolute;
      top: 15px;
      left: 665px;
    }

    select {
      position: absolute;
      left: 650px;
      top: 35px;
    }
  </style>
</head>

<body>
  <div class = "label">Sort By</div>
  <script>
    var json_data = "id,time,completed\n\
54042,60,66\n\
62042,80,74\n\
54054,88,76\n\
48042,99,78\n\
11011,165,92\n\
9123,190,100\n\
7125,52,46\n\
5123,80,74\n\
3121,110,82\n\
1121,50,55";

    var displayper = d3.format(".0%");

    data = d3.csvParse(json_data, function(d){ return {
      id:d.id,
      time:+d.time,
    	percent:+d.completed}; });

    data = data.sort(function(a, b){
      return a.id - b.id;
    });

    var height = 500;
    var width = 800;
    var margin = {left: 70, right: 20, bottom: 0, top: 50};

    var tooltip = d3.select("body").append("div").attr("class", "tooltip")

    var svg = d3.select("body").append("svg").attr("height","1000px").attr("width","100%");

    var chartGroup = svg.append("g").attr("transform","translate("+margin.left+","+(margin.top+10)+")");

    var legend = svg.append("g").attr("transform","translate("+margin.left+","+(margin.top+10)+")");

    maxTime=d3.max(data,function(d){return d.time;});

    minTime=d3.min(data,function(d){return d.time;});

    names = window.data.map(function(d){ return d.id; });

    var color = d3.scaleOrdinal(d3.schemeCategory20b);

    x = d3.scaleLinear()
      		.range([0, width])

    y = d3.scaleBand()
          .rangeRound([height, 0])
          .paddingInner(0.5);

    x.domain([minTime, maxTime]);
    y.domain(names);

    var xAxis = d3.axisBottom(x)
                  .scale(x);

    var yAxis = d3.axisLeft(y)
        					.scale(y);

    chartGroup.append("g")
              .attr("class","axis y")
              .call(yAxis);

    chartGroup.append("g")
              .attr("class","axis x")
              .attr("transform","translate(0,"+height+")")
              .call(xAxis);

    chartGroup.append("text")
              .attr("transform", "translate("+(width/2)+","+(-20)+")")
              .attr("class", "legend_font")
              .text("Lesson Graph");

    chartGroup.append("text")
              .attr("transform","translate("+(-45)+","+height/2+")rotate(-90)")
              .attr("class", "legend_font")
              .text("Students");

    chartGroup.append("text")
              .attr("transform", "translate("+(width/2)+","+(height+40)+")")
              .attr("class", "legend_font")
              .text("Time (In Minutes)");

    var displayBar = function(data){

      var bars = chartGroup.selectAll(".bar")
      										.data(data);

      bar_enter = bars.enter().append("rect");

      bar_enter.attr("class", "bar")
               .attr("x", 0)
               .attr("y", function(d){ return window.y(d.id);} )
               .attr("height", window.y.bandwidth())
      				 .attr("fill", function(d, i) { return color(i); })
               .transition()
               	.duration(800)
      					.attr("width", function(d){return window.x(d.time);})

      bar_enter.on('mousemove', function(d,i){
        tooltip.style("opacity","1")
               .style("left",(d3.event.pageX+10)+"px")
               .style("top",d3.event.pageY+"px");
        tooltip.html(" Time: "+d.time);
      })

      bar_enter.on('mouseout', function(){
        tooltip.style("opacity","0")
      });
    }

    var displayText = function(data){

       legend.selectAll("text")
    		     .remove();

       data.forEach(function(d) {

         var per = d.percent/100;

         legend.append("text")
         	 .transition()
         	 .delay(800)
           .attr("x", window.x(d.time)+3)
         	 .attr("y", window.y(d.id)+y.bandwidth()/1.5)
           .style("fill", "steelblue")
           .attr("class", "legend")
           .text(displayper(per));
        });
     }

     displayBar(data);
     displayText(data);

     var variables = ['id', 'time', 'percetage'];
     var index = 0;

     var selector = d3.select("body")
                      .append("select")
                      .attr("id", "sortby")
                      .selectAll("option")
                      .data(variables)
                      .enter().append("option")
                      .text(function(d) {
                        return d; })
                      .attr("value", function (d, i) {
                        return i;
                       });

     d3.select("#sortby").on("change", function(d) {
       index = this.value;
       change1();
     });

     function change1() {

       if(index == 1) {
         var y0 = window.y.domain(data.sort(
           function(a, b) { return a.time - b.time; })
          .map(function(d) { return d.id; }))
          .copy();
       }

       else if(index == 2) {
         var y0 = window.y.domain(data.sort(
           function(a, b) {return a.percent - b.percent; })
          .map(function(d) { return d.id; }))
          .copy();
       }

       else {
         var y0 = window.y.domain(data.sort(
           function(a, b) { return a.id - b.id; })
          .map(function(d) { return d.id; }))
          .copy();
       }

        chartGroup.selectAll(".bar")
           			 .sort(function(a, b) { return (a.id) - (b.id); });

       var transition = chartGroup.transition()
       														.duration(750),
       		 delay = function(d, i) { return i * 50; };

       transition.selectAll(".bar")
                 .delay(delay)
                 .attr("y", function(d) { return y0(d.id); });

       transition.select(".axis.y")
          			 .call(yAxis)
       					 .selectAll("g")
          			 .delay(delay);

       displayText(data);
    }
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	.y line {
	display: none;
	stroke:none;
	}

	.y path {
	stroke:none;
	}

	.legend{
	color:#005ebc;
	z-index:0;
	}

	.legend_font{
	font-family: sans-sarif;
	font-size: 20px;
	}

	/*.bar{
	fill: #0091a8;
	}*/

	.bar:hover{
	fill:#0f9fff;
	}

	.tooltip {
	opacity: 0;
	background-color: #ffe047;
	position: absolute;
	}

	.label {
	position: absolute;
	top: 15px;
	left: 665px;
	}

	select {
	position: absolute;
	left: 650px;
	top: 35px;
	}
	</style>
	</head>

	<body>
	<div class = "label">Sort By</div>
	<script>
	var json_data = "id,time,completed\n\
	54042,60,66\n\
	62042,80,74\n\
	54054,88,76\n\
	48042,99,78\n\
	11011,165,92\n\
	9123,190,100\n\
	7125,52,46\n\
	5123,80,74\n\
	3121,110,82\n\
	1121,50,55";

	var displayper = d3.format(".0%");

	data = d3.csvParse(json_data, function(d){ return {
	id:d.id,
	time:+d.time,
	percent:+d.completed}; });

	data = data.sort(function(a, b){
	return a.id - b.id;
	});

	var height = 500;
	var width = 800;
	var margin = {left: 70, right: 20, bottom: 0, top: 50};

	var tooltip = d3.select("body").append("div").attr("class", "tooltip")

	var svg = d3.select("body").append("svg").attr("height","1000px").attr("width","100%");

	var chartGroup = svg.append("g").attr("transform","translate("+margin.left+","+(margin.top+10)+")");

	var legend = svg.append("g").attr("transform","translate("+margin.left+","+(margin.top+10)+")");

	maxTime=d3.max(data,function(d){return d.time;});

	minTime=d3.min(data,function(d){return d.time;});

	names = window.data.map(function(d){ return d.id; });

	var color = d3.scaleOrdinal(d3.schemeCategory20b);

	x = d3.scaleLinear()
	.range([0, width])

	y = d3.scaleBand()
	.rangeRound([height, 0])
	.paddingInner(0.5);

	x.domain([minTime, maxTime]);
	y.domain(names);

	var xAxis = d3.axisBottom(x)
	.scale(x);

	var yAxis = d3.axisLeft(y)
	.scale(y);

	chartGroup.append("g")
	.attr("class","axis y")
	.call(yAxis);

	chartGroup.append("g")
	.attr("class","axis x")
	.attr("transform","translate(0,"+height+")")
	.call(xAxis);

	chartGroup.append("text")
	.attr("transform", "translate("+(width/2)+","+(-20)+")")
	.attr("class", "legend_font")
	.text("Lesson Graph");

	chartGroup.append("text")
	.attr("transform","translate("+(-45)+","+height/2+")rotate(-90)")
	.attr("class", "legend_font")
	.text("Students");

	chartGroup.append("text")
	.attr("transform", "translate("+(width/2)+","+(height+40)+")")
	.attr("class", "legend_font")
	.text("Time (In Minutes)");

	var displayBar = function(data){

	var bars = chartGroup.selectAll(".bar")
	.data(data);

	bar_enter = bars.enter().append("rect");

	bar_enter.attr("class", "bar")
	.attr("x", 0)
	.attr("y", function(d){ return window.y(d.id);} )
	.attr("height", window.y.bandwidth())
	.attr("fill", function(d, i) { return color(i); })
	.transition()
	.duration(800)
	.attr("width", function(d){return window.x(d.time);})

	bar_enter.on('mousemove', function(d,i){
	tooltip.style("opacity","1")
	.style("left",(d3.event.pageX+10)+"px")
	.style("top",d3.event.pageY+"px");
	tooltip.html(" Time: "+d.time);
	})

	bar_enter.on('mouseout', function(){
	tooltip.style("opacity","0")
	});
	}

	var displayText = function(data){

	legend.selectAll("text")
	.remove();

	data.forEach(function(d) {

	var per = d.percent/100;

	legend.append("text")
	.transition()
	.delay(800)
	.attr("x", window.x(d.time)+3)
	.attr("y", window.y(d.id)+y.bandwidth()/1.5)
	.style("fill", "steelblue")
	.attr("class", "legend")
	.text(displayper(per));
	});
	}

	displayBar(data);
	displayText(data);

	var variables = ['id', 'time', 'percetage'];
	var index = 0;

	var selector = d3.select("body")
	.append("select")
	.attr("id", "sortby")
	.selectAll("option")
	.data(variables)
	.enter().append("option")
	.text(function(d) {
	return d; })
	.attr("value", function (d, i) {
	return i;
	});

	d3.select("#sortby").on("change", function(d) {
	index = this.value;
	change1();
	});

	function change1() {

	if(index == 1) {
	var y0 = window.y.domain(data.sort(
	function(a, b) { return a.time - b.time; })
	.map(function(d) { return d.id; }))
	.copy();
	}

	else if(index == 2) {
	var y0 = window.y.domain(data.sort(
	function(a, b) {return a.percent - b.percent; })
	.map(function(d) { return d.id; }))
	.copy();
	}

	else {
	var y0 = window.y.domain(data.sort(
	function(a, b) { return a.id - b.id; })
	.map(function(d) { return d.id; }))
	.copy();
	}

	chartGroup.selectAll(".bar")
	.sort(function(a, b) { return (a.id) - (b.id); });

	var transition = chartGroup.transition()
	.duration(750),
	delay = function(d, i) { return i * 50; };

	transition.selectAll(".bar")
	.delay(delay)
	.attr("y", function(d) { return y0(d.id); });

	transition.select(".axis.y")
	.call(yAxis)
	.selectAll("g")
	.delay(delay);

	displayText(data);
	}
	</script>
	</body>