Skip to content

Home

Jump to bottom Edit New page
Alex Yang edited this page Apr 30, 2015 · 9 revisions

#COGS 121 - Assignment 2

Due: Friday 5/1, 11:59pm

In this assignment, you will use the data available from a user’s Instagram or other social media website (as we did in assignment 1) and create two visual representations of the data using the C3JS and D3JS JavaScript libraries. Visualizing data like this will give the user a better and visually more appealing way to look at their own data and gain a better understanding of what it means. Visualizations are generally intended for presenting complex information in a quick and clear fashion.

For example, Immersion - an application by MIT Media Labs, lets you login with your email provider and visualizes your contacts and their connectedness based on the amount of emails that were sent among you and your contacts. The visual representation makes it easy for us to understand our email history after just a few minutes of interacting with the visual model. You can try Immersion here: https://immersion.media.mit.edu

##The Assignment Create a c3js and d3js visualization of social media data, providing the user an interactive feedback about what the data means. Interactive visualization means that you don’t just make a visual representation of the data but also allow the user to interact with your visualization in some way (for example, by hovering over a part of the visualization they will see additional data, or clicking a button will organize the data in a different way, etc.) You can build app on your application from assignment 1 and use data from Instagram or any other site that you wish (LinkedIn, SoundCloud, etc.).

##General Requirements:

  1. Use Social Media Web APIs to extract content from social media websites like Instagram, LinkedIN, Twitter, Soundcloud, etc.
  2. Server should be NodeJS and the OAuth should be handled on the server side (using libraries like Passport, Instagram-Node-Lib etc.)
  3. Create a brand new C3JS visualization from a data set of your choosing as mentioned in (1).
  4. Improve upon the existing D3JS visualization given in the code to include sorting users by media count from smallest to largest. (Note: this has to be interactive, as in the chart cannot initially render sorted, you need to be able to interact with the chart to sort it)
  5. Improve upon the existing D3JS visualization given in the code to include displaying user data upon hovering over a bar in the chart. (Otherwise known as a tooltip, I recommend taking a look at https://github.com/Caged/d3-tip to keep it simple)
  6. Create a brand new D3JS visualization to represent data extracted from social media as mentioned in (1) and (2).
  • ** For D3JS only, you are NOT required to build the visualization from scratch. You may search online for an existing visualization and fit your data into it, and make modifications as needed.**
  • students that DO build their own D3JS visualizations, however, are likely to receive additional points (extra credit) We will be providing extremely limited technical assistance on the d3js visualizations.
  • please keep the created C3JS and D3JS visualization on separate pages, and be sure to make clear which is which. Leave the given D3JS visualization as is (on its own route).
  • All three visualizations should use different sets of data, there should be three distinct visualizations which display different information.
  1. Your application’s UI should adhere to at least two of the concepts you learnt about Design Principles. (e.g. Feedback about an Ajax call using visual spinners while the call is in process). Describe the Design Principles followed in the README file. The README file should be in the top directory of your Github repo.
  2. Your visualizations have to be interactive (not static).
  3. Your application needs to be FULLY WORKING on Heroku. Points will be deducted if functionality does not work as expected on Heroku. Be sure to have a page or navigation bar (which ideally is the first page the user will see), that links to the rest of the visualizations in your application.

##A quick primer on C3/D3 framework : D3 stands for Data-Driven Documents. It is a javascript library for visualizing large amounts of data in an easy-to-understand manner. You can find examples on how to use D3 JavaScript library at www.d3js.org. All the visualizations in D3 are rendered using Scalable Vector Graphics (SVG) technology. Knowledge on SVG is not necessary to complete this assignment, however it is an interesting technology to know about.

To get an understanding of what visualizations are possible using D3, check the galleries page in D3 wiki (https://github.com/mbostock/d3/wiki/Gallery) and an exhaustive list of possible visualizations can be found in the D3 creator’s page (http://bl.ocks.org/mbostock). The best way to learn visualizations in D3 is by first deciding on a visualization from those referred to earlier, and then to carefully go through the source code of that sample visualization. The resources mentioned below will help you get started on D3 from scratch.

C3JS (http://c3js.org/) is a library built on top of D3JS which has a much lower barrier to entry, and contains useful, interactive visualizations out of the box with just a few configurations.

##Useful Resources:

Add a custom footer
Add a custom sidebar
Clone this wiki locally