Knowledgebase

This page is a child of the Main Impvis Wiki Page. This is the ImpVis knowledge base; it contains all of the information ImpVis has accumulated as a community in order to design and develop effective interactive visualisations for education.

The structure of this page follows the steps of our design and development process closely.

Getting started

These are the suggested steps to take if you wish to know all about how to get involved in the ImpVis project.

1. Read a brief overview of our design and development process (ensure to take the first step: connecting with our community).
2. Find out how to get involved with a visualisation project.
3. Understand what it means to work in partnership.

You can follow the links in the pages above to find out more information. Below are listed all the pages in the 'Getting Started' category in alphabetical order.

▼ Getting Started

  Getting involved

  Managing your project on the ImpVis website

  Opportunities to work together

  Our design and development process

  Wiki Template for new project

  Working in partnership

Visualisation design guidance

To create an interactive visualisation for education, you will need to consider the design of your visualisation carefully from several angles. The ImpVis template implements some of our ideas so that you do not need to design your visualisation entirely from scratch. Suggested reading:

1. Which steps to take during the design process.
2. Familiarise yourself with the ImpVis template (hosted on the ImpVis website) so you understand how it can support your visualisation design.
3. Read the description of the ImpVis template for a greater understanding.

Below we list all our further design guidance documents alphabetically, split up into three different categories: education, graphic, and interaction design. Note that we have only just started collating our experience in this section, so it is sparsely populated - we aim to incorporate all knowledge generated by the ImpVis module students in this Wiki going forward.

Education design

Relevant pages in alphabetical order:

▼ Education Design

  Choosing interactive parameters

  Organising content

  Scaffolding concepts

Graphic design

Relevant pages in alphabetical order:

▼ Graphic Design

  The ImpVis Visual Identity - Ethos

Interaction design

Relevant pages in alphabetical order:

▼ Interaction Design

  Choosing interactive parameters

Guidance for coding up visualisations

Before you start coding, ensure the visualisation design is well documented on your Wiki project page and all partners have agreed on the design! If you haven't done this yet, revisit the steps to take in the design process to find out how to do this.

The sections below contain technical guidance to support you with the coding side of ImpVis.

Setting up

When starting coding, these are the suggested steps to follow:

1. Read about our programming languages and where to find some training resources.
2. Follow this tutorial to set up your coding environment.
3. Learn about getting started on GitHub.

All our pages with guidance for setting up are listed below in alphabetical order.

▼ Setting Up

  Getting connected on Github

  Programming languages

  Tutorial for setting up the coding environment

The ImpVis visualisations template

Here you can find information about the ImpVis template created in 2020, using vue.js. You should already have familiarised yourself with the ImpVis template during the design phase. However, before you proceed with the coding, make sure you have an in-depth understanding of the template and its components, including how to include the components in your code. Suggested steps to take:

1. See the template in action here: ImpVis template.
2. Read the ImpVis template description.
3. Follow the basic tutorial on how to include components in your code.
4. Find technical documentation on all ImpVis Vue components.

Below are all our guidance pages for the ImpVis and the associated components, in alphabetical order.

▼ ImpVis Template

► ImpVis Components

  Basic Component Tutorial

  ImpVis template description

  Introduction to Vue workshop

  Vue Components

The coding process

Look here for tips and help on issues that may come up while you're coding. Here are some pages to get your started:

1. Structuring your code
2. Help on HTML, CSS, JS and JS libraries
3. Javascript packages for graphics
4. Tips for the developer

All our coding tips pages are listed alphabetically below.

▼ Tips Whilst Coding

  Basic Component Tutorial

  Common errors and how to handle them

  Debugging and Console

  Help on HTML, CSS, JS and JS libraries

  Introduction to Vue workshop

  JavaScript packages for graphics

  Legacy content

  Structuring your code

  Tips for the developer

  YouTube channel

Review and publication of your visualisation

• Uploading
• Review
• Versioning
• Creating a collection

Maintaining ImpVis

everything about how to update the component library, Rob's technical doc, YouTube videos

Website guidance

Everything about the functionality on the website and its design.