Interaction and Linked Views in D3


There are three parts to the assignment. You may complete the assignment in a single HTML file or use multiple files (e.g. one for CSS, one for HTML, and one for JavaScript). You must use D3 v4 for this assignment. All visualization should be done using D3 calls. You may use other libraries (e.g. lodash.js or jQuery), but you must credit them in the HTML file you turn in. Extensive documentation for D3 is available, and Vadim Ogievetsky's example-based introduction that we went through in class is also a useful reference. In addition, Scott Murray's Interactive Data Visualization for the Web is a good reference.

Due Date

The assignment is due at 11:59pm on Thursday, April 26.


You should submit any files required for this assignment on myCourses. You may complete the assignment in a single HTML file or use multiple files (e.g. one for HTML, one for CSS, and one for JavaScript). Note that the files should be linked to the main HTML document accordingly. The filename of the main HTML document should be a4.html. myCourses may complain about the files; if so, please zip the files and submit the zip file instead.


In this assignment, we will again examine Massachusetts school district per-pupil spending data. This data is compiled by the Commonwealth's Department of Education, and the raw data is available on their web site. I have extracted this data to a CSV. In addition, the Commonwealth makes the geographic boundaries of the school districts available as a Shapefile. I have converted this data to GeoJSON files that D3 can more easily handle. The goal of the assignment is to extend our work in Assignment 3 on per-pupil spending by district with filtering and aggregation.


A few important properties of the GeoJSON features:

  • ORG_CODE: the code for the school district
  • MADISTTYPE: the type of school district
  • STARTGRADE: the starting grade the district serves
  • ENDGRADE: the ending grade the district serves

A few important columns of the spending data:

  • LEA: the code of the school district
  • TTPP: total spending per pupil

0. Info

Like Assignment 1, start by creating an HTML web page with the title "Assignment 4". It should contain the following text:

  • Your name
  • Your student id
  • The course title ("Data Visualization (DSC 530/CIS 602-01)"), and
  • The assignment title ("Assignment 4")
  • The text "This assignment is all my own work. I did not copy the code from any other source." (Your inclusion of this text indicates that you understand the consequences of violating the UMass Dartmouth Student Academic Integrity Policy.)

If you used any additional JavaScript libraries, please append a note to this section indicating their usage to the text above (e.g. "I used the jQuery library to write callback functions.") Include links to the projects used. You do not need to adhere to any particular style for this text, but I would suggest using headings to separate the sections of the assignment.

A template for the assignment is provided: html, js; save them both as source. It is highly recommended that you start from this template.

1. Filtering (40 pts)

In Assignment 3, we were not able to look at the individual districts as easily as we may have wished because of overlaps between districts (especially for those of different types). We will use filtering to allow users to interactively choose the district type and the district grade levels to enable better comparisons. Our goal is to allow a user to select a district type or "All" for all types and also select a range of grades so that districts that match the district type and all of the grades they offer are in the specified range are highlighted. Note that the criteria for grade range could be changed to allow districts that offer all grades in the specified range to match instead.

Choosing a district type can be done via a dropdown menu (the HTML select element), but the grade levels are determined by both a starting grade and and ending grade. This type of filtering is best done using a two-handle range filter which unfortunately is not currently a feature of HTML5. However, third-party libraries like noUiSlider support such behavior. Note that sliders work best when using numbers, and Preschool (PK) and Kindergarten (K) are not numbers. However, we can use -1 and 0 to refer these grades. You need to populate the select options, implement the callbacks for both the select change and range slider change that do the filtering. Note that both filters should be applied, regardless of which is changed!

The filtered map should show all district boundaries but have no fill for those districts that do not match the filtering criteria. Those districts that match should have a higher stroke weight and a fill color (e.g. red).

  • You should only need the map data for this part of the assignment
  • Reset every district to non-matching before setting those that match.
  • It will help to create a separate filter function that both callbacks make use of

2. Histogram (30 pts)

Since we have hundreds of districts, it is difficult to understand the distribution of spending across all of them. We will use aggregation and create a histogram to address this. Create a histogram that shows the distribution of spending across districts. Remove all districts that have spending of $0. Be sure to choose a good bin width. It may also be helpful to have the last bin group all values above a certain amount (e.g. $24,000).

  • You should only need the spending data for this part of the assignment
  • d3.histogram is a function designed for creating histograms.
  • Use .nice(number) on a domain to line up tick marks and boundaries.

3. Brushing (40 pts)

We now want to tie the spending data with the map. In Assignment 3, we did this using a choropleth map, but for this assignment, we will use the histogram to highlight those districts whose spending falls within a selected range. As the user moves the mouse over a bar of the histogram, the matching districts should be highlighted on the map. You should also highlight the currently selected bar so that the user receives feedback about which bar is selected.

It is probably easiest to create a third visualization for this part that reuses the code from Parts 1 and 2. If you wrote your functions well, you should be able to redraw them by calling the functions and targeting a new div.

D3's .on(<event>, <callback>) functions will help handle mouseover and mouseout events over particular bars. You should apply the same style changes (fill, stroke width) to highlight the districts that match the spending thresholds.

  • Be careful about doing d3.selectAll. Make sure to constrain your select to the appropriate part of the DOM. D3 sub-selects work well for this.
  • Remember to remove highlights from bars other than the selected one.
  • The data for each bin in the histogram has .x0 and .x1 attributes that indicate the start and end of the range of that bin.

Extra Credit

  • Enable linked highlighting from the map to the histogram.
  • Have the filters from Part 1 also apply in Parts 2/3, restricting the histogram being generated as appropriate.