exp_coursesByGender

exp_coursesByGender/project.json

+{
+	"title": "Student Grades (Intro to d3.js)",
+	"index": 20170202,
+	"type": "Demo"
+}

exp_coursesByGender/py/compute.py

+import csv
+import json

exp_coursesByGender/web/index.html

+{% extends "static/templates/projectBase.html" %}
+{% block projectContent %}
+<script src="web/vis.js"></script>
+
+<style>
+.grid line {
+   opacity: 0.2;
+}
+</style>
+
+<div id="chart"></div>
+
+{% endblock %}

exp_coursesByGender/web/vis.js

+"use strict";
+
+/**
+ * Using jQuery, we request the JSON file from the server and then call
+ * the `visualize` function with the data.
+ */
+$(function() {
+  d3.csvParse("res/uiuc2015.csv", function (data) {
+    visualize(data);
+  });
+});
+
+/**
+ * Called when the JSON has been loaded from the server, this function
+ * renders the visualization.
+ */
+var visualize = function(data) {
+  // == boilerplate for d3.js ==
+  var margin = { top: 50, right: 50, bottom: 50, left: 50 },
+      width = 970 - margin.left - margin.right,
+      height = 700 - margin.top - margin.bottom;
+
+  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 + ")");
+
+
+  // == scales for d3.js ==
+
+
+  // == axes for d3.js ==
+
+
+  // == visual encodings ==
+
+
+  // == end of visualization ==
+};