jorgeehernandez/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
I choosed present the data using a simple bar chart because it is the simplest way to do it, I drawed the bars one down of other, in order to make the visualization more interesting (not the ordinary simple bar chart) though, and also I have added a simple transition to animate the visualization. I have used the hue color to give intuitiveness to the visualization.
Analysis What, Why, How
What
Datasets
dataType: item
dataSet: table
Attributes
cuantitative
Why:
Actions
Present
Summarize
Targets
Distribution
How:
Encode
Align
Marks
Lines
Channels
verticial position
Color hue

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
  }

.title{
  font-size: 200%;
  color: #000000;
  font-weight: 100;
  text-align: center;
}
html {
  font-family:
   "HelveticaNeue-Light",
   "Helvetica Neue Light",
   "Helvetica Neue",
    Helvetica,
    Arial,
    "Lucida Grande",
    sans-serif;
}
</style>
<body>
  <h3 class="title">Notas por estudiantes</h3>
  <div id="chart"></div>
<script src="//d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script>

var grades = [
	{"code":23802620, "grade":4.85},
	{"code":23802825, "grade":4.865},
	{"code":23801894, "grade":3.24},
	{"code":23802926, "grade":5},
	{"code":23800661, "grade":3.19},
	{"code":23800768, "grade":3.98},
	{"code":23800972, "grade":4.89},
	{"code":23801922, "grade":3.73},
	{"code":23805498, "grade":4.795},
	{"code":23805913, "grade":4.85},
	{"code":23800311, "grade":2.81},
	{"code":23806395, "grade":4.72},
	{"code":23808850, "grade":3.85},
	{"code":23802872, "grade":2.16},
	{"code":23802105, "grade":4.715},
	{"code":23809880, "grade":4.92},
	{"code":23802056, "grade":4.48},
	{"code":23807897, "grade":5.2},
	{"code":23807916, "grade":5},
	{"code":23801962, "grade":3.62},
	{"code":23808246, "grade":4.61},
	{"code":23802600, "grade":0.11},
	{"code":23808311, "grade":4.7}
];


var margin = {top: 20, right: 100, bottom: 30, left: 100},
    width = 800 - margin.left - margin.right,
    height = 800 - margin.top - margin.bottom;

var wScale = d3.scaleLinear()
	.range([0, width]);

var hScale = d3.scaleLinear()
	.range([0, height]);


var colScale = d3.scaleOrdinal(d3.schemeCategory20c);

var BAR_HEIGHT = 20;

 var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip")
  	.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica 				Neue', Helvetica, Arial, 'Lucida Grande', sans-serif")
  	.style("font-size",200+'%')
 		.style("color","#000000");

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  	.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var xAxis = svg.append("g")
	.attr("class", "axis x--axis");

	wScale.domain([0, grades[11].grade]);
  hScale.domain([0, grades[11].grade]);

	var bars = svg.selectAll(".bars")
  	.data(grades);
  var textsGrade = svg.selectAll(".texts.grades")
  	.data(grades);
 	var textsCode = svg.selectAll(".texts.codes")
  	.data(grades);

  //Enter
  var barsEnter = bars.enter()
  	.append("rect")
    .attr("class", "bars")
    .attr("width", 0);

  var textGradeEnter = textsGrade.enter()
  	.append("text")
  	.attr("x", function(d) { return d.grade; })
    .attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
    .attr("dy", ".35em")
 		.style("fill", "black")
    .attr("width", function(d) { return wScale(d.grade); })
    .attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
    .text(function(d) { return d.grade; });

    var textCodeEnter = textsGrade.enter()
  	.append("text")
  	.attr("x", function(d) { return d.grade; })
    .attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
    .attr("dy", ".35em")
 		.style("fill", "black")
    .attr("width", function(d) { return wScale(d.grade); })
    .attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
    .text(function(d) { return d.code; })
    .style("font-family","sans-serif");

  //Exit
  bars.exit()
  	.transition()
    .duration(1000)
    .attr("width", 0)
  	.remove();

  textsGrade.exit()
  	.transition()
    .duration(1000)
    .attr("width", 0)
  	.remove();

  //Update
  bars.merge(barsEnter)
  	.attr("x", 0)
    .attr("y", function(d, i ) { return i * (BAR_HEIGHT+1);})
    .attr("height", function(d) { return height })
    .style("fill", function(d,i) { return colScale(i); })
    .on("mouseover", onMouseOver)
    .on("mouseout", onMouseOut)
    .transition().duration(1000)
    .attr("width", function(d) { return wScale(d.grade); });

  textsGrade.merge(textGradeEnter)
 	 	.attr("x", function(d) { return wScale(d.grade); })
  	.attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
    .attr("dy", ".35em")
 		.style("fill", "back")
    .attr("width", function(d) { return wScale(d.grade); })
    .attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
    .text(function(d) { return d.grade; })
  	.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 							'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif");


  textsCode.merge(textCodeEnter)
 	 	.attr("x", function(d) { return -80; })
  	.attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
    .attr("dy", ".35em")
 		.style("fill", "back")
    .attr("width", function(d) { return wScale(d.grade); })
    .attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
    .text(function(d) { return d.code; })
  	.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica 				Neue', Helvetica, Arial, 'Lucida Grande', sans-serif");


  xAxis
  	.transition()
    .duration(3000)
  	.call(d3.axisTop()
  	.scale(wScale)
    .ticks(3))

  function onMouseOver(d) {

    tooltip.style("visibility", "visible");

		d3.selectAll(".bars")
			.attr("stroke", "#555")
			.transition()
			.duration(500)
			.attr("stroke", "#fff")
      .attr("width", function(d) { return wScale(d.grade); });

		d3.select(this)
			.attr("width", function(d) { return wScale(d.grade); })
      .attr("height", function(d) { return height-100 })
			.transition()
			.duration(500)
			.attr("width", function(d) { return wScale(d.grade)+10; })
      .attr("height", function(d) { return height })
	}

	function onMouseOut(d) {
    tooltip.style("visibility", "hidden");
	}


</script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: brown;
	}

	.axis {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	.title{
	font-size: 200%;
	color: #000000;
	font-weight: 100;
	text-align: center;
	}
	html {
	font-family:
	"HelveticaNeue-Light",
	"Helvetica Neue Light",
	"Helvetica Neue",
	Helvetica,
	Arial,
	"Lucida Grande",
	sans-serif;
	}
	</style>
	<body>
	<h3 class="title">Notas por estudiantes</h3>
	<div id="chart"></div>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
	<script>

	var grades = [
	{"code":23802620, "grade":4.85},
	{"code":23802825, "grade":4.865},
	{"code":23801894, "grade":3.24},
	{"code":23802926, "grade":5},
	{"code":23800661, "grade":3.19},
	{"code":23800768, "grade":3.98},
	{"code":23800972, "grade":4.89},
	{"code":23801922, "grade":3.73},
	{"code":23805498, "grade":4.795},
	{"code":23805913, "grade":4.85},
	{"code":23800311, "grade":2.81},
	{"code":23806395, "grade":4.72},
	{"code":23808850, "grade":3.85},
	{"code":23802872, "grade":2.16},
	{"code":23802105, "grade":4.715},
	{"code":23809880, "grade":4.92},
	{"code":23802056, "grade":4.48},
	{"code":23807897, "grade":5.2},
	{"code":23807916, "grade":5},
	{"code":23801962, "grade":3.62},
	{"code":23808246, "grade":4.61},
	{"code":23802600, "grade":0.11},
	{"code":23808311, "grade":4.7}
	];


	var margin = {top: 20, right: 100, bottom: 30, left: 100},
	width = 800 - margin.left - margin.right,
	height = 800 - margin.top - margin.bottom;

	var wScale = d3.scaleLinear()
	.range([0, width]);

	var hScale = d3.scaleLinear()
	.range([0, height]);



	var colScale = d3.scaleOrdinal(d3.schemeCategory20c);

	var BAR_HEIGHT = 20;

	var tooltip = d3.select("body")
	.append("div")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
	.text("a simple tooltip")
	.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif")
	.style("font-size",200+'%')
	.style("color","#000000");

	var svg = d3.select("#chart").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");



	var xAxis = svg.append("g")
	.attr("class", "axis x--axis");

	wScale.domain([0, grades[11].grade]);
	hScale.domain([0, grades[11].grade]);

	var bars = svg.selectAll(".bars")
	.data(grades);
	var textsGrade = svg.selectAll(".texts.grades")
	.data(grades);
	var textsCode = svg.selectAll(".texts.codes")
	.data(grades);

	//Enter
	var barsEnter = bars.enter()
	.append("rect")
	.attr("class", "bars")
	.attr("width", 0);

	var textGradeEnter = textsGrade.enter()
	.append("text")
	.attr("x", function(d) { return d.grade; })
	.attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
	.attr("dy", ".35em")
	.style("fill", "black")
	.attr("width", function(d) { return wScale(d.grade); })
	.attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
	.text(function(d) { return d.grade; });

	var textCodeEnter = textsGrade.enter()
	.append("text")
	.attr("x", function(d) { return d.grade; })
	.attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
	.attr("dy", ".35em")
	.style("fill", "black")
	.attr("width", function(d) { return wScale(d.grade); })
	.attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
	.text(function(d) { return d.code; })
	.style("font-family","sans-serif");

	//Exit
	bars.exit()
	.transition()
	.duration(1000)
	.attr("width", 0)
	.remove();

	textsGrade.exit()
	.transition()
	.duration(1000)
	.attr("width", 0)
	.remove();

	//Update
	bars.merge(barsEnter)
	.attr("x", 0)
	.attr("y", function(d, i ) { return i * (BAR_HEIGHT+1);})
	.attr("height", function(d) { return height })
	.style("fill", function(d,i) { return colScale(i); })
	.on("mouseover", onMouseOver)
	.on("mouseout", onMouseOut)
	.transition().duration(1000)
	.attr("width", function(d) { return wScale(d.grade); });

	textsGrade.merge(textGradeEnter)
	.attr("x", function(d) { return wScale(d.grade); })
	.attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
	.attr("dy", ".35em")
	.style("fill", "back")
	.attr("width", function(d) { return wScale(d.grade); })
	.attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
	.text(function(d) { return d.grade; })
	.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif");


	textsCode.merge(textCodeEnter)
	.attr("x", function(d) { return -80; })
	.attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
	.attr("dy", ".35em")
	.style("fill", "back")
	.attr("width", function(d) { return wScale(d.grade); })
	.attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
	.text(function(d) { return d.code; })
	.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif");


	xAxis
	.transition()
	.duration(3000)
	.call(d3.axisTop()
	.scale(wScale)
	.ticks(3))

	function onMouseOver(d) {

	tooltip.style("visibility", "visible");

	d3.selectAll(".bars")
	.attr("stroke", "#555")
	.transition()
	.duration(500)
	.attr("stroke", "#fff")
	.attr("width", function(d) { return wScale(d.grade); });

	d3.select(this)
	.attr("width", function(d) { return wScale(d.grade); })
	.attr("height", function(d) { return height-100 })
	.transition()
	.duration(500)
	.attr("width", function(d) { return wScale(d.grade)+10; })
	.attr("height", function(d) { return height })
	}

	function onMouseOut(d) {
	tooltip.style("visibility", "hidden");
	}


	</script>
	</body>