Skip to content

Instantly share code, notes, and snippets.

@jorgeehernandez

jorgeehernandez/.block

Last active September 27, 2016 22:54
Show Gist options
  • Save jorgeehernandez/0e90c70f509c3a91ed06196363411b82 to your computer and use it in GitHub Desktop.
Save jorgeehernandez/0e90c70f509c3a91ed06196363411b82 to your computer and use it in GitHub Desktop.
Download ZIP
Tarea 3 Visual Analytics
Raw
.block
license: mit
Raw
README.md

Built with blockbuilder.org

I choosed present the data using a simple bar chart because it is the simplest way to do it, I drawed the bars one down of other, in order to make the visualization more interesting (not the ordinary simple bar chart) though, and also I have added a simple transition to animate the visualization. I have used the hue color to give intuitiveness to the visualization.

Analysis What, Why, How

What Datasets dataType: item dataSet: table Attributes cuantitative Why: Actions Present Summarize Targets Distribution How: Encode Align Marks Lines Channels verticial position Color hue

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.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;
}
.title{
font-size: 200%;
color: #000000;
font-weight: 100;
text-align: center;
}
html {
font-family:
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica,
Arial,
"Lucida Grande",
sans-serif;
}
</style>
<body>
<h3 class="title">Notas por estudiantes</h3>
<div id="chart"></div>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script>
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: 20, right: 100, bottom: 30, left: 100},
width = 800 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
var wScale = d3.scaleLinear()
.range([0, width]);
var hScale = d3.scaleLinear()
.range([0, height]);
var colScale = d3.scaleOrdinal(d3.schemeCategory20c);
var BAR_HEIGHT = 20;
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip")
.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif")
.style("font-size",200+'%')
.style("color","#000000");
var svg = d3.select("#chart").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 xAxis = svg.append("g")
.attr("class", "axis x--axis");
wScale.domain([0, grades[11].grade]);
hScale.domain([0, grades[11].grade]);
var bars = svg.selectAll(".bars")
.data(grades);
var textsGrade = svg.selectAll(".texts.grades")
.data(grades);
var textsCode = svg.selectAll(".texts.codes")
.data(grades);
//Enter
var barsEnter = bars.enter()
.append("rect")
.attr("class", "bars")
.attr("width", 0);
var textGradeEnter = textsGrade.enter()
.append("text")
.attr("x", function(d) { return d.grade; })
.attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
.attr("dy", ".35em")
.style("fill", "black")
.attr("width", function(d) { return wScale(d.grade); })
.attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
.text(function(d) { return d.grade; });
var textCodeEnter = textsGrade.enter()
.append("text")
.attr("x", function(d) { return d.grade; })
.attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
.attr("dy", ".35em")
.style("fill", "black")
.attr("width", function(d) { return wScale(d.grade); })
.attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
.text(function(d) { return d.code; })
.style("font-family","sans-serif");
//Exit
bars.exit()
.transition()
.duration(1000)
.attr("width", 0)
.remove();
textsGrade.exit()
.transition()
.duration(1000)
.attr("width", 0)
.remove();
//Update
bars.merge(barsEnter)
.attr("x", 0)
.attr("y", function(d, i ) { return i * (BAR_HEIGHT+1);})
.attr("height", function(d) { return height })
.style("fill", function(d,i) { return colScale(i); })
.on("mouseover", onMouseOver)
.on("mouseout", onMouseOut)
.transition().duration(1000)
.attr("width", function(d) { return wScale(d.grade); });
textsGrade.merge(textGradeEnter)
.attr("x", function(d) { return wScale(d.grade); })
.attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
.attr("dy", ".35em")
.style("fill", "back")
.attr("width", function(d) { return wScale(d.grade); })
.attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
.text(function(d) { return d.grade; })
.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif");
textsCode.merge(textCodeEnter)
.attr("x", function(d) { return -80; })
.attr("y", function(d,i){return i*(BAR_HEIGHT+1) +(BAR_HEIGHT / 2)})
.attr("dy", ".35em")
.style("fill", "back")
.attr("width", function(d) { return wScale(d.grade); })
.attr("height",function(d,i){return i*(BAR_HEIGHT+1)} )
.text(function(d) { return d.code; })
.style("font-family","'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif");
xAxis
.transition()
.duration(3000)
.call(d3.axisTop()
.scale(wScale)
.ticks(3))
function onMouseOver(d) {
tooltip.style("visibility", "visible");
d3.selectAll(".bars")
.attr("stroke", "#555")
.transition()
.duration(500)
.attr("stroke", "#fff")
.attr("width", function(d) { return wScale(d.grade); });
d3.select(this)
.attr("width", function(d) { return wScale(d.grade); })
.attr("height", function(d) { return height-100 })
.transition()
.duration(500)
.attr("width", function(d) { return wScale(d.grade)+10; })
.attr("height", function(d) { return height })
}
function onMouseOut(d) {
tooltip.style("visibility", "hidden");
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment