Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
291 lines (264 sloc) 9.18 KB
<!DOCTYPE html>
<html>
<head>
<title>ISIS 4822 : Visual Analytics Final Projects</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.css" rel="stylesheet">
<style>
.project {
height: 600px;
overflow: scroll;
}
.project .description {
font-size: 90%;
}
img.project-thumb {
width: 100%;
margin-bottom: 5px;
}
.topic h2 {
margin-bottom: 20px;
}
.project_url, .project_demo {
margin: 5px;
}
.intro {
font-size: 130%;
}
</style>
</head>
</html>
<body>
<div class="content container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<h1>Final Class Projects<a href="http://johnguerra.co/classes/isis_4822_fall_2016/"> Visual Analytics Course</a></h1>
</div>
<div class="col-md-8 col-sm-12 intro">
<p>This is a list of the final projects on this class. Each group was tasked to develop a Visual Analytics tool to help solve a <strong>real</strong> problem from a <strong>real</strong> user. The students successfully worked through the problems of obtaining and cleaning real data, and more importantly extracting real value from them.</p>
<p>Here is a list of the projects grouped by topics:</p>
</div>
<div class="col-md-12 col-sm-12">
<div id="projects"></div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<h3>Presentations</h3>
<h4>Schedule</h4><table>
<thead>
<tr>
<th>Time</th>
<th>Group</th>
<th>Project</th>
</tr>
</thead>
<tbody>
<tr>
<td>6:00 PM</td>
<td></td>
<td>Introduction</td>
</tr>
<tr>
<td>6:13 PM</td>
<td>3</td>
<td>Visualization of market data BVC</td>
</tr>
<tr>
<td>6:26 PM</td>
<td>7</td>
<td>Tools to Enjoy the Election Data From Colombia Since 1958</td>
</tr>
<tr>
<td>6:39 PM</td>
<td>2</td>
<td>Colombian Cinema</td>
</tr>
<tr>
<td>6:52 PM</td>
<td>5</td>
<td>Dashboard de Desempeño y Actividades para el control y seguimiento de los Proyectos.</td>
</tr>
<tr>
<td>7:05 PM</td>
<td>6</td>
<td>Web Analytics Visualization</td>
</tr>
<tr>
<td>7:18 PM</td>
<td>10</td>
<td>Visual Analysis of the Satisfaction Survey (ESAT)</td>
</tr>
<tr>
<td>7:31 PM</td>
<td></td>
<td>Break</td>
</tr>
<tr>
<td>7:50 PM</td>
<td>4</td>
<td>Visualization for public transport data in Bahía Blanca, Argentina</td>
</tr>
<tr>
<td>8:03 PM</td>
<td>9</td>
<td>Incident Managment: Recaudo Bogotá</td>
</tr>
<tr>
<td>7:50 PM</td>
<td>1</td>
<td>Visualization of world happiness report: an interactive approach.</td>
</tr>
<tr>
<td>8:03 PM</td>
<td>8</td>
<td>TrackCA</td>
</tr>
<tr>
<td>8:36 PM</td>
<td>11</td>
<td>Visual Analytics aplicated to growth of preterm infants in his first year of life</td>
</tr>
</tbody>
</table>
<h4>Streaming/Video</h4><span>
<iframe width="853" height="480" src="https://www.youtube.com/embed/Yh-dPmrO_NM?rel=0" frameborder="0" allowfullscreen></iframe>
</span>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="../../js/jquery-1.12.1.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="./tabletop.js"></script>
<script>
var urlHtml = "1XU5AzI2BrtmtWgbnAKhO9WbCu6LhAtzyOzGBcKpQxnI";
var container = d3.select("#projects");
function update(data) {
//- <div class="panel panel-default">
//- <div class="panel-heading">
//- <h3 class="panel-title">Panel title</h3>
//- </div>
//- <div class="panel-body">
var nested_data = d3.nest()
.key(function (d) { return d["Tipo"]; })
.sortKeys(function (a, b) {
return a === "Others" ?
1 :
b === "Others" ?
-1 :
d3.ascending(a, b);
})
.entries(data);
var topics = container.selectAll(".topic")
.data(nested_data)
.enter()
.append("div")
.attr("class", "topic row col-sm-12")
topics.append("h2")
.text(function (d) { return d.key; })
var projs = topics.selectAll(".project")
.data(function (d) { return d.values; })
.enter()
.append("div")
.attr("class", "col-sm-4")
.append("div")
.attr("class", "project panel panel-default");
projs
.append("div")
.attr("class", "panel-heading")
.append("h3")
.attr("class", "panel-title")
.append("a")
.attr("href" , function (d) {
return d["URL repositorio"];
})
.attr("target", "_blank")
.text(function (d) { return d["Nombre Proyecto"]; });
var body = projs.append("div")
.attr("class", "panel-body");
body
.append("a")
.attr("href", function (d) { return d["URL del demo del proyecto"]; })
.attr("target", "_blank")
.append("img")
.attr("class", "project-thumb")
.attr("src", function (d) { return d["URL de una imagen portada del proyecto"]; });
body.append("a")
.attr("class", "project_url btn btn-sm btn-default")
.attr("href", function (d) { return d["URL repositorio"]; })
.attr("target", "_blank")
.text("GitHub");
body.append("a")
.attr("class", "project_demo btn btn-sm btn-primary")
.attr("href", function (d) { return d["URL del demo del proyecto"]; })
.attr("target", "_blank")
.text("Demo");
body.append("a")
.attr("class", "project_demo btn btn-sm btn-success")
.attr("href", function (d) { return d["URL del video"]; })
.attr("target", "_blank")
.text("Video");
body.append("h4").text("Description");
body.append("p")
.attr("class", "description")
.text(function (d) { return d["Párrafo de descripción del proyecto"]; });
body.append("h4").text("Members");
body.append("div")
.attr("class", "student")
.append("a")
.attr("href", function (d) { return d["Github o Homepage Integrante 1"]})
.attr("target", "_blank")
.text(function (d) { return d["Nombre Integrante 1"]; });
body.append("div")
.attr("class", "student")
.append("a")
.attr("href", function (d) { return d["Github o Homepage Integrante 2"]})
.attr("target", "_blank")
.text(function (d) { return d["Nombre Integrante 2"]; });
body.append("div")
.attr("class", "student")
.append("a")
.attr("href", function (d) { return d["Github o Homepage Integrante 3"]})
.attr("target", "_blank")
.text(function (d) { return d["Nombre Integrante 3"]; });
body.append("h5")
.text(function (d) { return "Group Number " + d["Número de grupo"]; })
}
function preProcess(data) {
var dictGroups = {};
data.forEach(function (d) {
dictGroups[d["Número de grupo"]]=d;
})
return d3.values(dictGroups);
}
function updateFromGSheet(data) {
var procData = preProcess(data);
update(procData);
}
function init() {
Tabletop.init( { key: urlHtml,
callback: updateFromGSheet,
simpleSheet: true } )
}
// Update from csv
//- d3.csv("projects.csv", function (error, data) {
//- if (error) throw error;
//- var procData = preProcess(data);
//- update(procData);
//- });
// Update from googleSheets
window.onload = function() { init() };
d3.select("table").attr("class", "table");
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-72531610-1', 'auto');
ga('send', 'pageview');
</script>
</div>
</div>
</div>
</body>