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 ==
};