jorgeehernandez/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with [blockbuilder.org](http://blockbuilder.org
Visualizacion a analizar:
http://adatavisualization.net/index.php?page=performance
Expresividad evaluación:
•	La visualización expresa únicamente los datos del dataset.
•	Las caracteriticas de los  canales no son iguales a las características de la data.
Efectividad Expresion:
•	Presicion
o	No es posible ser preciso usando esta visualización ya que la visualización en 3d genera oclusión.
•	Discriminabilidad
o	Esta visualización no permite una discriminación clara.
•	Separacion:
o	La visualizcion usa el canar color:hue que permite la discriminación de los datos.
Creemos que es posible lograr una visualización que deforma mas sencilla exprese los datos de forma mas clara y permita lograr de una mejor forma el cumplimiento de la tareas.
Nosotros proponemos realizar una visualización 2D, la cual mejore la expresividad usando posición en una escala común, para esto usamos la posición (area) como discriminante y el color como seprador, también usamos etiquetas de texo como método de precisión.

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

 .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>
</body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 900,
    height = 550;

var nodes =  [{'item':'HealthIpacts','radius': 100, 'color':'#795548'},
             {'item':'AirQuality', 'radius':78, 'color':'#F44336'},
             {'item':'Water&Sanitation', "radius":100, 'color':'#9C27B0'},
             {'item':'WaterResources', 'radius':95.18, 'color':'#3F51B5'},
             {'item':'Agriculture', 'radius':65.31, 'color':'#00BCD4'},
             {'item':'Forests', 'radius':31.35, 'color':'#009688'},
             {'item':'Fisheries', 'radius':13.4/2, 'color':'#CDDC39'},
             {'item':'Biodiversity', 'radius':100/2, 'color':'#FF9800'},
             {'item':'Climate&Energy', 'radius':62.77/2, 'color':'#FFEB3B'},
             {'item':'', 'radius':100/2, 'color':'black'}],
    root = nodes[9];
root.radius = 0;
root.fixed = true;

var force = d3.layout.force()
    .gravity(0.05)
    .charge(function(d, i) { return i ? 0 : -2000; })
    .nodes(nodes)
    .size([width, height]);

force.start();

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

svg.selectAll("circle")
    .data(nodes)
  	.enter().append("circle")
    .attr("r", function(d) { return d.radius; })
    .style("fill", function(d, i) { return d.color })
		.text(function(d){return d.item});

svg.selectAll('text')
  	.data(nodes)
		.enter().append('text')
		.text(function(d,i){if(i<9){return d.item+" :"+d.radius}else{return null}})
		.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica 				Neue', Helvetica, Arial, 'Lucida Grande', sans-serif");


force.on("tick", function(e) {
  var q = d3.geom.quadtree(nodes),
      i = 0,
      n = nodes.length;

  while (++i < n) q.visit(collide(nodes[i]));

  svg.selectAll("circle")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

   svg.selectAll("text")
      .attr("x", function(d) { return d.x-(d.radius/2); })
      .attr("y", function(d) { return d.y; });
});

svg.on("mousemove", function() {
  var p1 = d3.mouse(this);
  root.px = p1[0];
  root.py = p1[1];
  force.resume();
});

function collide(node) {
  var r = node.radius +16,
      nx1 = node.x - r,
      nx2 = node.x + r,
      ny1 = node.y - r,
      ny2 = node.y + r;
  return function(quad, x1, y1, x2, y2) {
    if (quad.point && (quad.point !== node)) {
      var x = node.x - quad.point.x,
          y = node.y - quad.point.y,
          l = Math.sqrt(x * x + y * y),
          r = node.radius + quad.point.radius;
      if (l < r) {
        l = (l - r) / l * .5;
        node.x -= x *= l;
        node.y -= y *= l;
        quad.point.x += x;
        quad.point.y += y;
      }
    }
    return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
  };
}

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

	.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>
	</body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 900,
	height = 550;

	var nodes = [{'item':'HealthIpacts','radius': 100, 'color':'#795548'},
	{'item':'AirQuality', 'radius':78, 'color':'#F44336'},
	{'item':'Water&Sanitation', "radius":100, 'color':'#9C27B0'},
	{'item':'WaterResources', 'radius':95.18, 'color':'#3F51B5'},
	{'item':'Agriculture', 'radius':65.31, 'color':'#00BCD4'},
	{'item':'Forests', 'radius':31.35, 'color':'#009688'},
	{'item':'Fisheries', 'radius':13.4/2, 'color':'#CDDC39'},
	{'item':'Biodiversity', 'radius':100/2, 'color':'#FF9800'},
	{'item':'Climate&Energy', 'radius':62.77/2, 'color':'#FFEB3B'},
	{'item':'', 'radius':100/2, 'color':'black'}],
	root = nodes[9];
	root.radius = 0;
	root.fixed = true;

	var force = d3.layout.force()
	.gravity(0.05)
	.charge(function(d, i) { return i ? 0 : -2000; })
	.nodes(nodes)
	.size([width, height]);

	force.start();

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

	svg.selectAll("circle")
	.data(nodes)
	.enter().append("circle")
	.attr("r", function(d) { return d.radius; })
	.style("fill", function(d, i) { return d.color })
	.text(function(d){return d.item});

	svg.selectAll('text')
	.data(nodes)
	.enter().append('text')
	.text(function(d,i){if(i<9){return d.item+" :"+d.radius}else{return null}})
	.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif");


	force.on("tick", function(e) {
	var q = d3.geom.quadtree(nodes),
	i = 0,
	n = nodes.length;

	while (++i < n) q.visit(collide(nodes[i]));

	svg.selectAll("circle")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });

	svg.selectAll("text")
	.attr("x", function(d) { return d.x-(d.radius/2); })
	.attr("y", function(d) { return d.y; });
	});

	svg.on("mousemove", function() {
	var p1 = d3.mouse(this);
	root.px = p1[0];
	root.py = p1[1];
	force.resume();
	});

	function collide(node) {
	var r = node.radius +16,
	nx1 = node.x - r,
	nx2 = node.x + r,
	ny1 = node.y - r,
	ny2 = node.y + r;
	return function(quad, x1, y1, x2, y2) {
	if (quad.point && (quad.point !== node)) {
	var x = node.x - quad.point.x,
	y = node.y - quad.point.y,
	l = Math.sqrt(x * x + y * y),
	r = node.radius + quad.point.radius;
	if (l < r) {
	l = (l - r) / l * .5;
	node.x -= x *= l;
	node.y -= y *= l;
	quad.point.x += x;
	quad.point.y += y;
	}
	}
	return x1 > nx2 \|\| x2 < nx1 \|\| y1 > ny2 \|\| y2 < ny1;
	};
	}

	</script>