project_uiuc

project_uiuc/project.json

+{
+	"title": "Project #1: UIUC Datasets",
+	"index": 20170307,
+	"type": "Project"
+}

project_uiuc/py/compute.py

+import csv
+import json
+
+# There's no need for any Python here.

project_uiuc/res/.keep

+ 

project_uiuc/web/index.html

+{% extends "static/templates/projectBase.html" %}
+{% block projectContent %}
+
+<h2>Project #1</h2>
+<div id="chart"></div>
+
+<script src="web/vis.js"></script>
+
+{% endblock %}

project_uiuc/web/vis.js

+"use strict";
+
+/* Boilerplate jQuery */
+$(function() {
+  $.get("res/fileName.csv")
+   .done(function (csvData) {
+     var data = d3.parseCsv(csvData);
+     visualize(data);
+   })
+  .fail(function(e) {
+     alert("Failed to load CSV file!");
+  });
+});
+
+/* Visualize the data in the visualize function */
+var visualize = function(data) {
+  console.log(data);
+
+  // == BOILERPLATE ==
+  var margin = { top: 50, right: 50, bottom: 50, left: 50 },
+     width = 800 - margin.left - margin.right,
+     height = (data.length * 20);
+
+  var svg = d3.select("#chart")
+              .append("svg")
+              .attr("width", width + margin.left + margin.right)
+              .attr("height", height + margin.top + margin.bottom)
+              .style("width", width + margin.left + margin.right)
+              .style("height", height + margin.top + margin.bottom)
+              .append("g")
+              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+
+
+  // == Your code! :) ==
+
+};