Homework_instructions

 

Week 06 | Homework

This homework requires that you have read and programmed along with:

1) A survey about the diffusion of microfinance loans (10 points)

In this homework you will work with survey data on microfinance loans. Banerjee et al [1] collected the data in order to develop a model of information diffusion in social networks. To come right to the point: you don’t need any knowledge or additional information on microfinance. We will only cover a very small part of the collected data to demonstrate you how to visualize survey results efficiently with JS and D3.

The authors of the study collected detailed demographic and network data in 75 villages in India, six months before a microfinance institution began offering their products to these villagers. The combination of the original survey, information about first-informed villagers and results of the subsequent participation made it possible to draw conclusions on the diffusion of information.

If you are interested in the study you can get the paper here: http://science.sciencemag.org/content/341/6144/1236498

[1] Banerjee, Abhijit, et al. “The diffusion of microfinance.” Science (2013).

Data

In this assignment you will only work with the household characteristics dataset. You will have to use the following columns:

Template

To help you get started with this homework assignment we have prepared a template that you can use. It is based on the front-end framework Bootstrap and it includes the JS libraries: D3 and jQuery. Furthermore, a CSV file (household_charateristics.csv) is stored in the folder “data”. Of course, you can also start with an empty project and just copy the dataset.

Template.zip

Overview

In the last lab you have learned how to link multiple views with each other, how to make visualization components reusable and how to use D3’s brush component to filter the data.

You should now apply what you have learned to create an interactive visualization with multiple views. Your final webpage should contain an area chart and several barcharts. Whenever the user changes the selection - via the brushing component in the area chart - all the bar charts should be updated accordingly.

You can use the following mockup as a guide:

Homework 6 Preview

Implementation checklist:

Implementation

  1. Download the resources

    Please download the template and the CSV file as a ZIP file: Template.zip

  2. Familiarize yourself with the provided framework and the dataset

  3. Specifiy the webpage layout

    You should create a 2-column layout in HTML and CSS. The area chart with the time period filter should be in the left column and the bar charts should be in the right column. We have included Bootstrap in the template so that you can complete this task quickly.

  4. Load the CSV data and create the bar chart objects

    We have already prepared a few code snippets to help you get started. Open the files main.js and barchart.js and get an overview.

    Similar to our last lab, you have to implement visualizations as reusable components. This is especially important if you want to use the same visualization type (e.g., bar charts) several times on the same webpage with different data in each visualization.

    The goal is to implement a generic bar chart object in barchart.js that can be used in main.js multiple times for these variables:

    • ownrent
    • electricity
    • latrine
    • hohreligion

    Example: You can find the values Christianity, Hinduism and Islam in the column hohreligion. One of your bar charts should show how many households belong to which religion.

    Homework 6 Barchart

    Each bar chart should contain a title, a y-axis and labels for each bar.

     

    #### Grouping data with d3.group and d3.rollup

    D3 includes a powerful functionality to transform a flat data structure into a nested one. Prior version of d3 used ````d3.nestfor this functionality, but d3 v6 replaced that with [d3.group](https://github.com/d3/d3-array/blob/master/README.md#group) and [d3.rollup()```](https://github.com/d3/d3-array/blob/master/README.md#rollup). We would highly recommend you to use these function to prepare the data for your bar charts. Example

    CSV-Data:

     student,city
 John,Boston
 Sarah,Boston
 Stacy,New York
 Anna,London
 Mike,Boston

    First, let’s use d3.group() to group the rows by city:

     let studentsByCity = d3.group(student,d=>d.city)

    As a result we get a map structure:

     studentsByCity = 
     Map(3) {
 		 "Boston" => [
         {student: "John", city: "Boston" },
         {student: "Sarah", city: "Boston" },
         {student: "Mike", city: "Boston" }
     ]
  		"New York" => [{student: "Stacy", city: "New York"}]
  		"London" => [{student: "Anna", city: "London"}]
 }

    To convert a Map to an Array, use Array.from. For example, if we want to produce an array of key , value pairs, we can use:

     Array.from(d3.group(student,d=>d.city), ([key, value]) => ({key, value}))

    We can use the d3.rollup() function to aggregate the values for each group (e.g. sum, count, avg):

     let countStudentsByCity = d3.rollup(student,leaves=>leaves.length,d=>d.city)

    If we transform the outpt Map to an array of key values pairs, we get an array with the number of students for each city:

     countStudentsByCity = [
     { key: "Boston", value: 3 },
     { key: "New York", value: 1 },
     { key: "London", value: 1 }
 ];

     

  5. Implement the area chart

    In the template we’ve given you code that draws an area chart. However, you’ll need to wrangle the data for the visualization and add interactivity to the chart.

    The area chart should display the number of surveys that were conducted over time. Furthermore, it should enable the user to specify a desired time range which automatically influences the bar charts in the right column.

    1. Prepare the data in the wrangleData() function. You can use d3.rollup() again to count the number of surveys for each day. Make sure that you have the date variable stored as a date object and that the days are in correct order.
    2. Create an instance of the area chart class in main.js, passing in the data and the selector for the parent element you created in index.html
    3. Once done, an area chart should show up. Feel free to style the chart as you wish.

     

  6. Use a brushing component in your area chart as a time period filter

    The idea of brushing is to allow the user to select a subset of data interactively. Changes are automatically reflected in the linked visualizations, which are the bar charts in our case.

    Initialize the brushing component (d3.brushX()) and append it to the drawing area. Whenever the user changes the selection, call the brushed() function in main.js.

     

  7. Implement the brushed() function and connect it with the bar charts

    Get the range of the selected region (start and end date) in the area chart and call the selectionChanged() function in all the linked bar charts.

     

  8. Use transitions to make changes smoother

    Integrate D3’s transitions into your bar charts (rectangles, labels).

     

  9. Make your webpage and your visualizations responsive

    Until now, you have probably specified a fixed size for your SVG drawing areas every time. This is more convenient but actually far from ideal if you want to address users with different screen resolutions, which is our goal in most scenarios.

    There are different ways of implementing more flexible visualizations. In our case, Bootstrap - a responsive, mobile-friendly front-end framework - makes it already very easy to create a responsive webpage, just by using the fluid grid system (http://getbootstrap.com/css/#grid). You can use the grid classes to set up the page layout and to define at which point columns should wrap onto a new line.

    In addition, you can create your own CSS media queries to make individual adjustments (e.g. font size, spacings, …) for different screen sizes. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    You should now be able to display the area and bar charts below each other if the screen is not wide enough. But this doesn’t solve the problem of the fixed-sized SVG areas, so you need one further extension. Whenever you initialize a new visualization you can check the width of the parent container and set the SVG width accordingly. The height can remain unchanged.

    Example for getting the width of a div element with Javascript:

      document.getElementById('elementId').getBoundingClientRect().width

    Try this concept in your current webpage and make the visualizations more flexible!

     

  10. Create a proper style for your webpage

    Maintain good spacing between UI components, overall layout, font size, color scheme, etc.

2) Submit Homework in Canvas

Use the following recommended folder structure & create a single .zip file:

/submission_week_06_FirstnameLastname
    hw/
        css/ 		...folder with all CSS files
        js/ 		...folder with all JavaScript files
        data/ 		...filder with all data for the project, e.g. csv files, etc.
        [potential other folders you might have used for the project, such as a fonts or an img folder]
        index.html
    
    lab/
        css/ 		
        js/ 
        index.html
        
    class_activity/
    	[either pdf or link to gdrive that contains your running doc with class activities]
    	[latest Tableau workbook (either added here separately or within the gdrive)]

A few remarks based on some submissions we’ve seen:

Congratulations on finishing this week’s homework! See you in class!