john-guerra/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## grades.csv

          
            code
            grade

            
              280012620
              4.85

            
              280012825
              4.865

            
              280021894
              3.24

            
              280012926
              5

            
              280030661
              3.19

            
              280030768
              3.98

            
              280020972
              4.89

            
              280011922
              3.73

            
              280015498
              4.795

            
              280015913
              4.85

            
              280030311
              2.81

            
              280016395
              4.72

            
              280018850
              3.85

            
              280022872
              2.16

            
              280032105
              4.715

            
              280019880
              4.92

            
              280022056
              4.48

            
              280017897
              5.2

            
              280017916
              5

            
              280011962
              3.62

            
              280018246
              4.61

            
              280012600
              0.11

            
              280018311
              4.7

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
   body {
      font-family: sans-serif;
    }
    circle {
      fill: steelblue;
      opacity: 0.7;
    }
    .axis--x {
      font-size: 12pt;
    }
    .axis--x text {
      fill: black;
    }
    .axis--x .axis_legend {
      font-size: 14pt;
      text-anchor: start;
    }
    .tooltip {
      text-anchor: middle;
    }
    .tick {
      stroke-dasharray: 1,7;
    }
    p {
      font-size: 14pt;
    }

    .mean {
      stroke: darkblue;
      stroke-width: 1.5;
      stroke-dasharray: 5,7;
    }


</style>
</head>
  <button id="btnShuffle">shuffle</button>
  <div id="chart"></div>
  <br>
  <p>Mira como te fue, entra tu código <input type="text" id="inputCode"> <button id="btnSearch">Buscar</button></p>
  <p id="res"></p>

<body>
  <script>
  var width = 960,
    height = 150;

  var svg = d3.select("#chart")
    .append("svg")
    .attr("width", width)
    .attr("height", height),
    margin = {top: 20, right: 60, bottom: 40, left: 20},
    width = width- margin.left - margin.right,
    height = height - margin.top - margin.bottom;

  svg.append("g")
    .attr("class", "axis--x")
    .attr("transform", "translate(0," + height + ")")
      .append("text")
      .attr("class", "axis_legend")
      .text("Nota")
      .attr("transform", "translate(0, " + (margin.bottom+ 10 ) + ") ");


  var g = svg.append("g")
    .attr("class", "points")
    .attr("transform", "translate(" +  margin.left + " ," + margin.top + ")");
  var x = d3.scaleLinear()
    .domain([0, 5.5])
    .range([0, width]);
  var yRange = [10,50];
  var y = function (d) {
    return yRange[0] + Math.random()*yRange[1];
  };

  // UPDATE
  function update(data) {
    var mean = g
      .selectAll(".mean")
      .data([data.mean]);

    var meanEnter = mean.enter()
      .append("line")
      .attr("class", "mean");

    mean.merge(meanEnter)
      .attr("x1", function (d) { return x(d);})
      .attr("x2", function (d) { return x(d);})
      .attr("y1", yRange[0])
      .attr("y2", yRange[1]);

    mean.exit().remove();

    var points = g.selectAll("circle")
     .data(data, function (d) { return d.code; });

    var pointsEnter = points.enter()
      .append("circle")
      .attr("cx", 0)
      .attr("r", 5);

    points.merge(pointsEnter)
      .attr("id", function (d) { return "circle" + d.code; })
      .transition()
      .duration(1000)
      .attr("cx", function (d) { return x(d.grade); })
      .attr("cy", function (d) {
        return y(d.grade);
      });

    points.exit()
      .remove();

    d3.select(".axis--x")
      .call(d3.axisBottom(x)
        .tickSizeInner(-height)
        // .tickSizeOuter(10)
        .tickPadding(15)
      );

    //mean


  }

  d3.csv('grades.csv', function (data) {
    data.mean = 0;
    data.forEach(function (d) {
      d.grade = +d.grade;
      data.mean += d.grade / data.length;
    });

    update(data);


    d3.select("#btnSearch")
      .on("click", onSearch);

    d3.select("#inputCode")
      .on("change", onSearch);

    d3.select("#btnShuffle")
      .on("click", function () { update(data); })


    function selectGrade(d) {
      d3.selectAll("circle")
        .transition()
        .duration(500)
        .attr("r", 5)
        .style("opacity", 0.7)
        .style("fill", "steelblue");
      d3.selectAll(".tooltip").remove();


      d3.select("#circle"+d.code)
        .transition()
        .duration(2000)
        .attr("r", 10)
        .style("opacity", 1.0)
        .style("fill", "darkred");

      //tooltip
      var text = "Nota: " + d.grade +  " código: " + d.code + "\n";
      g
        .append("text")
        .attr("class", "tooltip")
        .attr("x",  x(d.grade))
        .attr("y",  0)
        .text(text);

      d3.select("#res")
        .text(text);
    }

    function onSearch(evt) {
      var code = d3.select("#inputCode").property("value").trim();

      var res =data.filter(function (d) { return d.code===code; });

      if (res.length<1) {
        alert("Código no encontrado, intenta de nuevo!");
        return;
      }

      selectGrade(res[0]);
    }
  });


  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	code	grade
	280012620	4.85
	280012825	4.865
	280021894	3.24
	280012926	5
	280030661	3.19
	280030768	3.98
	280020972	4.89
	280011922	3.73
	280015498	4.795
	280015913	4.85
	280030311	2.81
	280016395	4.72
	280018850	3.85
	280022872	2.16
	280032105	4.715
	280019880	4.92
	280022056	4.48
	280017897	5.2
	280017916	5
	280011962	3.62
	280018246	4.61
	280012600	0.11
	280018311	4.7
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	font-family: sans-serif;
	}
	circle {
	fill: steelblue;
	opacity: 0.7;
	}
	.axis--x {
	font-size: 12pt;
	}
	.axis--x text {
	fill: black;
	}
	.axis--x .axis_legend {
	font-size: 14pt;
	text-anchor: start;
	}
	.tooltip {
	text-anchor: middle;
	}
	.tick {
	stroke-dasharray: 1,7;
	}
	p {
	font-size: 14pt;
	}

	.mean {
	stroke: darkblue;
	stroke-width: 1.5;
	stroke-dasharray: 5,7;
	}


	</style>
	</head>
	<button id="btnShuffle">shuffle</button>
	<div id="chart"></div>
	<br>
	<p>Mira como te fue, entra tu código <input type="text" id="inputCode"> <button id="btnSearch">Buscar</button></p>
	<p id="res"></p>

	<body>
	<script>
	var width = 960,
	height = 150;

	var svg = d3.select("#chart")
	.append("svg")
	.attr("width", width)
	.attr("height", height),
	margin = {top: 20, right: 60, bottom: 40, left: 20},
	width = width- margin.left - margin.right,
	height = height - margin.top - margin.bottom;

	svg.append("g")
	.attr("class", "axis--x")
	.attr("transform", "translate(0," + height + ")")
	.append("text")
	.attr("class", "axis_legend")
	.text("Nota")
	.attr("transform", "translate(0, " + (margin.bottom+ 10 ) + ") ");



	var g = svg.append("g")
	.attr("class", "points")
	.attr("transform", "translate(" + margin.left + " ," + margin.top + ")");
	var x = d3.scaleLinear()
	.domain([0, 5.5])
	.range([0, width]);
	var yRange = [10,50];
	var y = function (d) {
	return yRange[0] + Math.random()*yRange[1];
	};

	// UPDATE
	function update(data) {
	var mean = g
	.selectAll(".mean")
	.data([data.mean]);

	var meanEnter = mean.enter()
	.append("line")
	.attr("class", "mean");

	mean.merge(meanEnter)
	.attr("x1", function (d) { return x(d);})
	.attr("x2", function (d) { return x(d);})
	.attr("y1", yRange[0])
	.attr("y2", yRange[1]);

	mean.exit().remove();

	var points = g.selectAll("circle")
	.data(data, function (d) { return d.code; });

	var pointsEnter = points.enter()
	.append("circle")
	.attr("cx", 0)
	.attr("r", 5);

	points.merge(pointsEnter)
	.attr("id", function (d) { return "circle" + d.code; })
	.transition()
	.duration(1000)
	.attr("cx", function (d) { return x(d.grade); })
	.attr("cy", function (d) {
	return y(d.grade);
	});

	points.exit()
	.remove();

	d3.select(".axis--x")
	.call(d3.axisBottom(x)
	.tickSizeInner(-height)
	// .tickSizeOuter(10)
	.tickPadding(15)
	);

	//mean




	}

	d3.csv('grades.csv', function (data) {
	data.mean = 0;
	data.forEach(function (d) {
	d.grade = +d.grade;
	data.mean += d.grade / data.length;
	});

	update(data);


	d3.select("#btnSearch")
	.on("click", onSearch);

	d3.select("#inputCode")
	.on("change", onSearch);

	d3.select("#btnShuffle")
	.on("click", function () { update(data); })




	function selectGrade(d) {
	d3.selectAll("circle")
	.transition()
	.duration(500)
	.attr("r", 5)
	.style("opacity", 0.7)
	.style("fill", "steelblue");
	d3.selectAll(".tooltip").remove();


	d3.select("#circle"+d.code)
	.transition()
	.duration(2000)
	.attr("r", 10)
	.style("opacity", 1.0)
	.style("fill", "darkred");

	//tooltip
	var text = "Nota: " + d.grade + " código: " + d.code + "\n";
	g
	.append("text")
	.attr("class", "tooltip")
	.attr("x", x(d.grade))
	.attr("y", 0)
	.text(text);

	d3.select("#res")
	.text(text);
	}

	function onSearch(evt) {
	var code = d3.select("#inputCode").property("value").trim();

	var res =data.filter(function (d) { return d.code===code; });

	if (res.length<1) {
	alert("Código no encontrado, intenta de nuevo!");
	return;
	}

	selectGrade(res[0]);
	}
	});



	</script>
	</body>