Interaction and Linked Views
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 should use D3 v7 and/or Observable Plot for this assignment. You may use other libraries, 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. This Linked Highlighting Example may also help.
The assignment is due at 11:59pm on Wednesday, December 6.
You should submit any files required for this assignment on Blackboard. For Observable, do
not publish your notebook; instead, (1) share it with me
(@dakoop) and (2) use the “Export -> Download Code”
option and turn in that file renamed to a5.tar.gz (or
a5.tgz) file to Blackboard. Please do both of these steps
as (1) is easier for me to grade, but (2) makes it possible to persist
the state of the submission. If you complete the assignment outside of
Observable, you may complete the assignment in a single HTML file or use
multiple files (e.g. one for HTML and one for CSS). Note that the files
should be linked to the main HTML document accordingly in a
relative manner (styles.css
not
C:\My Documents\Jane\NIU\CSCI627\assignment5\styles.css).
If you submit multiple files, you may need to zip them in order for
Blackboard to accept the submission.
In this assignment, we will again examine Illinois farming data. This data comes from the USDA’s Census of Agriculture through the QuickStats service. Specifically, we are interested in how much of each crop different counties and agricultural districts produce in Illinois. The goal of the assignment is to extend our work in Assignment 4 to examine crop production and farming area with filtering and aggregation.
Like Assignment 1, make sure your assignment contains the following text:
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 @mootari/range-slider functionality to create a range input with lower and upper bounds.”) 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 starter notebook (sign in with your Teams account) for the assignment is provided. If you choose to use Observable, I recommend that you fork this notebook and complete your work. Otherwise, you may copy the pieces and use it in a standard HTML/JavaScript environment.
We continue to be curious about the difference between corn and
soybean production in different counties for 2022, and we wish to be
able to show corn production in counties with given ranges of soybean
production. In the provided
notebook, you will find an Observable Plot choropleth map with corn
production values. You need to create a range slider for soybean
percentage that, when updated, will change the color of the counties
that fall outside to gray (or whichever color you use for
unspecified/unknown). The range slider should allow both lower and upper
bounds. If using Observable, the interval
function from @mootari/range-slider
should work well. Another option is the noUiSlider library.
Again, counties whose soybean percentage (soybeansPlanted)
lies outside the specified ranges should be grayed
out.
viewof
keyword to link the range slider with a variable.counties.featuresWe are also interested in the relationship of the amount of farmland to the breakdown between corn and soybean production. We expect correlation between these two crops, but we are also interested in those counties that have proportionally higher amounts of one crop versus the other as seen in Assignment 4. To investigate this, we will use a multiple-view visualization with two views, a choropleth map and a scatterplot. The choropleth shows the percentage of land used for farming either crop in 2022, and the scatterplot shows the number of acres of farmland used for each individual crop. We will use two types of brushing (linked highlighting): (a) one-to-one highlighting between the scatterplot and the map, and (b) a way to highlight all points matching a specified region.
Again, the template has multiple-view visualization without any
linked highlighting. Use the #corn-soy-compare
div for this part of the assignment. As the user moves the
mouse over a county in the map, the corresponding point in the
scatterplot should be highlighted. In addition, as the user moves the
mouse over a point in the scatterplot, the corresponding county in the
map should be highlighted.
D3’s .on(<callback>) functions will help handle
pointerover and pointerout events over
particular counties or points. Note that you can add these after the
visualization has been created by selecting the corresponding elements.
However, for Observable Plot elements, the data is an
index into the corresponding data array. In this case,
because both plots use the same data array
(counties.features), just checking whether the data values
match is good enough. If you need access to any of the county
properties, you can access them by using the data value as an index into
that array. Remember to reset the selection when a user moves off of the
county or point.
d3.selectAll. Remember that you
can select subsets of svg elements by first selecting the view
(e.g. d3.select(cropScatter)) and then using a sub-select
to access the individual elements.classed
method may be used.on method, the current visual element is
available via event.currentTargetfilter
method may be useful.raise
may be useful to make the outlined regions appear other regions.Use the Ag Districts from the crop data to redo the visualization so that the left side shows the region choropleth while the right side shows the individual counties. Now, when a viewer highlights a region in the map, the linked highlighting should highlight all points in the scatterplot from that region. In addition, highlight all the counties in that region on the map.
ilCropMap given the CO_FIPS property from the
map feature. You may wish to implement a new map that maps
CO_FIPS to Ag District more directly.classed
method may be used.Create a binned scatterplot (2D histogram) using the same data as the scatterplot in Part 2a. Review the documentation on binning. Encode the information by color; think about colormap choice here–should your colormap match the colormap used for the map?
Now, create a multiple view visualization like the one in Part 2a,
but this time with the binned scatterplot. Our goal is to allow the user
to select a bin in the binned scatterplot and highlight
all of the counties that fall within that bin.
Unforunately, Plot does not provide information about how to map the bin
back to the county feature directly. However, you can obtain the
information from the initialize function (see this post).
The data that is returned details the features that are
mapped to each bin. Now, you can use the CO_FIPS value from
those features to highlight the correspond elements in the map.
Array.includes method may be useful to filter those
choropleth elements that match those in the selected bin.