Interaction and Linked Views
In this assignment, we will be working with interactions and linked views. Visualizations may be created using Observable Plot or D3. You may use other libraries (e.g. lodash.js or jQuery) for non-visualization tasks, but you must credit them in the HTML file you turn in. Observable Plot has documentation and examples For D3, there is extensive documentation available as well as examples, and Vadim Ogievetsky’s example-based introduction that we went through in class is also a useful reference. Our in-class example showing linked highlighting will also be useful.
The assignment is due at 11:59pm on Friday, December 6.
You should submit any files required for this assignment on Blackboard. If you use
Observable, submit the .tar.gz or .tgz file
that is generated from the export menu and rename it to
a5.tar.gz or a5.tgz. If you create your own
files, please make sure the filename of the main HTML document is
a5.html. Any other files should be linked to the main HTML
document accordingly relatively. Blackboard may
complain about individual files; if so, please zip the files and submit
the zip file instead.
In this assignment, we will examine articles about musical artists on Wikipedia, specifically those classified as best-selling. Because Wikipedia encourages links between entities mentioned in an article, there are links from one artist’s page to others so we can build a network between artists if one is mentioned on another’s page. In addition, we can examine page views of each artist over time. We will use adjacency matrix visualization coupled with a multiple line graph to examine relationships between artists and Wikipedia readers’ interest of over.
The data is a subset of the best-selling artists list for those artists whose first charted record was between 1980 and 1985 or after 2004.
The artist links is a two-attribute CSV file where an entry indicates a that the second artist is mentioned on the first artist’s page; each attribute is an artist’s name. The monthly page views is a dataset with three attributes:
artist: the artist’s nameviews: the number of page viewstimestamp: the month the page views were recorded,
formatted as “YYYYMMDD” stringMake sure to include the following information in your notebook or main html file:
If you used any additional JavaScript libraries or code references, please append a note to this section indicating their usage to the text above (e.g. “I used the Lodash library to partition an array.”) 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.
Create a line plot for each artist showing their page views over the past twelve months. All of the plots should be superimposed on a single set of axes. Observable Plot’s Line Mark should make this straightforward. Use a logarithmic scale for the number of views. Do not vary the stroke colors. If you wish, you may also use D3 for this, but it will take more work.
z attribute.Create an adjacency matrix for the artists where each row and column is an artist and the matrix cell is filled when the artist represented by the column is mentioned on the Wikipedia page of the artist represented by the row. You can use Observable Plot’s Cell Mark for this. Order the rows and columns by the number of other artists mentioned on an artist’s page. If you wish, you may also use D3 for this, but it will take more work.
tickRotatemargin[Left|Right|Top|Bottom] attributesd3.rollup
to count the number of links an artist has.Combine the two visualizations from Parts 1 and 2 in a single view.
Assuming you have assigned the plots to variables adjMatrix
and linePlot, you can do this with a flex layout on an
outer div (remember to use a style rule here) and code that
looks something like:
combined = html`<div id="all">
${adjMatrix}
${linePlot}
</div>`In order to investigate if any links between artists correlate with
their page views, we wish to make it possible to highlight the page
views for the two artists that are linked in the adjacency matrix. Thus,
if the pointer is over a particular cell, the lines for the page views
for artists that intersect at that cell should be highlighted.
Unfortunately, Observable Plot, unlike D3, does not set the data or
attributes on cells so we need to find a way to embed the information
needed to link these views. The title property offers a
possibility. We can create a title for each cell that indicates the link
and can also be used to locate the corresponding lines in the line plot
(e.g. “Celine Dion – Taylor Swift”). Of course, we must also create a
title for each line (path) in the line plot with the artist’s name.
Then, we can use a similar approach to the one from class to
highlight the current cell and the corresponding lines. D3’s
.on(<event>, <callback>) functions will help
handle pointerover and pointerout events to
instrument this functionality. In the handlers, we can obtain the title
by selecting that element from the currentTarget and accessing its
text(), but then we need to split it based on the delimiter
we used in the cell title (e.g. " -- "). Then, we need to
filter the lines to only highlight the two from the cell’s title. Here,
we need to compare each of the artists to the title of the path elements
in the line plot. D3 supports filtering elements using <selection>.filter,
but note that to access this, you cannot use arrow
functions–you must define functions using the function keyword. Make
sure to highlight both the currently selected cell and
the two corresponding lines.
Finally, enable linking highlighting in the other direction. When the pointer is over a line, highlighting the entire row and column of the adjacency matrix for that artist.
pointerover or pointerout event
handler, you can get the selected node as
event.currentTarget and can treat it as a D3 selection
using d3.select(event.currentTarget).function() { ... }
style, we can do d3.select(this) to access the element that
is the subject of filtering. This allows
d3.select(this).select("title").text(), for example.classed function for adding and removing a class.In order to better investigate trends between more than two artists,
we can implement filtering by allowing users to select/deselect artists
by clicking the adjacency matrix row labels. When a
user selects a particular artist, the label’s text color (fill) should
change to a previously unused color (use a meaningful color scheme), and
the corresponding line should be highlighted with the
same color. When a user deselects that artist, the
label’s color and corresponding line should revert to the default (empty
or "currentColor"). Note that you should not allow the user
to select too many (more than 10) artists as it will be difficult to
differentiate the colors.
aria-label
attribute with value "y-axis tick label" for the y-axis
labels.click eventfill attribute
directly instead of CSSd3.select(elt) to wrap the node for D3 calls like
.attr('fill', ...)d3.<scheme>[i] evaluates to a color string that can
be used for a fill..raise() to make sure the most recently selected
artist’s line is visible (and not lost behind others)