Tarea4

Authors:

Eduard Avendaño
Cristian Gutierrez

WHAT?

Dataset Type: Table.
Data Type: Items, attributes (Quantitative).

WHY?

We have two Actions: Discover and Present. Both Works for Analyze the data.
Target: Distribution.

Discover the percentage of EPI (Environmental Performance Index) for each country. Present indicators Environmental Health and Ecosystem Vitality for each country.

HOW?

Marks: Volume and Area.
Channels: Size (Volume) and Color (Hue).
Arrange: Express.
Map: Color.
Manipulate: Select

REVIEW

The channels used are the least effective in the Framework of Tamara teacher. Volume does not allow adequately perceive the magnitude of each of the attributes, although it is valid to note that use hue to clearly identify the categories, but the colors used have tones that do not allow proper distinction. The channel volume does not allow a clear perception of the magnitudes and also favors the overlap of marks.

Task of discovering the percentage of each country, it is clear that the used filter does not work (displays only the vis of Germany), but it is valid to note that a summary of the country shows the percentage of EPI and its ranking is shown against rest.

As for the task of presenting the Environmental Health and Ecosystem Vitality indicators for each country it can be noticed that use less effective channels. The vis violates the principle of effectiveness as 3D shapes are less effective, this could be done better using a bar chart.

Built with blockbuilder.org

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

.empty {
	stop-opacity: 0;
}

.y.axis path {
  display: none;
}

.toolTip {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        display: none;
        width: auto;
         height: auto;
        background: none repeat scroll 0 0 white;
        border: 0 none;
        border-radius: 8px 8px 8px 8px;
        box-shadow: -3px 3px 15px #888888;
        color: black;
        font: 12px sans-serif;
        padding: 5px;
        text-align: center;
    }

text {
        font: 10px sans-serif;
        color: white;
    }
    text.country {
        font-size: 80%;
        fill: white;
    }

</style>
<div id="sec1">
  <body>

var y = d3.scaleBand()
    .range([0, height])
		.paddingInner(0.1);
  
var x = d3.scaleLinear()
    .range([0, width]);

var p = d3.scaleLinear()
		.range([0, 100]);

var yAxis = d3.axisLeft()
    .scale(y)
;

var xAxis = d3.axisBottom()
    .scale(x)
    .ticks(5, "%");

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 + ")");

var defs = d3.select("body svg").append("defs");
  
var chart = d3.select(".chart")
    .attr("width", width);
 
d3.tsv("source.tsv", type, function(error, data) { 
	if(error) {
  	console.error(error);
    alert(error);
    return;
  }
  update(data);
});
  var SelectedCountry = "Switzerland";
   
function update(data){

d3.select("#sec1").selectAll('p')
    .data(SelectedCountry[0]).enter().append('h1')
    .text(function(d) { return SelectedCountry; })
    .attr('class', 'enter');
  
  // Scale the range of the data in the domains
  y.domain(data.map(function(d) { return d.Country; })); 
  x.domain([0, d3.max(data, function(d) { return d.CurrentContry; })]);
  p.domain(x.domain());

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("x", 6)
      .attr("dx", ".71em")
      .style("text-anchor", "end")
      .text("Porcents");

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Countries");

var div = d3.select("body").append("div").attr("class", "toolTip");

};

function type(d) {
  d.CurrentContry = d[SelectedCountry]/100;
  d.Fisheries = d.Fisheries/100; // coerce to number
  d.EPIScore = d.EPIScore/100;
  return d;
}

</script>
</body>

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