Bar chart

This bar chart was created using D3. The main purpose of this graph is to represent the grades from 23 different students.

What, Why, How Analysis for the problem and the solution

WHAT

This visualization seeks to present the grades, in a range between 0 and 5, of 23 different students. The different variables considered in the problem are:

Student's code: Categorical variable The student's code. Despite it's a numeric value, the numeric value has no semantic value.
Grade: Quantitative variable The student's grade. It's a continuos value in a range between 0 and 5.

WHY

The purpose of this visualization is to present an overview of the grades of some students. In addition, it supports a filtering function that shows the grade of an specific student and locates it in the graph, in order to compare the individual results with the general performance. Lastly, the visualization allows to see the student's detail, which is implemented using a mouseover function.

HOW

The different functionalities offered in the visualization are developed accordingly to the primary visualization rules: expressiveness and effectiveness. In the first place, it needs to be made clear that there's a new variable proposal: a fail indicator. This is the result of data aggregation and fulfills the purpose of indicate which students failed. Taking this into account, there's a channel associated to each variable: aligned position in the vertical axis for the grades, aligned position in the horizontal axis for the students, and color for the new categorical value: the fail indicator.

Why this visualization

As it is explained in the What, Why and How Analysis, the decisions took in order to choose this specific visualization are based taking into account the visualization mantra overview first, zoom and filter and detail on demand and the rules of visualization effectiveness and expressiveness.

Meili Vanegas Hernández

Visual Analytics 2016

Universidad de los Andes

Bogotá, Colombia

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    .axis path,
    .axis line {
      fill: none;
      stroke: black;
      shape-rendering: crispEdges;
    }

h1 {
      font-family: sans-serif;
      font-size: 21px;
    }

h3 {
      font-family: sans-serif;
      font-size: 16px;
    }

p {
      font-family: sans-serif;
      font-size: 14px;
    }

.axis text {
      font-family: sans-serif;
      font-size: 11px;
    }

div.leggend {
      float: right;
      clear: both;
      border-radius: 25px;
      background-color: transparent;
      padding: 0px 0px 15px 15px;
      width: 120px;
      height: 100px;
    }

rect {
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
    }

rect:hover {
      fill: orange;
    }

</style>
</head>

<body>
  <h1>
    Grades
  </h1>
  <input id="searchedCode">
  <button id="search" onclick="search">Search</button>
  <div class="leggend" id="leggend"></div>
  <script>
    var w = 940;
    var h = 230;
    var startsAxis = 30
    
    var leggend = d3.select("#leggend");

var grades = [
      {"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}
    ];
    
    var margin = {
        top: 30,
        right: 20,
        bottom: 70,
        left: 50
      },
      width = 1200 - margin.left - margin.right,
      height = 360 - margin.top - margin.bottom;

var xScale = d3.scale.ordinal()
      .domain(grades.map(function(d) {
        return d.code;
      }))
      .rangeRoundBands([0, w - startsAxis], 0.05);

var yScale = d3.scale.linear()
      .domain([0, d3.max(grades, function(d) {
        return d.grade;
      })])
      .range([h, 0]);

var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("top");

var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient("left")
      .ticks(5);

var code = function(d) {
      return d.code;
    };

//Create SVG element
    var svg = d3.select("body")
      .append("svg")
      .attr("width", width + margin.left + margin.right + startsAxis)
      .attr("height", height + margin.top + margin.bottom);

//Create bars
    svg.selectAll("rect")
      .data(grades, code)
      .enter()
      .append("rect")
      .attr("x", function(d, i) {
        return xScale(d.code) + startsAxis;
      })
      .attr("y", function(d) {
        return yScale(d.grade) + 10;
      })
      .attr("width", xScale.rangeBand())
      .attr("height", function(d) {
        return h - yScale(d.grade);
      })
      .attr("fill", function(d) {
        if (d.grade >= 3) return "#66bd63";
        return "#f46d43";
      })

//Tooltip
    .on("mouseover", function(d) {
        //Get this bar's x/y grades, then augment for the tooltip
        var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
        var yPosition = parseFloat(d3.select(this).attr("y")) + 14;
        leggend.style("background-color", "orange");
        leggend.selectAll("h3").remove()
        leggend.selectAll("p").remove()
        leggend.append("h3")
          .attr("label", "pLabel")
          .text("Detail:");
        leggend.append("p")
          .attr("code", "pCode")
          .text("Code: " + d.code);
        leggend.append("p")
          .attr("grade", "pGrade")
          .text("Grade: " + (d.grade).toFixed(2));
        //Update Tooltip Position & grade
        d3.select("#tooltip")
          .style("left", xPosition + "px")
          .style("top", yPosition + "px")
          .select("#grade")
          .text(d.grade);
        d3.select("#tooltip").classed("hidden", false)
      })
      .on("mouseout", function() {
        //Remove the tooltip
        d3.select("#tooltip").classed("hidden", true);
        leggend.style("background-color", "transparent");
        leggend.selectAll("h3").remove()
        leggend.selectAll("p").remove()
      });

svg.append("g") // Add the X Axis
      .attr("class", "x axis")
      .attr("transform", "translate(" + startsAxis + "," + (h + 10) + ")")
      .call(xAxis)
      .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "2.5em")
      .attr("transform","rotate(-65)");
    // yAxis
    svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + startsAxis + ",+10)")
      .call(yAxis);

svg.append("text")
      .attr("transform", "translate(" + (w - startsAxis) + "," + (h + 3) + ")")
      .attr("font-family","sans-serif")
      .attr("font-size","12")
      .text("Code");

svg.append("text")
      .attr("transform","translate(" + 0 + "," + (9) +")")
      .attr("font-family","sans-serif")
      .attr("font-size","12")
      .text("Grade");

d3.select("#search").on("click",search);
  </script>
</body>

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