Tarea3

Built with blockbuilder.org

forked from carlosfelipetorres's block: Tarea3

What, why, and how analysis

What?

Dataset Type: Table (A bar chart)

Data Types: Items & Attributes

Codes of students (Categorical type)
Grades (Ordered, quantitative, sequential)

Why?

Actions:

Analyze

Consume → Present

Search

Lookup → Target & Location known

Query

Compare

Targets:

All data

Trends

Attributes

Distribution

How?

Encode

Arrange

Express & Align

Map

Size

Manipulate

Select

Decisions made:

A bar chart was used because the main task was the comparison between the different grades of the students.
It was ordered in an ascending way to have a more accurately comparison the order or ranking of their grades.
On the Y axis it's set the grades, a continuous variable. And in the X axis it's set the codes of the students, a categorical, unordered variable.
The code was made in De version 4 and its using a tools for visualizing tooltips named Tipsy.
The diagram interaction is seen in the moment we pass the mouse over the bars (hover). In this interaction the user can "ask" the visualization "what's going on" with it and the visualization will tell him theexact grade of that code.
For maintaining the best accuracy with the data, the tooltip was implemented as the number of students codes are kind of large and the user really can't tell what is the exact value of the bars just with a simple glance.
The visualization is most of all for presenting and comparing grades, and the interaction is beyond that to show the exact grade.
The channels used in the visualization were the lenght of the bars, and the bars were the marks.

<!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>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .bar {
  	fill: steelblue;
    }

.bar:hover {
      fill: brown;
    }

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

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

.x.axis path {
      display: none;
    }
  </style>
</head>

<body>
  <script>
    var data = [
      {"code":23802620, "grade":4.85},
      {"code":23802825, "grade":4.865},
      {"code":23801894, "grade":3.24},
      {"code":23802926, "grade":5},
      {"code":23800661, "grade":3.19},
      {"code":23800768, "grade":3.98},
      {"code":23800972, "grade":4.89},
      {"code":23801922, "grade":3.73},
      {"code":23805498, "grade":4.795},
      {"code":23805913, "grade":4.85},
      {"code":23800311, "grade":2.81},
      {"code":23806395, "grade":4.72},
      {"code":23808850, "grade":3.85},
      {"code":23802872, "grade":2.16},
      {"code":23802105, "grade":4.715},
      {"code":23809880, "grade":4.92},
      {"code":23802056, "grade":4.48},
      {"code":23807897, "grade":5.2},
      {"code":23807916, "grade":5},
      {"code":23801962, "grade":3.62},
      {"code":23808246, "grade":4.61},
      {"code":23802600, "grade":0.11},
      {"code":23808311, "grade":4.7}
    ];
    
    data = data.sort(function (a, b) {
      if (a.grade < b.grade)
        return -1;
      if (a.grade > b.grade)
        return 1;
      return 0;
		});
    
     // set the dimensions and margins of the graph
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
          width = 1260 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

// set the ranges
    var x = d3.scaleBand()
              .range([0, width])
              .padding(0.1);
    var y = d3.scaleLinear()
              .range([height, 0]);
    
    var tooltip = d3.select("body")
        .append("div").append("div").append("div")
        .style("position", "absolute")
        .style("z-index", "10")
        .style("visibility", "hidden");
          
    // append the svg object to the body of the page
    // append a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    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 + ")");

// Scale the range of the data in the domains
    x.domain(data.map(function(d) { return d.code; }));
    y.domain([0, d3.max(data, function(d) { return d.grade; })]);

// append the rectangles for the bar chart
    svg.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d.code); })
        .attr("width", x.bandwidth())
        .attr("y", function(d) { return y(d.grade); })
        .attr("height", function(d) { return height - y(d.grade); })
    		
    // add the x Axis
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

// add the y Axis
    svg.append("g")
        .call(d3.axisLeft(y));
    
    $('rect').tipsy({ 
      gravity: 's', 
      html: true, 
      title: function() {
        var d = this.__data__;
        return +d.grade; 
            }
    });
  </script>
</body>

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