Tarea4

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.

<!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 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();
});

</script>

https://d3js.org/d3.v3.min.js