2b:null 2c:["$","title",null,{"children":"Analyzing the Design Space for Visualizing Neural Attention in Text Classification | PUC Chile | Observable"}] 31:T74c,md` # Analyzing the Design Space for Visualizing Neural Attention in Text Classification [Hernan Valdivieso](https://hernan4444.github.io/), [Denis Parra](http://web.ing.puc.cl/~dparra), and [Andres Carvallo](https://afcarvallo.github.io/), IMFD & Department of Computer Science, PUC, Chile
[Gabriel Rada](https://medicina.uc.cl/persona/dr-gabriel-rada/), School of Medicine, PUC, Chile
[Katrien Verbert](https://wms.cs.kuleuven.be/cs/onderzoek/augment/katrien-verbert), Department of Computer Science, KU Leuven, Belgium
[Tobias Schreck](https://www.tugraz.at/institute/cgv/schreck/), Institute of Computer Graphics and Knowledge Visualization, TU Graz, Austria
## Introduction Deep Neural Networks (DNNs) are a type of machine learning model (Goodfellow et al, 2016) which have reported state-of-the-art results in several tasks in the past years. Despite the impressive results reported by these models in several fields such as computer vision (Krizhevsky et al., 2014), natural language processing (Mikolov et al., 2013) or recommender systems (Covington et al., 2016), one of their biggest drawbacks is their lack of interpretability and transparency. Some of the best performing DNN models have millions of parameters, so making sense of what these models learn is an active research challenge. These algorithms can help to solve and automate difficult and expensive tasks, but their adoption in critical domains, which usually requires liability, depends on making their decision interpretable by humans. Some large funding programs such as DARPA XAI (Gunning and Aha, 2019) are addressing this problem, providing evidence of their importance. On the other side, recent legislation such as Europe's GDPR gives people the right to explainability of automated decisions regarding their private data. `32:T676,md` One of the most significant techniques introduced to DNNs in the latest years is the so called attention mechanism (Larrochelle and Hinton, 2010). The idea is inspired by our visual system, since humans focus selectively on parts rather than on a whole image, combining information from several fixations to form the full scene (Mnih et al, 2014). This mechanism allows the network to focus on a subset of inputs or parameters when trained on a task. Attention has improved the performance of these models, and it has also given them a chance to be more explainable. Inspecting what the model is paying attention to helps to make the model accountable in tasks such as image classification, document classification or automatic image captioning. Despite this potential, researchers in the area of machine learning usually use the traditional visualization idioms available in software packages, rather than studying all the options for visual encodings to represent models, results or parameters more effectively. We see a chance of using design principles from information visualization in order to improve the way that neural attention models are visually presented. This article focuses on the design space to analyze, inspect and understand what neural attention models are learning. In particular, we aim at contributing to the field of Explainable Artificial Intelligence (XAI), by describing the potential design space as well as informed decisions to take into account when presenting the results of neural networks using the attention mechanism. We also propose some initial ideas with a use case: classification of biomedical documents. `33:T431,md` **Node-link**. The seminal article by Bahdanau et al. (2014) on neural machine translation provides one of the first idioms to present attention on a model using a node-link representation, in Figure 1 of the original article. The model shows that in order to predict the current word ${tex `Y_t`}, the model needs information from the current state ${tex `S_{t}`}, from the previous word ${tex `Y_{t-1}`}, as well as from a contextual vector ${tex `c_i`} (not in the diagram), which is calculated by a function that sums all the hidden vectors ${tex `h_i`} weighted by their respective attentions ${tex`\alpha_{t,i}`}. We observe links with attention labels ${tex`\alpha_{t,i}`} coming from the hidden states ${tex `h_i`}, which are combined to create the vector ${tex `c_i`}, all this after a softmax operation to ensure that all the attention values add up to 1.

`34:T5d9,md` **Image and text instances with highlights**. Some articles present the attention directly on the items. For instance, it is usual that in the case of object categorization, the visualization of attention shows the *location* where the model was paying attention to. The Figure 3 in the original article by Xu et al. (2015) shows attention directly on the image used to generate a caption automatically. The top row of images shows deterministic "soft attention" while the bottom row shows stochastic "hard" attention.

Likewise, it is traditional on attention-based text classification methods that the visualization shows to which words the model was paying attention to during the task, such as the Figure 6 in the article by Yang et al. (2016) presenting attention at the sentence level (red color hue) as well as at word level (blue color hue). In this case, color luminance is scaled inversely proportional to the level of attention, i.e., the more the luminance, the smaller the attention.

`35:T741,md ` ## Summary of Idioms used for Visualizing Attention Munzner (2014) provides a framework for analysis and design of visualizations. She proposes a hierarchical model where the first step is about identifying the domain situation. The next step identifies the respective data and dataset types (*What*), followed by tasks to be solved as pairs {action, target} (*Why*). The final step requires choosing the visual encoding and interaction idioms (*How*), considering the most appropriate marks and channels to encode the data. An example summarizing the surveyed works with the frameworks by Munzner, with a non-exhaustive list of tasks (*Why*) is presented in the following table. | Visualization | What | Why (tasks) | How(Marks & Channels) | | --------------------- | ------------ |------------ |------------------------------------------------------------------------------------- | | Heatmap | text | {compare,dependency} |2D matrix alignment of area marks; diverging colormap | | (static) Node-link | text | {identify,features} |Rect with text for nodes, connection marks for links. Quantitative attribute on links. | | Interactive node-link | text | {identify, paths} |Rect with text for nodes, connection marks for links. Links appear when hovering nodes. | | Text and image | text/image | {identify,features} |Color luminance on the image spots or words composing a text. |
In the coming section we will present a use case where a traditional task of document classification is utilized to explore the design space for visualizing the attention provided by the model. `36:T7aa,md` # Use Case: Inspecting Attention-Based Document Classification Document classification is a well-known task in the areas of information retrieval as well as machine learning. As a use case for this article we focus on classification of biomedical research papers. This task is important within the area of Evidence-based Healthcare, where physicians attempt to identify the most relevant articles to answer clinical or health-policy questions related to patients, treatments and their outcomes. In particular, we collaborate with the Epistemonikos foundation helping them to identify which systematic review documents are scientifically sound in order to be indexed in their database. Until now, they have relied on physicians to do this work. Despite the lack of scalability, they refrain from using automatic document classification algorithms since they cannot guarantee that the reasons used by the algorithm are valid or generalizable. Using a classification model which provides attention can be of great use in this task. Given a biomedical paper abstract like this one: "Low-dose Thimerosal (ethyl-mercury) is still used in infants' vaccines: Should we be concerned with this form of exposure?" by Dorea (2018) ![image](https://user-images.githubusercontent.com/208111/62179131-703b4e80-b319-11e9-99db-609dbde3131c.png) Which is the best way to visualize the attention that the model pays on the features (words) to classify a document as a technically sound systematic review? Is the traditional encoding of highlighted words with colored background, such as Yang et al. (2016), the best encoding? How can information visualization help us to explore the design space and choose among the options available? `37:T4a1,md` # The design space for visualizing attention The framework by Munzner (2014) describes marks and channels as the most basic elements to design a visualization. **Marks** are defined as geometric primitive objects categorized based on the number of spatial dimensions they require: points (0D), lines (1D), areas (2D), or volume mark (3D). On the other side, a **channel** is a way to control the appearance of marks, such as length, color, angle, etc. On documents, the channels used for representing attention by highlighting words on text are color luminance or color saturation. While this seems to be a reasonable decision, Steven's Psychological Power law (Munzner, 2014) shows that while the perception of certain channels such as length is perceived linearly, color brightness is not perceived linearly, but rather by a factor of 0.5. This means that, for instance, an increase of three times the brightness will not be perceived by people as three times the attention of the model on a word, but rather only 1.5 times more attention. `38:T508,md` If the task of identifying the features (words) requires a more precise alignment between channel and the actual measure of attention, we need to test alternative encodings. The framework by Munzner also identifies, based on the work by Bertin (1967), Stevens (1975) and Cleveland & McGill (1984), the accuracy of the different channels which can serve us as a reference to explore the space of design for visualizing attention. The following figure, based on Figure 5.1 in chapter 5 (Marks and Channels) from Munzner VAD book, presents a list of different channels ranked by effectiveness to represent numerical data.

For instance, using position on common or unaligned scales, length, tilt or area could provide a more precise representation than color luminance or saturation to encode the attention values. Despite this fact, most research works use saturation or luminance in background text color to represent attention. `39:Tfa2,md` * **Font property - Size**

This is the most commonly used channel in word clouds. It maps magnitude to the height of the font. However, the literature on visualization suggests that font size might not be an optimal channel to convey quantitative information because of the irregular shape of words and the non-direct relationship between height, width and painting area. * **Font property - Luminance**

According to [(Bateman et al. 2008)](https://dl.acm.org/citation.cfm?id=1379130), after discarding color hue that only works for categorical values and font weight that has too little resolution to be effective, color intensity (contrast or saturation) is the next best font channel to convey importance of a keyword and support quantitative information. Depending on the color model used (HSL or HSV, for instance) and fixing the color font to a default black, we can map strong levels of attention to a font with small luminance (pure black) and small levels of attention to light grey. * **Additional Mark - Bars Length**

Bars are one of the most used marks in visualization, they allow the use of very effective and precise channels like position and length. When bars are aligned they can clearly encode the value using position, the strongest channel for quantitative visualization. Like [(Felix et al. 2017)](https://ieeexplore.ieee.org/abstract/document/8017641), we use horizontal bars, since they align with the word reading order. One issue, though, is that in the original article they did not explain how to calculate the range of the bar's length, so we propose to use the length of the longer word as a maximum attention equal to 1, and the other bar lengths linearly proportional. Another option to explore is aligning the words in columns to improve the comparison of attention between words, as the result of the study by Felix suggests. * **Additional Mark - Circle Area**

Circles are often used in scatter plots as bubbles to convey a third value. Also in other visualizations in which the spatial properties are already used to encode other information (e.g., bubble maps), circles are often used. Since the diameter of circles change together with area size, it is not possible to find a unique strategy to overlap circles with words the same way we do with bars. For this reason, in our proposal, words are placed to the right side of each circle. * **Aditional Mark - Background Color Intensity**

This is the traditional way to present attention, as in the work by [Yang et. el (2016)](https://www.aclweb.org/anthology/N16-1174). Mapping directly attention to font color can hide the words if they receive too low attention, so this encoding use background color intensity to highlight the words with more attention. However, for certain tasks the direct encoding of attention by font color could be more effective, such as identifying only the top ${tex `n` } words used to classify a document. `3a:T819,md ` The following is an example of an actual biomedical document, by [Farquharson et al. (2018)](https://www.nature.com/articles/s41467-018-03500-9), which our model correctly classified as *Not Relevant to be indexed* (**NR**). We present the title (*A Meta Analysis of birth origin on reproduction in diverse captive environments*), the prediction made by our neural neural classification model with attention (in this case, *Not Relevant*), the actual class of the document (ground truth, in this case *Not Relevant*), and the reason why this document was classified as NR. There are six reasons for labeling a document as not relevant in our dataset: - **(HU)** excluded_not_humans: article is about animals rather than human patients. - **(PR)** excluded_protocol: article which describes the method or protocol of a systematic review to be conducted in the future, not ready yet. - **(HD)** excluded_not_health_decision: the results of the article do not provide evidence towards or against treatments to make health decisions. - **(BS)** broad_synthesis: this article is a review of several systematic reviews, too broad for the goals of the system. - **(NH)** excluded_not_health: systematic review with conclusions or implications not directly related to health outcomes. - **(OT)** excluded_other: article is not relevant but the dataset doesn't specify the reason. Notice, in this example, that words like *bird*, *captive*, *invertebrates* and *mammal*s are attended by the model. This provides an evidence that the model is paying attention upon the right words to classify the document as NR. Notice also that the same words in different sentences have different attention levels: this is a property of the neural attentive model, since attention uses also the context of the word, not only the word token. One aspect that requires further inspection though is that words like *for*, *the*, and *in* also have an important level of attention, which raises some concern about potential biases the model is learning in order to classify this article. `3b:T6be,md` Here are some interesting examples to examine: - **Document 13**: The document is predicted relevant (R) but it is actually not relevant (NR). The reason for excluding this article from the dataset is *excluded_protocol* (PR) : the article describes the method or protocol of a systematic review to be conducted in the **future**. So, rather than focusing solely in words like *intensity*, *frequency*, *sensory* and *interventions*, the model should also attend to words like *will* (*review will consider*). - **Document 27**: The document is predicted relevant (R) and it is not relevant (NR). There seems to be a clear reason for rejecting this article since in the title and in the abstract we observe the terms *non human primates*, suggesting that it should be excluded for reason **excluded_not_humans** (HU). However, the visualization shows that the model is paying attention to more generic terms like *was analysed*, *were used* or *inclusion criteria*, which serve to discard other types of not relevant documents (PR, HD, or NH), but not the type we are interested in this case (HU). - **Document 32**: This is a case of correct prediction. The document is predicted relevant (R) and ground truth is also relevant (R). The model attends to important and reasonable words such as: *literature*, *review*, *conducted*, as well as the word *survival* in different contexts (*survival progression*, *survival outcomes*). We also observe attention upon medical terms like *castrate* and *prostate*. Other words less obvious to be relevant such as *was* help to indicate that this is not describing something to be done in the future (like protocol papers), but actually something already done in the past. `3c:T2cc2,designSpace = { const w = width - margin.left - margin.right + 100; const h = 350; margin.top + margin.bottom + 30; const svg = d3.select(DOM.svg(w, h)); const data = [ { attention: 0.9, row: 0, column: 0 }, { attention: 0.5, row: 0, column: 1 }, { attention: 0.3, row: 1, column: 0 }, { attention: 0.4, row: 1, column: 1 } ]; const length = d3 .scaleLinear() .domain([0, 1]) .range([0, 39]); const color = d3 .scaleLinear() .domain([0, Math.max(...data.map(d => d.attention))]) .range([colors.lowAttention, colors.highAttention]); // rotate the text svg .append("text") .attr("x", 0) .attr("y", 0) .attr("transform", "translate(20, 130) rotate(-90)") .text("Static"); svg .append("text") .attr("x", 0) .attr("y", 0) .attr("transform", "translate(20, 270) rotate(-90)") .text("Interactive"); svg .append("text") .attr("x", 0) .attr("y", 0) .attr("transform", "translate(35, 250) rotate(-90)") .text("hover"); let text = "Encoding to compare attention in words between documents"; svg .append("g") .attr("transform", "translate(170, 25)") .append('text') .text(text); svg .append("text") .attr("x", 49) .attr("y", 60) .text("Luminance"); const V1 = svg .append("g") .attr("transform", "translate(50, 70)") .selectAll(".V1") .data(data) .enter(); V1.append("rect") .attr("class", "V1") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", d => color(d.attention)) .attr("width", 40) .attr("height", 40) .attr("stroke", "black"); svg .append("text") .attr("x", 192) .attr("y", 60) .text("Text"); const V2 = svg .append("g") .attr("transform", "translate(170, 70)") .selectAll(".V2") .data(data) .enter(); V2.append("rect") .attr("class", "V2") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", "white") .attr("width", 40) .attr("height", 40) .attr("stroke", "black"); V2.append("text") .attr("class", "V2") .attr("x", d => d.column * 40 + 8) .attr("y", d => d.row * 40 + 25) .attr("fill", "black") .text(d => d.attention); svg .append("text") .attr("x", 265) .attr("y", 60) .text("Text/Luminance"); const V3 = svg .append("g") .attr("transform", "translate(290, 70)") .selectAll(".v3") .data(data) .enter(); V3.append("rect") .attr("class", "V3") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", d => color(d.attention)) .attr("width", 40) .attr("height", 40) .attr("stroke", "white"); V3.append("text") .attr("class", "V3") .attr("x", d => d.column * 40 + 8) .attr("y", d => d.row * 40 + 25) .attr("fill", "red") .text(d => d.attention); svg .append("text") .attr("x", 405) .attr("y", 60) .text("Vertical Bar"); const V4 = svg .append("g") .attr("transform", "translate(410, 70)") .selectAll(".V4") .data(data) .enter(); V4.append("rect") .attr("class", "V4") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", d => "white") .attr("width", 40) .attr("height", 40) .attr("stroke", "black"); V4.append("rect") .attr("class", "V4") .attr("x", d => d.column * 40 + 12.5) .attr("y", d => (d.row + 1) * 40 - length(d.attention)) .attr("fill", d => "gray") .attr("width", 15) .attr("height", d => length(d.attention)) .attr("stroke", "black"); svg .append("text") .attr("x", 520) .attr("y", 60) .text("Horizontal Bar"); const V5 = svg .append("g") .attr("transform", "translate(530, 70)") .selectAll(".V5") .data(data) .enter(); V5.append("rect") .attr("class", "V5") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", d => "white") .attr("width", 40) .attr("height", 40) .attr("stroke", "black"); V5.append("rect") .attr("class", "V5") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40 + 12.5) .attr("fill", d => "gray") .attr("width", d => length(d.attention)) .attr("height", 15) .attr("stroke", "black"); svg .append("text") .attr("x", 670) .attr("y", 60) .text("Area"); const V6 = svg .append("g") .attr("transform", "translate(650, 70)") .selectAll(".v6") .data(data) .enter(); V6.append("rect") .attr("class", "V6") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", d => "white") .attr("width", 40) .attr("height", 40) .attr("stroke", "black"); V6.append("rect") .attr("class", "V6") .attr("x", d => d.column * 40) .attr("y", d => (d.row + 1) * 40 - length(d.attention)) .attr("fill", d => "gray") .attr("width", d => length(d.attention)) .attr("height", d => length(d.attention)) .attr("stroke", "black"); const V4_2 = svg .append("g") .attr("transform", "translate(410, 190)") .selectAll(".V4_2") .data(data) .enter(); V4_2.append("rect") .attr("class", "V4_2") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", d => "white") .attr("width", 40) .attr("height", 40) .attr("stroke", "black"); V4_2.append("rect") .attr("class", "V4_2") .attr("x", d => d.column * 40 + 10) .attr("y", d => (d.row + 1) * 40 - length(d.attention)) .attr("fill", d => "gray") .attr("width", 15) .attr("height", d => length(d.attention)) .attr("stroke", "black") .on("mouseover", d2 => { V4_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention < d.attention) .append("rect") .attr("class", "V4_2 hover") .attr("x", d => d.column * 40 + 10) .attr("y", d => (d.row + 1) * 40 - length(d2.attention)) .attr("fill", d => color(0.4)) .attr("width", 15) .attr("height", length(d2.attention)) .attr("stroke", "black") V4_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention) .append("rect") .attr("class", "V4_2 hover") .attr("x", d => d.column * 40 + 10) .attr("y", d => (d.row + 1) * 40 - length(d2.attention)) .attr("fill", d => color(0.4)) .attr("width", 15) .attr("height", length(d2.attention)) .attr("stroke", "black") V4_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention) .append("rect") .attr("class", "V4_2 hover") .attr("x", d => d.column * 40 + 10) .attr("y", d => (d.row + 1) * 40 - length(d.attention)) .attr("fill", d => "gray") .attr("width", 15) .attr("height", d => length(d.attention)) .attr("stroke", "black") }) .on("mouseout", _ => { V4_2.selectAll(".V4_2.hover").remove(); }); const V5_2 = svg .append("g") .attr("transform", "translate(530, 190)") .selectAll(".V5_2") .data(data) .enter(); V5_2.append("rect") .attr("class", "V5_2") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", d => "white") .attr("width", 40) .attr("height", 40) .attr("stroke", "black"); V5_2.append("rect") .attr("class", "V5_2") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40 + 12.5) .attr("fill", d => "gray") .attr("width", d => length(d.attention)) .attr("height", 15) .attr("stroke", "black") .on("mouseover", d2 => { V5_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention < d.attention) .append("rect") .attr("class", "V5_2 hover") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40 + 12.5) .attr("fill", color(0.4)) .attr("width", d => length(d2.attention)) .attr("height", 15) .attr("stroke", "black"); V5_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention) .append("rect") .attr("class", "V5_2 hover") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40 + 12.5) .attr("fill", color(0.4)) .attr("width", d => length(d2.attention)) .attr("height", 15) .attr("stroke", "black"); V5_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention) .append("rect") .attr("class", "V5_2 hover") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40 + 12.5) .attr("fill", d => "gray") .attr("width", d => length(d.attention)) .attr("height", 15) .attr("stroke", "black"); }) .on("mouseout", _ => { V5_2.selectAll(".V5_2.hover").remove(); }); const V6_2 = svg .append("g") .attr("transform", "translate(650, 190)") .selectAll(".V6_2") .data(data) .enter(); V6_2.append("rect") .attr("class", "V6_2") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", d => "white") .attr("width", 40) .attr("height", 40) .attr("stroke", "black"); V6_2.append("rect") .attr("class", "V6_2") .attr("x", d => d.column * 40) .attr("y", d => (d.row + 1) * 40 - length(d.attention)) .attr("fill", d => "gray") .attr("width", d => length(d.attention)) .attr("height", d => length(d.attention)) .attr("stroke", "black") .on("mouseover", d2 => { V6_2.filter( d => (d.row != d2.row || d.column != d2.column) && d2.attention < d.attention ) .append("rect") .attr("class", "V6_2 hover") .attr("x", d => d.column * 40) .attr("y", d => (d.row + 1) * 40 - length(d2.attention)) .attr("fill", color(0.4)) .attr("width", d => length(d2.attention)) .attr("height", d => length(d2.attention)) .attr("stroke", "black"); V6_2.filter( d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention ) .append("rect") .attr("class", "V6_2 hover") .attr("x", d => d.column * 40) .attr("y", d => (d.row + 1) * 40 - length(d2.attention)) .attr("fill", color(0.4)) .attr("width", d => length(d2.attention)) .attr("height", d => length(d2.attention)) .attr("stroke", "black"); V6_2.filter( d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention ) .append("rect") .attr("class", "V6_2 hover") .attr("x", d => d.column * 40) .attr("y", d => (d.row + 1) * 40 - length(d.attention)) .attr("fill", "gray") .attr("width", d => length(d.attention)) .attr("height", d => length(d.attention)) .attr("stroke", "black"); }) .on("mouseout", _ => { V6_2.selectAll(".V6_2.hover").remove(); }); return svg.node(); }3d:T979,md` * **Text**

Luminance has the problem of not being an effective channel: Two words with a small difference in attention might be perceived too similar. One alternative is to encode attention directly with a number in plain text. This encoding allows us to easily compare the attention between documents and words, but to explore the result and identify particular values like spoting the word with more attention will be more difficult than using simply luminance. * **Text/Luminance**

This encoding combines color luminance and text. With this encoding the task of exploring the visualization is easier than plain text due to color luminance. Moreover, we allow the user to compare attention more precisely by keeping the encoding with text. * **Bar (Horizontal or vertical)**

Bars are one of the most used marks in visualization, as we indicated in the previous section as well as citing the work by Felix et al. (2017). We propose to change the luminance on the cell grids by horizontal or vertical bars because the alignment will allow us to compare attention for a fixed word between different documents (vertical bar) or attention within a particular document between different words (horizontal bar). * **Area**

This encoding is the merge of vertical and horizontal bar. Although surface area is a channel less precise than bar length, surface area is a more precise channel than color luminance or saturation. Moreover, the bars within the cells can be too small, making attention difficult to compare across words or documents. * **Interactive hover** `3e:T1d24,designSpace2 = { const w = width - margin.left - margin.right + 100; const h = 150; const svg = d3.select(DOM.svg(w, h)); const data = [ { attention: 0.9, row: 0, column: 0 }, { attention: 0.5, row: 0, column: 1 }, { attention: 0.3, row: 1, column: 0 }, { attention: 0.4, row: 1, column: 1 } ]; const length = d3 .scaleLinear() .domain([0, 1]) .range([0, 39]); const color = d3 .scaleLinear() .domain([0, Math.max(...data.map(d => d.attention))]) .range([colors.lowAttention, colors.highAttention]); // rotate the text svg .append("text") .attr("x", 0) .attr("y", 0) .attr("transform", "translate(20, 130) rotate(-90)") .text("Interactive"); svg .append("text") .attr("x", 0) .attr("y", 0) .attr("transform", "translate(35, 110) rotate(-90)") .text("hover"); svg .append("text") .attr("x", 105) .attr("y", 30) .text("Vertical Bar"); svg .append("text") .attr("x", 220) .attr("y", 30) .text("Horizontal Bar"); svg .append("text") .attr("x", 370) .attr("y", 30) .text("Area"); const V4_2 = svg .append("g") .attr("transform", "translate(110, 50)") .selectAll(".V4_2") .data(data) .enter(); V4_2.append("rect") .attr("class", "V4_2") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", d => "white") .attr("width", 40) .attr("height", 40) .attr("stroke", "black"); V4_2.append("rect") .attr("class", "V4_2") .attr("x", d => d.column * 40 + 10) .attr("y", d => (d.row + 1) * 40 - length(d.attention)) .attr("fill", d => "gray") .attr("width", 15) .attr("height", d => length(d.attention)) .attr("stroke", "black") .on("mouseover", d2 => { V4_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention < d.attention) .append("rect") .attr("class", "V4_2 hover") .attr("x", d => d.column * 40 + 10) .attr("y", d => (d.row + 1) * 40 - length(d2.attention)) .attr("fill", d => color(0.5)) .attr("width", 15) .attr("height", length(d2.attention)) .attr("stroke", "black") V4_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention) .append("rect") .attr("class", "V4_2 hover") .attr("x", d => d.column * 40 + 10) .attr("y", d => (d.row + 1) * 40 - length(d2.attention)) .attr("fill", d => color(0.5)) .attr("width", 15) .attr("height", length(d2.attention)) .attr("stroke", "black") V4_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention) .append("rect") .attr("class", "V4_2 hover") .attr("x", d => d.column * 40 + 10) .attr("y", d => (d.row + 1) * 40 - length(d.attention)) .attr("fill", d => "gray") .attr("width", 15) .attr("height", d => length(d.attention)) .attr("stroke", "black") }) .on("mouseout", _ => { V4_2.selectAll(".V4_2.hover").remove(); }); const V5_2 = svg .append("g") .attr("transform", "translate(230, 50)") .selectAll(".V5_2") .data(data) .enter(); V5_2.append("rect") .attr("class", "V5_2") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", d => "white") .attr("width", 40) .attr("height", 40) .attr("stroke", "black"); V5_2.append("rect") .attr("class", "V5_2") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40 + 12.5) .attr("fill", d => "gray") .attr("width", d => length(d.attention)) .attr("height", 15) .attr("stroke", "black") .on("mouseover", d2 => { V5_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention < d.attention) .append("rect") .attr("class", "V5_2 hover") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40 + 12.5) .attr("fill", color(0.5)) .attr("width", d => length(d2.attention)) .attr("height", 15) .attr("stroke", "black"); V5_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention) .append("rect") .attr("class", "V5_2 hover") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40 + 12.5) .attr("fill", color(0.5)) .attr("width", d => length(d2.attention)) .attr("height", 15) .attr("stroke", "black"); V5_2.filter(d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention) .append("rect") .attr("class", "V5_2 hover") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40 + 12.5) .attr("fill", d => "gray") .attr("width", d => length(d.attention)) .attr("height", 15) .attr("stroke", "black"); }) .on("mouseout", _ => { V5_2.selectAll(".V5_2.hover").remove(); }); const V6_2 = svg .append("g") .attr("transform", "translate(350, 50)") .selectAll(".V6_2") .data(data) .enter(); V6_2.append("rect") .attr("class", "V6_2") .attr("x", d => d.column * 40) .attr("y", d => d.row * 40) .attr("fill", d => "white") .attr("width", 40) .attr("height", 40) .attr("stroke", "black"); V6_2.append("rect") .attr("class", "V6_2") .attr("x", d => d.column * 40) .attr("y", d => (d.row + 1) * 40 - length(d.attention)) .attr("fill", d => "gray") .attr("width", d => length(d.attention)) .attr("height", d => length(d.attention)) .attr("stroke", "black") .on("mouseover", d2 => { V6_2.filter( d => (d.row != d2.row || d.column != d2.column) && d2.attention < d.attention ) .append("rect") .attr("class", "V6_2 hover") .attr("x", d => d.column * 40) .attr("y", d => (d.row + 1) * 40 - length(d2.attention)) .attr("fill", color(0.5)) .attr("width", d => length(d2.attention)) .attr("height", d => length(d2.attention)) .attr("stroke", "black"); V6_2.filter( d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention ) .append("rect") .attr("class", "V6_2 hover") .attr("x", d => d.column * 40) .attr("y", d => (d.row + 1) * 40 - length(d2.attention)) .attr("fill", color(0.5)) .attr("width", d => length(d2.attention)) .attr("height", d => length(d2.attention)) .attr("stroke", "black"); V6_2.filter( d => (d.row != d2.row || d.column != d2.column) && d2.attention >= d.attention ) .append("rect") .attr("class", "V6_2 hover") .attr("x", d => d.column * 40) .attr("y", d => (d.row + 1) * 40 - length(d.attention)) .attr("fill", "gray") .attr("width", d => length(d.attention)) .attr("height", d => length(d.attention)) .attr("stroke", "black"); }) .on("mouseout", _ => { V6_2.selectAll(".V6_2.hover").remove(); }); return svg.node(); }3f:T656,md` ### Idiom for visualizing document's predicted class In the x-axis of the large heatmap idiom, rather than a simple label indicating the document ID or label, we introduce a small idiom to present the index of the document, the model's certainty about the prediction and the ground truth of the document. The ID number in the idiom is the index of the document (in the example below, 00, 01, 02 or 03), the length of the vertical bars encode the level of certainty about the prediction for each class. The color hue helps to encode the class prediction: green is used for relevant and purple for not relevant. We used color brewer to choose the color palette, making sure that it was categorical as well as colorblind safe. The color of the horizontal bar at the bottom of this small idiom is the ground truth of the document: green is used for relevant and purple for not relevant. We present some examples to understand our design choices. `40:Tbd8,designSpaceClasification2 = { const w = width - margin.left - margin.right + 100; const h = 250; margin.top + margin.bottom + 30; const gridSize = Math.floor(width / 50); const svg = d3.select(DOM.svg(w, h)); const version1 = [ { certainty: "0.67", prediction: 1, label: 1 }, { certainty: "0.99", prediction: 1, label: 0 }, { certainty: "0.49", prediction: 0, label: 1 }, { certainty: "0.19", prediction: 0, label: 0 } ]; const V5 = svg .append("g") .attr("transform", "translate(80, 45)") .selectAll(".V5") .data(version1) .enter(); svg.append("text").text("Example of idiom").attr("x", 60).attr("y", 30).attr("font-size", 20) // rotate the text const length2 = d3 .scaleLinear() .domain([0, 1]) .range([0, 20]); const idiomG = svg .append("g") .attr("transform", "translate(20, 50)") .selectAll(".idiomG") .data(version1) .enter(); idiomG .append("rect") .attr("class", "idiomG") .attr("x", 0) .attr("y", (_, i) => i * (40 + 10)) .attr("height", 40) .attr("width", 40) .attr("stroke", "black") .attr("fill", 'white'); idiomG .append("rect") .attr("class", "idiomG") .attr("x", 24) .attr("y", (d, i) => i * (40 + 10) + 38 - length2(+d.certainty)) .attr("height", d => length2(+d.certainty)) .attr("width", 3) .attr("stroke", "black") .attr("fill", colors.relevant); idiomG .append("rect") .attr("class", "V3") .attr("x", 32) .attr("y", (d, i) => i * (40 + 10) + 38 - length2(1 - +d.certainty)) .attr("height", d => length2(1 - +d.certainty)) .attr("width", 5) .attr("stroke", "black") .attr("fill", colors.not_relevant); idiomG .append("text") .attr("x", 3) .attr("y", (_, i) => i * (40 + 10) + 15) .attr("font-size", 14) .text( (d,i) => `${i<10?"0"+i:i}`); idiomG .append("rect") .attr("class", "idiomG") .attr("x", 0) .attr("y", (_, i) => i * (40 + 10) + 38) // .attr("y", (_, i) => i * (40 + 10) + 30) .attr("height", 3) // .attr("height", 10) .attr("width", 40) .attr("stroke", "black") .attr("fill", d => (d.label ? colors.relevant : colors.not_relevant)); V5 .append("text") .attr("x", 0) .attr("y", (_, i) => 20 + i * (40 + 10)) .text( (d, i) => `Text 0${i} has ${d.prediction?d.certainty:(1- +d.certainty)} certainty to be ${d.prediction?"relevant":"not relevant"}` ) .attr("font-size", "12pt"); V5 .append("text") .attr("x", 0) .attr("y", (_, i) => 40 + i * (40 + 10)) .text( d =>`and the ground truth is ${d.label ? "relevant" : "not relevant"}`) .attr("font-size", "12pt"); return svg.node(); }41:Ta35,md ` # Conclusion and Future Work In this interactive article, we studied a particular technique within the context of explainable AI, which is the attention mechanism in deep neural networks. We have conducted a non-exhaustive survey and analysis of the visual idioms used to represent neural attention, at the level of modeling architectures or presenting the prediction for images, sentence translation or document classification. Then, using a usage case, classification of biomedical articles, we have explored some alternatives in the design space for visualizing attention. The first task addressed is related to identifying important words in a particular document (being attended by the neural model) and the second task is about comparing not only words within a document, but also comparing between documents. Based on what is presented here, our next steps are designing a user study, and then conduct it with actual physicians, specially considering those who use systems for evidence-based healthcare such as [Epistemonikos](https://www.epistemonikos.org/), [Cochrane](https://www.cochrane.org/) or [Embase](https://www.embase.com/#search). We also plan to provide a more structured and wider exploration of the options for the design space. For instance, in the idioms to visualize attention within the text, we used a linear scale to encode the attention in channels such as font size, or luminance. There are alternatives to study: changing the scale to logarithmic, exponential, or quadratic. Depending on the task, even inverting the scale to focus in the words receiving less attention could be an aspect for deeper investigation. We would also like to identify a broader range of tasks to be considered in order to identify a larger scope of idioms useful for task related to inspecting attention models. Another aspect we would like to study is going beyond the attention of neural networks, but testing other methods which provide explanations such as [LIME](https://github.com/marcotcr/lime) or [Shap](https://github.com/slundberg/shap), and to test the design space with these alternatives. Finally, there are more recent attention architectures such as the Transformer (Vaswani et al., 2017), which includes additional elements in the neural architecture such as multihead attention. Visualizing these newer attention models and their results is an interesting avenue of future work, since they are the foundation for several state-of-the-art language models such as BERT and XLNet. `42:Tdd1,md` ## References Bahdanau, D., Cho, K., & Bengio, Y. (2014). Neural machine translation by jointly learning to align and translate. arXiv preprint arXiv:1409.0473. Berlin, J. (1967). Semiologie graphique: Les diagrammes, les réseaux, les cartes. Paris Gauthier-Villars. Bateman, S., Gutwin, C., & Nacenta, M. (2008). Seeing things in the clouds: the effect of visual features on tag cloud selections. In Proceedings of the nineteenth ACM conference on Hypertext and hypermedia (pp. 193-202). ACM. Chuang, J., Manning, C. D., & Heer, J. (2012, May). Termite: Visualization techniques for assessing textual topic models. In Proceedings of the international working conference on advanced visual interfaces (pp. 74-77). ACM. Cleveland, W. S., & McGill, R. (1984). Graphical perception: Theory, experimentation, and application to the development of graphical methods. Journal of the American statistical association, 79(387), 531-554. Covington, P., Adams, J., & Sargin, E. (2016). Deep neural networks for youtube recommendations. In Proceedings of the 10th ACM conference on recommender systems (pp. 191-198). ACM. Farquharson, K. A., Hogg, C. J., & Grueber, C. E. (2018). A meta-analysis of birth-origin effects on reproduction in diverse captive environments. Nature communications, 9(1), 1055. Felix, C., Franconeri, S., & Bertini, E. (2017). Taking word clouds apart: An empirical investigation of the design space for keyword summaries. IEEE transactions on visualization and computer graphics, 24(1), 657-666. Goodfellow, I., Bengio, Y., & Courville, A. (2016). Deep learning. MIT press. Gunning, D., & Aha, D. W. (2019). DARPA's Explainable Artificial Intelligence Program. AI Magazine, 40(2), 44-58. Krizhevsky, A., Sutskever, I., & Hinton, G. E. (2012). Imagenet classification with deep convolutional neural networks. In Advances in neural information processing systems (pp. 1097-1105). Larochelle, H., & Hinton, G. E. (2010). Learning to combine foveal glimpses with a third-order Boltzmann machine. In Advances in neural information processing systems (pp. 1243-1251). Mikolov, T., Sutskever, I., Chen, K., Corrado, G. S., & Dean, J. (2013). Distributed representations of words and phrases and their compositionality. In Advances in neural information processing systems (pp. 3111-3119). Mnih, V., Heess, N., & Graves, A. (2014). Recurrent models of visual attention. In Advances in neural information processing systems (pp. 2204-2212). Munzner, T. (2014). Visualization Analysis and Design. A K Peters/CRC Press. Olah, C., & Carter, S. (2016). Attention and augmented recurrent neural networks. Distill, 1(9), e1. http://doi.org/10.23915/distill.00001 Stevens, S. S. (2017). Psychophysics: Introduction to its perceptual, neural and social prospects. Routledge. Vaswani, A., Shazeer, N., Parmar, N., Uszkoreit, J., Jones, L., Gomez, A. N., ... & Polosukhin, I. (2017). Attention is all you need. In Advances in neural information processing systems (pp. 5998-6008). Xu, K., Ba, J., Kiros, R., Cho, K., Courville, A., Salakhudinov, R., Zemel & Bengio, Y. (2015). Show, attend and tell: Neural image caption generation with visual attention. In International conference on machine learning (pp. 2048-2057). Yang, Z., Yang, D., Dyer, C., He, X., Smola, A., & Hovy, E. (2016). Hierarchical attention networks for document classification. In Proceedings of the 2016 conference of the North American chapter of the association for computational linguistics: human language technologies (pp. 1480-1489). `43:T91f,md` # Appendix ## The classification model We left the details of our neural attentive document classification model in the appendix to avoid users diverting their focus from the main contribution of the article, which is on the area of information visualization. The next Figure shows the model.

The input is document title and abstract of length *n* words, where *n* is also a parameter of the model that we set to 150 (the median amount of words in the abstracts of our dataset). We do this since in some cases the documents have abstracts of more than 2,000 words, making the model too complex only to manage these outliers. Each word is represented with a word embedding vector (word2vec or Glove) ${tex`w_i`}. Next, each word embedding gets into an LSTM cell, which ouputs a hidden state vector ${tex`h_i`}. For each hidden state, the attention layer learns a value (attention ${tex`\alpha_i`}) depending on how much it contributes to the final decision, i.e, the document classification. Finally the product of each hidden state vector ${tex`h_i`} with their respective attention parameter ${tex`\alpha_i`} are aggregated through a linear layer to finally obtain the predicted class. Note that we can identify which words were payed more attention to because the index of the attention parameters are the same as the index of the words used as inputs for the model. These attentions are then used in the visualizations, to explain the class prediction. ## Results

The next table shows the results of the model, which improves the performance of our previous model based on random forest by around 10% on different metrics (precision, recall and f1-score). However, it has better performance when predicting documents that are scientifically relevant (class 1 in the table) compared to those that are not relevant (class 0 in the table), explained by the lower recall levels of the last one. The goal of the visualizations in this document is helping on inspecting the results of the model, specially those cases wrongly classified. `44:T1ecc,buildVisualization = (dataset, interactive) => { const w = width - margin.left - margin.right + 100; const gridSize = Math.floor(width / 38); const h = dataset.finals_words.length * (gridSize + 2) + margin.top + margin.bottom + 30; const h_legend = h + 100; const svg = d3.select(DOM.svg(w, h_legend)); const data = []; const documents = []; const key = Object.keys(dataset.heatmap); key.sort(); key.forEach((key, row) => { dataset.heatmap[key].forEach((d, column) => { data.push({ value: d, row: row, column: column, word: key }); }); }); for (let i = 0; i <= Math.max(...data.map(d => d.column)); i++) { documents.push(i); } const bottomText = svg .selectAll() .data(documents) .enter() .append("g") .attr("transform", "translate(0," + (margin.left + gridSize / 1.5) + ")"); const predictionColor = d3 .scaleLinear() .domain([0, 0.5, 1]) .range([colors.not_relevant, "white", colors.relevant]); const lengthBarCertainty = d3 .scaleLinear() .domain([0, 1]) .range([0, 20]); // Box prediction document bottomText .append("rect") .attr("x", (_, i) => i * (gridSize + 2) + 90) .attr("y", h - 82) .attr("width", gridSize) .attr("height", gridSize + 3) .attr("stroke", "black") .attr("fill", 'white'); /* // TextDocument bottomText .append("text") .text(d => (d < 10 ? "0" + String(d) : String(d))) .attr("x", (_, i) => i * (gridSize + 2) + 93) .attr("y", h - 73) .attr("font-size", "7pt") .attr("fill", "black"); // TextDocument bottomText .append("text") .text(d => { let prediction = dataset.random_sample[d].predicted_label?"R":"NR"; return `${prediction}` }) .attr("x", (_, i) => i * (gridSize + 2) + 93) .attr("y", h - 65) .attr("font-size", "6pt") .attr("fill", "black"); bottomText .append("text") .text(d => { let ground = dataset.random_sample[d].label?"R": "NR"; return `${ground}` }) .attr("x", (_, i) => i * (gridSize + 2) + 93) .attr("y", h - 58) .attr("font-size", "6pt") .attr("fill", "black"); */ // % of prediction bottomText .append("rect") .attr("x", (_, i) => i * (gridSize + 2) + 90 + 14) .attr("y", (_, i) => h - 82 + gridSize - lengthBarCertainty(dataset.random_sample[i].prediction[0])) .attr("width", 3) .attr("height", (_, i) => lengthBarCertainty(dataset.random_sample[i].prediction[0]) ) .attr("stroke", "black") .attr("fill", colors.not_relevant); bottomText .append("rect") .attr("x", (_, i) => i * (gridSize + 2) + 90 + 18) .attr("y", (_, i) => h - 82 + gridSize - lengthBarCertainty(dataset.random_sample[i].prediction[1])) .attr("width", 3) .attr("height", (_, i) => lengthBarCertainty(dataset.random_sample[i].prediction[1]) ) .attr("stroke", "black") .attr("fill", colors.relevant); // Real value bottomText .append("rect") .attr("x", (_, i) => i * (gridSize + 2) + 90) .attr("y", h - 82 + gridSize) .attr("width", gridSize) .attr("height", 3) .attr("fill", (_, i) => predictionColor(dataset.random_sample[i].label)) .attr("stroke", "black"); // TextDocument bottomText .append("text") .text(d => (d < 10 ? "0" + String(d) : String(d))) .attr("x", (_, i) => i * (gridSize + 2) + 91) .attr("y", h - 72) .attr("font-size", "7pt") .attr("fill", "black"); // Words svg .selectAll() .data(key) .enter() .append("text") .text(d => d) .attr("x", 0) .attr("y", (_, i) => i * (gridSize + 2)) .attr("font-size", "9pt") .attr("fill", colors.text) .attr("transform", "translate(0," + (margin.left + gridSize / 1.5) + ")"); let totalAttention = [] data.forEach(d => { let result = findIndex(dataset, d); let max = Math.min(result.index + 6, result.text.length); let min = Math.max(result.index - 5, 0); let words = result.text.slice(min, max); result.document.attention.slice(min, max).forEach(atte => { totalAttention.push(atte) }) }) const color = d3 .scaleLinear() .domain([0, Math.max(...totalAttention)]) .range([colors.lowAttention, colors.highAttention]); const color2 = d3 .scaleLinear() .domain([0, Math.max(...data.map(d => d.value))]) .range([colors.lowAttention, colors.highAttention]); console.log(color); const cards = svg.selectAll().data(data); let clicked = null; const cardsEnter = cards .enter() .append("rect") .attr("x", d => d.column * (gridSize + 2)) .attr("y", d => d.row * (gridSize + 2)) .attr("transform", "translate(90, 20)") .attr("rx", 4) .attr("ry", 4) .attr("class", "bordered") .attr("width", gridSize) .attr("height", gridSize) .style("fill", 'white') .filter(d => d.value > 0) .style("fill", d => color(d.value)); svg .append("text") .attr("x", 250) .attr("y", h) .attr("font-size", "10pt") .text("Documents"); if (interactive) { cardsEnter .on("click", (d, i, all) => { let result = findIndex(dataset, d); if (result.index >= 0) { if (clicked) { d3.select(clicked).style("stroke", "#F7F7F7"); } d3.select(all[i]).style("stroke", colors.clicked); clicked = all[i]; buildBar(result, documents, gridSize, d, svg, 0); } }) .on("mouseover", (d, i, all) => { if (clicked == all[i]) { return; } d3.select(all[i]).style("stroke", colors.hover); let result = findIndex(dataset, d); if (result.index >= 0) { buildBar(result, documents, gridSize, d, svg, 1); } }) .on("mouseout", (d, i, all) => { if (clicked == all[i]) { return; } d3.select(all[i]).style("stroke", "#F7F7F7"); }); } //Append a defs (for definition) element to your SVG let defs = svg.append("defs"); //Append a defs (for definition) element to your SVG // Added svg .append("text") .attr("x", 25) .attr("y", h + 16) .attr("font-size", "9pt") .text("Not relevant"); svg .append("text") .attr("x", 25) .attr("y", h - 16) .attr("font-size", "9pt") .text("Relevant"); svg .append("rect") .attr("x", 0) .attr("y", h) .attr("width", 20) .attr("height", 20) .style("fill", colors.not_relevant); svg .append("rect") .attr("x", 0) .attr("y", h - 32) .attr("width", 20) .attr("height", 20) .style("fill", colors.relevant); // Added let linearGradient2 = defs .append("linearGradient") .attr("id", "linear-gradient-2") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%") .selectAll("stop") .data(color.range()) .enter() .append("stop") .attr("offset", (_, i) => i / (color.range().length - 1)) .attr("stop-color", d => d); //Draw the rectangle and fill with gradient const marginBottom = 40; svg .append("rect") .attr("x", 90) .attr("y", h + 25) .attr("width", documents.length * (gridSize + 2)) .attr("height", 20) .style("fill", "url(#linear-gradient-2)"); svg .append("text") .attr("x", 88) .attr("y", h + 22 + marginBottom) .attr("font-size", "9pt") .text("0"); svg .append("text") .attr("x", 230) .attr("y", h + 22 + marginBottom) .attr("font-size", "9pt") .text("% of attention"); svg .append("text") .attr("x", documents.length * (gridSize + 2) + 75) .attr("y", h + 22 + marginBottom) .attr("font-size", "9pt") .text(String(Math.max(...totalAttention)).slice(0, 6)); return svg.node(); }; 45:Tc06,_buidBar = (words, attention, svg, width, version, mainWord, document) => { let newWords = []; words.forEach((d, i) => { newWords.push(`${i + 1}-${d}`); }); let newIndex = 6; let haveSeen = false; while (!haveSeen && newIndex >= 0) { if (words[newIndex] == mainWord) { haveSeen = true; break; } newIndex--; } const translate = 130; svg.selectAll(`.barchart-${version}`).remove(); let height = 30; if (version == 1) { height = 330; } let newsvg = svg .append("g") .attr("class", `barchart-${version}`) .attr("transform", `translate(${width + translate}, ${height})`); const x = d3 .scaleLinear() .domain([0, 0.1]) .range([0, 300]); const y = d3 .scaleBand() .domain(newWords) .range([0, 200]) .padding(0.2); const color = d3 .scaleLinear() .domain([0, 0.00404]) .range([colors.lowAttention, colors.highAttention]); const yAxis = g => g .attr("transform", `translate(${width + translate}, ${height})`) .attr("class", `barchart-${version}`) .call(d3.axisLeft(y).tickSizeOuter(0)); const xAxis = g => g .attr("transform", `translate(${width + translate}, ${height + 200})`) .attr("class", `barchart-${version}`) .call(d3.axisBottom(x)) .call(g => g.select(".domain").remove()); const border = newsvg .append("rect") .attr("x", 0) .attr("y", 0) .attr("fill", version == 0 ? colors.clicked : colors.hover) .attr("height", 200) .attr("width", 300); const bars = newsvg .selectAll(".rect") .data(attention) .enter() .append("rect") .attr("x", x(0)) .attr("y", (_, i) => y(newWords[i])) .attr("class", "rect") .attr("fill", d => color(d)) .attr("height", y.bandwidth()) .attr("width", d => x(d) - x(0)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); newsvg .append("text") .attr("class", "title") .attr("x", 90) .attr("y", 235) .text(`Document ${document.index}`); // Define the div for the tooltip let div = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); newsvg .append("text") .attr("class", "title") .attr("x", 10) .attr("y", -15) .text(`${document.title.slice(0, 30)}...`); newsvg .append("text") .attr("class", "title") .attr("x", 265) .attr("y", -15) .text(`(?)`) .style("cursor", "pointer") .on("click", d => { div.transition() .duration(200) .style("opacity", 0.9); div.html(document.title) .style("left", d3.event.pageX - 100 + "px") .style("top", d3.event.pageY - 70 + "px"); }) .on("mouseout", d => { div.transition() .duration(500) .style("opacity", 0); }); svg .selectAll(`.barchart-${version}`) .selectAll("text") .attr("fill", colors.text) .filter((d, i) => d == `${newIndex + 1}-${mainWord}`) .attr("fill", colors.focusText) .attr("font-weight", 900); }; 46:T2bfe,buildAttentionIdioms = (d, dataset) => { const letterWidth = {}; const medicalDocument = d; const titleLength = dataset.random_sample[medicalDocument].title.split(" ").length; const w = 1000 - margin.left - margin.right; let text = dataset.random_sample[medicalDocument].text; let attentions = dataset.random_sample[medicalDocument].attention; const div = document.createElement("div"); div.style.float = "left"; document.body.appendChild(div); let i = text.length; while (i--) { let letter = text.charAt(i); div.innerText = letter; let computedWidth = window .getComputedStyle(div, null) .getPropertyValue("width") .match(/\d+/)[0]; letterWidth[letter] = parseInt(computedWidth); } i = "Title: Abstract: ".length; while (i--) { let letter = "Title: Abstract: ".charAt(i); div.innerText = letter; let computedWidth = window .getComputedStyle(div, null) .getPropertyValue("width") .match(/\d+/)[0]; letterWidth[letter] = parseInt(computedWidth); } let maxLength = 0 let _ = ("Title: Abstract " + text).split(" ").forEach(d => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } if (length > maxLength){ maxLength = length; } }) let xText = 0; let yText = 0; let yTextBackground = 0; let xBar = 0; let yBar = 0; let xCircle = 0; let yCircle = 0; let xFont = 0; let yFont = 0; const color = d3 .scaleLinear() .domain([0, d3.max(attentions)]) .range(["#f7f7f7", "red"]); const lengthBar = d3 .scaleLinear() .domain([0, d3.max(attentions)]) .range([0, maxLength]); const lengthCircle = d3 .scaleLinear() .domain([0, d3.max(attentions)]) .range([0, 15]); const sizeFont = d3 .scaleLinear() .domain([0, d3.max(attentions)]) .range([8, 20]); text = text.split(" ") let newTexts = ["Title:"].concat(text.slice(0, titleLength)) .concat(["Abstract:"]) .concat(text.slice(titleLength, text.lenght)); let newAttentions = [0].concat(attentions.slice(0, titleLength)) .concat([0]) .concat(attentions.slice(titleLength, attentions.lenght)); attentions = newAttentions text = newTexts const words = text.map((d, index) => { let length = 0; var i = d.length; while (i--) { length += letterWidth[d.charAt(i)]; } let newWidthText = xText + 10 + length; let newWidthCircle = xCircle + 12 + 2 * lengthCircle(attentions[index]) + length; let newWidthBar = xBar + 12 + length; let newWidthFont = xFont + 10 + (length * sizeFont(attentions[index])) / 17; if (d == "Title:"){ newWidthFont = xFont + 10 + (length * sizeFont(d3.max(attentions))) / 17; } if (lengthBar(attentions[index]) > 8 + length) { newWidthBar = xBar + 10 + lengthBar(attentions[index]); } if (newWidthText > w - 50) { xText = 0; yText += 20; yTextBackground += 30; newWidthText = 10 + length; } if (newWidthFont > w - 50) { xFont = 0; yFont += 30; newWidthFont = 10 + (length * sizeFont(attentions[index])) / 17; } if (newWidthCircle > w - 50) { xCircle = 0; yCircle += 30; newWidthCircle = 12 + 2 * lengthCircle(attentions[index]) + length; } if (newWidthBar > w - 50) { xBar = 0; yBar += 20; newWidthBar = 12 + length; if (lengthBar(attentions[index]) > 10 + length) { newWidthBar = 12 + lengthBar(attentions[index]); } } if (index == titleLength + 1){ if (xText != 0){ yText += 20; yTextBackground += 30; } xText = 0; if (xFont != 0){ yFont += 30; } xFont = 0; if (xCircle != 0){ yCircle += 30; } xCircle = 0; if (xBar != 0){ yBar += 20; } xBar = 0; newWidthBar = 12 + length; newWidthText = 10 + length; newWidthCircle = 12 + 2 * lengthCircle(attentions[index]) + length; newWidthFont = 10 + (length * sizeFont(attentions[index])) / 17; if (d == "Abstract:"){ newWidthFont = xFont + 10 + (length * sizeFont(d3.max(attentions))) / 17; } } let value = { xText: xText, yText: yText, word: d, attention: d == "Title:" || d == "Abstract:"?0:attentions[index], width: length + 6, xBar: xBar, yBar: yBar, xCircle: xCircle, yCircle: yCircle, xFont: xFont, yFont: yFont, yTextBackground: yTextBackground }; xText = newWidthText; xBar = newWidthBar; xCircle = newWidthCircle; xFont = newWidthFont; return value; }); // Font property - Size const translate1 = 55; // Font property - Color Intensity const translate2 = translate1 + (yFont + 85); // Additional Mark - Bars Length const translate3 = translate2 + (yText + 85); // Additional Mark - Circle Area const translate4 = translate3 + (yBar + 85); // Aditional Mark - Background Color Intensity const translate5 = translate4 + (yCircle + 85); const h = translate5 + (yTextBackground + 25); const svg = d3.select(DOM.svg(w, h)); ////////////////////////////////////////////////////////////////////////////// // Font property - Size svg .append("g") .attr("transform", `translate(50, ${translate1})`) .selectAll("text") .data(words) .enter() .append("text") .attr("class", d =>`V1 ${d.word}`) .attr("x", d => d.xFont) .attr("y", d => d.yFont) .attr("font-size", d => d.word == "Title:" || d.word == "Abstract:"?sizeFont(d3.max(attentions)):sizeFont(d.attention)) .attr("fill", "black") .text(d => d.word) .on('mouseover', d => svg.selectAll(`.V1.${d.word}`).attr('fill', 'magenta')) .on('mouseout', d => svg.selectAll(`.V1.${d.word}`).attr('fill', 'black')) .style('cursor', 'pointer'); svg .append("g") .attr("transform", `translate(50, ${translate1 - 30})`) .append("text") .attr("x", 0) .attr("y", 0) .attr("font-size", 20) .attr("font-weight", "bold") .text("Font property - Size"); ////////////////////////////////////////////////////////////////////////////// // Font property - Color Intensity const color2 = d3 .scaleLinear() .domain([0, d3.max(attentions)]) .range(["#f7f7f7", "black"]); svg .append("g") .attr("transform", `translate(50, ${translate2})`) .selectAll("rect") .data(words) .enter() .append("rect") .attr("class", d =>`V2 ${d.word}`) .attr("x", d => d.xText - 2) .attr("y", d => d.yText - 15) .attr('height', 20) .attr('width', d => d.width) .attr("fill", 'white') .attr("stroke", "magenta") .style("display", "none"); svg .append("g") .attr("transform", `translate(50, ${translate2})`) .selectAll("text") .data(words) .enter() .append("text") .attr("x", d => d.xText) .attr("y", d => d.yText) .attr("fill", d => d.word == "Title:" || d.word == "Abstract:"?"black":color2(d.attention)) .text(d => d.word) .on('mouseover', d => svg.selectAll(`.V2.${d.word}`).style('display', 'block')) .on('mouseout', d => svg.selectAll(`.V2.${d.word}`).style('display', 'none')) .style('cursor', 'pointer'); svg .append("g") .attr("transform", `translate(50, ${translate2 - 30})`) .append("text") .attr("x", 0) .attr("y", 0) .attr("font-size", 20) .attr("font-weight", "bold") .text("Font property - Luminance"); ////////////////////////////////////////////////////////////////////////////// // Additional Mark - Bars Length svg .append("g") .attr("transform", `translate(50, ${translate3})`) .selectAll("rect") .data(words) .enter() .append("rect") .attr("x", d => d.xBar) .attr("y", d => d.yBar - 15) .attr("width", d => lengthBar(d.attention)) .attr("height", 18) .attr("fill", "#dbdbdb") svg .append("g") .attr("transform", `translate(50, ${translate3})`) .selectAll("text") .data(words) .enter() .append("text") .attr("class", d =>`V3 ${d.word}`) .attr("x", d => d.xBar) .attr("y", d => d.yBar) .attr("fill", "black") .text(d => d.word) .on('mouseover', d => svg.selectAll(`.V3.${d.word}`).attr('fill', 'magenta')) .on('mouseout', d => svg.selectAll(`.V3.${d.word}`).attr('fill', 'black')) .style('cursor', 'pointer'); svg .append("g") .attr("transform", `translate(50, ${translate3 - 30})`) .append("text") .attr("x", 0) .attr("y", 0) .attr("font-size", 20) .attr("font-weight", "bold") .text("Additional Mark - Bars Length"); ////////////////////////////////////////////////////////////////////////////// // Additional Mark - Circle Area svg .append("g") .attr("transform", `translate(50, ${translate4})`) .selectAll("circle") .data(words) .enter() .append("circle") .attr("cx", d => d.xCircle + lengthCircle(d.attention)) .attr("cy", d => d.yCircle - 5) .attr("r", d => lengthCircle(d.attention)) .attr("fill", "#dbdbdb"); svg .append("g") .attr("transform", `translate(50, ${translate4})`) .selectAll("text") .data(words) .enter() .append("text") .attr("class", d =>`V4 ${d.word}`) .attr("x", d => d.xCircle + 2 * lengthCircle(d.attention)) .attr("y", d => d.yCircle) .attr("fill", "black") .text(d => d.word) .on('mouseover', d => svg.selectAll(`.V4.${d.word}`).attr('fill', 'magenta')) .on('mouseout', d => svg.selectAll(`.V4.${d.word}`).attr('fill', 'black')) .style('cursor', 'pointer'); svg .append("g") .attr("transform", `translate(50, ${translate4 - 30})`) .append("text") .attr("x", 0) .attr("y", 0) .attr("font-size", 20) .attr("font-weight", "bold") .text("Additional Mark - Circle Area"); ////////////////////////////////////////////////////////////////////////////// // Aditional Mark - Background Color Intensity svg .append("g") .attr("transform", `translate(50, ${translate5})`) .selectAll("rect") .data(words) .enter() .append("rect") .attr("x", d => d.xText - 2) .attr("y", d => d.yTextBackground - 15) .attr("width", d => d.width) .attr("height", 18) .attr("fill", d => color(d.attention)) .attr("rx", 8) .attr("ry", 8); svg .append("g") .attr("transform", `translate(50, ${translate5})`) .selectAll("text") .data(words) .enter() .append("text") .attr("class", d =>`V5 ${d.word}`) .attr("x", d => d.xText) .attr("y", d => d.yTextBackground) .text(d => d.word) .on('mouseover', d => svg.selectAll(`.V5.${d.word}`).attr('fill', 'magenta')) .on('mouseout', d => svg.selectAll(`.V5.${d.word}`).attr('fill', 'black')) .style('cursor', 'pointer'); svg .append("g") .attr("transform", `translate(50, ${translate5 - 30})`) .append("text") .attr("x", 0) .attr("y", 0) .attr("font-size", 20) .attr("font-weight", "bold") .text("Aditional Mark - Background Color Intensity"); return svg.node() }47:[] 2f:{"id":"be123758dafbaead","slug":"analyzing-the-design-space-for-visualizing-neural-attenti","title":"Analyzing the Design Space for Visualizing Neural Attention in Text Classification","thumbnail":"6577e87c0e846911b63c1b52872394f2a30276fe35308eef556cb9199516f538","access_level":"public","create_time":"$D2019-07-19T22:40:43.928Z","update_time":"$D2020-04-08T19:41:09.081Z","view_time":null,"first_public_time":"$D2019-08-01T00:17:07.966Z","has_unpublished_edits":null,"fork":{"id":"b367e25f2861a12a","slug":"attention-in-medical-document","title":"Visualizing attention in classification of medical documents","owner":{"id":"f0b7dd8a6790ef7f","login":"hernan4444","name":"Hernan VALDIVIESO LOPEZ"}},"stars":19,"starred":false,"owner":{"type":"team","id":"5d66a17ef16118c8","login":"clpuc","name":"PUC Chile","avatar_url":null,"tier":"starter_2024"},"version":2951,"publish_version":2951,"role":null,"authored":false,"authors":[{"type":"individual","id":"441296425d34c9bd","login":"denisparra","name":"denis parra","avatar_url":"https://avatars-next.observableusercontent.com/e6b26e9f7df770a57bb0ad93dceb2d7b1befb7769d929cc4d204a56e0f46339e","tier":null}],"members":[{"type":"team","id":"5d66a17ef16118c8","login":"clpuc","name":"PUC Chile","avatar_url":null,"tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":18,"collection":{"id":"cc47632928450280","slug":"a-i-artificial-intelligence","title":"Artificial Intelligence","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"titling":"auto","title":"Analyzing the Design Space for Visualizing Neural Attention in Text Classification","cells":[{"id":497,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2317,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2320,"value":"md`\n# Previous works visualizing attention\n\nIn the past, several visualizations have been used either to explain a model of neural networks using an attention mechanism, or to show what the network is paying attention to for a particular data instance (image, document, etc.) Often, the authors of these visualizations make several design choices and make assumptions on how people will perceive them, without much support from design principles of information visualization. In this section we identify the most common idioms used to depict attention, providing an example for each one.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1964,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1974,"value":"md`\n**Interactive node-link**. Another interesting example is the one by Figure 10 from Olah and Carter (2016), presenting attention in an interactive way, within a translation task. Here the result of the interaction and the colors chosen allows us to inspect an example rather than visualizing the full model. This implementation allows, for instance, to let the user inspect that when the article \"la\" in French was translated from English, the model was paying attention to both words \"the\" and \"Area\" in the original sentence.\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1957,"value":"md`\n**Heatmap**. In the same work by Bahdanau et al. (2014) on neural machine translation, Figure 3 shows a heatmap idiom used to represent attention. The following image is taken from the original article, where the input text is presented in the x-axis (words rotated), while the output text, translation to French, is presented in the y-axis. The whiter the cell, the higher the attention paid; the darker the cell is the opposite. In the first plot we see that when the French word *économique* was generated, the model was paying attention to the English words *Economic* as well as *European*.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1940,"value":"md`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1999,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2004,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2236,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1943,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2421,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2440,"value":"md`\n## Proposal of Marks and Channels for Visualizing Attention Directly on Text\n\nThe first task we address is identifying the words that the model paid more attention to, directly on the text. When visualizing attention, we need to consider the data we are representing. In our case, attention of a neural model for text classification is a probability distribution over words, i.e., for each word we have a positive numerical value in the range ${tex` \n[0..1]`}, and attentions ${tex` \\alpha_w`} to all words in a document must sum up to 1, i.e., ${tex` \\sum_{w \\in Doc} \\alpha_w=1`}. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2469,"value":"md `\nThere is a similarity of our task with visualizing word clouds: text to visualize having weights assigned to words. Then, for defining our design space, a good starting point is the work by [(Felix et al. 2017)](https://ieeexplore.ieee.org/abstract/document/8017641), who studied different ways of visually encoding word clouds. We then propose five different encodings, cosidering: a) font properties (size, luminance), b) additional marks (bars, circles), and the traditional background color for each word. Our goal is to propose these options, and implement them in the current manuscript to eventually conduct a user study and validate them. We discuss the different channels in the remainder of this section.\n\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2147,"value":"md`\n## Explore design space in one document\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2500,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2191,"value":"html`\n

${attention_documents.random_sample[20].title}

Prediction: ${attention_documents.random_sample[20].prediction_label?\"Relevant (R)\": \"Not Relevant (NR)\"}

Ground truth: ${attention_documents.random_sample[20].label?\"Relevant (R)\": \"Not Relevant (NR)\"}

Classification: ${attention_documents.random_sample[20].classification} (HU)

Prediction probability: ${String(attention_documents.random_sample[20].prediction[attention_documents.random_sample[20].predicted_label]).slice(0, 5)}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2224,"value":"buildAttentionIdioms(20, attention_documents)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2194,"value":"md` ## Playground for Neural Attention on Different Documents\n\nIn this section, use the *select* input widget to choose one document and explore the visualizations with each idiom from the design space. In the select widget, each document has a text in parenthesis, for instance (NR - R - HU). This text indicates the prediction of the model (NR) followed by the ground truth (R) and the classification (HU) of the document respectively. **R** means a relevant document, while **NR** signifies a non-relevant document.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2628,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"viewof documentSelector = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2031,"value":"html`\n

Document: ${attention_documents.random_sample[documentSelector.document].title}

Prediction: ${attention_documents.random_sample[documentSelector.document].predicted_label?\"Relevant (R)\": \"Not Relevant (NR)\"}

Ground truth: ${attention_documents.random_sample[documentSelector.document].label?\"Relevant (R)\": \"Not Relevant (NR)\"}

Classification: ${attention_documents.random_sample[documentSelector.document].classification}

Prediction probability: ${String(attention_documents.random_sample[documentSelector.document].prediction[attention_documents.random_sample[documentSelector.document].predicted_label]).slice(0, 5)}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1386,"value":"documentAttention = {\n return buildAttentionIdioms(documentSelector.document, attention_documents)\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2655,"value":"md`# Design space to visualize the attention when comparing between documents\n\nThe second task we analyze for visualization design is that of comparing attention between documents. The traditional way to present attention is using a heatmap where the luminance on the cell grids indicate the level of attention (the darker the cell, the higher the attention). We propose alternatives in this design space that we can explore in future work to compare attention for the same words between different documents. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2650,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2181,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2715,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2718,"value":"md`\nThe previous encodings are all designed for static visualizations. Hence, we also explore the alternative of using interactive visualization that help us compare the attention with more precision. If a user hovers the mouse pointer upon a cell, we interactively display this bar or square on the other cells of the grid. This aproach will help users compare more precisely the attention between close values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2200,"value":"md`# An idiom for comparing attention between documents and words\n\nBased on the design space analyzed, we chose a particular encoding for the task of comparing between documents. In the following idiom, based on a traditional heatmap, we show in the x-axis several documents and in the y-axis words that the documents were paying attention to. This is a traditional way to present attention, where the luminance on the cell grids indicates the level of attention (the darker the cell, the higher the attention). \nOne innovative aspect of this idiom is presenting some words several times in order to show that the same word receives different levels of attention depending on their location in the document. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2523,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2860,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2206,"value":"md` ### Idiom showing attention in context \n\nRegarding the words shown more than once in the y-axis, the format used is \"word-occurrence\", i.e., \"controlled-1\" indicates the first time the word \"controlled\" is shown, and \"controlled-2\" indicates the second time that the word is presented. With this encoding, the examples will show evidence that the level of attention will be dependent on the context, i.e., the words around (before and after) the word analyzed.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2216,"value":"md`\n\n### Incorporating interactivity for contextual inspection\n\nWe also integrate interactivity in order to enhance the presentation of attention in context. With the mouse we can hover or click on a cell to show the attention received by the word compared to its surrounding context, i.e., the five words around (before and after in the text) the word clicked or hovered. This information is presented by displaying an additional bar plot per each cell hovered or clicked upon, with up to two bar plots.\n\n![image](https://user-images.githubusercontent.com/15641721/65554066-e1087c80-defe-11e9-9eb1-8de7e595ff35.png)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2561,"value":"md `\n## A playground for comparing attention between documents\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2599,"value":"md `\nYou can play with the next interactive visualization . Notice how the model, in general, pays special attention to words like *included*, *review*, and *systematic* in order to classify documents as relevant. While these are also features that humans take into account, it could also be a bias in the dataset, making the model easy to fool when these words are present in not relevant documents.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2219,"value":"\n\nchart4 = {\n return buildVisualization(attention_documents2, true)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2788,"value":"md`\nThis idiom has some structural similarities with Termite (Chuang et al., 2012) in terms of using a matrix format to present terms (rows) and documents (columns), and the cells to represent importance. However, there are also important differences. Termite presents terms vs. topics (obtained with LDA topic modeling) rather than terms vs. documents. Moreover, Termite uses circle areas within the cells to represent importance, rather than the color channel we use to represent attention. Finally, their selection of cells triggers the presentation of full documents, while our idiom presents a bar plot with the word in context of surrounding words. We should also consider that in our case there is also classification information with the labels of documents, while Termite has no side information apart from the topic id.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2487,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2931,"value":"md`\n# Acknowledgements\n\nDenis Parra, Hernán Valdivieso, Andrés Carvallo and Gabriel Rada have been supported by Conicyt, Fondecyt Regular grant nr. 1191791. Denis Parra, Hernán Valdivieso and Andrés Carvallo have also been supported by the Millenium Institute Fundamentals of Data (Chile's Ministry of Economy).\n\nKatrien Verbert has been supported by the KU Leuven Research Council (grant agreement no. C24/16/017) and the European Union (Horizon 2020 research and innovation programme, grant agreement no. 780751).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1590,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2596,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md`# Internal code to make visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"colors = ({\n \"bars\": \"#174487\",\n \"clicked\": \"#b1f0af\",\n \"hover\": \"#a2c6fc\",\n \"text\": \"#7a7a7a\",\n \"focusText\": \"#000000\",\n \"relevant\": \"#7fbf7b\",\n \"not_relevant\": \"#af8dc3\",\n \"lowAttention\": \"#fdae61\",\n \"highAttention\": \"#2c7bb6\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"margin = ({ top: 20, right: 20, bottom:20, left: 20 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"buildBar = (result, documents, gridSize, d, svg, version) => {\n let documentDict = {\n index: d.column,\n title: result.document.title\n }\n let max = Math.min(result.index + 6, result.text.length);\n let min = Math.max(result.index - 5, 0);\n let words = result.text.slice(min, max);\n let attention = result.document.attention.slice(min, max);\n let heatmapWidth = documents[documents.length - 1] * (gridSize + 4) + 90;\n let mainWord = result.text[result.index];\n _buidBar(words, attention, svg, heatmapWidth, version, mainWord, documentDict);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2160,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"style = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"findIndex = (dataset, d) => {\n let document = dataset.random_sample[d.column];\n let text = document.text.split(\" \");\n let word = d.word.split(\"-\")[0];\n let counter = d.word.split(\"-\")[1];\n let findWord = 0;\n let index = 0;\n while (findWord != counter && index >= 0) {\n index = text.indexOf(word, index == 0 ? 0 : index + 1);\n findWord++;\n }\n return { index, text, document };\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2144,"value":"get_text = (d, i) => {\n let prediction = d.predicted_label?\"R\":\"NR\";\n let ground = d.label?\"R\": \"NR\";\n let classification = \"AC\";\n if (d.classification == \"broad_synthesis\"){\n classification = \"BS\";\n }\n else if (d.classification == \"excluded_other\"){\n classification = \"OT\";\n }else if (d.classification == \"excluded_not_humans\"){\n classification = \"HU\"\n }\n else if (d.classification == \"excluded_not_health_decision\"){\n classification = \"HD\";\n }else if (d.classification == \"excluded_protocol\"){\n classification = \"PR\";\n }else if (d.classification == \"excluded_not_health\"){\n classification = \"NH\";\n }\n \n return `${i<10?\"0\"+i:i}: (${prediction} - ${ground} - ${classification}) ${d.title.length > 100 ? d.title.slice(0, 100) + \" ...\": d.title}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"textwrap = require('d3-textwrap');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"import {jsonInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":1530,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"same_words","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2288,"value":"attention_documents","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2815,"value":"attention_documents2 = {\n let random_sample = {}\n let heatmap = {}\n let index = 0\n Object.keys(same_words.random_sample).forEach(d => {\n if (d != 4 && d != 9){\n random_sample[index] = same_words.random_sample[d];\n index+= 1;\n }\n }) \n Object.keys(same_words.heatmap).forEach(word => {\n heatmap[word] = [];\n same_words.heatmap[word].forEach((attention, i) => {\n if (i != 4 && i != 9){\n heatmap[word].push(attention)\n }\n })\n })\n\n let finals_words = same_words.finals_words\n delete heatmap['rcts-3']\n finals_words = finals_words.filter(d => d!='rcts-3')\n return {random_sample, heatmap, finals_words: finals_words}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"\nviewof same_words = jsonInput({\n initialUrl: \"https://gist.githubusercontent.com/Hernan4444/c737c7aef0969f9f29640a10836a39d5/raw/02e5fab9429e439a198321a90853b1cb9c0ce509/same_words.json\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":2287,"value":"viewof attention_documents = jsonInput({\n initialUrl: \"https://gist.githubusercontent.com/Hernan4444/c737c7aef0969f9f29640a10836a39d5/raw/05c0b6994cf842970056cdf59b99176126445986/attention_documents.json\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 30:"$2f:body"