D3OG

All examples By author By category About

carlosfelipetorres

Full window Github gist

Tarea 4 Germany

Built with blockbuilder.org

What, why, and how analysis

What?

Dataset Type: Table (A bar chart)

Data Types: Items & Attributes

Measuring indexes (Categorical type)
Values of index (Ordered, quantitative, sequential)

Why?

Actions:

Analyze

Consume → Present

Search

Lookup → Target & Location known

Query

Identify

Targets:

All data

Outliers

Attributes

Distribution

How?

Encode

Arrange

Express & Align

Map

Color →Saturation
Size

Manipulate

Select

Tasks

Present the measurement indexes from the dataset obtained from the EPI.

Lookup for interesting data knowing the target and location of the information.

Identify outliers in the data.

Identify the distribution that forms the data.

Decisions made:

The main task of the proposed visualization was to compare the different indexes of the country, and view the difference between them. For that reason, we choose the bar chart, because it helps the user to understand and compare effectively the values of the indicators. We made an ordering functionality to show a more accurately comparison, but the user also has the option for viewing the data as it is. In the case when the data is not ordered, we decide to put a new channel that enforce the concept of comparison, that’s why we set the opacity of the bars according to the value of the data.

The channels used in the visualization were the length of the bars and the color (saturation/opacity), and the bars were the marks. Talking about the chart characteristics, we put the value of the index in the Y axis, as is a continuous variable. And in the X axis it's set the measurement indexes of the country, a categorical, unordered variable.

The diagram interaction is seen in the moment the user passes the mouse over the bars (hover). In this interaction the user can "ask" the visualization and the visualization will tell him the exact value of that index. In addition, the user can interact with the visualization making click over the checkbox to sort or not the visualization. For maintaining the best accuracy with the data, the tooltip was implemented as the names of the measurement indexes were kind of large and the user really can't tell what is the exact value of the bars just with a simple glance. Also the names of the indexes were rotated for better visualization.

Effectiveness & Expressiveness

Our visualization has a good expressiveness because we are the information of the dataset correctly and not showing another data that doesn’t correspond to the data we have. In addition, we have the ordered data in a way that represents correctly the dataset and matches the channels and the data characteristics.

The effectiveness is achieved correctly because we are using the highest ranked channels, as the length and the saturation or opacity to encode the attributes of the dataset. We user the bars length as it is the best ranked channel, and after that we set the opacity of the bars because the saturation is one of the best ranked channels also.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.2.min.js"></script> 
  <script type="text/javascript" src="jquery.tipsy.js"></script>
  <link href="tipsy.css" rel="stylesheet" type="text/css" />
  <style>
    .bar:hover {
      fill: brown;
    }
    
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      position: relative;
      width: 960px;
    }

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

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

.bar {
      fill: steelblue;
      fill-opacity: .5;
    }

.x.axis path {
      display: none;
    }

label {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  </style>
  <h1>Visualization 4</h1>
  <h2>Nychol Bazurto G&oacute;mez and Carlos Torres</h2>
  <h4>Country: Germany</h4>
  <h4>EPI Score: 80.47</h4>
  <h4>10-Year Percent Change: 1.89%</h4>
 
  <label><input type="checkbox"> Sort values</label>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var margin = {margin:60, top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
var EPI_Score =	80.47;
var Ten_Year_Percent_Change = 1.89;

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

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

var xAxis = d3.axisBottom(x)
    .scale(x);

var yAxis = d3.axisLeft(y)
    .scale(y);
    
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 tooltip = d3.select("body")
        .append("label")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden");

d3.tsv("data.tsv", function(error, data) {

data.forEach(function(d) {
    d.value = +d.value;
  });

x.domain(data.map(function(d) { return d.index; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .attr("y", 0)
      .attr("x", 70)
      .attr("dy", "-0.2296em")
      .attr("transform", "rotate(-90)")
  		.style("font-weight","bold");

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

svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.index); })
      .attr('width', x.bandwidth())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
    .style("opacity", function(d){
    	if(d.value > 0 && d.value <= 40){
      	return 0.3;
      }else if(d.value > 40 && d.value <= 80){
        return 0.5;
      }else if(d.value > 80 && d.value <= 90){
        return 0.7;
      }else if(d.value > 90 && d.value <= 100){
        return 0.9;
      }
  });

d3.select("input").on("change", change);

var sortTimeout = setTimeout(function() {
    d3.select("input").property("checked", true).each(change);
  }, 2000);

function change() {
    clearTimeout(sortTimeout);

// Copy-on-write since tweens are evaluated after a delay.
    var x0 = x.domain(data.sort(this.checked
        ? function(a, b) { return b.value - a.value; }
        : function(a, b) { return d3.ascending(a.index, b.index); })
        .map(function(d) { return d.index; }))
        .copy();

svg.selectAll(".bar")
        .sort(function(a, b) { return x0(a.index) - x0(b.index); });

var transition = svg.transition().duration(750),
        delay = function(d, i) { return i * 50; };

transition.selectAll(".bar")
        .delay(delay)
        .attr("x", function(d) { return x0(d.index); });

transition.select(".x.axis")
        .call(xAxis)
      	.selectAll("g")
        .delay(delay);
  }
  
  $('rect').tipsy({ 
      gravity: 'w', 
      html: true, 
      title: function() {
        var d = this.__data__;
        return +d.value +" "+d.index; 
            }
    });
   
});
</script>

Modified http://code.jquery.com/jquery-1.6.2.min.js to a secure url

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

https://code.jquery.com/jquery-1.6.2.min.js