Data Visualisation Lecture

On Thursday 27th July, I went along to a lecture on data visualisation. I missed out on the workshop due to it being fully subscribed but was able to attend the lecture beforehand ‘Navigating the Visualization Jungle: A 101 to the What, Why and How of Data Visualization’ by Benjamin Bach, a lecturer in ‘Design Informatics and Visualization’ at the University of Edinburgh.

I have compressed this into some interesting links and various visualisation data types Benjamin discussed.

He talked about presentation tools including RAWGraphs which is an online tool where you can upload your spreadsheet data and select how to present it. He wanted to show us the directions of visualisation rather than the solution.

Why?

It is worth taking a look at Anscombe’s Quartet if you haven’t heard of it, it shows how the same data can look quite different.

Benjamin tried a few visual tests on us which looked at pre-attentiveness and parallel processing. I found this link Perception in Visualization which has the red dot tests he used on us and more.

He showed us this interactive timeline of wealth and global health life expectancy on Gapminder.

Check out these:

What?

  • Data:
    • item
    • attribute
    • relation
  • Visual marks:
    • points
    • lines
    • areas
  • Visual mapping:
    • visual variables
  • Data types:
    • numerical
    • ordered
    • categorical
  • Visual encoding by data type:
    • quantitative
    • ordinal
    • nominal
Obama discussion tree
Copyright © David Laniado, Riccardo Tasso, Yana Volkovich, Andreas Kaltenbrunner, released under CC BY-SA 2.0 licence.

How?

Banner image copyright © Martin Grandjean, released under CC BY-SA 4.0 licence.

DIY Film School – LTW Services Pitch (MyEd)

The following resources were created during a ‘DIY Film School’ session at the LTW Staff Meeting on 13th July 2017, held at Dovecot Studios. Our challenge was for groups of ~5 to produce a video pitch for a randomly assigned LTW service. Our service was MyEd, the University’s web portal (available to applicants, students, staff, visitors and alumni).

MyEd Student and Staff Login

DIY Film School

Video is a powerful medium of communication for staff and students and doesn’t always need high-end production techniques to be effective. This session aims to give you the skills and confidence to beginning filming, using just your smart device.

Event booking details

Workshop process (step-by-step)

Finished video

Media Hopper channel

View all the other service pitch videos

Additional images

Flickr photo album

OER licences

Video – Copyright © University of Edinburgh 2017 CC BY-NC-SA
Photos – Copyright © Stewart Lamb Cromar University of Edinburgh 2017 CC BY-NC-SA

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Creative Commons licence summary (BY-NC-SA)

Summer Intern – Sam Knight

Please give a warm welcome to Sam Knight (s1503602@sms.ed.ac.uk), a 3rd year Computing Science student, who has joined us in the role of Teacherbot UG Intern today.
Sam’s main responsibilities include:
  1. Liaising with stakeholders to agree the form and functionality of the new service, including the School of Education group which developed the “Teacherbot” pilot
  2. Creating chatbot definitions in AIML, and migrating existing chatbot definitions to AIML
  3. Configuring and managing the Pandorabot system, including bot definitions, user access, social media integration
  4. Co-ordinating a trial of the new Teacherbot service, alongside the academic team in the School of Education
  5. Helping support early-adopters to get the best out of the service
  6. Managing the web and social media presence of the project
  7. Reporting on adoption and usage
Sam is joining my Interactive Content team within Web, Graphics & Interaction service and will be with us for the next 2 months.  He will be working on Tuesday, Thursday and Friday each week and is based in Argyle House, Floor H-West.
We wish Sam well and I’m sure he will enjoy his time with us.
You can follow his progress via the project blog and Twitter account @Teacherbot_News.
Kind regards, Stewart Lamb Cromar
Reposted from Teacherbot blog post
“Summer” by Carl Larsson [Public domain], via Wikimedia Commons

Teacherbot Intern

Apply now to be our new Teacherbot intern. This opportunity is for a postgraduate intern (including PhD or Masters) within the University of Edinburgh.

The project is a partnership between Information Services, and the Digital Education group in the School of Education, building on the latter’s previous “Teacherbot” pilot.

Applications close on 14th February 2017.

Applications now close on 27th March 2017.

More details – https://mycareerhub.ed.ac.uk/students/jobs/detail/399367

Argyle House

We are moving! From Monday 21st November our new home will be Argyle House, 3 Lady Lawson Street, in the centre of Edinburgh. The main entrance is opposite Evolution House (Edinburgh College of Art).

Google map directions

Visitor instructions

When visiting Argyle House you should go to the main reception for the University of Edinburgh on level E (ground floor). They will provide you with a visitor pass. You will need to sign in and out and return the visitor pass at the end of your visit or at the end of the day (whichever comes first).

Our new office desks are located in Argyle House’s west wing on level H (2nd floor). Please note that all bookable meeting rooms are on level E (ground floor).

Postal address

Argyle House,
3 Lady Lawson Street,
The University of Edinburgh,
Level H West,
Edinburgh
EH3 9DR

Tackling Barriers

In 2017 the University of Edinburgh’s Interactive Content service and Chest Heart & Stroke Scotland (CHSS) will celebrate the 10th anniversary of their collaborative and fruitful partnership – only last month both organisations were highly commended in the BMA Patient Information Awards 2016.

Over this past decade developing innovative e-learning resources together several major changes have taken place. The most impactful decision was hopefully making all content developed in-house available as Open Educational Resources (OERs) and Creative Commons licensed (CC BY-NC-ND as minimum).

Multilingual videos

This year the partnership has decided to support non-English languages and publish videos that cater to a wider, more inclusive, Scottish audience. Within CHSS the ‘Tackling Barriers’ programme has identified several key languages to target: Arabic, Chinese (Mandarin), Polish, Urdu, Bengali and Lithuanian.

At CHSS we aim to support people in their community. Many with low literacy and English as a second language are not engaging with our services. Through co-production with low literacy and BME organisations and their members we will shape the development of CHSS health information and services. We will do this from inception to conclusion to tackle the barriers to engagement with CHSS services. CHSS will share lessons learnt with other long term condition organisations.

At the time of publication there are now 8 different ‘Tackling Barriers’ videos online and with many more in the production pipeline. Each of these instructional videos show you how to use various inhaler devices (e.g. metered dose inhalers with spacer). They are all available for playback, embedding and download via Media Hopper, Vimeo and YouTube.

Please visit the My Lungs My Life (MLML) resource for more advice, support and information regarding chest illness:

Coding For Diversity

Stemming from our previous blog post Scotland CSS & JS 2016 Stewart Lamb Cromar was kindly invited by Melissa Highton to present a lunchtime talk as part of the PlayFair Steps initiative within ISG.

Stewart’s presentation “Coding For Diversity” covered two key topics – gender and accessibility. His primary aim was to show that equality involves everyone, and web developers in particular can design and build solutions that benefit all of us.

  • šGender
    • šWhen is it ok to ask?
    • šWhen is it not ok?
    • šHow do you ask about gender?
  • šAccessibility
    • šDesigning for diversity helps everyone

Based on the excellent talk Chad Gower gave at Scotland JS 2016, Stewart asked us all to question our existing form design. Do we really need to ask for titles or gender?  If we do, then we should explain why, and give people the flexibility to choose a gender or title that they feel best reflects them.

Gender case studies included the analysis of various user registration forms from Vimeo, Facebook, Scratch and several University of Edinburgh websites maintained by the Interactive Content team. Stewart demonstrated what changes his team made to their websites as a direct result of attending Scotland JS 2016 and in research carried out for this PlayFair Steps talk.

In regards to accessibility, Stewart referenced an excellent Render 2016 video presentation by Robin Christopherson that explained how various situations can temporarily give anyone a visual or motor impairment:

  • šReading glasses or sun glare on screen makes you temporarily visually impaired
  • šHolding coffee in one hand makes you motor impaired
  • šSimilarly, small phone and big fingers makes you temporarily motor impaired

The accessibility case study focused on CAPTCHA and how legacy implementations can negatively affect all users, regardless of any impairment.

Stewart concluded his talk by playing back a recent BBC audio interview with a ten-year-old named Leo.

For most of his life, Leo has lived as a girl, but this summer he began to speak openly about his sense that that gender identity wasn’t quite right. šWith research help for his parents, he’s decided he is non-binary, though for the moment he dresses as a boy and has taken a male name.

The “Coding For Diversity” PowerPoint presentation is CC BY-SA 4.0 licensed and available to download:

N.B. Both the featured image and repeating tile (transparent PNG) used for this article were created by Stewart Lamb Cromar. They are  CC BY-SA 4.0 licensed and can be downloaded from this Flickr album:

Scotland CSS & JS 2016

From 1st-3rd June the Interactive Content team attended Scotland CSS & JS for the first time. The venue was Our Dynamic Earth and the list of presenters/attendees was truly international. Each of us have written a short summary on our favourite speakers.

Stuart Brett’s Notes

#01 – “Let’s Talk About Midi”- Ruth John.
A/V, Dev, Design, Code & Craft, R&D at a big mobile co. (@rumyra)

IMG_2559Ruth John’s talk on MIDI (Musical Instrument Digital Interface) was of particular interest to me. I’ve been writing music with MIDI devices since the 1990’s. Back then I was using floppy discs, latency-burdened drum machines and an Atari 1040 STE. Twenty years later and I find myself using the Arturia KeyLab, Korg Electribe and Novation Launchpad – all fancy modern tech but still utilising that age-old protocol, MIDI. MIDI underpins almost all modern electronic music, but I would never have made the connection with how it can work with web browsers. Ruth demonstrated that through using MIDI via your web browser, it could be used to trigger a sound without the need to pre-load files. My team specialise in Interactive game-based learning and we work heavily with animations and sound. Having synchronised audio triggers can be problematic, but Ruth’s suggestion of using web MIDI, Javascript and web Audio solves that. Cool.

Ruth’s notes can be found here – https://midi-talk.herokuapp.com/

#02 – “The VR Web And The Future Of The Browser” – Livi Ericsson.
VR/AR Developer Evangelist, Microsoft (@Misslivirose)

FullSizeRender 3Virtual Reality – an immersive multimedia/computer-based reality – has come and gone over the years. The limitations of technology crippled the advancement of VR in the ‘90s and as a result public interest, investment and research slowly dwindled by the end of the decade. However, thanks to the power of our current technology, Virtual Reality is undergoing a revolution, thanks in part to the huge interest in the Oculus Rift. 2016 marks the commercial release of the Oculus Rift headset , the SONY Playstation VR and the HTC Vive. This growing momentum in game-based VR was bolstered by the advancements in virtual and augmented reality. Our own 2015 Google Glass project http://glass.ed.ac.uk/ hinted at the potential of VR & AR as a teaching and learning tool and Livi’s talk on Web VR focused on the strengths of using VR with browsers mobile deviuces. Web VR currently has an experimental API for browsers to interact with VR hardware, it can identify various headsets and tracking devices and is supported in FireFox Nightly and Chromium. Javascript, C# and Boo can be used to write scripts in the Unity Game engine and can be exported to Web VR. Alternatively, Vizoe Create provides devs with the ability to create visual node-based programming for VR websites.

Livi’s slides and project links – https://livierickson.com/blog/scotlandjs-virtual-reality-in-the-browser-today/

#03 – “Practical Colour Theory For People Who Code” – Natalya Shelburne.
Front end developer, Rooster Teeth. (@natalyathree)

IMG_2534Natalya’s talk on colour theory started with a show of hands to see who was aware of colour theory and the colour wheel. A 3rd of the room put up their hands. I was astonished to see so few coders, content and UI designers say that they are not familiar with colour theory or use it in everyday practice. My background is in Illustration and Graphic Design, all of which were part of my degree. Like Natalya, I’m an Art Student and my university days were not spent as a developer. I still struggle with using that side of my brain that relates to coding! However, I’m surprised that colour theory isn’t part of a modern student programmer’s syllabus. Learning Colour theory is super easy and there are heaps of apps and documents available on the web. Using a colour wheel is something I haven’t done for some time, as it sort of embeds itself into your subconscious. My years working in the design industry helped with that, but I found Natalya’s talk very useful and a timely reminder that it is always good to keep your colour theory up to scratch – and even more so, if you’re currently developing websites and have never worked used colour theory when approaching GUI design.

Natalya has an online demo of her functions for a complementary color scheme – pick any color on the color wheel and the functions will make sure that the scheme will still work! – http://tallys.github.io/color-theory


Jackie Aim’s Notes

#04 – “How Cognitive Psychology can help you write better code” – Sílvia Pina (@smourapina)

c36ccfb2b50b703e86fd676e8f134fd8Sílvia is a polyglot software engineer working at Zalando. She previously studied psychology and neuroscience.

In an ideal world a programmer has:

  • mathematical ability
  • processing capacity
  • analogical reasoning
  • conditional reasoning
  • procedural reasoning
  • temporal reasoning

The Stroop effect

If anyone has ever done Brain training on the Nintendo DS you may have come across the Stroop effect. It consists of words i.e. red, blue, yellow and green and you have to read the colour of the word not what the word spells. So the word may say blue but its colour is red.

Many code text editors use Syntax colouring or highlighting. Software such as Sublime Text or Brackets.

Our thinking

System 1 System 2
  • Fast
  • Unconscious
  • Automatic
  • Everyday decisions
  • Error prone
  • Slow
  • Conscious
  • Effortful
  • Complex decisions
  • Reliable

Cognitive Biases:

  • Representativeness bias – if unfamiliar a tendency to look for similarities
  • Availability bias – reliability on strong or emotional memories
  • Anchoring bias – to rely on one piece of information
  • Confirmation bias – interpretation that confirms your preconceptions

Debiasing:

  • Be aware of cognitive biases, >-<
  • Question everything
  • Pro’s and con’s
  • Consider

Sílvia talked about using probability & statistics and frameworks & theory to reduce biases. Wikipedia has a comprehensive list of cognitive biases.

#05 – “Creating Accessible Components” – Cat Hawker (@auberdjinn)

5JjlJ7fEHow to avoid the accessibility pitfalls of rich interactions and create a fantastic experience for all your users. Cat is a web developer and accessibility champion for the BBC in Glasgow.

  • Smartphones and watches
  • Screen magnifiers
  • Screen readers
  • Braille displays
  • Haptics

How do people use your app?

  • Mouse
  • Touchscreen
  • Keyboard
  • Switches
  • Voice input

Where to start?

  • Test for visual accessibility
  • Zoom in
  • Use greyscale mode
  • High contrast
  • Font size in browser

Good practices

  • Relative units for text
  • Use SVG’s
  • Avoid text images
  • Choose colours with sufficient contrast

Keyboard

  • Tab
  • Focus

Standard keyboard controls

  • Tab
  • Shift & tab
  • Arrow
  • Enter
  • Space
  • Escape

Screen readers

  • OS X: VoiceOver (cmd + F5)
  • Windows: NVDA (free)
  • iOS: VoiceOver

W3C Recommendation: Accessible Rich Internet Applications (ARIA)
ARIA-live listen out for changes e.g AJAX.

For more on accessibility – BBC: Mobile Accessibility Guidelines


Stewart Cromar’s Notes

#06 – “An A to Z of CSS” – Umar Hansa (@umaar)

  • Kafeel1-1024x691One memorable highlight for me in Umar’s very interesting “A-Z of CSS” presentation was multicolour web fonts such as Painter Kafeel
  • Where you can stack multiple fonts together and apply different colours to various elements of each letter
  • Painter Kafeel is the digitised version of handpainted lettering originally done by signboard painter- Kafeel. It consists of 9 fonts, which when used together recreate the unique multi colored look of Indian Street Lettering
  • Sign up to Umar’s newsletter and receive a developer tip, in the form of a gif, in your inbox each week:

#07 – “How to Ask about Gender” – Chad Gowler (@kitation)

  • IMG_2450One very engaging and recurrent theme during Scotland CSS & JS was gender identity and inclusivity. Several speakers showed how developers could improve both their personal approach and technical solutions towards these subjects
  • Almost every presenter conveniently provided their preferred pronouns in either their PowerPoint slides or Twitter profiles, for example:
    • “She/her pronouns”
  • Chad Gowler gave an extremely interesting and practical talk on “How to Ask about Gender” and what best she considers best practice
  • One interesting takeaway was that a “title is not a legal required part of name”
  • In addition to Mr, Mrs, Ms., consider adding the gender neutral title Mx
    • Mx – pronounced ‘mix’
  • Do not use titles to assume gender
  • Having an ‘other’ option is “othering” and be deemed dehumanising
  • A good example mentioned was the Scratch sign-up form – tells you why their asking for gender and gives a free text option in addition to male/female. Only fault is it’s missing a label for 3rd option for accessibility i.e ARIA. Maybe call it “please specify”?
    • Gender – Why do we ask for this info?
    • This helps the Scratch design team understand who is using Scratch, and provides information that helps us broaden participation.  This information is not visible on your account, and is only used to describe overall participation.
  • Previously highlighted for ‘bad practice’, Vimeo profiles are now updated to include a preferred pronoun selection
    • Help us call you by the proper pronoun:
    • Female / Male / Neutral / Rather not say


Selected Tweets