ICCS Summer School presentation, draft 3

[rolyp]

Draft to run through with Dominic at 3pm on Friday.

See also:

• 36

• 39

• 42

Done/dropped:

• [x] Renewables example
  • [x] Pass over “takeaways” – non-monolithic, monotonicity
  • [x] Variant with just a single output
  • [x] Source code
  • Minimal expository text
• Scatterplot example
  • Source code
  • Minimal expository text; explain “clean capacity factor”, etc
  • petrolOut, gasOut unused – but nuclearOut used – why?
  • petrolCap used – but to calculate x or y coordinate?
• [x] Script for each demo (see notes below)
  • [x] renewables
  • [x] renewable-linked
  • energy-scatter
  • [x] convolution
  • [x] convolution-wrapped
• [x] Convolution example
  • [x] Source code
  • [x] Show behaviour with different filter
• [x] Scripts for (brief) code walkthroughs
  • [x] renewables
  • [x] convolution
• [x] Introduce each subsection by stepping through table of contents
• [x] Intro text/further context for very first slide

[rolyp]

Hi @RaoOfPhysics, couple of notes for you on the presentation so far:

• I’ve moved my bits to Keynote as I found using Markdown far too restrictive in the end! I think we can go with the first part of the presentation in JS and the second part in Keynote, and for the web demos I’ll just switch to a browser.
• I’ve done some minor rearrangement of the motivational section (part of the slides you’ll be presenting). The idea is for each “motivational” subsection to have a two-word title (e.g. “Querying and Questioning”) followed by a slide that illustrates what we mean. But currently the grammar of these isn’t quite right – the subject/object roles sometimes match (like in “Querying and Questioning” but sometimes they don’t (as in “Justifying and Criticising”), and some may feel a bit forced. But if you’re on board with the overall idea, feel free to make whatever changes you deem appropriate (this is your part of the talk and I don’t want you to feel I’ve bulldozed over it!).
• The idea then is for your part of the talk to wrap up with “State of Play Today” where you report on what it’s like to solve some of these problems yourselves, and finally the Caveat slide (which no longer has the title “Caveat” and has been expanded a bit). I’ll put a PDF of my slides in the repo too so you can see where I am with them without needing Keynote!

[rolyp]

renewables script

• Looking at some renewable energy output for USA and China
• In addition to chart we have a button ◀▶ which allows us to see underlying data set
• Initially 0 of 72 records shown
• Mouse over 2017 red point to see Bio data for that year – 2 records shown
• Blue bar to left of column indicates data was used to compute that point
• Call this a transient selection because it expresses temporary interest in an output
• Can also click on something to make a persistent selection
• Can still make transient selections while persistent selection is active
• Selecting another red point picks out a different year; or can pick different energy type
• A kind of relative query – relative to a fixed selection, we can now ask what additional data is relevant
• In this example we aren’t learning much more than what is conveyed in the legend (but doing so via the data)
• By interacting in different ways I can test out my understanding
• Comprehension as a guided inferential activity (hypothesis formulation and testing)

renewables-linked script

• What we now have is an additional chart alongside the original one, presenting a second view of the same data
• As before we can interact with line chart to see the relevant data
• Can also interact with bar chart to see different view of the data
• For example I can select Germany to see that these 4 numbers were relevant
• 2 observations: whereas here we were dividing two numbers, here we’re adding them – it would be useful to see that
• But we also see something that isn’t apparent from legend/caption: 2015 data on the left
• We can test that hypothesis by interacting with another bar
• When we did that another interesting thing happened: all the 2015 points were highlighted on right
• We can use persistent selections to investigate that further
• If I select USA on left and then interact with a highlighted point on right, I see that the relevant data overlap
• Whereas for the other points that’s not the case
• Linking selections across charts is called brushing and linking in the literature
• Here we can do it in a transparent way that reveals exactly why these two selections are linked
• I can play this game the other way around: select 2015 point on right and two bars are highlighted on left
• Then I can interact with either of the bars to see the data overlap
• Or with Germany to confirm that there is no overlap
• Different visual effects here are because we now need to distinguish primary and secondary selection
• Primary selection is output I initially selected; secondary is what becomes selected as a consequence

convolution script

• Here’s an implementation in Fluid of matrix convolution example from the Distill publication earlier
• Here we’re just looking at the output of the convolution
• Once again we can inspect the underlying data, which in this case is two other matrices, the input and filter
• As we interact with the output, different parts of the input and filter become relevant
• Can anyone see why these two elements of the input aren’t needed here?
• And what about when I go here? Why is the top row of the filter not relevant?
• What’s an experiment we could conduct using this UI to get further confirmation of that hypothesis?
• Surprising amount that you can ascertain about convolution without even looking at the code
• One final thing is that we can “invert the direction” of the interaction and ask of an input what outputs it contributes to
• Shows: pattern of output cells “consuming” an input has same shape as pattern of input cells consumed by an output
• This was surprising (to me!)
• And if we play that game with filter, we can see that the central element of the filter contributes to every output
• What’s going to happen if we consider this element of the filter?
• You’ll also notice that some of the other inputs are shown in blue whereas others are greyed out
• What’s being shown here are the other inputs needed by these outputs
• This is the flip of the brushing and linking setup I showed earlier
• For a given input, we see inputs that are related to me because they contribute to the same part of the output

convolution-wrapped script

• Let’s try a different implementation of convolution, one that wraps the input at the boundary
• If we select a point in the middle of the output, the behaviour was as before
• What will happen if we start moving towards the edge? What parts of the input will we need? What about the filter?
• What about if we move to the corner?
• So again idea here to explicitly support comprehension an active process of hypothesis formulation and testing
• Of course it would be super-cool if for each output cell we could display intermediate results as well
• E.g. a 3x3 matrix with the element-wise product of the filter and the corresponding part of the input

[rolyp]

Omit scatter plot demo for now – not very convincing without more UI work.

Demo 2 script [DROPPED]

• Similar setup to before, can use ◀▶ to access underlying data
• Two data sets relating to renewable and non-renewable energy output and capacity
• This UI is rather limited so far so just want to show one thing
• Select a point on right to pull in data for France
• Here the captions really aren’t much use here – e.g. unclear what counts as “clean energy”
• This UI can only help us a little bit here – e.g. we can see that nuclear out is used, but not coal, gas or petrol

[rolyp]

Code walkthroughs

renewables

• Have a helper function series which generates a list of x, y coordinates from a dataset called renewables
• Uses a list comprehension to iterate over each row in that dataset to generate another list
• Python: for row in renewables
• For every row in renewables and every year in this date range, pull out the year and output
• Use those as the x and y values
• Use another list comprehension to build a LinePlot for each energy type
• “Divide” the USA time series by the China time series to create the time series we want to plot
• Details aren’t too important – this isn’t any harder than the equivalent Python code
• “Pure visualisation” code, nothing about interactions, selections, data dependencies..

convolution

• Main convolve function takes image and kernel as arguments
• Plus a function called method which determines how the image is processed at the boundaries
• convolve uses this array literal notation to construct the output array
• ! to access appropriate elements of the kernel and input matrices
• Inner list comprehension to collect the elements whose weightedSum is a given output element
• Three predefined implementations of method are provided at the top
• zero is the one we’ve been looking at but there are others, e.g. wrap which treats input as wrapping
• Again details don’t matter too much here – idea is to give you an impression of what the language looks like
• Key point is that the user doesn’t have to write any “interaction infrastructure”