Anthropocene data visualization uniandes

Anthropocene data visualization

http://adatavisualization.net/index.php?page=performance

El ejemplo puesto en clase es de gráficos 3D. Estos gráficos no son los más adecuados ya que se pierde completamente la capacidad de comparación de los valores, ya que la vista en perspectiva impide poder hacer ese análisis.

Lo propuesto en este gráfico es poder ver claramente los detalles de cada uno de los items, sus valores y los eventos. Además poderlos hacer comparables con el nivel de resultados del congreso del website (adatavisualization.net)

Nota: La fuente de datos es tiene datos muy descorganizados, además no están del todo estandarizados, lo cual dificultó el desarrllo . Por tal motivo tuve que corregir y escoger solo datos de la decada de 1900.

<!DOCTYPE html>
<meta charset="utf-8">
<title>W3C Validation Errors</title>
<style>

text {
  font: 10px sans-serif;
}

rect.value {
  fill: #aaa;
}

rect.value:hover {
  fill: steelblue;
}

text.name {
  fill: black;
  text-shadow: 0 1px 1px #fff;
  pointer-events: none;
}

.axis {
  shape-rendering: crispEdges;
}

.axis path {
  fill: none;
}

.x.axis path {
  display: none;
}

.x.axis line {
  stroke: #fff;
  stroke-opacity: .8;
}

.y.axis line {
  stroke: black;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 30, right: 10, bottom: 10, left: 30},
    width = 960 - margin.left - margin.right,
    height = 4000 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], .1);

var svg = d3.select("body").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 + ")");

d3.json("dataVis.json", function(error, errors) {
  if (error) throw error;

errors.sort(function(a, b) { return b.value - a.value; });

// Set the scale domain.
  x.domain([0, d3.max(errors, function(d) { return d.value; })]);
  y.domain(d3.range(errors.length));

svg.selectAll(".value")
      .data(errors)
    .enter().append("rect")
      .attr("class", "value")
      .attr("y", function(d, i) { return y(i)-90; })
      .attr("width", function(d) { return x(d.value); })
      .attr("height", y.rangeBand());

svg.append("g")
      .attr("class", "x axis")
      .call(d3.svg.axis()
      .scale(x)
      .orient("top")
      .ticks(12)
      .tickSize(-height));

svg.selectAll(".title")
      .data(errors)
      .enter().append("text")
      .attr("class", "name")
      .attr("x", -16)
      .attr("y", function(d, i) { return y(i)-90 + y.rangeBand() / 2; })
      .attr("dx", -3)
      .attr("dy", ".35em")
      .text(function(d) { return d.value + "   --   year: " + d.year + ", " + d.title; });

svg.append("g")
      .attr("class", "y axis")
    .append("line")
      .attr("y2", height);
});

</script>

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