D3OG

All examples By author By category About

davidgutierrez

Full window Github gist

Tarea3

Tarea 3: Visual Analytics

Built with blockbuilder.org

What:

DataSet

Type

Table

Avaliability

Static

Attributes Types

Categorical

Code

Ordered

Grades

Ordering Direction

Secuential

Why:

Actions

Analyze

Discover and Present

Search

Locate

Query

Identify

Targets

Features

How:

Encode

Arrange

Order Align

Map

Color

Hue

Manipulate

Select

Bars were used because the type of attributes (categorical and ordained ) have a better understanding, using this type of graph.

Bars in direction horizontally rather than vertical, because many of the codes are long and placing them horizontally allows to be read more clearly.

A conditional color was added to indicate who are losing the course ( taking advantage of the relation "green = good", "red = bad").

It allows Order By Code and Grades, so if you wanna find a student you can do it for code and if you wanna know who are the best or wost grades, you can order it for code-

Added

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

body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        width: 950px;
        height: 500px;
        position: relative;
    }

svg {
        width: 100%;
        height: 100%;
        position: center;
    }

.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.grade {
        font-size: 80%;
        fill: white;
    }

.axisHorizontal path{
        fill: none;
    }

.axisHorizontal .tick line {
        stroke-width: 1;
        stroke: rgba(0, 0, 0, 0.2);
    }
.label {
  fill:red;
}

</style>
<body>

	<div id="buttonContainer">
		<button id="sortByCode">Sort By Code</button>
		<button id="sortByGrade">Sort By Grade</button>
	</div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

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}
];
 
grades.sort(function(a, b) {
    return a.code - b.code;
});

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

var axisMargin = 10,
            margin = 40,
            valueMargin = 4,
            width = parseInt(d3.select('body').style('width'), 10),
            height = parseInt(d3.select('body').style('height'), 10),
            barHeight = (height-axisMargin-margin*2)* 0.6/grades.length,
            barPadding = (height-axisMargin-margin*2)*0.5/grades.length,
            grades, bar, svg, scale, xAxis, labelWidth = 0;

max = d3.max(grades, function(d) { return d.grade; });

svg = d3.select('body')
            .append("svg")
            .attr("width", width)
            .attr("height", height);

bar = svg.selectAll("g")
            .data(grades)
            .enter()
            .append("g");

bar.attr("class", "bar")
            .attr("cx",0)
            .attr("transform", function(d, i) {
                return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")";
            })
    .attr("fill", function(d) { return (d.grade <= 3.5 ? "#bc0000" : "#009e00"); });

bar.append("text")
            .attr("class", "code")
            .attr("y", barHeight / 2)
            .attr("dy", ".35em") //vertical align middle
            .text(function(d){
                return d.code;
            }).each(function() {
        labelWidth = Math.ceil(Math.max(labelWidth, this.getBBox().width));
    });

var xScale = d3.scale.ordinal()
    .domain(grades)
    .rangeRoundBands([0, height], .1);
  
    scale = d3.scale.linear()
            .domain([0, max])
            .range([0, width - margin*2 - labelWidth]);

xAxis = d3.svg.axis()
            .scale(scale)
            .tickSize(-height + 2*margin + axisMargin)
            .orient("bottom");

bar.append("rect")
            .attr("transform", "translate("+labelWidth+", 0)")
            .attr("height", barHeight)
            .attr("width", function(d){
                return scale(d.grade);
            });

bar.append("text")
            .attr("class", "grade")
            .attr("y", barHeight / 2)
            .attr("dx", -valueMargin + labelWidth) //margin right
            .attr("dy", ".35em") //vertical align middle
            .attr("text-anchor", "end")
            .text(function(d){
                return (d.grade);
            })
            .attr("x", function(d){
                var width = this.getBBox().width;
                return Math.max(width + valueMargin, scale(d.grade));
            });

bar
            .on("mousemove", function(d){
                div.style("left", d3.event.pageX+10+"px");
                div.style("top", d3.event.pageY-25+"px");
                div.style("display", "inline-block");
                div.html((d.code)+"<br> grade:"+(d.grade));
            });
    bar
            .on("mouseout", function(d){
                div.style("display", "none");
            });

svg.insert("g",":first-child")
            .attr("class", "axisHorizontal")
            .attr("transform", "translate(" + (margin + labelWidth) + ","+ (height - axisMargin - margin)+")")
            .call(xAxis);
    
//Sorting logic
		d3.select("#sortByGrade")
			.on("click", function() {

bar.sort(function(a, b) {
    				return a.grade - b.grade;
					})
					.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("transform", function(d, i) {
                return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")";
            });
			});

//Sorting logic
		d3.select("#sortByCode")
			.on("click", function() {

bar.sort(function(a, b) {
    				return a.code - b.code;
					})
					.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("transform", function(d, i) {
                return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")";
            });
			});

bar.append("text")
            .attr("text-anchor", "middle")  // this makes it easy to centre the text as the transform is applied to the anchor
            .attr("transform", "translate("+ (width/2) +","+(height-(barPadding/3))+")")  // centre below axis
            .text("Grade");
</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

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