ImpVis Wiki - User contributions [en-gb]

Three.js

2022-08-22T00:37:02Z

SarmpaviUthayakumar: Final edit

'''Author - Sarmpavi'''

I developed an interactive visualisation using three.js on quantum gates and their effects on quantum states. This visualisation is intended for 3<sup>rd</sup> and 4<sup>th</sup> undergraduate Physics students taking the Quantum Information module. I also created a design template (with the learning outcomes) which can be found on the Miro page under Bloch Sphere. As I developed this visualisation, I documented what I had learnt about three.js and how it can be used to create visualisations. Below is a summary of what I have learnt.

'''Introduction'''

This guidance page provides some basic information on how to use three.js including example code (which can be found on ImpVis’ GitHub) and some useful resources to learn and gain more knowledge about the package. Please note that the example code has been written by myself with only a few weeks of three.js experience – a lot of improvements can be made (some of which I have listed below) but I hope this will be somewhat useful for any beginners who are reading this. This page also assumes that you have some basic JavaScript/HTML/CSS knowledge.

three.js is a library which allows you to create 3D content and is a useful tool when developing interactive visualisations.

'''Installation:'''

three.js can be installed by navigating to your project folder in your terminal and then typing:

<code>npm install three</code>

Once installed, import it into your JavaScript file:
[[File:Import threejs.png|thumb|Import three.js]]
<code>import * as THREE from "../node_modules/three/build/three.module.js"</code>
'''Orbit Controls:'''

'''Orbit Controls:'''

The Orbit Controls package must also be imported – this allows you to interact with (e.g. rotate, pan, zoom in/out) your 3D object. To import this into your JavaScript file:
[[File:Import OrbitControls.png|thumb|Import OrbitControls]]
<code>import {OrbitControls} from "../vendor_mods/three/examples/jsm/controls/OrbitControls.js"</code>

'''Scene'''

First, we construct the ‘Scene’ which can be thought of as the canvas for the 3D object. To create the Scene:

<code>const scene = new THREE.Scene()</code>

The position of the scene can be adjust using CSS.

'''Camera'''

The Camera controls how the user views the 3D object on the scene. There are lots of different types of cameras but generally the ‘PerspectiveCamera’ is used where objects further away appear smaller just how the human eye sees things.

<code>const camera = new THREE.PerspectiveCamera()</code>

PerspectiveCamera takes several variables in which one can define the type of lens (wide-angle, telephoto) and the aspect ratio. If we want the Scene to cover the entire page, the aspect ratio is window.innerWidth/window.innerHeight.

The position of the Camera can be changed by setting the x, y and z positions:

<code>camera.position.x = (enter float)</code>

<code>camera.position.y = (enter float)</code>

<code>camera.position.z = (enter float)</code>

We must finally add the Camera to the Scene:

<code>scene.add(camera)</code>

'''Renderer'''

Next we need the Renderer which can be thought of as taking a photo of the Scene through the perspective of the Camera. There are many types of Renderers, but the most common type is WebGLRenderer:

<code>const renderer = new THREE.WebGLRenderer()</code>

We would like the Renderer to fill the whole page:

<code>renderer.setSize(window.innerWidth, window.innerHeight)</code>

We then add:

<code>document.body.append(renderer.domElement)</code>

Finally add:

<code>renderer.render(scene, camera)</code>

'''Controls'''

To enable Orbit Controls and allow interaction with the objects in your Scene:

<code>var controls = new OrbitControls(camera, renderer.domElement)</code>

To change the focal point of the controls:

<code>controls.target.set(x, y, z )</code>

where x, y and z specify the position of the focal point.

To disable panning:

<code>controls.enablePan = false</code>

To set the maximum angle at which you want to rotate about to, say 30 radians:

<code>controls.maxPolarAngle = 30</code>

'''Mesh'''

To add the 3D object, we use ‘Mesh’. The Mesh is made up of two variables: the geometry (the shape of the object) and the material (how the geometry looks). Let us take the example of a sphere.

''Geometry:''

<code>const geometry_sphere = new THREE.SphereGeometry(1,100,100)</code>

where the first input specifies the radius of the sphere, the second and third inputs specify the number of horizontal and vertical segments the sphere is divided into respectively (increasing the number results in a smoother sphere).

''Material:''

<code>const material_sphere = new THREE.MeshLambertMaterial({color: 0xB9F4FF,transparent:true, opacity:0.5})</code>

where the input ‘color’ specifies the color of the material of the sphere whilst the ‘transparent’ and ‘opacity’ inputs specify the transparency of the material of the sphere (the ‘transparent’ variable must be set to true before specifying the opacity value).

Defining the sphere as an object which takes ‘geometry_sphere' as the geometry variable and ‘material_sphere’ as the material variable:

<code>const sphere = new THREE.Mesh(geometry_sphere, material_sphere)</code>

Finally add the sphere to the Scene:

<code>scene.add(sphere)</code>

'''Vectors'''

Vectors can be implemented in the following way:

Define variable:

<code>const vector = new THREE.Vector3(1, 0, 0)</code>

where the inputs specify the x, y, and z values of the vector respectively.

To display the vector as an arrow, we define an arrow with the direction of the defined vector. Before that, we must define the origin at which we want the vector to start. We define this origin, say at the position (0, 0, 0), as a vector:

<code>const origin – new THREE.Vector3(0,0,0)</code>

We define the arrow:

<code>const vector_display = new THREE.ArrowHelper(vector, origin, 1, 0xffff00)</code>

where the inputs specify the direction, starting point, magnitude and color of the arrow respectively.

Finally, add the vector to the scene:

<code>scene.add(vector_display)</code>

To rotate ‘vector’:

<code>const vector_rotated = vector.applyaxisangle(axis, angle)</code>

where the first input ‘axis’ refers to the axis about which the vector is to be rotated, and the second input ‘angle’ refers to the angle of rotation.

'''Coordinate axes'''

To add coordinate axes:

<code>const axes = new THREE.AxesHelper(1)</code>

where the input ‘1’ specifies the size of the coordinates axes.
[[File:Content screenshot part 1.png|thumb|Content screenshot part 1]]
[[File:Content screenshot part 2.png|thumb|Content screenshot part 2]]
Finally, add the axes to the scene:
[[File:Content screenshot part 3.png|thumb|Content screenshot part 3]]
[[File:Content screenshot part 4.png|thumb|Content screenshot part 4]]
<code>scene.add(axes)</code>

'''Screenshot of three.js visualisation and content (see images):'''

'''Things to work on in future:'''

* Integration with the ImpVis template: Found it difficult to use import three.js into the template
* Removing the previous vectors each time the user wants to define and interact with a new state
* [[File:Template screenshot.png|thumb|Template screenshot]]Text on sphere to show the basis states (Pauli-x, Pauli-y and Pauli-z eigenstates)
* Explanations (see pdf)

'''Resources and links'''

* ''Guidance on the official three.js website:'' https://threejs.org/manual/#en/fundamentals
* ''Three.js coding tutorial: how to enhance a website by adding a 3D element? ft Bruno Simon - Prismic:'' https://www.youtube.com/watch?v=tVr89249gwM
* ''Three.JS Orbit Controls: Zoom, Pan, Rotate - SyntaxByte:'' https://www.youtube.com/watch?v=4ZgkMS5rH3E
* ''Three.js Crash Course for Absolute Beginners – DesignCourse:'' https://www.youtube.com/watch?v=6oFvqLfRnsU
* ''Getting Started With Your First three.js Project: Part 1 - The Setup:'' https://medium.com/nerd-for-tech/getting-started-with-your-first-three-js-project-part-one-the-setup-17f18660aecc
* ''Getting Started With Your First three.js Project: Part 2 - The Build:'' https://medium.com/nerd-for-tech/getting-started-with-your-first-three-js-project-part-two-the-build-3fd9a2f21418

[[Category:Records]]
[[Category:Summer 2022]]

File:Content screenshot part 4.png

2022-08-22T00:36:04Z

SarmpaviUthayakumar:

Content screenshot part 4

File:Content screenshot part 3.png

2022-08-22T00:35:41Z

SarmpaviUthayakumar:

Content screenshot part 3

File:Content screenshot part 2.png

2022-08-22T00:35:01Z

SarmpaviUthayakumar:

Content screenshot part 2

File:Content screenshot part 1.png

2022-08-22T00:34:20Z

SarmpaviUthayakumar:

Content screenshot part 1

File:Template screenshot.png

2022-08-22T00:32:38Z

SarmpaviUthayakumar:

Template screenshot

File:Import OrbitControls.png

2022-08-22T00:24:21Z

SarmpaviUthayakumar:

Import OrbitControls

File:Import threejs.png

2022-08-22T00:23:07Z

SarmpaviUthayakumar:

Import three.js

Three.js

2022-08-22T00:21:04Z

SarmpaviUthayakumar: edit 2

'''Author - Sarmpavi'''

I developed an interactive visualisation using three.js on quantum gates and their effects on quantum states. This visualisation is intended for 3<sup>rd</sup> and 4<sup>th</sup> undergraduate Physics students taking the Quantum Information module. I also created a design template (with the learning outcomes) which can be found on the Miro page under Bloch Sphere. As I developed this visualisation, I documented what I had learnt about three.js and how it can be used to create visualisations. Below is a summary of what I have learnt.

'''Introduction'''

This guidance page provides some basic information on how to use three.js including example code (which can be found on ImpVis’ GitHub) and some useful resources to learn and gain more knowledge about the package. Please note that the example code has been written by myself with only a few weeks of three.js experience – a lot of improvements can be made (some of which I have listed below) but I hope this will be somewhat useful for any beginners who are reading this. This page also assumes that you have some basic JavaScript/HTML/CSS knowledge.

three.js is a library which allows you to create 3D content and is a useful tool when developing interactive visualisations.

'''Installation:'''

three.js can be installed by navigating to your project folder in your terminal and then typing:

<code>npm install three</code>

Once installed, import it into your JavaScript file:

<code>import * as THREE from "../node_modules/three/build/three.module.js"</code>

'''Orbit Controls:'''

The Orbit Controls package must also be imported – this allows you to interact with (e.g. rotate, pan, zoom in/out) your 3D object. To import this into your JavaScript file:

<code>import {OrbitControls} from "../vendor_mods/three/examples/jsm/controls/OrbitControls.js"</code>

'''Scene'''

First, we construct the ‘Scene’ which can be thought of as the canvas for the 3D object. To create the Scene:

<code>const scene = new THREE.Scene()</code>

The position of the scene can be adjust using CSS.

'''Camera'''

The Camera controls how the user views the 3D object on the scene. There are lots of different types of cameras but generally the ‘PerspectiveCamera’ is used where objects further away appear smaller just how the human eye sees things.

<code>const camera = new THREE.PerspectiveCamera()</code>

PerspectiveCamera takes several variables in which one can define the type of lens (wide-angle, telephoto) and the aspect ratio. If we want the Scene to cover the entire page, the aspect ratio is window.innerWidth/window.innerHeight.

The position of the Camera can be changed by setting the x, y and z positions:

<code>camera.position.x = (enter float)</code>

<code>camera.position.y = (enter float)</code>

<code>camera.position.z = (enter float)</code>

We must finally add the Camera to the Scene:

<code>scene.add(camera)</code>

'''Renderer'''

Next we need the Renderer which can be thought of as taking a photo of the Scene through the perspective of the Camera. There are many types of Renderers, but the most common type is WebGLRenderer:

<code>const renderer = new THREE.WebGLRenderer()</code>

We would like the Renderer to fill the whole page:

<code>renderer.setSize(window.innerWidth, window.innerHeight)</code>

We then add:

<code>document.body.append(renderer.domElement)</code>

Finally add:

<code>renderer.render(scene, camera)</code>

'''Controls'''

To enable Orbit Controls and allow interaction with the objects in your Scene:

<code>var controls = new OrbitControls(camera, renderer.domElement)</code>

To change the focal point of the controls:

<code>controls.target.set(x, y, z )</code>

where x, y and z specify the position of the focal point.

To disable panning:

<code>controls.enablePan = false</code>

To set the maximum angle at which you want to rotate about to, say 30 radians:

<code>controls.maxPolarAngle = 30</code>

'''Mesh'''

To add the 3D object, we use ‘Mesh’. The Mesh is made up of two variables: the geometry (the shape of the object) and the material (how the geometry looks). Let us take the example of a sphere.

''Geometry:''

<code>const geometry_sphere = new THREE.SphereGeometry(1,100,100)</code>

where the first input specifies the radius of the sphere, the second and third inputs specify the number of horizontal and vertical segments the sphere is divided into respectively (increasing the number results in a smoother sphere).

''Material:''

<code>const material_sphere = new THREE.MeshLambertMaterial({color: 0xB9F4FF,transparent:true, opacity:0.5})</code>

where the input ‘color’ specifies the color of the material of the sphere whilst the ‘transparent’ and ‘opacity’ inputs specify the transparency of the material of the sphere (the ‘transparent’ variable must be set to true before specifying the opacity value).

Defining the sphere as an object which takes ‘geometry_sphere' as the geometry variable and ‘material_sphere’ as the material variable:

<code>const sphere = new THREE.Mesh(geometry_sphere, material_sphere)</code>

Finally add the sphere to the Scene:

<code>scene.add(sphere)</code>

'''Vectors'''

Vectors can be implemented in the following way:

Define variable:

<code>const vector = new THREE.Vector3(1, 0, 0)</code>

where the inputs specify the x, y, and z values of the vector respectively.

To display the vector as an arrow, we define an arrow with the direction of the defined vector. Before that, we must define the origin at which we want the vector to start. We define this origin, say at the position (0, 0, 0), as a vector:

<code>const origin – new THREE.Vector3(0,0,0)</code>

We define the arrow:

<code>const vector_display = new THREE.ArrowHelper(vector, origin, 1, 0xffff00)</code>

where the inputs specify the direction, starting point, magnitude and color of the arrow respectively.

Finally, add the vector to the scene:

<code>scene.add(vector_display)</code>

To rotate ‘vector’:

<code>const vector_rotated = vector.applyaxisangle(axis, angle)</code>

where the first input ‘axis’ refers to the axis about which the vector is to be rotated, and the second input ‘angle’ refers to the angle of rotation.

'''Coordinate axes'''

To add coordinate axes:

<code>const axes = new THREE.AxesHelper(1)</code>

where the input ‘1’ specifies the size of the coordinates axes.

Finally, add the axes to the scene:

<code>scene.add(axes)</code>

'''Screenshot of three.js visualisation and content (pdf):'''

'''Things to work on in future:'''

* Integration with the ImpVis template: Found it difficult to use import three.js into the template
* Removing the previous vectors each time the user wants to define and interact with a new state
* Text on sphere to show the basis states (Pauli-x, Pauli-y and Pauli-z eigenstates)
* Explanations (see pdf)

'''Resources and links'''

* ''Guidance on the official three.js website:'' https://threejs.org/manual/#en/fundamentals
* ''Three.js coding tutorial: how to enhance a website by adding a 3D element? ft Bruno Simon - Prismic:'' https://www.youtube.com/watch?v=tVr89249gwM
* ''Three.JS Orbit Controls: Zoom, Pan, Rotate - SyntaxByte:'' https://www.youtube.com/watch?v=4ZgkMS5rH3E
* ''Three.js Crash Course for Absolute Beginners – DesignCourse:'' https://www.youtube.com/watch?v=6oFvqLfRnsU
* ''Getting Started With Your First three.js Project: Part 1 - The Setup:'' https://medium.com/nerd-for-tech/getting-started-with-your-first-three-js-project-part-one-the-setup-17f18660aecc
* ''Getting Started With Your First three.js Project: Part 2 - The Build:'' https://medium.com/nerd-for-tech/getting-started-with-your-first-three-js-project-part-two-the-build-3fd9a2f21418

[[Category:Records]]
[[Category:Summer 2022]]

Three.js

2022-08-21T23:59:44Z

SarmpaviUthayakumar:

Three.js

2022-08-21T23:58:37Z

SarmpaviUthayakumar: edit 1

Three.js

2022-07-26T01:03:11Z

SarmpaviUthayakumar: Added summer 2022 category

'''Introduction'''

Author - Sarmpavi

This page provides some basic information on how to use Three.js including example code and some useful resources to learn and gain more knowledge about the package. Please note that the example code has been written by myself with only a few weeks of Three.js experience – a lot of improvements can be made but I hope this will be somewhat useful for any beginners who are reading this. This page also assumes that you have some basic JavaScript/HTML/CSS knowledge.

Three.js is a library which allows you to create 3D content and is a useful tool when developing interactive visualisations.

'''Installation:'''

Three.js can be installed by navigating to your project folder in your terminal and then typing: npm install three

Once installed, import it into your JavaScript file: import * as THREE from "../node_modules/three/build/three.module.js"; (insert image)

'''Orbit controls:'''

The Orbit controls package must also be imported – this allows you to interact with (e.g. rotate, pan, zoom in/out) your 3D object. To import this into your JavaScript file - import {OrbitControls} from "../vendor_mods/three/examples/jsm/controls/OrbitControls.js"; (pic)

'''Scene'''

First, we construct the ‘Scene’ which can be thought of as the canvas for the 3D object. To create the Scene – const scene = new THREE.Scene()

'''Camera'''

The camera controls how the user views the 3D object on the scene. There are lots of different types of cameras but generally the ‘PerspectiveCamera’ is used where objects further away appear smaller just how the human eye sees things.

const camera = new THREE.PerspectiveCamera()

PerspectiveCamera takes several variables in which one can define the type of lens (wide-angle, telephoto) and the aspect ratio. If we want the scene to cover the entire page, the aspect ratio is window.innerWidth/window.innerHeight.

The position of the camera can be changed by setting the x, y and z positions:

camera.position.x = (enter float)

camera.position.y = (enter float)

camera.position.z = (enter float)

We must finally add the camera to the Scene: scene.add(camera)

'''Mesh'''

To add the 3D object, we use ‘Mesh’. The Mesh is made up of two variables: the geometry (the shape of the object) and the material (how the geometry looks). Let us take the example of a sphere.

Finally add the object to the Scene:

Link to example code:

Screenshot of Three.js visualisation:

Things to work on in future:

- Integration with the ImpVis template: Found it difficult to use import Three.js into the template
[[Category:Records]]
[[Category:Summer 2022]]

Three.js

2022-07-26T00:59:29Z

SarmpaviUthayakumar: Three.js summer project review

Basic Component Tutorial

2022-07-18T10:35:04Z

SarmpaviUthayakumar:

This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]].
[[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]

== Panes ==

[[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page].
Code to implement the Pane seen on the right.

== Adding content to the mainstage ==

This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!

<syntaxhighlight lang="html" line>
<script>
export default {
props:{
mag: {
default: 0.005,

}
},
mounted(){
let vm = this;
let canvas = document.querySelector('canvas');
let parent = document.getElementById('parent');
let x = 50 + canvas.width/2;
let dx = 0;

canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

let c = canvas.getContext('2d');

function animate(){
requestAnimationFrame(animate);

c.clearRect(0,0,canvas.width, canvas.height);

c.beginPath();
c.moveTo(0,0);
c.lineTo(canvas.width, 0);
c.lineTo(canvas.width, canvas.height);
c.lineTo(0, canvas.height);
c.lineTo(0, 0);
c.strokeStyle = 'black';
c.stroke();

c.beginPath();
c.moveTo(x, canvas.height/2);
c.lineTo(canvas.width/2, canvas.height/2);
c.strokeStyle = 'blue';
c.lineWidth = 2;
c.stroke();

c.beginPath();
c.arc(x, canvas.height/2, 20, 0, Math.PI * 2);
c.fillStyle = 'orange';
c.fill();

x += dx;
dx += - mag * (x-canvas.width/2);
}
animate();

}

}
</script>
</syntaxhighlight>

The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.

Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.

== Toggleable hotspots ==
[[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]

Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.

‎<syntaxhighlight lang="html" line>
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
</template>

</iv-visualisation>
</div>
</template>

</syntaxhighlight>

An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.

== Fixed hotspots ==
Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below.

‎<syntaxhighlight lang="html" line>
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
<iv-fixed-hotspot position="topright" title="Fixed">
This will go inside the fixed hotspot, so will always appear on the screen.
P.S. You must specify a title and position
</iv-fixed-hotspot>
</template>

</iv-visualisation>
</div>
</template>

</syntaxhighlight>

[[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]
Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.

== Importing your own components ==
Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations.
[[File:Filename.png|thumb|Mainstage.vue file]]
In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.

For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:
‎<syntaxhighlight lang="html" line>
<template>

</template>

<script>
export default{

}
</script>

<style>

</style>

</syntaxhighlight>

‎<syntaxhighlight lang="html" line highlight="17">
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
<iv-fixed-hotspot position="topright" title="Fixed">
This will go inside the fixed hotspot, so will always appear on the screen.
P.S. You must specify a title and position
</iv-fixed-hotspot>
</template>
<MainStage></MainStage>

</iv-visualisation>
</div>
</template>
<script>
import {name} from ‘../package.json’;
import MainStage from ‘.components/MainStage.vue’;

export default {
name: "App",
components: {
MainStage,
},
data(){
return {
projectName: name
}
},
}
</script>

</syntaxhighlight>

1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue

‎<syntaxhighlight lang="html" line>
<template>
<div id="parent" style="height: 50%; width: 50%; padding: 50px;">
<canvas id="canvas"></canvas>
</div>
</template>
<script>
export default {
mounted(){
let canvas = document.querySelector('canvas');
let parent = document.getElementById('parent');

canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

let c = canvas.getContext('2d');

function animate(){
requestAnimationFrame(animate);

c.clearRect(0,0,canvas.width, canvas.height);

c.beginPath();
c.moveTo(0,0);
c.lineTo(canvas.width, 0);
c.lineTo(canvas.width, canvas.height);
c.lineTo(0, canvas.height);
c.lineTo(0, 0);
c.strokeStyle = 'black';
c.stroke();
}
animate();

}

}
</script>

</syntaxhighlight>

2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).

A screenshot of the result of this code is pasted below.
[[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]
[[Category:Coding Guidance]]
[[Category:Tips Whilst Coding]]
[[Category:ImpVis Template]]

How to Make the Template Mobile Friendly

2022-07-18T09:51:20Z

SarmpaviUthayakumar:

The current template is using CSS grid style, the position of the hotspots are set to be in specific grid areas. To see this, go to the visualisation component under the layout folder and scroll down to css style:

<syntaxhighlight lang="css" line>
.hotspot-manager{
display: grid;
grid-template-areas: "topleft top topright" "left . right" "bottomleft bottom bottomright";
height: 100%;
width: 100%;
pointer-events: none;
position: absolute;
}

</syntaxhighlight>

If we want to make it mobile friendly, one thing we can do is to have different grid settings in different type of screens (differ by maximum width). An example of this can be found at https://dodung1221.medium.com/best-way-to-design-web-responsive-with-grid-view-in-css-ad44cb5974a4 . In the example, the grod layout was only specified by columns. However, given the hotspot we want to implement, we need both row and column to be written in percentages.
[[Category:Maintaining ImpVis]]

Basic Component Tutorial

2022-07-13T09:49:41Z

SarmpaviUthayakumar: /* Importing your own components */

This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]].
[[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]

== Panes ==

[[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page].
Code to implement the Pane seen on the right.

‎<syntaxhighlight lang="python" line>
def quick_sort(arr):
less = []
pivot_list = []
more = []
if len(arr) <= 1:
return arr
else:
pass
‎</syntaxhighlight>

== Adding content to the mainstage ==

This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!

<syntaxhighlight lang="html" line>
<script>
export default {
props:{
mag: {
default: 0.005,

}
},
mounted(){
let vm = this;
let canvas = document.querySelector('canvas');
let parent = document.getElementById('parent');
let x = 50 + canvas.width/2;
let dx = 0;

canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

let c = canvas.getContext('2d');

function animate(){
requestAnimationFrame(animate);

c.clearRect(0,0,canvas.width, canvas.height);

c.beginPath();
c.moveTo(0,0);
c.lineTo(canvas.width, 0);
c.lineTo(canvas.width, canvas.height);
c.lineTo(0, canvas.height);
c.lineTo(0, 0);
c.strokeStyle = 'black';
c.stroke();

c.beginPath();
c.moveTo(x, canvas.height/2);
c.lineTo(canvas.width/2, canvas.height/2);
c.strokeStyle = 'blue';
c.lineWidth = 2;
c.stroke();

c.beginPath();
c.arc(x, canvas.height/2, 20, 0, Math.PI * 2);
c.fillStyle = 'orange';
c.fill();

x += dx;
dx += - mag * (x-canvas.width/2);
}
animate();

}

}
</script>
</syntaxhighlight>

The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.

Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.

== Toggleable hotspots ==
[[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]

Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.

‎<syntaxhighlight lang="html" line>
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
</template>

</iv-visualisation>
</div>
</template>

</syntaxhighlight>

An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.

== Fixed hotspots ==
Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below.

‎<syntaxhighlight lang="html" line>
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
<iv-fixed-hotspot position="topright" title="Fixed">
This will go inside the fixed hotspot, so will always appear on the screen.
P.S. You must specify a title and position
</iv-fixed-hotspot>
</template>

</iv-visualisation>
</div>
</template>

</syntaxhighlight>

[[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]
Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.

== Importing your own components ==
Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations.
[[File:Filename.png|thumb|Mainstage.vue file]]
In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.

For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:
‎<syntaxhighlight lang="html" line>
<template>

</template>

<script>
export default{

}
</script>

<style>

</style>

</syntaxhighlight>

‎<syntaxhighlight lang="html" line highlight="17">
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
<iv-fixed-hotspot position="topright" title="Fixed">
This will go inside the fixed hotspot, so will always appear on the screen.
P.S. You must specify a title and position
</iv-fixed-hotspot>
</template>
<MainStage></MainStage>

</iv-visualisation>
</div>
</template>
<script>
import {name} from ‘../package.json’;
import MainStage from ‘.components/MainStage.vue’;

export default {
name: "App",
components: {
MainStage,
},
data(){
return {
projectName: name
}
},
}
</script>

</syntaxhighlight>

1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue

‎<syntaxhighlight lang="html" line>
<template>
<div id="parent" style="height: 50%; width: 50%; padding: 50px;">
<canvas id="canvas"></canvas>
</div>
</template>
<script>
export default {
mounted(){
let canvas = document.querySelector('canvas');
let parent = document.getElementById('parent');

canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

let c = canvas.getContext('2d');

function animate(){
requestAnimationFrame(animate);

c.clearRect(0,0,canvas.width, canvas.height);

c.beginPath();
c.moveTo(0,0);
c.lineTo(canvas.width, 0);
c.lineTo(canvas.width, canvas.height);
c.lineTo(0, canvas.height);
c.lineTo(0, 0);
c.strokeStyle = 'black';
c.stroke();
}
animate();

}

}
</script>

</syntaxhighlight>

2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).

A screenshot of the result of this code is pasted below.
[[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]
[[Category:Coding Guidance]]
[[Category:Tips Whilst Coding]]
[[Category:ImpVis Template]]

Basic Component Tutorial

2022-07-13T09:34:44Z

SarmpaviUthayakumar: /* Importing your own components */

This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]].
[[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]

== Panes ==

[[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page].
Code to implement the Pane seen on the right.

‎<syntaxhighlight lang="python" line>
def quick_sort(arr):
less = []
pivot_list = []
more = []
if len(arr) <= 1:
return arr
else:
pass
‎</syntaxhighlight>

== Adding content to the mainstage ==

This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!

<syntaxhighlight lang="html" line>
<script>
export default {
props:{
mag: {
default: 0.005,

}
},
mounted(){
let vm = this;
let canvas = document.querySelector('canvas');
let parent = document.getElementById('parent');
let x = 50 + canvas.width/2;
let dx = 0;

canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

let c = canvas.getContext('2d');

function animate(){
requestAnimationFrame(animate);

c.clearRect(0,0,canvas.width, canvas.height);

c.beginPath();
c.moveTo(0,0);
c.lineTo(canvas.width, 0);
c.lineTo(canvas.width, canvas.height);
c.lineTo(0, canvas.height);
c.lineTo(0, 0);
c.strokeStyle = 'black';
c.stroke();

c.beginPath();
c.moveTo(x, canvas.height/2);
c.lineTo(canvas.width/2, canvas.height/2);
c.strokeStyle = 'blue';
c.lineWidth = 2;
c.stroke();

c.beginPath();
c.arc(x, canvas.height/2, 20, 0, Math.PI * 2);
c.fillStyle = 'orange';
c.fill();

x += dx;
dx += - mag * (x-canvas.width/2);
}
animate();

}

}
</script>
</syntaxhighlight>

The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.

Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.

== Toggleable hotspots ==
[[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]

Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.

‎<syntaxhighlight lang="html" line>
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
</template>

</iv-visualisation>
</div>
</template>

</syntaxhighlight>

An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.

== Fixed hotspots ==
Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below.

‎<syntaxhighlight lang="html" line>
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
<iv-fixed-hotspot position="topright" title="Fixed">
This will go inside the fixed hotspot, so will always appear on the screen.
P.S. You must specify a title and position
</iv-fixed-hotspot>
</template>

</iv-visualisation>
</div>
</template>

</syntaxhighlight>

[[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]
Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.

== Importing your own components ==
Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations.
[[File:Filename.png|thumb|Mainstage.vue file]]
In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.

For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:
‎<syntaxhighlight lang="html" line>
<template>

</template>

<script>
export default{

}
</script>

<style>

</style>

</syntaxhighlight>

‎<syntaxhighlight lang="html" line highlight="17">
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
<iv-fixed-hotspot position="topright" title="Fixed">
This will go inside the fixed hotspot, so will always appear on the screen.
P.S. You must specify a title and position
</iv-fixed-hotspot>
</template>
<MainStage></MainStage>

</iv-visualisation>
</div>
</template>
<script>
import {name} from ‘../package.json’;
import MainStage from ‘.components/MainStage.vue’;

export default {
name: "App",
components: {
MainStage,
},
data(){
return {
projectName: name
}
},
}
</script>

</syntaxhighlight>

1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue

[[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]
2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).

A screenshot of the result of this code is pasted below.
[[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]
[[Category:Coding Guidance]]
[[Category:Tips Whilst Coding]]
[[Category:ImpVis Template]]

Basic Component Tutorial

2022-07-13T09:21:44Z

SarmpaviUthayakumar: /* Importing your own components */

This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]].
[[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]

== Panes ==

[[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page].
Code to implement the Pane seen on the right.

‎<syntaxhighlight lang="python" line>
def quick_sort(arr):
less = []
pivot_list = []
more = []
if len(arr) <= 1:
return arr
else:
pass
‎</syntaxhighlight>

== Adding content to the mainstage ==

This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!

<syntaxhighlight lang="html" line>
<script>
export default {
props:{
mag: {
default: 0.005,

}
},
mounted(){
let vm = this;
let canvas = document.querySelector('canvas');
let parent = document.getElementById('parent');
let x = 50 + canvas.width/2;
let dx = 0;

canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

let c = canvas.getContext('2d');

function animate(){
requestAnimationFrame(animate);

c.clearRect(0,0,canvas.width, canvas.height);

c.beginPath();
c.moveTo(0,0);
c.lineTo(canvas.width, 0);
c.lineTo(canvas.width, canvas.height);
c.lineTo(0, canvas.height);
c.lineTo(0, 0);
c.strokeStyle = 'black';
c.stroke();

c.beginPath();
c.moveTo(x, canvas.height/2);
c.lineTo(canvas.width/2, canvas.height/2);
c.strokeStyle = 'blue';
c.lineWidth = 2;
c.stroke();

c.beginPath();
c.arc(x, canvas.height/2, 20, 0, Math.PI * 2);
c.fillStyle = 'orange';
c.fill();

x += dx;
dx += - mag * (x-canvas.width/2);
}
animate();

}

}
</script>
</syntaxhighlight>

The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.

Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.

== Toggleable hotspots ==
[[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]

Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.

‎<syntaxhighlight lang="html" line>
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
</template>

</iv-visualisation>
</div>
</template>

</syntaxhighlight>

An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.

== Fixed hotspots ==
Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below.

‎<syntaxhighlight lang="html" line>
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
<iv-fixed-hotspot position="topright" title="Fixed">
This will go inside the fixed hotspot, so will always appear on the screen.
P.S. You must specify a title and position
</iv-fixed-hotspot>
</template>

</iv-visualisation>
</div>
</template>

</syntaxhighlight>

[[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]
Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.

== Importing your own components ==
Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations.
[[File:Filename.png|thumb|Mainstage.vue file]]
In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.

For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:
‎<syntaxhighlight lang="html" line>
<template>

</template>

<script>
export default{

}
</script>

<style>

</style>

</syntaxhighlight>

[[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]

1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue

[[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]
2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).

A screenshot of the result of this code is pasted below.
[[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]
[[Category:Coding Guidance]]
[[Category:Tips Whilst Coding]]
[[Category:ImpVis Template]]

Basic Component Tutorial

2022-07-13T09:18:03Z

SarmpaviUthayakumar: /* Fixed hotspots */

This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]].
[[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]

== Panes ==

[[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page].
Code to implement the Pane seen on the right.

‎<syntaxhighlight lang="python" line>
def quick_sort(arr):
less = []
pivot_list = []
more = []
if len(arr) <= 1:
return arr
else:
pass
‎</syntaxhighlight>

== Adding content to the mainstage ==

This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!

<syntaxhighlight lang="html" line>
<script>
export default {
props:{
mag: {
default: 0.005,

}
},
mounted(){
let vm = this;
let canvas = document.querySelector('canvas');
let parent = document.getElementById('parent');
let x = 50 + canvas.width/2;
let dx = 0;

canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

let c = canvas.getContext('2d');

function animate(){
requestAnimationFrame(animate);

c.clearRect(0,0,canvas.width, canvas.height);

c.beginPath();
c.moveTo(0,0);
c.lineTo(canvas.width, 0);
c.lineTo(canvas.width, canvas.height);
c.lineTo(0, canvas.height);
c.lineTo(0, 0);
c.strokeStyle = 'black';
c.stroke();

c.beginPath();
c.moveTo(x, canvas.height/2);
c.lineTo(canvas.width/2, canvas.height/2);
c.strokeStyle = 'blue';
c.lineWidth = 2;
c.stroke();

c.beginPath();
c.arc(x, canvas.height/2, 20, 0, Math.PI * 2);
c.fillStyle = 'orange';
c.fill();

x += dx;
dx += - mag * (x-canvas.width/2);
}
animate();

}

}
</script>
</syntaxhighlight>

The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.

Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.

== Toggleable hotspots ==
[[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]

Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.

‎<syntaxhighlight lang="html" line>
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
</template>

</iv-visualisation>
</div>
</template>

</syntaxhighlight>

An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.

== Fixed hotspots ==
Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below.

‎<syntaxhighlight lang="html" line>
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
<iv-fixed-hotspot position="topright" title="Fixed">
This will go inside the fixed hotspot, so will always appear on the screen.
P.S. You must specify a title and position
</iv-fixed-hotspot>
</template>

</iv-visualisation>
</div>
</template>

</syntaxhighlight>

[[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]
Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.

== Importing your own components ==
Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations.
[[File:Filename.png|thumb|Mainstage.vue file]]
In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.

For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:
[[File:Mainstage code.png|center|thumb|Mainstage code.]]
[[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]

1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue

[[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]
2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).

A screenshot of the result of this code is pasted below.
[[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]
[[Category:Coding Guidance]]
[[Category:Tips Whilst Coding]]
[[Category:ImpVis Template]]

Basic Component Tutorial

2022-07-13T09:13:08Z

SarmpaviUthayakumar: /* Toggleable hotspots */

This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]].
[[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]

== Panes ==

[[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page].
Code to implement the Pane seen on the right.

‎<syntaxhighlight lang="python" line>
def quick_sort(arr):
less = []
pivot_list = []
more = []
if len(arr) <= 1:
return arr
else:
pass
‎</syntaxhighlight>

== Adding content to the mainstage ==

This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!

<syntaxhighlight lang="html" line>
<script>
export default {
props:{
mag: {
default: 0.005,

}
},
mounted(){
let vm = this;
let canvas = document.querySelector('canvas');
let parent = document.getElementById('parent');
let x = 50 + canvas.width/2;
let dx = 0;

canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

let c = canvas.getContext('2d');

function animate(){
requestAnimationFrame(animate);

c.clearRect(0,0,canvas.width, canvas.height);

c.beginPath();
c.moveTo(0,0);
c.lineTo(canvas.width, 0);
c.lineTo(canvas.width, canvas.height);
c.lineTo(0, canvas.height);
c.lineTo(0, 0);
c.strokeStyle = 'black';
c.stroke();

c.beginPath();
c.moveTo(x, canvas.height/2);
c.lineTo(canvas.width/2, canvas.height/2);
c.strokeStyle = 'blue';
c.lineWidth = 2;
c.stroke();

c.beginPath();
c.arc(x, canvas.height/2, 20, 0, Math.PI * 2);
c.fillStyle = 'orange';
c.fill();

x += dx;
dx += - mag * (x-canvas.width/2);
}
animate();

}

}
</script>
</syntaxhighlight>

The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.

Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.

== Toggleable hotspots ==
[[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]

Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.

‎<syntaxhighlight lang="html" line>
<template>
<div>
<iv-title-bar>This is my title</iv-title-bar>
<iv-visualisation>
<template #hotspots>
<iv-pane position="left">
Hi! This is a pane
</iv-pane>
<iv-toggle-hotspot position="bottom" title="Button Title">
This will go inside the pop-out section
</iv-toggle-hotspot>
</template>

</iv-visualisation>
</div>
</template>

</syntaxhighlight>

An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.

== Fixed hotspots ==
Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below.

[[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]
[[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]
Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.

== Importing your own components ==
Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations.
[[File:Filename.png|thumb|Mainstage.vue file]]
In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.

For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:
[[File:Mainstage code.png|center|thumb|Mainstage code.]]
[[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]

1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue

[[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]
2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).

A screenshot of the result of this code is pasted below.
[[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]
[[Category:Coding Guidance]]
[[Category:Tips Whilst Coding]]
[[Category:ImpVis Template]]

Basic Component Tutorial

2022-07-13T09:03:53Z

SarmpaviUthayakumar: /* Adding content to the mainstage */

This article contains basic information on how to set up the Pane and Hotspot components in your visualisation code. For information on how to edit the components, see [[Editing ImpVis Components]]. The page assumes you have set up a new visualisation, as described [[Tutorial for setting up the coding environment#Creating a new visualisation|here]].
[[File:Pane screenshot.png|thumb|Screenshot of the pane being implemented.]]

== Panes ==

[[Pane|Panes]] are clickable and draggable environments to place text and images over a visualisation. The code seen below is what's needed to produce the pane seen to the right of this text; this can also be seen on the left-hand side of [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_27.html Pane tutorial page].
Code to implement the Pane seen on the right.

‎<syntaxhighlight lang="python" line>
def quick_sort(arr):
less = []
pivot_list = []
more = []
if len(arr) <= 1:
return arr
else:
pass
‎</syntaxhighlight>

== Adding content to the mainstage ==

This example implements a simple harmonic motion (SHM) graphic on the mainstage. Firstly, if you want to copy and paste this code, check out the SHM folder contained in the GitHub repository for this tutorial document at https://github.com/Imperial-visualizations/Tutorial. This document is intended to be useful seeing the logic of setting up such a visualisation, as opposed to providing the code to be changed. But please do spend some time messing around with it!

<syntaxhighlight lang="html" line>
<script>
export default {
props:{
mag: {
default: 0.005,

}
},
mounted(){
let vm = this;
let canvas = document.querySelector('canvas');
let parent = document.getElementById('parent');
let x = 50 + canvas.width/2;
let dx = 0;

canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

let c = canvas.getContext('2d');

function animate(){
requestAnimationFrame(animate);

c.clearRect(0,0,canvas.width, canvas.height);

c.beginPath();
c.moveTo(0,0);
c.lineTo(canvas.width, 0);
c.lineTo(canvas.width, canvas.height);
c.lineTo(0, canvas.height);
c.lineTo(0, 0);
c.strokeStyle = 'black';
c.stroke();

c.beginPath();
c.moveTo(x, canvas.height/2);
c.lineTo(canvas.width/2, canvas.height/2);
c.strokeStyle = 'blue';
c.lineWidth = 2;
c.stroke();

c.beginPath();
c.arc(x, canvas.height/2, 20, 0, Math.PI * 2);
c.fillStyle = 'orange';
c.fill();

x += dx;
dx += - mag * (x-canvas.width/2);
}
animate();

}

}
</script>
</syntaxhighlight>

The code to produce an object which performs SHM is pasted to the left of this text. This should sit in the MainStage.vue file, as we want to treat the SHM block as a component, which we can use multiple times anywhere. Specifically, the code makes a basic SHM vis using a prop for any variables I may want to control with sliders/buttons. When you run this code, you should see a ball conducting SHM on the screen.

Sliders which control the SHM motion can be be added, to see this in action, check out the App.vue file in the SHM vis, from there, you will be able to see how interaction with the MainStage component is brought about.

== Toggleable hotspots ==
[[File:Toggleable hotspot screenshot.png|thumb|600x600px|Screenshot of the implementation of the toggleable hotspot.]]

Hotspots overlay onto the page similarly to a Pane, but are smaller, and can be stuck on the corners or edges of a page. They can be used to house text or tools used to interact with a visualisation. The code pasted here demonstrates how to produce a ''toggleable'' hotspot, which is a hotspot that can be toggled in and out of the way of the visualisation.
[[File:Toggleable hotspot code.png|thumb|600x600px|Code written to produce the toggleable hotspot and Pane.]]

An interactive version of the toggleable hotspot is found on the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_28.html toggle hotspot] page of the ImpVis tutorial.

== Fixed hotspots ==
Hotspots can also be fixed in position so that they ''always'' appear onscreen, as opposed to being toggleable where they can be brought on and off. For example now, to add a fixed hotspot to the code on the previous page, we could write the code as seen below.

[[File:Fixed hotspot code.b3b4f880.png|left|thumb|300x300px|Fixed hotspot code]]
[[File:Fixed hotspot screenshot.png|thumb|Fixed hotspot screenshot]]
Notice how the hotspot overlays over the main content of the visualisation. We will later discuss how to use this feature effectively when designing the learning journey for the users of your visualisations. The screenshotted code would produce a fixed hotspot in the top right of the page. For this demonstration, I have displayed the hotspot in the bottom right for clarity. See the [https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_29.html tutorial page on fixed hotspots] to see this implemented online.

== Importing your own components ==
Say you wanted to create your own component that does its own thing, you can import this as a separate file and use it in your visualisations.
[[File:Filename.png|thumb|Mainstage.vue file]]
In order to use the file (which we will call MainStage.vue for now), you must export it. Everything you might want to use outside of the MainStage.vue file is written in the export default code block.

For example, we might want to create a canvas that we can display some interactive content in (check out the SHM visualisation, we'll go through some of that content here). To do this, we'd write the following pieces of code:
[[File:Mainstage code.png|center|thumb|Mainstage code.]]
[[File:Inserting mainstage to app.png|thumb|Inserting mainstage to app.vue]]

1.) Place the input from mainstage into the correct part of template (where you want it to go) in App.vue

[[File:Canvas box.a4967d50.png|thumb|Creating canvas box]]
2.) Insert the code that draws a box around the edges of the canvas drawing area on the screen (that's what we currently want to do, so we can see the canvas).

A screenshot of the result of this code is pasted below.
[[File:Canvas box display.7731b0f1.png|center|thumb|600x600px|Canvas box result displayed.]]
[[Category:Coding Guidance]]
[[Category:Tips Whilst Coding]]
[[Category:ImpVis Template]]

Bloch Sphere

2022-02-16T00:00:57Z

SarmpaviUthayakumar:

== Contributors ==

* ''Name and department of each person.''
*''Student or staff partner?''
* ''How is/was each person involved?''
* ''What rough dates did they contribute?''

== Aims & Learning Outcomes ==

* ''Explain the motivation for your visualisation.''
Being able to visualize quantum states and the effects of quantum gates on them gives the learner a visual and intuitive understanding of quantum logic gates (rather than just as mathematical equations) - this is important to then be able to build more complex algorithms and quantum circuits which are the fundamental building blocks of quantum computing
* ''Introduce the subject of your visualisation.''
'''Bloch sphere'''

# What is a qubit? Bit vs qubit - bits are the building blocks of classical computers (only 0s and 1s) whereas the building blocks of quantum computers are qubits (superpositions of the |0> and |1> quantum states)
# What is a Bloch sphere? A way of geometrically representing these quantum states as vectors of a 3d unit sphere, where |0> can be represented by the 0 vector and |1> can be represented by the 1 vector using bra-ket notation
# The general representation of these pure quantum states as α|0>+β|1>
# Pure vs mixed states

where α and β are complex numbers representing the probability amplitudes i.e. the probability of getting |0> is |α|^2.

* How can we represent this general form of the quantum state geometrically? - We need to introduce coordinate parameters such as φ and θ
** Rewrite the general quantum state form in terms of polar coordinates (using Euler's identity)
** Global phase - two quantum states which differ only by a factor of exp(i theta) are considered to be the same
** Normalization constraint (probabilities must sum to 1)
** To get: cos(θ) |0> + e^(iφ)sin(θ) |1>
** θ and φ restrictions means we get cos(θ/2) |0> + e^(iφ)sin(θ/2) |1>
** Pure vs mixed states (pure states on the surface, mixed states within sphere)

'''Quantum gates'''

* A way of manipulating qubits which is useful for creating algorithms/quantum circuits
* Pauli-X gate:
** Matrix representation
** Flipping the state -> corresponds to 180 degree rotation about the x axis on the Bloch sphere
* Likewise for Pauli-Y
* Likewise for Pauli-Z
* Hadamard
** Matrix representation
** 90 degree rotation around Y-axis followed by 180 degree around X axis

* ''Which module and year is it intended for and which setting (lecture or self study)?''

Useful for the Quantum Information course (PHYS97080)

Can also be used for self-study
*''List learning outcomes. E.g.: "After using this visualisation, students should be able to explain that..."''
After using this visualisation, students should be able to:

* Represent states of qubits (pure and mixed) and their dynamics on the Bloch sphere
* Understand the dynamics of single qubits by quantum gates (Pauli X, Pauli Y, Pauli Z and Hadamard)

== Design Overview ==

* ''Once the design is agreed, describe the final outcome, how it looks, how it functions etc.''
* ''Include graphics.''

== Design Justification ==

''Optionally describe any notable decisions made for the design, e.g.''

* ''Educational design: breaking down of concepts (scaffolding)''
* ''How were accessibility issues considered?''
* ''How was space used effectively?''
* ''How is the design intuitive?''
* ''Choice of interactive element(s) that fit in organically with the visualisation [inspiration of choice might be from lecture/in-class activity or other sources] - Sliders/Buttons/Cursor (hover/click).''
== Progress and Future Work ==

* ''Is the design finalised (i.e. agreed by all partners)?''
* ''If applicable, which pages have been uploaded to website?''
* ''Any ideas for future improvements.''

== Links ==
*Link to GitHub repository for code in development:
*Link to visualisation on ImpVis website (when uploaded):
*Link to Collection on ImpVis website (when created):
*Any other links to resources (Miro boards / notes pages / Google Docs etc):
[[Category:Getting Started]]

Bloch Sphere

2022-02-09T12:58:05Z

SarmpaviUthayakumar: Created page with "''This is a template which you can use to help get you started on a Wiki for a new visualisation project - it serves as a dynamic 'ReadMe' file of your project. The template..."

''This is a template which you can use to help get you started on a Wiki for a new visualisation project - it serves as a dynamic 'ReadMe' file of your project. The template is just intended as a guide and you may modify the structure to suit your project (all template instructions are in italics and do not need to be saved in your own project page).''

'''''Note: if you are taking part in the I-Explore module, the [[Wiki Submission Template|submission template]] will be better suited to your needs.'''''

''When a new project is started, the 'Contributors' and 'Aims & Learning Outcomes' sections need to be filled out. Aim to include the rest of the information by the time the design is finalised. The page can be updated whenever the visualisation is updated - ensure to credit all contributors!''

''To create your own project page from this template, do the following:''

# ''In a separate browser window / tab, create a new project page with the same title as your project. Ensure to assign your page to the category 'Project pages'. Read '''[[Making Wiki Pages]]' ''for detailed instructions of how to do this.''
# ''Come back to this template and press 'Edit' at the top of the page.''
#''Select all the text on this page (not the title) and copy it.''
#''Click 'Read' at the top of this page (choose 'Discard edits' in the pop up window to avoid saving any accidental edits).''
#''Go to your browser window with your new project page and paste the text you copied.''
#''Make any edits you want on your own project page (e.g. entering your name as a contributor) and press the blue button 'Save page...' at the top right of your page.''

== Contributors ==

* ''Name and department of each person.''
*''Student or staff partner?''
* ''How is/was each person involved?''
* ''What rough dates did they contribute?''

== Aims & Learning Outcomes ==

* ''Explain the motivation for your visualisation.''

* ''Introduce the subject of your visualisation.''
*''Which module and year is it intended for and which setting (lecture or self study)?''
*''List learning outcomes. E.g.: "After using this visualisation, students should be able to explain that..."''

== Design Overview ==

* ''Once the design is agreed, describe the final outcome, how it looks, how it functions etc.''
* ''Include graphics.''

== Design Justification ==

''Optionally describe any notable decisions made for the design, e.g.''

* ''Educational design: breaking down of concepts (scaffolding)''
* ''How were accessibility issues considered?''
* ''How was space used effectively?''
* ''How is the design intuitive?''
* ''Choice of interactive element(s) that fit in organically with the visualisation [inspiration of choice might be from lecture/in-class activity or other sources] - Sliders/Buttons/Cursor (hover/click).''
== Progress and Future Work ==

* ''Is the design finalised (i.e. agreed by all partners)?''
* ''If applicable, which pages have been uploaded to website?''
* ''Any ideas for future improvements.''

== Links ==
*Link to GitHub repository for code in development:
*Link to visualisation on ImpVis website (when uploaded):
*Link to Collection on ImpVis website (when created):
*Any other links to resources (Miro boards / notes pages / Google Docs etc):
[[Category:Getting Started]]