Code
design & create_

Find out how we create our visualisations: the process, platforms and technologies.

Develop your own ImpVis visualisations_

Visualisations are developed by staff and students
working in partnership.

Every visualisation starts with an idea. Perhaps you are an instructor who has identified the need for a learning tool that helps students understand a specific abstract concept in your module. Or a student who has thought of a way to visualise a topic in one of your modules in order to understand it better. In either case, the first step is to connect with us. You can send us an email or request to join our online community on Microsoft Teams. We will help you create a staff-student partnership so you can start to develop your visualisation together. Once you are ready to upload your visualisation, you will become a creator or instructor on our website. This means you can publish your visualisation ensuring easy access for your audience of learners.

Read more about the six steps of our visualisation development process below.

Development Process_

From initial idea to implementation.

The development of the visualisations follows 6 essential steps >

Learn more>

The platforms & technology we use_

We’ve developed the online environment to be as flexible as possible, allowing you the freedom to create.

Visualisations

The visualisations are coded in JavaScript, HTML and CSS. We use JavaScript to perform calculations, plot graphics, and achieve interactivity. HTML is used to define the positioning of all the elements on the webpage and CSS to style them.

Common libraries

Our online environment is intentionally built to allow complete freedom in the libraries we use, so we can respond to new developments quickly. Commonly we use libraries such as Plotly.js, d3.js and p5.js for graphics and MathJax for rendering mathematical equations.

Template framework

Our visualisation template uses the popular Vue.js framework, enabling interactions between the various visualisation elements. We have dedicated Vue-components and Command line Interface packages, which can be accessed via the Node Package Manager.

Collaboration

We share code via GitHub repositories and connect as a community on MS Teams. This allows all of us to share tips and advice during the design and development process. Here we also share our written guidance, video tutorials, and co-write new documentation.

Code design & create_