The Visualisation Development Process

Development Process_

From initial idea to implementation.

The development of the visualisations follows 6 essential steps >

Six Essential Steps_

1 Connect

Connect with our community! We use Microsoft Teams for all our team communication, and share our code on Github.

2 Train

During this phase students will start developing the many new skills required to develop visualisations, such as code‐sharing on Github and programming in Javascript / HTML / CSS.

3 Design

Before any coding starts, there needs to be a clear plan for ‘version 1.0’ of the visualisation. This requires defining learning objectives and creating a design sketch, including the visual and interactive elements of the visualisation..

4 Develop

This is the programming phase. With the aid of a visualisation template the student(s) will code up the ‘version 1.0’ functionality in Javascript / HTML / CSS.

5 Review

Once all the functionality in the initial design has been coded up, the visualisation is sent for peer-review. This will lead to further improvement and development, before sending it for staff review.

6 Upload

After checking ‘version 1.0’ for correctness, the staff partner approves the visualisation. It will then be uploaded to the website. Optional extensions can initiate a new design phase for a more advanced version of the visualisastion.

A supportive team environment_

There are many skills involved in developing effective visualisations for education. Not only does it require good programming skills, it also needs a sound understanding of educational design and insight into how students learn. It is difficult to acquire this wide skill set when working in isolation. ImpVis therefore develops its visualisations in staff-student partnerships (read more about what this means on our About page). Our members benefit from each other’s expertise as learners and instructors.

Most of our developers are not yet familiar with Javascript and HTML (the programming languages on which our visualisations are based) when they join our project. Over the years we have collated our community’s experience in a set of templates, guidance documents, and links to useful online resources in order to help new developers get started. Our enthusiastic experienced students also act as mentors to new students joining our community in order to help them learn the required coding skills.

Once started on a visualisation, it is common to have many new ideas for improvement. However, this can lead to a visualisation never being finished to a sufficient standard to be used by learners. We therefore follow an agile development process: ensuring that ‘version 1.0’ of each visualisation is uploaded for review as soon as the initial design has been realised, before implementing further extensions. The team’s review process helps visualisations become ready for release - altogether this means that more of our members achieve the satisfaction of seeing their visualisation put to good use by learners.