https://wiki.impvis.co.uk/api.php?action=feedcontributions&feedformat=atom&user=Admin 2026-05-02T10:56:28Z User contributions MediaWiki 1.36.0 https://wiki.impvis.co.uk/index.php?title=Hover_Text&diff=1347 2022-03-09T19:26:28Z

<p>Admin: </p> <hr /> <div>[[File:HoverText(noHover).png|thumb|The iv-hover-text component when not being hovered over.]]<br /> [[File:HoverText(Hover).png|thumb|The iv-hover-text component revealing a secret message when being hovered over.]]<br /> The hover text component is designed to reveal text when hovered over with the mouse cursor. <br /> ==Technical information== <br /> The &lt;code&gt;iv-hover-text&lt;/code&gt; is for general usage to create a hidden text box which appears when some other text is hovered over. The hoverElement prop may also be added using the slot.<br /> <br /> ===Props===<br /> <br /> ======hoverElement======<br /> Type: String<br /> <br /> Default: &quot;Hover over me&quot;<br /> <br /> Description: The text to be displayed when the mouse is not hovering over the component.<br /> <br /> ====== defaultText ======<br /> Type: String<br /> <br /> Default: &quot;This is a secret message.&quot;<br /> <br /> Description: The text to be displayed when the mouse is hovering over the component.<br /> <br /> ====== clickInsteadOfHover ======<br /> Type: Boolean<br /> <br /> Default: false<br /> <br /> Description: If set to true, hidden text will appear when clicking on the component instead of hovering.<br /> <br /> ===Events===<br /> None.&lt;div class=&quot;res-img&quot;&gt;&lt;/div&gt;<br /> <br /> ==Design Choices==<br /> The blue is chosen to fit in with the general ImpVis blue.<br /> <br /> [[Category:ImpVis_Components]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Tutorial_for_setting_up_the_coding_environment&diff=1346 2022-03-09T19:24:26Z

<p>Admin: </p> <hr /> <div>This page is a brief tutorial on how to set up your coding environment and get started on your first visualisation. Make sure you have read about the [[Programming languages|coding languages]] we use. This page assumes knowledge of basic HTML and JavaScript.<br /> <br /> == Setting up the coding environment ==<br /> <br /> === Visual Studio Code ===<br /> [[File:Vscode welcome.c2acab37.png|right|VSCode welcome]]<br /> Download: Visual Studio Code (VSCode) is the integrated development environment that we recommend. Still, you are free to use any code editor that supports JS and HTML. To download VSCode, please visit https://code.visualstudio.com/download. After installing and opening it, you should find this as your welcome page (right).<br /> <br /> <br /> <br /> '''Creating a basic HTML and opening a folder in VSCode:''' On the top left, click on File &gt; New File, and you should get an empty file called Untitled-1. Include the code in the following example and save it as ''some_name.html''.<br /> <br /> [[File:Hello world.767fb21f.png|left|VSCode hello world.]]<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Now, open the file in a web browser (e.g., Google Chrome), you should see the the stuff on the image below:<br /> [[File:Hello world display.9be7d830.png|left|Hello world display]]<br /> <br /> <br /> <br /> [[File:Vscode folders.2b4948ba.png|thumb|VSCode folders]]<br /> <br /> <br /> <br /> If you have created a folder for your HTML, you may want to open the VS Code folder. You can do it by dragging the folder into the Explorer, which is shown in the screenshot on the right.<br /> <br /> ==== Using the live server feature in VSCode ====<br /> <br /> It is often convenient to see changes on your website while editing. For that purpose, we make use of the live server. Click on the extension button, search for Live Server, and install it.<br /> [[File:Live server.db9b223c.png|center|thumb|600x600px|Live server]]<br /> Once you have done that, go back to the HTML file you have created and click on the ''‘Go Live’'' button on the bottom right.<br /> [[File:Hello world.767fb21f.png|center|thumb|600x600px|Hello world going live]]<br /> [[File:Hello world display.9be7d830.png|thumb|Hello world displayed on live server]]<br /> Your HTML file will be opened in your default browser now. You can put the browser and VSCode side by side and see the changes being done live (after saving your changes). You may utilise the autosave function (in the File dropdown) if you like.<br /> <br /> To stop the Live Server, click on the ‘Port: 5500’ cancel button (at the bottom right).<br /> <br /> == Creating a new visualisation ==<br /> <br /> === Node.js and npm ===<br /> The best way to start creating visualisations is to use the ''create-impvistool'', which automatically sets you up with a project folder with a working template and git repository already set up! The ''create-impvis'' tool can be installed once you have [https://nodejs.org/en/ Node.js] installed by using the [https://www.npmjs.com/ Node Package Manager] (npm). To check that you have both of these programs installed correctly on your computer, you will need to open a terminal window (called 'Command Prompt' in Windows) and run:<br /> <br /> &lt;center&gt;&lt;code&gt;node -v &amp;&amp; npm -v&lt;/code&gt;&lt;/center&gt;<br /> <br /> If Node.js and npm are correctly installed on your system, you should see two version numbers printed (the exact number doesn't matter). If you haven't yet got them installed, follow [https://docs.npmjs.com/downloading-and-installing-node-js-and-npm these guidelines] to download and install Node.js and npm. Only proceed with your visualisation once you have the packages properly installed.<br /> <br /> With Node and npm set up on your machine, you can install our ImpVis Command-Line Interface (CLI) by running globally in your terminal / Command Prompt: <br /> <br /> &lt;center&gt;&lt;code&gt;npm -g install @impvis/cli&lt;/code&gt; &lt;/center&gt;<br /> <br /> and wait for the CLI to be downloaded and installed on your machine.<br /> <br /> === Using the ImpVis template to start a new visualisation ===<br /> Creating visualisations with the Vue CLI is a breeze! To create a visualisation, open a new terminal window in the directory you wish to create the visualisation folder. Then run: &lt;center&gt;&lt;code&gt;impvis create ''name''&lt;/code&gt;&lt;/center&gt;Where ''name'' is the name of your visualisation (decide that here). You will then be guided through step by step prompts to allow you to configure the base visualisation template to suit your needs. At present, the CLI has four template options available for users to choose from:<br /> <br /> # [[ImpVis template description|Current template]] using Node.js<br /> # Current template using a &lt;script&gt; import<br /> # Basic legacy template from Summer 2019<br /> # Advanced legacy template from Summer 2019<br /> <br /> If you're new to ImpVis, we recommend the first option.<br /> <br /> === '''Running Your Vis''' ===<br /> When you want to run your visualisation (i.e. use it in your browser), navigate to the folder where you created it in command prompt or terminal and run the command:<br /> <br /> &lt;center&gt;&lt;code&gt;npm run serve&lt;/code&gt;&lt;/center&gt;The project will then build and you should be able to open it by navigating to one of the addresses shown in your browser. Any changes to the code will now be shown in real time. To end the server press &quot;control + C&quot; in the command prompt. <br /> <br /> === Common ESLint error ===<br /> If you get an ESLint error at this stage, saying something like &quot;parsing error: require() of ES Module ....&quot; then try downgrading your version of ESLint by running the following command in your project directory:<br /> &lt;center&gt;&lt;code&gt;npm install eslint@7.29.0&lt;/code&gt;&lt;/center&gt;<br /> <br /> == The 2020 template using Node.js == <br /> To read a description of the current template, view [[ImpVis template description]][[Vue Components|.]] For a brief tutorial on the basic components of the components used in the current template, view [[Basic Component Tutorial|Basic Component Tutorial]]. For a list of all components included with the template, view [[Vue Components]].<br /> <br /> The 2020 template using Node.js is the '''recommended''' template for all new projects from now on as it comes with a pre-configured node.js instance, which makes running automated tasks, linting your code for errors, and optimising your code for all browsers a breeze. It also includes the ImpVis Vue Components library as standard, already set up and ready to go! Using this template, you will create visualisations using the Vue Single File Component files ''(.vue)'', which allows you to divide your visualisation up into '''sub-components''', each containing all the HTML, JS, and CSS needed for the component to function correctly. For a refresher on how components work, you should check out the ''Introduction to Components'' video on the ImpVis Youtube channel.<br /> <br /> === '''Installing additional packages''' ===<br /> Using this template, it is easy to install additional modules after the fact simply by running: <br /> <br /> &lt;center&gt;&lt;code&gt;npm install ''my-package-name''&lt;/code&gt;&lt;/center&gt;where ''my-package-name'' is the name of the package containing the modules you want to install. This automatically downloads and installs the relevant package from the npm repository. You can then use [https://hackernoon.com/import-export-default-require-commandjs-javascript-nodejs-es6-vs-cheatsheet-different-tutorial-example-5a321738b50f ES6 import statements] to access the features of the library.<br /> <br /> == The 2020 template using ''script'' tag == <br /> This template is a different option for people new to or just getting started with Vue.js who do not want to install Node.js. It is easier to get started with, as it removes some of the additional complexity associated with a Node.js backend. However, it doesn't offer the comprehensive functionality that our full template does. In this template, you work entirely within a single .html file with Vue and the ImpVis library included with standard script tags located in the header.<br /> <br /> === '''Installing additional packages''' ===<br /> Installing additional packages for this template is not as convenient as using the Node template however is still relatively simple. The ''[https://unpkg.com/ UNPKG]'' repository can quickly retrieve a valid URL for any library located on npm. Additional dependencies can be added to the head section of the HTML file by writing: <br /> <br /> &lt;center&gt;&lt;code&gt;&lt; script defer src=&quot;&lt;nowiki&gt;https://unpkg.com/&lt;/nowiki&gt;&lt;my-package-name&gt;/@version-number&lt;/code&gt;&lt;/center&gt;<br /> <br /> You may need to read the library documentation you are importing to see if there are any additional files such as CSS files that also need to be imported.<br /> <br /> == Legacy templates (Basic &amp; Advanced) ==<br /> These legacy templates are not recommended for most people who want to create visualisations. They do not contain the modern Vue component library created by the ImpVis team to help develop visualisations. These templates are, however, useful for those who wish to get a simple, no batteries included environment to play around with or for those who need a starting spot to upgrade old visualisations located on previous versions of the ImpVis website. This template comes with the Math.js library preloaded for this reason, as it is a popular library with many of the old visualisations.<br /> <br /> === '''Installing additional packages''' ===<br /> Additional dependencies can be installed using the same manner as described above for &lt;script&gt; templates.<br /> [[Category:Setting Up]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Tutorial_for_setting_up_the_coding_environment&diff=1345 2022-03-09T19:24:02Z

<p>Admin: </p> <hr /> <div>This page is a brief tutorial on how to set up your coding environment and get started on your first visualisation. Make sure you have read about the [[Programming languages|coding languages]] we use. This page assumes knowledge of basic HTML and JavaScript.<br /> <br /> == Setting up the coding environment ==<br /> <br /> === Visual Studio Code ===<br /> [[File:Vscode welcome.c2acab37.png|right|VSCode welcome]]<br /> Download: Visual Studio Code (VSCode) is the integrated development environment that we recommend. Still, you are free to use any code editor that supports JS and HTML. To download VSCode, please visit https://code.visualstudio.com/download. After installing and opening it, you should find this as your welcome page (right).<br /> <br /> <br /> <br /> '''Creating a basic HTML and opening a folder in VSCode:''' On the top left, click on File &gt; New File, and you should get an empty file called Untitled-1. Include the code in the following example and save it as ''some_name.html''.<br /> <br /> [[File:Hello world.767fb21f.png|left|VSCode hello world.]]<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Now, open the file in a web browser (e.g., Google Chrome), you should see the the stuff on the image below:<br /> [[File:Hello world display.9be7d830.png|left|Hello world display]]<br /> <br /> <br /> <br /> [[File:Vscode folders.2b4948ba.png|thumb|VSCode folders]]<br /> <br /> <br /> <br /> If you have created a folder for your HTML, you may want to open the VS Code folder. You can do it by dragging the folder into the Explorer, which is shown in the screenshot on the right.<br /> <br /> ==== Using the live server feature in VSCode ====<br /> <br /> It is often convenient to see changes on your website while editing. For that purpose, we make use of the live server. Click on the extension button, search for Live Server, and install it.<br /> [[File:Live server.db9b223c.png|center|thumb|600x600px|Live server]]<br /> Once you have done that, go back to the HTML file you have created and click on the ''‘Go Live’'' button on the bottom right.<br /> [[File:Hello world.767fb21f.png|center|thumb|600x600px|Hello world going live]]<br /> [[File:Hello world display.9be7d830.png|thumb|Hello world displayed on live server]]<br /> Your HTML file will be opened in your default browser now. You can put the browser and VSCode side by side and see the changes being done live (after saving your changes). You may utilise the autosave function (in the File dropdown) if you like.<br /> <br /> To stop the Live Server, click on the ‘Port: 5500’ cancel button (at the bottom right).<br /> <br /> == Creating a new visualisation ==<br /> <br /> === Node.js and npm ===<br /> The best way to start creating visualisations is to use the ''create-impvistool'', which automatically sets you up with a project folder with a working template and git repository already set up! The ''create-impvis'' tool can be installed once you have [https://nodejs.org/en/ Node.js] installed by using the [https://www.npmjs.com/ Node Package Manager] (npm). To check that you have both of these programs installed correctly on your computer, you will need to open a terminal window (called 'Command Prompt' in Windows) and run:<br /> <br /> &lt;center&gt;&lt;code&gt;node -v &amp;&amp; npm -v&lt;/code&gt;&lt;/center&gt;<br /> <br /> If Node.js and npm are correctly installed on your system, you should see two version numbers printed (the exact number doesn't matter). If you haven't yet got them installed, follow [https://docs.npmjs.com/downloading-and-installing-node-js-and-npm these guidelines] to download and install Node.js and npm. Only proceed with your visualisation once you have the packages properly installed.<br /> <br /> With Node and npm set up on your machine, you can install our ImpVis Command-Line Interface (CLI) by running globally in your terminal / Command Prompt: <br /> <br /> &lt;center&gt;&lt;code&gt;npm -g install @impvis/cli&lt;/code&gt; &lt;/center&gt;<br /> <br /> and wait for the CLI to be downloaded and installed on your machine.<br /> <br /> === Using the ImpVis template to start a new visualisation ===<br /> Creating visualisations with the Vue CLI is a breeze! To create a visualisation, open a new terminal window in the directory you wish to create the visualisation folder. Then run: &lt;center&gt;&lt;code&gt;impvis create ''name''&lt;/code&gt;&lt;/center&gt;Where ''name'' is the name of your visualisation (decide that here). You will then be guided through step by step prompts to allow you to configure the base visualisation template to suit your needs. At present, the CLI has four template options available for users to choose from:<br /> <br /> # [[ImpVis template description|Current template]] using Node.js<br /> # Current template using a &lt;script&gt; import<br /> # Basic legacy template from Summer 2019<br /> # Advanced legacy template from Summer 2019<br /> <br /> If you're new to ImpVis, we recommend the first option.<br /> <br /> === '''Running Your Vis''' ===<br /> When you want to run your visualisation (i.e. use it in your browser), navigate to the folder where you created it in command prompt or terminal and run the command:<br /> <br /> &lt;center&gt;&lt;code&gt;npm run serve&lt;/code&gt;&lt;/center&gt;The project will then build and you should be able to open it by navigating to one of the addresses shown in your browser. Any changes to the code will now be shown in real time. To end the server press &quot;control + C&quot; in the command prompt. <br /> <br /> == Common ESLint error ==<br /> If you get an ESLint error at this stage, saying something like &quot;parsing error: require() of ES Module ....&quot; then try downgrading your version of ESLint by running the following command in your project directory:<br /> &lt;center&gt;&lt;code&gt;npm install eslint@7.29.0&lt;/code&gt;&lt;/center&gt;<br /> <br /> == The 2020 template using Node.js == <br /> To read a description of the current template, view [[ImpVis template description]][[Vue Components|.]] For a brief tutorial on the basic components of the components used in the current template, view [[Basic Component Tutorial|Basic Component Tutorial]]. For a list of all components included with the template, view [[Vue Components]].<br /> <br /> The 2020 template using Node.js is the '''recommended''' template for all new projects from now on as it comes with a pre-configured node.js instance, which makes running automated tasks, linting your code for errors, and optimising your code for all browsers a breeze. It also includes the ImpVis Vue Components library as standard, already set up and ready to go! Using this template, you will create visualisations using the Vue Single File Component files ''(.vue)'', which allows you to divide your visualisation up into '''sub-components''', each containing all the HTML, JS, and CSS needed for the component to function correctly. For a refresher on how components work, you should check out the ''Introduction to Components'' video on the ImpVis Youtube channel.<br /> <br /> === '''Installing additional packages''' ===<br /> Using this template, it is easy to install additional modules after the fact simply by running: <br /> <br /> &lt;center&gt;&lt;code&gt;npm install ''my-package-name''&lt;/code&gt;&lt;/center&gt;where ''my-package-name'' is the name of the package containing the modules you want to install. This automatically downloads and installs the relevant package from the npm repository. You can then use [https://hackernoon.com/import-export-default-require-commandjs-javascript-nodejs-es6-vs-cheatsheet-different-tutorial-example-5a321738b50f ES6 import statements] to access the features of the library.<br /> <br /> == The 2020 template using ''script'' tag == <br /> This template is a different option for people new to or just getting started with Vue.js who do not want to install Node.js. It is easier to get started with, as it removes some of the additional complexity associated with a Node.js backend. However, it doesn't offer the comprehensive functionality that our full template does. In this template, you work entirely within a single .html file with Vue and the ImpVis library included with standard script tags located in the header.<br /> <br /> === '''Installing additional packages''' ===<br /> Installing additional packages for this template is not as convenient as using the Node template however is still relatively simple. The ''[https://unpkg.com/ UNPKG]'' repository can quickly retrieve a valid URL for any library located on npm. Additional dependencies can be added to the head section of the HTML file by writing: <br /> <br /> &lt;center&gt;&lt;code&gt;&lt; script defer src=&quot;&lt;nowiki&gt;https://unpkg.com/&lt;/nowiki&gt;&lt;my-package-name&gt;/@version-number&lt;/code&gt;&lt;/center&gt;<br /> <br /> You may need to read the library documentation you are importing to see if there are any additional files such as CSS files that also need to be imported.<br /> <br /> == Legacy templates (Basic &amp; Advanced) ==<br /> These legacy templates are not recommended for most people who want to create visualisations. They do not contain the modern Vue component library created by the ImpVis team to help develop visualisations. These templates are, however, useful for those who wish to get a simple, no batteries included environment to play around with or for those who need a starting spot to upgrade old visualisations located on previous versions of the ImpVis website. This template comes with the Math.js library preloaded for this reason, as it is a popular library with many of the old visualisations.<br /> <br /> === '''Installing additional packages''' ===<br /> Additional dependencies can be installed using the same manner as described above for &lt;script&gt; templates.<br /> [[Category:Setting Up]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=ImpVis_wiki_status_quo_summer_2021&diff=592 2021-09-17T13:08:11Z

<p>Admin: /* Permissions */</p> <hr /> <div>On this page, everything with regards to the current (July 2021) state of the wiki will be stated; this includes things that have been accomplished, ideas that have been discussed but not yet implemented, and any other miscellaneous information regarding the wiki.<br /> <br /> == Implementation == <br /> The ImpVis wiki is implemented through MediaWiki, which is both free and open-source. This decision was made after considering using the already existing organisation structure on the ImpVis website, as well as other free and paid Wiki services. Some of the later discussions regarding the choice of MediaWiki being made can be found at https://docs.google.com/document/d/1Ly28aOzML8BRNvKjWHGtVKnsYemzcqmx2wLbCt7bdJc.<br /> <br /> <br /> == Structure == <br /> <br /> Currently the Wiki is divided into two main &quot;departments&quot; through the main page - those under &quot;Wiki Divisions&quot; on the main page, and those that are not. Everything on the wiki should be able to be found through following relevant links from the main page. The Wiki Divisions sub-title is the intended location for where everything will be housed within the Wiki eventually. Currently, Wiki Divisions is split into the three titles &quot;Blackboard&quot;, &quot;Visualisations&quot;, and &quot;Knowledge&quot;.<br /> <br /> The Blackboard section is intended to house all of the information that people taking the module need to see, and is intended to act as a homebase link for them to be able to refer to whenever looking for information with regards to the course. The Visualisation section is intended to be tied to visualisations that are visible on the website (whether this means only visualisations that are complete, or both that as well as designs submitted from the module is up for decision). As of the time of writing, no visualisations have been posted or tagged to this section yet. &quot;Knowledge&quot; is intended to hold all knowledge that people have found useful in the creation process of a visualisation. This can be at any stage from design, right through to project completion. For example, &quot;How to contact an academic professional&quot;, &quot;Things to consider when using discrete sliders&quot;, or &quot;How this awkward to use function works&quot; would all be found under the knowledge division of the wiki. <br /> <br /> The &quot;Impvis website&quot; wiki page has been linked through the Blackboard division of the wiki (links to [[ImpVis Website]]). Relevant links that exist for the page already posted on, but content not yet filled out (needs writing).<br /> <br /> == Tutorial ==<br /> <br /> The 2020 tutorial document has had all of its content worked into the wiki, with some minor modifications and additions. These pages can be found spread between the Blackboard and Knowledge divisions of the wiki. It must be noted that a lot of content has been copy and pasted in from the tutorial - a lot of improvements in writing to fit the context of being in the wiki need now to be made. In the tutorial there were some individual pages that had content missing/that needed expanding on anyway. The only page of real concern that we might not be able to write to though is the modal content written in red on this page: https://wiki.impvis.co.uk/index.php?title=Components_and_Vue_additional_comments. Outside of this, all content I've seen that's missing shouldn't require particular expertise to fill out (but they still do need filling out!). There is no &quot;new&quot; tutorial document as such; the pages are now just placed in the relevant places on the wiki (and shouldn't be difficult to find).<br /> <br /> == Permissions == <br /> Robert Jones currently has the highest permission privileges out of students remaining into Autumn 2021. Cianne Park has edit permissions, as do some students who were part of the &quot;tech team&quot; in summer 2021. Not all of these students have admin privileges however. <br /> <br /> There are 3 main user groups: <br /> <br /> * Autoconfirmed users <br /> * Writers <br /> * Administrators <br /> <br /> Autoconfirmed users have permissions to read all pages, but edit none. (All new users are members of this group) <br /> <br /> Writers have permissions to read all pages and edit all unprotected pages. (New pages are unprotected by default) <br /> <br /> Administrators have permissions to read and edit all pages. <br /> <br /> It is advised to make structural pages protected so that writers can not edit them. <br /> <br /> It is expected that students on the iExplore module will be given writer permissions. <br /> <br /> === Permissions Update (September 17) ===<br /> Due to an influx of strange accounts being registered with the ImpVis wiki, we have decided to make the wiki read only (excluding the main page) unless users are specifically given writer access. <br /> <br /> It also may be useful to have certain sections of the wiki only visible to certain users, however this will probably require using the access control mediawiki extension, which has poor documentation. <br /> == Unfinished == <br /> Discussions regarding setting up the permission structure (hierarchy of bureaucrats) to easily allow staff/students taking part in the module have been had, but not cleared up (no decisions were made). <br /> <br /> No visualisations have yet been tagged to the Visualisations division of the wiki. I suggest the first one that this could be done/trialed with would be Shahbanno's demo visualisation which shows off the components. <br /> <br /> Missing content: Welcome to ImpVis (in the context of the module, not the summer team or code and crisps).<br /> <br /> General tidyup of most wiki pages is needed at this point; <br /> <br /> Images on https://wiki.impvis.co.uk/index.php?title=Getting_connected_on_Github not sorted yet; need a conversation about the copyright for uploading screenshots of npm (might not be an issue at all). The images of concern are from the page https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_10.html.<br /> <br /> Need to set up categories so that https://wiki.impvis.co.uk/index.php?title=Special%3AAllPages works properly.<br /> <br /> [[Category:Summer 2021]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Example_Submissions&diff=591 2021-09-17T13:01:51Z

<p>Admin: Created page with &quot;== Example Wiki Submission == An example wiki submission for the solid angles visualisation is shown here. The template which your wiki submission shou...&quot;</p> <hr /> <div>== Example Wiki Submission ==<br /> An example wiki submission for the solid angles visualisation is shown [[Solid Angles Design|here]]. The template which your wiki submission should follow is shown [[Wiki Submission Template|here]]. Copy and paste into wherever you can all edit at once (e.g. Google Docs) then get one person to create a new wiki page when your submission is complete.<br /> <br /> == Example Design Project ==<br /> [https://miro.com/app/board/o9J_lw6ZKws=/ This Miro board] includes an example tasks tree, skills matrix, assessment criteria, personal learning goals and poster.<br /> <br /> == Example Portfolio ==</div>

Admin https://wiki.impvis.co.uk/index.php?title=Main_Page&diff=590 2021-09-17T12:55:46Z

<p>Admin: </p> <hr /> <div>== Navigate Categories ==<br /> <br /> &lt;categorytree mode=&quot;pages&quot;&gt;Everything&lt;/categorytree&gt;<br /> <br /> == iExplore Module ==<br /> <br /> * [[Module Timetable]]<br /> *[[Example Submissions]]<br /> *[[Wiki Submission Template]]<br /> *[[Tasks Tree]]<br /> *[[Embedding Miro Boards]]<br /> <br /> == Wiki Divisions ==<br /> <br /> * [[Blackboard]]<br /> * [[Visualisations]]<br /> * [[Knowledge]]<br /> <br /> == Summer 2021==<br /> *[[Tech Team Final Documentation]]<br /> *[[Module Team Design Sprint]]<br /> *[[ImpVis wiki status quo summer 2021]]<br /> *[[ImpVis Website]]<br /> *[[Module status quo July 2021]]<br /> <br /> ==Getting started==<br /> Consult the [[mediawikiwiki:Special:MyLanguage/Help:Contents|User's Guide]] for information on using the wiki software.<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:Configuration_settings|Configuration settings list]]<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:FAQ|MediaWiki FAQ]]<br /> *[https://lists.wikimedia.org/mailman/listinfo/mediawiki-announce MediaWiki release mailing list]<br /> *[[mediawikiwiki:Special:MyLanguage/Localisation#Translation_resources|Localise MediaWiki for your language]]<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:Combating_spam|Learn how to combat spam on your wiki]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Main_Page&diff=589 2021-09-17T12:55:14Z

<p>Admin: </p> <hr /> <div>== Navigate Categories ==<br /> <br /> &lt;categorytree mode=&quot;pages&quot;&gt;Everything&lt;/categorytree&gt;<br /> <br /> == iExplore Module ==<br /> <br /> * [[Module Timetable]]<br /> *[[Example Submissions]]<br /> *[[Wiki Submission Template]]<br /> *[[Tasks Tree]]<br /> *[[Assessment Criteria]]<br /> *[[Embedding Miro Boards]]<br /> <br /> == Wiki Divisions ==<br /> <br /> * [[Blackboard]]<br /> * [[Visualisations]]<br /> * [[Knowledge]]<br /> <br /> == Summer 2021==<br /> *[[Tech Team Final Documentation]]<br /> *[[Module Team Design Sprint]]<br /> *[[ImpVis wiki status quo summer 2021]]<br /> *[[ImpVis Website]]<br /> *[[Module status quo July 2021]]<br /> <br /> ==Getting started==<br /> Consult the [[mediawikiwiki:Special:MyLanguage/Help:Contents|User's Guide]] for information on using the wiki software.<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:Configuration_settings|Configuration settings list]]<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:FAQ|MediaWiki FAQ]]<br /> *[https://lists.wikimedia.org/mailman/listinfo/mediawiki-announce MediaWiki release mailing list]<br /> *[[mediawikiwiki:Special:MyLanguage/Localisation#Translation_resources|Localise MediaWiki for your language]]<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:Combating_spam|Learn how to combat spam on your wiki]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=588 2021-09-17T12:34:24Z

<p>Admin: /* Progress &amp; Future Work */</p> <hr /> <div>[[Category:Visualisation Designs]]<br /> <br /> == Contributors ==<br /> <br /> * Cianne Park (student partner) 2021 Summer Team - BioEng<br /> *Zhenghe Xuan (student partner) 2021 Summer Team - Physics<br /> * Rishav Chatterjee (student partner) 2021 Summer Team - Computing<br /> * Joshua Cheng (student partner) 2021 Summer Team - MechEng<br /> * Robert Jones (student partner) 2021 Summer Team - Physics<br /> <br /> == Aims &amp; Objectives ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> This visualisation is designed for self study use in 2nd year Electromagnetism course in the Physics department.<br /> <br /> The intended learning objectives were for the basic concept:<br /> <br /> * Solid angle is a (dimensionless, scalar) measure of '''field of view''' that a given object covers as seen from a particular point, expressed in units of steradians.<br /> * Field of view depends on:<br /> ** the size of the object<br /> ** the distance of the object<br /> * It can be seen as the surface area of the projection of the object onto a sphere surrounding the observer, at distance r=1. This means:<br /> ** the entire sphere would have solid angle 4pi steradians (as surface area of a sphere is 4pi*r^2)<br /> ** any size object at any distance has solid angle A/r^2, where A is the surface area of the projection on a sphere at distance r of the object.<br /> <br /> And for the use in integration:<br /> <br /> * The infinitesimal definition of solid angle is inner product of dS and r, divided by r^2. Here dS is the infinitesimal surface area element of a surface and the inner product is needed to only take into account the projection of the surface area vector along r.<br /> * Integrating over solid angle rather than surface area is the same as the double integral over sin(theta) d(theta) d(phi), i.e. integrating over the surface area of a sphere with radius = 1.<br /> * Infinitesimal definition of dOmega shows that flux from a point source through any surface with the '''same''' solid angle will be the same (basis for Gauss' law).<br /> <br /> == Design Overview ==<br /> [[File:Solid Angles Page 1.png|thumb|The first page of the solid angles visualisation design.]]<br /> The first page has a circle showing the definition of an angle, which the students should be very familiar with. On the right hand side, is the three dimensional analogue with solid angles instead of a normal angle. The plot is 3D and made with plotly.js, users are able to pan, rotate and zoom to get a clear idea of what the picture is showing. The green lines in both plots represent the radii of the circle and sphere. As the arc length or area sliders are changed the plots will update to extend the arc length or shaded area in the respective plots. When the radii sliders are updated the radii of the sphere or circle will update in the plot above the slider only. The numbers in the equations will update as the sliders are changed.[[File:Solid Angles Page 2.png|left|thumb|The second page of the solid angles visualisation design.]]In the second page there are two plots which are intended to show the same scenario from different perspectives, as a result, adjusting any sliders will change both plots simultaneously. The plot on the left hand side is two dimensional and shows the view from the observer. The plot on the right hand side shows the three dimensional scenario, where the user can pan, resize and zoom to look around and get a full picture of what is going on. The position of the observer is shown as a person in the right hand side plot, along with their field of view which is shown as a semi-transparent cone. <br /> <br /> The third page shows static images to help improve understanding of how to apply the theory to questions. There is one more key equation to learn however no interactive diagrams are provided as they would not provide any benefit. Instead, the page has a toggle which would switch to display some example questions, along with buttons to show the solution. <br /> [[File:Solid Angles Page 3b.png|thumb|An example question on the third page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3a.png|center|thumb|The third page of the solid angles visualisation design.]]<br /> <br /> == Design Justification ==<br /> <br /> === Assessment criteria ===<br /> i) Explain the key concepts of the problem through clear and engaging visualisations designed with a target audience in mind, using analogies where appropriate<br /> <br /> ii) Create a simple and intuitive design with clear consideration of accessibility issues<br /> <br /> iii) Clear design progression with justifications for choices<br /> <br /> === Education Strand ===<br /> The 2D/3D comparison in the first page allows users to see that solid angles are just an extension of something they already know and boosts their confidence in their understanding. This use of analogy satisfies assessment criteria i). The equations for solid angle and angle are displayed and the values in these equations update dynamically with the plots, as the sliders are adjusted; this gives the students another perspective and helps clarify how solid angles work, addressing assessment criteria i).<br /> <br /> In the second page, the student’s intuition about solid angles is improved by showing how solid angles are related to the familiar concept of field of view. This again satisfies assessment criteria i) with the analogy to a familiar concept. Allowing the user to move the object in 3D space and see how the solid angle changes introduces the fact that solid angles are dependent on the dot product of the separation vector and the surface vector through an intuitive example, satisfying assessment criteria ii).<br /> <br /> Initially, we planned to add an additional section to page two where a flashlight was added and arbitrary shapes could be selected, however we decided that this would add too much complexity and potentially confuse the user so we removed this section. This progression of ideas towards a simplified design satisfies assessment criteria ii) and iii). We also moved from explicitly mentioning that 3D objects have a solid angle to simply using a 3D object in the visualisation and letting the students figure this out by playing around with it themselves since this will give them a more intuitive understanding; this satisfies assessment criteria ii) and iii). We decided to add a static diagram to page 2 which shows clearly how it is the projection of the object which gives the solid angle, as we thought that this effect may be too subtle to notice on the visualisation without prompting. This change towards a design with greater clarity satisfies assessment criteria i) and iii). <br /> <br /> The third page shows students how solid angles are relevant to integration and Gauss’s law should motivate how important solid angles are. The integration example also shows how solid angles can be reached using simple trigonometry which the students should be familiar with; this gives an introduction to solid angles from a different perspective, helping the students get a more well rounded understanding. This satisfies assessment criteria i). <br /> <br /> === Graphics Strand ===<br /> The design has used the Imperial Visualisation template due to its effective use of space along with appropriate positioning elements for the application. All of the interactive visualisations could be centred on the page as the main focus, with a clear information panel on the left to guide the user through the visualisation. This follows the Home Office Design recommendations for users with dyslexia, which could form a significant part of the target audience. Whilst there exist many other groups of users with various handicaps, catering to all of them would not be possible therefore efforts were focused on dyslexic users.<br /> <br /> For all diagrams where comparison was a key part in understanding, the graphics were displayed side by side horizontally. Whilst this limited the maximum size of the graphics, it allowed the user to more easily recognise similarities and differences; use of a toggle to switch between the images would potentially cause frustration when having to repeatedly change diagrams. The result was a more intuitive design in accordance with criteria ii).<br /> <br /> Colour coding the diagrams and sliders used would help to improve the user’s understanding, by improving comparison ability and highlighting key points of the images. On page one, the radius on both diagrams would have the same colour, whilst the arc length and surface area would also have their own colour. This highlights the similarity between the two concepts and aids the user in making this link. Similarly, the sliders corresponding to these variables also have the same respective colour; any use of the variable itself or its numerical value would also follow the same colour scheme as they are the key factors in the equation. <br /> <br /> Positioning of the elements on the main area of the visualisation required consideration of the intuitiveness of the design. The diagrams are placed in the most central position as they are the key focus, with their titles just above. The sliders and equation could have been placed in a toggled hotspot however as the focus of the page is to understand the key factors of solid angles, they are positioned directly below the diagrams. Equations relating the variables are situated below the sliders to simulate the natural flow of thought for the user, from the variables and their values to the equation and the result.<br /> <br /> Feedback noted the potential to improve the design by considering colourblind users when determining the colour scheme. [do research] Extensions for browsers exist which would automatically convert colours on a page to remove this issue. (&lt;nowiki&gt;https://addons.mozilla.org/en-GB/firefox/addon/axe-devtools/&lt;/nowiki&gt;).<br /> <br /> === Interactivity Strand ===<br /> Use of Sliders to adjust the parameters of the 2D and 3D figures [2D - arc length, radius; 3D - area, radius]. In page one the motivation behind using sliders apart from the ease of use was that it was best suited to assist the student to move on to the 3d figure once their intuition about the 2d structure was built (Familiarity would make the transition for the student simpler). In page 2, to adjust the x and z position in 2d and the object size in the 3d figure, sliders were implemented in the design keeping the user’s convenience the first priority.<br /> <br /> The camera angles on the 3d figures on page 1 and 2 can be adjusted using a trackpad or mouse which would help the student get a better understanding of solid angles after using the visualisation by aiding the development of intuition regarding the topic.<br /> <br /> Accessibility - The use of low contrast coloured sliders in a simple layout makes the visualisation accessible to a large audience. The parameters of the 2d and 3d figures can be adjusted using sliders that can be controlled via touch, mouse, trackpad as well as a keyboard which is another reason behind using sliders.<br /> <br /> == Progress &amp; Future Work ==<br /> A final design has been created for this visualisation, but coding has not started.<br /> <br /> Future work could include:<br /> <br /> * Adding an interactive visualisation for page 3.<br /> *Apply Zhenghe's feedback.<br /> *Make all diagrams in plotly.<br /> <br /> == Resources ==<br /> <br /> * Miro board showing design progression and tasks tree and other bits https://miro.com/app/board/o9J_l6BMMjQ=/<br /> * Miro board showing design progression of the poster https://miro.com/app/board/o9J_lxFnwQY=/</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=587 2021-09-17T12:34:09Z

<p>Admin: </p> <hr /> <div>[[Category:Visualisation Designs]]<br /> <br /> == Contributors ==<br /> <br /> * Cianne Park (student partner) 2021 Summer Team - BioEng<br /> *Zhenghe Xuan (student partner) 2021 Summer Team - Physics<br /> * Rishav Chatterjee (student partner) 2021 Summer Team - Computing<br /> * Joshua Cheng (student partner) 2021 Summer Team - MechEng<br /> * Robert Jones (student partner) 2021 Summer Team - Physics<br /> <br /> == Aims &amp; Objectives ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> This visualisation is designed for self study use in 2nd year Electromagnetism course in the Physics department.<br /> <br /> The intended learning objectives were for the basic concept:<br /> <br /> * Solid angle is a (dimensionless, scalar) measure of '''field of view''' that a given object covers as seen from a particular point, expressed in units of steradians.<br /> * Field of view depends on:<br /> ** the size of the object<br /> ** the distance of the object<br /> * It can be seen as the surface area of the projection of the object onto a sphere surrounding the observer, at distance r=1. This means:<br /> ** the entire sphere would have solid angle 4pi steradians (as surface area of a sphere is 4pi*r^2)<br /> ** any size object at any distance has solid angle A/r^2, where A is the surface area of the projection on a sphere at distance r of the object.<br /> <br /> And for the use in integration:<br /> <br /> * The infinitesimal definition of solid angle is inner product of dS and r, divided by r^2. Here dS is the infinitesimal surface area element of a surface and the inner product is needed to only take into account the projection of the surface area vector along r.<br /> * Integrating over solid angle rather than surface area is the same as the double integral over sin(theta) d(theta) d(phi), i.e. integrating over the surface area of a sphere with radius = 1.<br /> * Infinitesimal definition of dOmega shows that flux from a point source through any surface with the '''same''' solid angle will be the same (basis for Gauss' law).<br /> <br /> == Design Overview ==<br /> [[File:Solid Angles Page 1.png|thumb|The first page of the solid angles visualisation design.]]<br /> The first page has a circle showing the definition of an angle, which the students should be very familiar with. On the right hand side, is the three dimensional analogue with solid angles instead of a normal angle. The plot is 3D and made with plotly.js, users are able to pan, rotate and zoom to get a clear idea of what the picture is showing. The green lines in both plots represent the radii of the circle and sphere. As the arc length or area sliders are changed the plots will update to extend the arc length or shaded area in the respective plots. When the radii sliders are updated the radii of the sphere or circle will update in the plot above the slider only. The numbers in the equations will update as the sliders are changed.[[File:Solid Angles Page 2.png|left|thumb|The second page of the solid angles visualisation design.]]In the second page there are two plots which are intended to show the same scenario from different perspectives, as a result, adjusting any sliders will change both plots simultaneously. The plot on the left hand side is two dimensional and shows the view from the observer. The plot on the right hand side shows the three dimensional scenario, where the user can pan, resize and zoom to look around and get a full picture of what is going on. The position of the observer is shown as a person in the right hand side plot, along with their field of view which is shown as a semi-transparent cone. <br /> <br /> The third page shows static images to help improve understanding of how to apply the theory to questions. There is one more key equation to learn however no interactive diagrams are provided as they would not provide any benefit. Instead, the page has a toggle which would switch to display some example questions, along with buttons to show the solution. <br /> [[File:Solid Angles Page 3b.png|thumb|An example question on the third page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3a.png|center|thumb|The third page of the solid angles visualisation design.]]<br /> <br /> == Design Justification ==<br /> <br /> === Assessment criteria ===<br /> i) Explain the key concepts of the problem through clear and engaging visualisations designed with a target audience in mind, using analogies where appropriate<br /> <br /> ii) Create a simple and intuitive design with clear consideration of accessibility issues<br /> <br /> iii) Clear design progression with justifications for choices<br /> <br /> === Education Strand ===<br /> The 2D/3D comparison in the first page allows users to see that solid angles are just an extension of something they already know and boosts their confidence in their understanding. This use of analogy satisfies assessment criteria i). The equations for solid angle and angle are displayed and the values in these equations update dynamically with the plots, as the sliders are adjusted; this gives the students another perspective and helps clarify how solid angles work, addressing assessment criteria i).<br /> <br /> In the second page, the student’s intuition about solid angles is improved by showing how solid angles are related to the familiar concept of field of view. This again satisfies assessment criteria i) with the analogy to a familiar concept. Allowing the user to move the object in 3D space and see how the solid angle changes introduces the fact that solid angles are dependent on the dot product of the separation vector and the surface vector through an intuitive example, satisfying assessment criteria ii).<br /> <br /> Initially, we planned to add an additional section to page two where a flashlight was added and arbitrary shapes could be selected, however we decided that this would add too much complexity and potentially confuse the user so we removed this section. This progression of ideas towards a simplified design satisfies assessment criteria ii) and iii). We also moved from explicitly mentioning that 3D objects have a solid angle to simply using a 3D object in the visualisation and letting the students figure this out by playing around with it themselves since this will give them a more intuitive understanding; this satisfies assessment criteria ii) and iii). We decided to add a static diagram to page 2 which shows clearly how it is the projection of the object which gives the solid angle, as we thought that this effect may be too subtle to notice on the visualisation without prompting. This change towards a design with greater clarity satisfies assessment criteria i) and iii). <br /> <br /> The third page shows students how solid angles are relevant to integration and Gauss’s law should motivate how important solid angles are. The integration example also shows how solid angles can be reached using simple trigonometry which the students should be familiar with; this gives an introduction to solid angles from a different perspective, helping the students get a more well rounded understanding. This satisfies assessment criteria i). <br /> <br /> === Graphics Strand ===<br /> The design has used the Imperial Visualisation template due to its effective use of space along with appropriate positioning elements for the application. All of the interactive visualisations could be centred on the page as the main focus, with a clear information panel on the left to guide the user through the visualisation. This follows the Home Office Design recommendations for users with dyslexia, which could form a significant part of the target audience. Whilst there exist many other groups of users with various handicaps, catering to all of them would not be possible therefore efforts were focused on dyslexic users.<br /> <br /> For all diagrams where comparison was a key part in understanding, the graphics were displayed side by side horizontally. Whilst this limited the maximum size of the graphics, it allowed the user to more easily recognise similarities and differences; use of a toggle to switch between the images would potentially cause frustration when having to repeatedly change diagrams. The result was a more intuitive design in accordance with criteria ii).<br /> <br /> Colour coding the diagrams and sliders used would help to improve the user’s understanding, by improving comparison ability and highlighting key points of the images. On page one, the radius on both diagrams would have the same colour, whilst the arc length and surface area would also have their own colour. This highlights the similarity between the two concepts and aids the user in making this link. Similarly, the sliders corresponding to these variables also have the same respective colour; any use of the variable itself or its numerical value would also follow the same colour scheme as they are the key factors in the equation. <br /> <br /> Positioning of the elements on the main area of the visualisation required consideration of the intuitiveness of the design. The diagrams are placed in the most central position as they are the key focus, with their titles just above. The sliders and equation could have been placed in a toggled hotspot however as the focus of the page is to understand the key factors of solid angles, they are positioned directly below the diagrams. Equations relating the variables are situated below the sliders to simulate the natural flow of thought for the user, from the variables and their values to the equation and the result.<br /> <br /> Feedback noted the potential to improve the design by considering colourblind users when determining the colour scheme. [do research] Extensions for browsers exist which would automatically convert colours on a page to remove this issue. (&lt;nowiki&gt;https://addons.mozilla.org/en-GB/firefox/addon/axe-devtools/&lt;/nowiki&gt;).<br /> <br /> === Interactivity Strand ===<br /> Use of Sliders to adjust the parameters of the 2D and 3D figures [2D - arc length, radius; 3D - area, radius]. In page one the motivation behind using sliders apart from the ease of use was that it was best suited to assist the student to move on to the 3d figure once their intuition about the 2d structure was built (Familiarity would make the transition for the student simpler). In page 2, to adjust the x and z position in 2d and the object size in the 3d figure, sliders were implemented in the design keeping the user’s convenience the first priority.<br /> <br /> The camera angles on the 3d figures on page 1 and 2 can be adjusted using a trackpad or mouse which would help the student get a better understanding of solid angles after using the visualisation by aiding the development of intuition regarding the topic.<br /> <br /> Accessibility - The use of low contrast coloured sliders in a simple layout makes the visualisation accessible to a large audience. The parameters of the 2d and 3d figures can be adjusted using sliders that can be controlled via touch, mouse, trackpad as well as a keyboard which is another reason behind using sliders.<br /> <br /> == Progress &amp; Future Work ==<br /> A final design has been created for this visualisation, but coding has not started.<br /> <br /> Future work could include:<br /> <br /> * Adding an interactive visualisation for page 3.<br /> *Apply Zhenge's feedback.<br /> *Make all diagrams in plotly.<br /> <br /> == Resources ==<br /> <br /> * Miro board showing design progression and tasks tree and other bits https://miro.com/app/board/o9J_l6BMMjQ=/<br /> * Miro board showing design progression of the poster https://miro.com/app/board/o9J_lxFnwQY=/</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=585 2021-09-17T09:50:06Z

<p>Admin: /* Progress &amp; Future Work */</p> <hr /> <div>[[Category:Visualisation Designs]]<br /> <br /> == Contributors ==<br /> <br /> * Cianne Park (student partner) 2021 Summer Team - BioEng<br /> * Rishav Chatterjee (student partner) 2021 Summer Team - Computing<br /> * Joshua Cheng (student partner) 2021 Summer Team - MechEng<br /> * Robert Jones (student partner) 2021 Summer Team - Physics<br /> <br /> == Aims &amp; Objectives ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> This visualisation is designed for self study use in 2nd year Electromagnetism course in the Physics department.<br /> <br /> The intended learning objectives were for the basic concept:<br /> <br /> * Solid angle is a (dimensionless, scalar) measure of '''field of view''' that a given object covers as seen from a particular point, expressed in units of steradians.<br /> * Field of view depends on:<br /> ** the size of the object<br /> ** the distance of the object<br /> * It can be seen as the surface area of the projection of the object onto a sphere surrounding the observer, at distance r=1. This means:<br /> ** the entire sphere would have solid angle 4pi steradians (as surface area of a sphere is 4pi*r^2)<br /> ** any size object at any distance has solid angle A/r^2, where A is the surface area of the projection on a sphere at distance r of the object.<br /> <br /> And for the use in integration:<br /> <br /> * The infinitesimal definition of solid angle is inner product of dS and r, divided by r^2. Here dS is the infinitesimal surface area element of a surface and the inner product is needed to only take into account the projection of the surface area vector along r.<br /> * Integrating over solid angle rather than surface area is the same as the double integral over sin(theta) d(theta) d(phi), i.e. integrating over the surface area of a sphere with radius = 1.<br /> * Infinitesimal definition of dOmega shows that flux from a point source through any surface with the '''same''' solid angle will be the same (basis for Gauss' law).<br /> <br /> == Design Overview ==<br /> [[File:Solid Angles Page 1.png|thumb|The first page of the solid angles visualisation design.]]<br /> The first page has a circle showing the definition of an angle, which the students should be very familiar with. On the right hand side, is the three dimensional analogue with solid angles instead of a normal angle. The plot is 3D and made with plotly.js, users are able to pan, rotate and zoom to get a clear idea of what the picture is showing. The green lines in both plots represent the radii of the circle and sphere. As the arc length or area sliders are changed the plots will update to extend the arc length or shaded area in the respective plots. When the radii sliders are updated the radii of the sphere or circle will update in the plot above the slider only. The numbers in the equations will update as the sliders are changed.[[File:Solid Angles Page 2.png|left|thumb|The second page of the solid angles visualisation design.]]In the second page there are two plots which are intended to show the same scenario from different perspectives, as a result, adjusting any sliders will change both plots simultaneously. The plot on the left hand side is two dimensional and shows the view from the observer. The plot on the right hand side shows the three dimensional scenario, where the user can pan, resize and zoom to look around and get a full picture of what is going on. The position of the observer is shown as a person in the right hand side plot, along with their field of view which is shown as a semi-transparent cone. <br /> <br /> The third page shows static images to help improve understanding of how to apply the theory to questions. There is one more key equation to learn however no interactive diagrams are provided as they would not provide any benefit. Instead, the page has a toggle which would switch to display some example questions, along with buttons to show the solution. <br /> [[File:Solid Angles Page 3b.png|thumb|An example question on the third page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3a.png|center|thumb|The third page of the solid angles visualisation design.]]<br /> <br /> == Design Justification ==<br /> <br /> === Assessment criteria ===<br /> i) Explain the key concepts of the problem through clear and engaging visualisations designed with a target audience in mind, using analogies where appropriate<br /> <br /> ii) Create a simple and intuitive design with clear consideration of accessibility issues<br /> <br /> iii) Clear design progression with justifications for choices<br /> <br /> === Education Strand ===<br /> The 2D/3D comparison in the first page allows users to see that solid angles are just an extension of something they already know and boosts their confidence in their understanding. This use of analogy satisfies assessment criteria i). The equations for solid angle and angle are displayed and the values in these equations update dynamically with the plots, as the sliders are adjusted; this gives the students another perspective and helps clarify how solid angles work, addressing assessment criteria i).<br /> <br /> In the second page, the student’s intuition about solid angles is improved by showing how solid angles are related to the familiar concept of field of view. This again satisfies assessment criteria i) with the analogy to a familiar concept. Allowing the user to move the object in 3D space and see how the solid angle changes introduces the fact that solid angles are dependent on the dot product of the separation vector and the surface vector through an intuitive example, satisfying assessment criteria ii).<br /> <br /> Initially, we planned to add an additional section to page two where a flashlight was added and arbitrary shapes could be selected, however we decided that this would add too much complexity and potentially confuse the user so we removed this section. This progression of ideas towards a simplified design satisfies assessment criteria ii) and iii). We also moved from explicitly mentioning that 3D objects have a solid angle to simply using a 3D object in the visualisation and letting the students figure this out by playing around with it themselves since this will give them a more intuitive understanding; this satisfies assessment criteria ii) and iii). We decided to add a static diagram to page 2 which shows clearly how it is the projection of the object which gives the solid angle, as we thought that this effect may be too subtle to notice on the visualisation without prompting. This change towards a design with greater clarity satisfies assessment criteria i) and iii). <br /> <br /> The third page shows students how solid angles are relevant to integration and Gauss’s law should motivate how important solid angles are. The integration example also shows how solid angles can be reached using simple trigonometry which the students should be familiar with; this gives an introduction to solid angles from a different perspective, helping the students get a more well rounded understanding. This satisfies assessment criteria i). <br /> <br /> === Graphics Strand ===<br /> The design has used the Imperial Visualisation template due to its effective use of space along with appropriate positioning elements for the application. All of the interactive visualisations could be centred on the page as the main focus, with a clear information panel on the left to guide the user through the visualisation. This follows the Home Office Design recommendations for users with dyslexia, which could form a significant part of the target audience. Whilst there exist many other groups of users with various handicaps, catering to all of them would not be possible therefore efforts were focused on dyslexic users.<br /> <br /> For all diagrams where comparison was a key part in understanding, the graphics were displayed side by side horizontally. Whilst this limited the maximum size of the graphics, it allowed the user to more easily recognise similarities and differences; use of a toggle to switch between the images would potentially cause frustration when having to repeatedly change diagrams. The result was a more intuitive design in accordance with criteria ii).<br /> <br /> Colour coding the diagrams and sliders used would help to improve the user’s understanding, by improving comparison ability and highlighting key points of the images. On page one, the radius on both diagrams would have the same colour, whilst the arc length and surface area would also have their own colour. This highlights the similarity between the two concepts and aids the user in making this link. Similarly, the sliders corresponding to these variables also have the same respective colour; any use of the variable itself or its numerical value would also follow the same colour scheme as they are the key factors in the equation. <br /> <br /> Positioning of the elements on the main area of the visualisation required consideration of the intuitiveness of the design. The diagrams are placed in the most central position as they are the key focus, with their titles just above. The sliders and equation could have been placed in a toggled hotspot however as the focus of the page is to understand the key factors of solid angles, they are positioned directly below the diagrams. Equations relating the variables are situated below the sliders to simulate the natural flow of thought for the user, from the variables and their values to the equation and the result.<br /> <br /> Feedback noted the potential to improve the design by considering colourblind users when determining the colour scheme. [do research] Extensions for browsers exist which would automatically convert colours on a page to remove this issue. (&lt;nowiki&gt;https://addons.mozilla.org/en-GB/firefox/addon/axe-devtools/&lt;/nowiki&gt;).<br /> <br /> === Interactivity Strand ===<br /> Use of Sliders to adjust the parameters of the 2D and 3D figures [2D - arc length, radius; 3D - area, radius]. In page one the motivation behind using sliders apart from the ease of use was that it was best suited to assist the student to move on to the 3d figure once their intuition about the 2d structure was built (Familiarity would make the transition for the student simpler). In page 2, to adjust the x and z position in 2d and the object size in the 3d figure, sliders were implemented in the design keeping the user’s convenience the first priority.<br /> <br /> The camera angles on the 3d figures on page 1 and 2 can be adjusted using a trackpad or mouse which would help the student get a better understanding of solid angles after using the visualisation by aiding the development of intuition regarding the topic.<br /> <br /> Accessibility - The use of low contrast coloured sliders in a simple layout makes the visualisation accessible to a large audience. The parameters of the 2d and 3d figures can be adjusted using sliders that can be controlled via touch, mouse, trackpad as well as a keyboard which is another reason behind using sliders.<br /> <br /> == Progress &amp; Future Work ==<br /> A final design has been created for this visualisation, but coding has not started.<br /> <br /> Future work could include:<br /> <br /> * Adding an interactive visualisation for page 3.<br /> *Apply Zhenge's feedback.<br /> *Make all diagrams in plotly.<br /> <br /> == Resources ==<br /> <br /> * Miro board showing design progression and tasks tree and other bits https://miro.com/app/board/o9J_l6BMMjQ=/<br /> * Miro board showing design progression of the poster https://miro.com/app/board/o9J_lxFnwQY=/</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=584 2021-09-17T09:49:06Z

<p>Admin: </p> <hr /> <div>[[Category:Visualisation Designs]]<br /> <br /> == Contributors ==<br /> <br /> * Cianne Park (student partner) 2021 Summer Team - BioEng<br /> * Rishav Chatterjee (student partner) 2021 Summer Team - Computing<br /> * Joshua Cheng (student partner) 2021 Summer Team - MechEng<br /> * Robert Jones (student partner) 2021 Summer Team - Physics<br /> <br /> == Aims &amp; Objectives ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> This visualisation is designed for self study use in 2nd year Electromagnetism course in the Physics department.<br /> <br /> The intended learning objectives were for the basic concept:<br /> <br /> * Solid angle is a (dimensionless, scalar) measure of '''field of view''' that a given object covers as seen from a particular point, expressed in units of steradians.<br /> * Field of view depends on:<br /> ** the size of the object<br /> ** the distance of the object<br /> * It can be seen as the surface area of the projection of the object onto a sphere surrounding the observer, at distance r=1. This means:<br /> ** the entire sphere would have solid angle 4pi steradians (as surface area of a sphere is 4pi*r^2)<br /> ** any size object at any distance has solid angle A/r^2, where A is the surface area of the projection on a sphere at distance r of the object.<br /> <br /> And for the use in integration:<br /> <br /> * The infinitesimal definition of solid angle is inner product of dS and r, divided by r^2. Here dS is the infinitesimal surface area element of a surface and the inner product is needed to only take into account the projection of the surface area vector along r.<br /> * Integrating over solid angle rather than surface area is the same as the double integral over sin(theta) d(theta) d(phi), i.e. integrating over the surface area of a sphere with radius = 1.<br /> * Infinitesimal definition of dOmega shows that flux from a point source through any surface with the '''same''' solid angle will be the same (basis for Gauss' law).<br /> <br /> == Design Overview ==<br /> [[File:Solid Angles Page 1.png|thumb|The first page of the solid angles visualisation design.]]<br /> The first page has a circle showing the definition of an angle, which the students should be very familiar with. On the right hand side, is the three dimensional analogue with solid angles instead of a normal angle. The plot is 3D and made with plotly.js, users are able to pan, rotate and zoom to get a clear idea of what the picture is showing. The green lines in both plots represent the radii of the circle and sphere. As the arc length or area sliders are changed the plots will update to extend the arc length or shaded area in the respective plots. When the radii sliders are updated the radii of the sphere or circle will update in the plot above the slider only. The numbers in the equations will update as the sliders are changed.[[File:Solid Angles Page 2.png|left|thumb|The second page of the solid angles visualisation design.]]In the second page there are two plots which are intended to show the same scenario from different perspectives, as a result, adjusting any sliders will change both plots simultaneously. The plot on the left hand side is two dimensional and shows the view from the observer. The plot on the right hand side shows the three dimensional scenario, where the user can pan, resize and zoom to look around and get a full picture of what is going on. The position of the observer is shown as a person in the right hand side plot, along with their field of view which is shown as a semi-transparent cone. <br /> <br /> The third page shows static images to help improve understanding of how to apply the theory to questions. There is one more key equation to learn however no interactive diagrams are provided as they would not provide any benefit. Instead, the page has a toggle which would switch to display some example questions, along with buttons to show the solution. <br /> [[File:Solid Angles Page 3b.png|thumb|An example question on the third page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3a.png|center|thumb|The third page of the solid angles visualisation design.]]<br /> <br /> == Design Justification ==<br /> <br /> === Assessment criteria ===<br /> i) Explain the key concepts of the problem through clear and engaging visualisations designed with a target audience in mind, using analogies where appropriate<br /> <br /> ii) Create a simple and intuitive design with clear consideration of accessibility issues<br /> <br /> iii) Clear design progression with justifications for choices<br /> <br /> === Education Strand ===<br /> The 2D/3D comparison in the first page allows users to see that solid angles are just an extension of something they already know and boosts their confidence in their understanding. This use of analogy satisfies assessment criteria i). The equations for solid angle and angle are displayed and the values in these equations update dynamically with the plots, as the sliders are adjusted; this gives the students another perspective and helps clarify how solid angles work, addressing assessment criteria i).<br /> <br /> In the second page, the student’s intuition about solid angles is improved by showing how solid angles are related to the familiar concept of field of view. This again satisfies assessment criteria i) with the analogy to a familiar concept. Allowing the user to move the object in 3D space and see how the solid angle changes introduces the fact that solid angles are dependent on the dot product of the separation vector and the surface vector through an intuitive example, satisfying assessment criteria ii).<br /> <br /> Initially, we planned to add an additional section to page two where a flashlight was added and arbitrary shapes could be selected, however we decided that this would add too much complexity and potentially confuse the user so we removed this section. This progression of ideas towards a simplified design satisfies assessment criteria ii) and iii). We also moved from explicitly mentioning that 3D objects have a solid angle to simply using a 3D object in the visualisation and letting the students figure this out by playing around with it themselves since this will give them a more intuitive understanding; this satisfies assessment criteria ii) and iii). We decided to add a static diagram to page 2 which shows clearly how it is the projection of the object which gives the solid angle, as we thought that this effect may be too subtle to notice on the visualisation without prompting. This change towards a design with greater clarity satisfies assessment criteria i) and iii). <br /> <br /> The third page shows students how solid angles are relevant to integration and Gauss’s law should motivate how important solid angles are. The integration example also shows how solid angles can be reached using simple trigonometry which the students should be familiar with; this gives an introduction to solid angles from a different perspective, helping the students get a more well rounded understanding. This satisfies assessment criteria i). <br /> <br /> === Graphics Strand ===<br /> The design has used the Imperial Visualisation template due to its effective use of space along with appropriate positioning elements for the application. All of the interactive visualisations could be centred on the page as the main focus, with a clear information panel on the left to guide the user through the visualisation. This follows the Home Office Design recommendations for users with dyslexia, which could form a significant part of the target audience. Whilst there exist many other groups of users with various handicaps, catering to all of them would not be possible therefore efforts were focused on dyslexic users.<br /> <br /> For all diagrams where comparison was a key part in understanding, the graphics were displayed side by side horizontally. Whilst this limited the maximum size of the graphics, it allowed the user to more easily recognise similarities and differences; use of a toggle to switch between the images would potentially cause frustration when having to repeatedly change diagrams. The result was a more intuitive design in accordance with criteria ii).<br /> <br /> Colour coding the diagrams and sliders used would help to improve the user’s understanding, by improving comparison ability and highlighting key points of the images. On page one, the radius on both diagrams would have the same colour, whilst the arc length and surface area would also have their own colour. This highlights the similarity between the two concepts and aids the user in making this link. Similarly, the sliders corresponding to these variables also have the same respective colour; any use of the variable itself or its numerical value would also follow the same colour scheme as they are the key factors in the equation. <br /> <br /> Positioning of the elements on the main area of the visualisation required consideration of the intuitiveness of the design. The diagrams are placed in the most central position as they are the key focus, with their titles just above. The sliders and equation could have been placed in a toggled hotspot however as the focus of the page is to understand the key factors of solid angles, they are positioned directly below the diagrams. Equations relating the variables are situated below the sliders to simulate the natural flow of thought for the user, from the variables and their values to the equation and the result.<br /> <br /> Feedback noted the potential to improve the design by considering colourblind users when determining the colour scheme. [do research] Extensions for browsers exist which would automatically convert colours on a page to remove this issue. (&lt;nowiki&gt;https://addons.mozilla.org/en-GB/firefox/addon/axe-devtools/&lt;/nowiki&gt;).<br /> <br /> === Interactivity Strand ===<br /> Use of Sliders to adjust the parameters of the 2D and 3D figures [2D - arc length, radius; 3D - area, radius]. In page one the motivation behind using sliders apart from the ease of use was that it was best suited to assist the student to move on to the 3d figure once their intuition about the 2d structure was built (Familiarity would make the transition for the student simpler). In page 2, to adjust the x and z position in 2d and the object size in the 3d figure, sliders were implemented in the design keeping the user’s convenience the first priority.<br /> <br /> The camera angles on the 3d figures on page 1 and 2 can be adjusted using a trackpad or mouse which would help the student get a better understanding of solid angles after using the visualisation by aiding the development of intuition regarding the topic.<br /> <br /> Accessibility - The use of low contrast coloured sliders in a simple layout makes the visualisation accessible to a large audience. The parameters of the 2d and 3d figures can be adjusted using sliders that can be controlled via touch, mouse, trackpad as well as a keyboard which is another reason behind using sliders.<br /> <br /> == Progress &amp; Future Work ==<br /> A final design has been created for this visualisation, but development has not started.<br /> <br /> Future work could include:<br /> <br /> * Adding an interactive visualisation for page 3.<br /> <br /> == Resources ==<br /> <br /> * Miro board showing design progression and tasks tree and other bits https://miro.com/app/board/o9J_l6BMMjQ=/<br /> * Miro board showing design progression of the poster https://miro.com/app/board/o9J_lxFnwQY=/</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=583 2021-09-17T09:38:26Z

<p>Admin: </p> <hr /> <div>[[Category:Visualisation Designs]]<br /> <br /> == Contributors ==<br /> <br /> * Cianne Park (student partner) 2021 Summer Team - BioEng<br /> * Rishav Chatterjee (student partner) 2021 Summer Team - Computing<br /> * Joshua Cheng (student partner) 2021 Summer Team - MechEng<br /> * Robert Jones (student partner) 2021 Summer Team - Physics<br /> <br /> == Aims &amp; Objectives ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> This visualisation is designed for self study use in 2nd year Electromagnetism course in the Physics department.<br /> <br /> The intended learning objectives were:<br /> <br /> # <br /> <br /> == Design Overview ==<br /> [[File:Solid Angles Page 1.png|thumb|The first page of the solid angles visualisation design.]]<br /> The first page has a circle showing the definition of an angle, which the students should be very familiar with. On the right hand side, is the three dimensional analogue with solid angles instead of a normal angle. The plot is 3D and made with plotly.js, users are able to pan, rotate and zoom to get a clear idea of what the picture is showing. The green lines in both plots represent the radii of the circle and sphere. As the arc length or area sliders are changed the plots will update to extend the arc length or shaded area in the respective plots. When the radii sliders are updated the radii of the sphere or circle will update in the plot above the slider only. The numbers in the equations will update as the sliders are changed.[[File:Solid Angles Page 2.png|left|thumb|The second page of the solid angles visualisation design.]]In the second page there are two plots which are intended to show the same scenario from different perspectives, as a result, adjusting any sliders will change both plots simultaneously. The plot on the left hand side is two dimensional and shows the view from the observer. The plot on the right hand side shows the three dimensional scenario, where the user can pan, resize and zoom to look around and get a full picture of what is going on. The position of the observer is shown as a person in the right hand side plot, along with their field of view which is shown as a semi-transparent cone. <br /> <br /> The third page shows static images to help improve understanding of how to apply the theory to questions. There is one more key equation to learn however no interactive diagrams are provided as they would not provide any benefit. Instead, the page has a toggle which would switch to display some example questions, along with buttons to show the solution. <br /> [[File:Solid Angles Page 3b.png|thumb|An example question on the third page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3a.png|center|thumb|The third page of the solid angles visualisation design.]]<br /> <br /> == Design Justification ==<br /> <br /> === Assessment criteria ===<br /> i) Explain the key concepts of the problem through clear and engaging visualisations designed with a target audience in mind, using analogies where appropriate<br /> <br /> ii) Create a simple and intuitive design with clear consideration of accessibility issues<br /> <br /> iii) Clear design progression with justifications for choices<br /> <br /> === Education Strand ===<br /> The 2D/3D comparison in the first page allows users to see that solid angles are just an extension of something they already know and boosts their confidence in their understanding. This use of analogy satisfies assessment criteria i). The equations for solid angle and angle are displayed and the values in these equations update dynamically with the plots, as the sliders are adjusted; this gives the students another perspective and helps clarify how solid angles work, addressing assessment criteria i).<br /> <br /> In the second page, the student’s intuition about solid angles is improved by showing how solid angles are related to the familiar concept of field of view. This again satisfies assessment criteria i) with the analogy to a familiar concept. Allowing the user to move the object in 3D space and see how the solid angle changes introduces the fact that solid angles are dependent on the dot product of the separation vector and the surface vector through an intuitive example, satisfying assessment criteria ii).<br /> <br /> Initially, we planned to add an additional section to page two where a flashlight was added and arbitrary shapes could be selected, however we decided that this would add too much complexity and potentially confuse the user so we removed this section. This progression of ideas towards a simplified design satisfies assessment criteria ii) and iii). We also moved from explicitly mentioning that 3D objects have a solid angle to simply using a 3D object in the visualisation and letting the students figure this out by playing around with it themselves since this will give them a more intuitive understanding; this satisfies assessment criteria ii) and iii). We decided to add a static diagram to page 2 which shows clearly how it is the projection of the object which gives the solid angle, as we thought that this effect may be too subtle to notice on the visualisation without prompting. This change towards a design with greater clarity satisfies assessment criteria i) and iii). <br /> <br /> The third page shows students how solid angles are relevant to integration and Gauss’s law should motivate how important solid angles are. The integration example also shows how solid angles can be reached using simple trigonometry which the students should be familiar with; this gives an introduction to solid angles from a different perspective, helping the students get a more well rounded understanding. This satisfies assessment criteria i). <br /> <br /> === Graphics Strand ===<br /> The design has used the Imperial Visualisation template due to its effective use of space along with appropriate positioning elements for the application. All of the interactive visualisations could be centred on the page as the main focus, with a clear information panel on the left to guide the user through the visualisation. This follows the Home Office Design recommendations for users with dyslexia, which could form a significant part of the target audience. Whilst there exist many other groups of users with various handicaps, catering to all of them would not be possible therefore efforts were focused on dyslexic users.<br /> <br /> For all diagrams where comparison was a key part in understanding, the graphics were displayed side by side horizontally. Whilst this limited the maximum size of the graphics, it allowed the user to more easily recognise similarities and differences; use of a toggle to switch between the images would potentially cause frustration when having to repeatedly change diagrams. The result was a more intuitive design in accordance with criteria ii).<br /> <br /> Colour coding the diagrams and sliders used would help to improve the user’s understanding, by improving comparison ability and highlighting key points of the images. On page one, the radius on both diagrams would have the same colour, whilst the arc length and surface area would also have their own colour. This highlights the similarity between the two concepts and aids the user in making this link. Similarly, the sliders corresponding to these variables also have the same respective colour; any use of the variable itself or its numerical value would also follow the same colour scheme as they are the key factors in the equation. <br /> <br /> Positioning of the elements on the main area of the visualisation required consideration of the intuitiveness of the design. The diagrams are placed in the most central position as they are the key focus, with their titles just above. The sliders and equation could have been placed in a toggled hotspot however as the focus of the page is to understand the key factors of solid angles, they are positioned directly below the diagrams. Equations relating the variables are situated below the sliders to simulate the natural flow of thought for the user, from the variables and their values to the equation and the result.<br /> <br /> Feedback noted the potential to improve the design by considering colourblind users when determining the colour scheme. [do research] Extensions for browsers exist which would automatically convert colours on a page to remove this issue. (&lt;nowiki&gt;https://addons.mozilla.org/en-GB/firefox/addon/axe-devtools/&lt;/nowiki&gt;).<br /> <br /> === Interactivity Strand ===<br /> Use of Sliders to adjust the parameters of the 2D and 3D figures [2D - arc length, radius; 3D - area, radius]. In page one the motivation behind using sliders apart from the ease of use was that it was best suited to assist the student to move on to the 3d figure once their intuition about the 2d structure was built (Familiarity would make the transition for the student simpler). In page 2, to adjust the x and z position in 2d and the object size in the 3d figure, sliders were implemented in the design keeping the user’s convenience the first priority.<br /> <br /> The camera angles on the 3d figures on page 1 and 2 can be adjusted using a trackpad or mouse which would help the student get a better understanding of solid angles after using the visualisation by aiding the development of intuition regarding the topic.<br /> <br /> Accessibility - The use of low contrast coloured sliders in a simple layout makes the visualisation accessible to a large audience. The parameters of the 2d and 3d figures can be adjusted using sliders that can be controlled via touch, mouse, trackpad as well as a keyboard which is another reason behind using sliders.<br /> <br /> == Progress &amp; Future Work ==<br /> A final design has been created for this visualisation, but development has not started.<br /> <br /> Future work could include:<br /> <br /> * Adding an interactive visualisation for page 3.<br /> <br /> == Resources ==<br /> <br /> * Miro board showing design progression and tasks tree and other bits https://miro.com/app/board/o9J_l6BMMjQ=/<br /> * Miro board showing design progression of the poster https://miro.com/app/board/o9J_lxFnwQY=/</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=582 2021-09-17T09:19:15Z

<p>Admin: </p> <hr /> <div>[[Category:Visualisation Designs]]<br /> <br /> == Contributors ==<br /> <br /> * Cianne Park (student partner) 2021 Summer Team - BioEng<br /> * Rishav Chatterjee (student partner) 2021 Summer Team - Computing<br /> * Joshua Cheng (student partner) 2021 Summer Team - MechEng<br /> * Robert Jones (student partner) 2021 Summer Team - Physics<br /> <br /> == Aims &amp; Objectives ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> This visualisation is designed for self study use in 2nd year Electromagnetism course in the Physics department.<br /> <br /> The intended learning objectives were:<br /> <br /> # <br /> <br /> == Design Overview ==<br /> [[File:Solid Angles Page 1.png|thumb|The first page of the solid angles visualisation design.]]<br /> The first page has a circle showing the definition of an angle, which the students should be very familiar with. On the right hand side, is the three dimensional analogue with solid angles instead of a normal angle. The plot is 3D and made with plotly.js, users are able to pan, rotate and zoom to get a clear idea of what the picture is showing. The green lines in both plots represent the radii of the circle and sphere. As the arc length or area sliders are changed the plots will update to extend the arc length or shaded area in the respective plots. When the radii sliders are updated the radii of the sphere or circle will update in the plot above the slider only. The numbers in the equations will update as the sliders are changed.[[File:Solid Angles Page 2.png|left|thumb|The second page of the solid angles visualisation design.]]In the second page there are two plots which are intended to show the same scenario from different perspectives, as a result, adjusting any sliders will change both plots simultaneously. The plot on the left hand side is two dimensional and shows the view from the observer. The plot on the right hand side shows the three dimensional scenario, where the user can pan, resize and zoom to look around and get a full picture of what is going on. The position of the observer is shown as a person in the right hand side plot, along with their field of view which is shown as a semi-transparent cone. <br /> <br /> The third page shows static images to help improve understanding of how to apply the theory to questions. There is one more key equation to learn however no interactive diagrams are provided as they would not provide any benefit. Instead, the page has a toggle which would switch to display some example questions, along with buttons to show the solution. <br /> [[File:Solid Angles Page 3b.png|thumb|An example question on the third page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3a.png|center|thumb|The third page of the solid angles visualisation design.]]<br /> <br /> == Design Justification ==<br /> <br /> === Assessment criteria ===<br /> i) Explain the key concepts of the problem through clear and engaging visualisations designed with a target audience in mind, using analogies where appropriate<br /> <br /> ii) Create a simple and intuitive design with clear consideration of accessibility issues<br /> <br /> iii) Clear design progression with justifications for choices<br /> <br /> === Education Strand ===<br /> The 2D/3D comparison in the first page allows users to see that solid angles are just an extension of something they already know and boosts their confidence in their understanding. This use of analogy satisfies assessment criteria i). The equations for solid angle and angle are displayed and the values in these equations update dynamically with the plots, as the sliders are adjusted; this gives the students another perspective and helps clarify how solid angles work, addressing assessment criteria i).<br /> <br /> In the second page, the student’s intuition about solid angles is improved by showing how solid angles are related to the familiar concept of field of view. This again satisfies assessment criteria i) with the analogy to a familiar concept. Allowing the user to move the object in 3D space and see how the solid angle changes introduces the fact that solid angles are dependent on the dot product of the separation vector and the surface vector through an intuitive example, satisfying assessment criteria ii).<br /> <br /> Initially, we planned to add an additional section to page two where a flashlight was added and arbitrary shapes could be selected, however we decided that this would add too much complexity and potentially confuse the user so we removed this section. This progression of ideas towards a simplified design satisfies assessment criteria ii) and iii). We also moved from explicitly mentioning that 3D objects have a solid angle to simply using a 3D object in the visualisation and letting the students figure this out by playing around with it themselves since this will give them a more intuitive understanding; this satisfies assessment criteria ii) and iii). We decided to add a static diagram to page 2 which shows clearly how it is the projection of the object which gives the solid angle, as we thought that this effect may be too subtle to notice on the visualisation without prompting. This change towards a design with greater clarity satisfies assessment criteria i) and iii). <br /> <br /> The third page shows students how solid angles are relevant to integration and Gauss’s law should motivate how important solid angles are. The integration example also shows how solid angles can be reached using simple trigonometry which the students should be familiar with; this gives an introduction to solid angles from a different perspective, helping the students get a more well rounded understanding. This satisfies assessment criteria i). <br /> <br /> === Graphics Strand ===<br /> The design has used the Imperial Visualisation template due to its effective use of space along with appropriate positioning elements for the application. All of the interactive visualisations could be centred on the page as the main focus, with a clear information panel on the left to guide the user through the visualisation. This follows the Home Office Design recommendations for users with dyslexia, which could form a significant part of the target audience. Whilst there exist many other groups of users with various handicaps, catering to all of them would not be possible therefore efforts were focused on dyslexic users.<br /> <br /> For all diagrams where comparison was a key part in understanding, the graphics were displayed side by side horizontally. Whilst this limited the maximum size of the graphics, it allowed the user to more easily recognise similarities and differences; use of a toggle to switch between the images would potentially cause frustration when having to repeatedly change diagrams. The result was a more intuitive design in accordance with criteria ii).<br /> <br /> Colour coding the diagrams and sliders used would help to improve the user’s understanding, by improving comparison ability and highlighting key points of the images. On page one, the radius on both diagrams would have the same colour, whilst the arc length and surface area would also have their own colour. This highlights the similarity between the two concepts and aids the user in making this link. Similarly, the sliders corresponding to these variables also have the same respective colour; any use of the variable itself or its numerical value would also follow the same colour scheme as they are the key factors in the equation. <br /> <br /> Positioning of the elements on the main area of the visualisation required consideration of the intuitiveness of the design. The diagrams are placed in the most central position as they are the key focus, with their titles just above. The sliders and equation could have been placed in a toggled hotspot however as the focus of the page is to understand the key factors of solid angles, they are positioned directly below the diagrams. Equations relating the variables are situated below the sliders to simulate the natural flow of thought for the user, from the variables and their values to the equation and the result.<br /> <br /> Feedback noted the potential to improve the design by considering colourblind users when determining the colour scheme. [do research] Extensions for browsers exist which would automatically convert colours on a page to remove this issue. (&lt;nowiki&gt;https://addons.mozilla.org/en-GB/firefox/addon/axe-devtools/&lt;/nowiki&gt;).<br /> <br /> === Interactivity Strand ===<br /> Use of Sliders to adjust the parameters of the 2D and 3D figures [2D - arc length, radius; 3D - area, radius]. In page one the motivation behind using sliders apart from the ease of use was that it was best suited to assist the student to move on to the 3d figure once their intuition about the 2d structure was built (Familiarity would make the transition for the student simpler). In page 2, to adjust the x and z position in 2d and the object size in the 3d figure, sliders were implemented in the design keeping the user’s convenience the first priority.<br /> <br /> The camera angles on the 3d figures on page 1 and 2 can be adjusted using a trackpad or mouse which would help the student get a better understanding of solid angles after using the visualisation by aiding the development of intuition regarding the topic.<br /> <br /> Accessibility - The use of low contrast coloured sliders in a simple layout makes the visualisation accessible to a large audience. The parameters of the 2d and 3d figures can be adjusted using sliders that can be controlled via touch, mouse, trackpad as well as a keyboard which is another reason behind using sliders.<br /> <br /> == Progress &amp; Future Work ==</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=581 2021-09-16T13:45:33Z

<p>Admin: </p> <hr /> <div>[[Category:Visualisation Designs]]<br /> <br /> == Contributors ==<br /> <br /> * Cianne Park (student partner) 2021 Summer Team - BioEng<br /> * Rishav Chatterjee (student partner) 2021 Summer Team - Computing<br /> * Joshua Cheng (student partner) 2021 Summer Team - MechEng<br /> * Robert Jones (student partner) 2021 Summer Team - Physics<br /> <br /> == Aims &amp; Objectives ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> This visualisation is designed for self study use in 2nd year Electromagnetism course in the Physics department.<br /> <br /> The intended learning objectives were:<br /> <br /> # <br /> <br /> == Design Overview ==<br /> [[File:Solid Angles Page 1.png|thumb|The first page of the solid angles visualisation design.]]<br /> The first page has a circle showing the definition of an angle, which the students should be very familiar with. On the right hand side, is the three dimensional analogue with solid angles instead of a normal angle. The plot is 3D and made with plotly.js, users are able to pan, rotate and zoom to get a clear idea of what the picture is showing. The green lines in both plots represent the radii of the circle and sphere. As the arc length or area sliders are changed the plots will update to extend the arc length or shaded area in the respective plots. When the radii sliders are updated the radii of the sphere or circle will update in the plot above the slider only. The numbers in the equations will update as the sliders are changed.[[File:Solid Angles Page 2.png|left|thumb|The second page of the solid angles visualisation design.]]In the second page there are two plots which are intended to show the same scenario from different perspectives, as a result, adjusting any sliders will change both plots simultaneously. The plot on the left hand side is two dimensional and shows the view from the observer. The plot on the right hand side shows the three dimensional scenario, where the user can pan, resize and zoom to look around and get a full picture of what is going on. The position of the observer is shown as a person in the right hand side plot, along with their field of view which is shown as a semi-transparent cone. <br /> <br /> The third page shows static images to help improve understanding of how to apply the theory to questions. There is one more key equation to learn however no interactive diagrams are provided as they would not provide any benefit. Instead, the page has a toggle which would switch to display some example questions, along with buttons to show the solution. <br /> [[File:Solid Angles Page 3b.png|thumb|An example question on the third page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3a.png|center|thumb|The third page of the solid angles visualisation design.]]<br /> <br /> == Design Justification ==<br /> <br /> === Assessment criteria ===<br /> i) Explain the key concepts of the problem through clear and engaging visualisations designed with a target audience in mind, using analogies where appropriate<br /> <br /> ii) Create a simple and intuitive design with clear consideration of accessibility issues<br /> <br /> iii) Clear design progression with justifications for choices<br /> <br /> === Education Strand ===<br /> The 2D/3D comparison in the first page allows users to see that solid angles are just an extension of something they already know and boosts their confidence in their understanding. This use of analogy satisfies assessment criteria i). The equations for solid angle and angle are displayed and the values in these equations update dynamically with the plots, as the sliders are adjusted; this gives the students another perspective and helps clarify how solid angles work, addressing assessment criteria i).<br /> <br /> In the second page, the student’s intuition about solid angles is improved by showing how solid angles are related to the familiar concept of field of view. This again satisfies assessment criteria i) with the analogy to a familiar concept. Allowing the user to move the object in 3D space and see how the solid angle changes introduces the fact that solid angles are dependent on the dot product of the separation vector and the surface vector through an intuitive example, satisfying assessment criteria ii).<br /> <br /> Initially, we planned to add an additional section to page two where a flashlight was added and arbitrary shapes could be selected, however we decided that this would add too much complexity and potentially confuse the user so we removed this section. This progression of ideas towards a simplified design satisfies assessment criteria ii) and iii). We also moved from explicitly mentioning that 3D objects have a solid angle to simply using a 3D object in the visualisation and letting the students figure this out by playing around with it themselves since this will give them a more intuitive understanding; this satisfies assessment criteria ii) and iii). We decided to add a static diagram to page 2 which shows clearly how it is the projection of the object which gives the solid angle, as we thought that this effect may be too subtle to notice on the visualisation without prompting. This change towards a design with greater clarity satisfies assessment criteria i) and iii). <br /> <br /> The third page shows students how solid angles are relevant to integration and Gauss’s law should motivate how important solid angles are. The integration example also shows how solid angles can be reached using simple trigonometry which the students should be familiar with; this gives an introduction to solid angles from a different perspective, helping the students get a more well rounded understanding. This satisfies assessment criteria i). <br /> <br /> === Graphics Strand ===<br /> The design has used the Imperial Visualisation template due to its effective use of space along with appropriate positioning elements for the application. All of the interactive visualisations could be centred on the page as the main focus, with a clear information panel on the left to guide the user through the visualisation. This follows the Home Office Design recommendations for users with dyslexia, which could form a significant part of the target audience. Whilst there exist many other groups of users with various handicaps, catering to all of them would not be possible therefore efforts were focused on dyslexic users.<br /> <br /> For all diagrams where comparison was a key part in understanding, the graphics were displayed side by side horizontally. Whilst this limited the maximum size of the graphics, it allowed the user to more easily recognise similarities and differences; use of a toggle to switch between the images would potentially cause frustration when having to repeatedly change diagrams. The result was a more intuitive design in accordance with criteria ii).<br /> <br /> Colour coding the diagrams and sliders used would help to improve the user’s understanding, by improving comparison ability and highlighting key points of the images. On page one, the radius on both diagrams would have the same colour, whilst the arc length and surface area would also have their own colour. This highlights the similarity between the two concepts and aids the user in making this link. Similarly, the sliders corresponding to these variables also have the same respective colour; any use of the variable itself or its numerical value would also follow the same colour scheme as they are the key factors in the equation. <br /> <br /> Positioning of the elements on the main area of the visualisation required consideration of the intuitiveness of the design. The diagrams are placed in the most central position as they are the key focus, with their titles just above. The sliders and equation could have been placed in a toggled hotspot however as the focus of the page is to understand the key factors of solid angles, they are positioned directly below the diagrams. Equations relating the variables are situated below the sliders to simulate the natural flow of thought for the user, from the variables and their values to the equation and the result.<br /> <br /> Feedback noted the potential to improve the design by considering colourblind users when determining the colour scheme. [do research] Extensions for browsers exist which would automatically convert colours on a page to remove this issue. (&lt;nowiki&gt;https://addons.mozilla.org/en-GB/firefox/addon/axe-devtools/&lt;/nowiki&gt;).<br /> <br /> === Interactivity Strand ===<br /> Use of Sliders to adjust the parameters of the 2D and 3D figures [2D - arc length, radius; 3D - area, radius]. In page one the motivation behind using sliders apart from the ease of use was that it was best suited to assist the student to move on to the 3d figure once their intuition about the 2d structure was built (Familiarity would make the transition for the student simpler). In page 2, to adjust the x and z position in 2d and the object size in the 3d figure, sliders were implemented in the design keeping the user’s convenience the first priority.<br /> <br /> The camera angles on the 3d figures on page 1 and 2 can be adjusted using a trackpad or mouse which would help the student get a better understanding of solid angles after using the visualisation by aiding the development of intuition regarding the topic.<br /> <br /> Accessibility - The use of low contrast coloured sliders in a simple layout makes the visualisation accessible to a large audience. The parameters of the 2d and 3d figures can be adjusted using sliders that can be controlled via touch, mouse, trackpad as well as a keyboard which is another reason behind using sliders.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Wiki_Submission_Template&diff=580 2021-09-16T13:32:11Z

<p>Admin: </p> <hr /> <div>[[Category:iExplore Module]]<br /> This is a template which you can use to help get you started on the wiki submission. It is just intended as a guide and you may modify the structure to suit your project.<br /> <br /> == Contributors ==<br /> <br /> * Name and what department each person was in.<br /> *Student or staff partner?<br /> * How was each person involved?<br /> * What rough dates did they contribute?<br /> <br /> == Aims &amp; Objectives ==<br /> <br /> * Explain the motivation for your visualisation.<br /> <br /> * Introduce the subject of your visualisation.<br /> *Which module and year is it intended for and which setting (lecture or self study)?<br /> *List learning objectives. <br /> <br /> == Design Overview ==<br /> <br /> *What the final outcome was, how it looks, how it functions etc.<br /> * Include graphics.<br /> * Do not include justification or design progression, leave this for later sections.<br /> <br /> == Design Justification ==<br /> <br /> === Assessment Criteria ===<br /> <br /> * List and explain your assessment criteria. You may want to number the assessment criteria so you can refer to them easily later.<br /> <br /> === Education Design ===<br /> <br /> *What Methods were considered to convey concepts?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> === Graphical Design ===<br /> <br /> *How were accessibility issues considered?<br /> * How was space used effectively?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> * How is the design intuitive?<br /> <br /> === Interaction Design ===<br /> *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).<br /> *Keeping accessibility of interactive elements in mind during design phase.<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Progress and Future Work ==<br /> <br /> * Is the design finalised? <br /> * Which pages have been uploaded to website?<br /> * Any ideas for future improvements.<br /> <br /> == Resources ==<br /> <br /> * Links to code or notes used.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Wiki_Submission_Template&diff=579 2021-09-16T13:28:06Z

<p>Admin: </p> <hr /> <div>[[Category:iExplore Module]]<br /> This is a template which you can use to help get you started on the wiki submission. It is just intended as a guide and you may modify the structure to suit your project.<br /> <br /> == Contributors ==<br /> <br /> * Name and what department each person was in.<br /> * How was each person involved?<br /> * What rough dates did they contribute?<br /> <br /> == Introduction ==<br /> <br /> * Explain the motivation for your visualisation.<br /> <br /> * Introduce the subject of your visualisation.<br /> *Which module and year is it intended for and which setting (lecture or self study)?<br /> *List learning objectives. <br /> <br /> == Design Overview ==<br /> <br /> *What the final outcome was, how it looks, how it functions etc.<br /> * Include graphics.<br /> * Do not include justification or design progression, leave this for later sections.<br /> <br /> == Design Justification ==<br /> <br /> === Assessment Criteria ===<br /> <br /> * List and explain your assessment criteria. You may want to number the assessment criteria so you can refer to them easily later.<br /> <br /> === Education Design ===<br /> <br /> *What Methods were considered to convey concepts?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> === Graphical Design ===<br /> <br /> *How were accessibility issues considered?<br /> * How was space used effectively?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> * How is the design intuitive?<br /> <br /> === Interaction Design ===<br /> *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).<br /> *Keeping accessibility of interactive elements in mind during design phase.<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Progress and Future Work ==<br /> <br /> * Is the design finalised? <br /> * Which pages have been uploaded to website?<br /> * Any ideas for future improvements.<br /> <br /> == Resources ==<br /> <br /> * Links to code or notes used.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Wiki_Submission_Template&diff=578 2021-09-16T13:20:07Z

<p>Admin: </p> <hr /> <div>[[Category:iExplore Module]]<br /> This is a template which you can use to help get you started on the wiki submission. It is just intended as a guide and you may modify the structure to suit your project.<br /> <br /> == Contributors ==<br /> <br /> * Name and what department each person was in.<br /> * How was each person involved?<br /> * What rough dates did they contribute?<br /> <br /> == Introduction ==<br /> <br /> *Explain the motivation for your visualisation.<br /> * Introduce the subject of your visualisation.<br /> *List learning objectives.<br /> * List and explain your assessment criteria. You may want to number the assessment criteria so you can refer to them easily later.<br /> <br /> == Visualisation Overview ==<br /> <br /> * What the final outcome was, how it looks, how it functions etc.<br /> * Include graphics.<br /> * Do not include justification or design progression, leave this for later sections.<br /> <br /> == Education Strand ==<br /> <br /> * What Methods were considered to convey concepts?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Graphics Strand ==<br /> <br /> * How were accessibility issues considered?<br /> * How was space used effectively?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Interactivity Strand ==<br /> <br /> * How is the design intuitive?<br /> *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).<br /> *Keeping accessibility of interactive elements in mind during design phase.<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Main_Page&diff=576 2021-09-16T13:09:57Z

<p>Admin: /* iExplore Module */</p> <hr /> <div>== Navigate Categories ==<br /> <br /> &lt;categorytree mode=&quot;pages&quot;&gt;Everything&lt;/categorytree&gt;<br /> <br /> == iExplore Module ==<br /> <br /> * [[Module Timetable]]<br /> *[[Example Design Project]]<br /> *[[Example Self Assessment]]<br /> *[[Example Portfolio]]<br /> *[[Wiki Submission Template]]<br /> *[[Tasks Tree]]<br /> *[[Assessment Criteria]]<br /> *[[Embedding Miro Boards]]<br /> <br /> == Wiki Divisions ==<br /> <br /> * [[Blackboard]]<br /> * [[Visualisations]]<br /> * [[Knowledge]]<br /> <br /> == Summer 2021==<br /> *[[Tech Team Final Documentation]]<br /> *[[Module Team Design Sprint]]<br /> *[[ImpVis wiki status quo summer 2021]]<br /> *[[ImpVis Website]]<br /> *[[Module status quo July 2021]]<br /> <br /> ==Getting started==<br /> Consult the [[mediawikiwiki:Special:MyLanguage/Help:Contents|User's Guide]] for information on using the wiki software.<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:Configuration_settings|Configuration settings list]]<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:FAQ|MediaWiki FAQ]]<br /> *[https://lists.wikimedia.org/mailman/listinfo/mediawiki-announce MediaWiki release mailing list]<br /> *[[mediawikiwiki:Special:MyLanguage/Localisation#Translation_resources|Localise MediaWiki for your language]]<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:Combating_spam|Learn how to combat spam on your wiki]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Embedding_Miro_Boards&diff=575 2021-09-16T13:08:55Z

<p>Admin: Removed protection from &quot;Embedding Miro Boards&quot;</p> <hr /> <div>This page explains how to embed a Miro board in Gather Town.<br /> [[File:Export Icon.png|thumb|Export icon on Miro.]]<br /> <br /> # Go to your Miro board and click the export icon in the top left. <br /> # In the menu that opens, click on &quot;Embed&quot;.<br /> # Copy the link from the &quot;src&quot; section of the iframe html tag at the bottom of the page. [[File:MiroLink.png|thumb|The export link for Miro, circled in red.]]<br /> # In the top right of your Miro board click the &quot;Share&quot; button, and edit the settings as required.<br /> <br /> [[Category:iExplore Module]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Module_Timetable&diff=573 2021-09-16T10:58:36Z

<p>Admin: </p> <hr /> <div>This rough timetable is intended as a guide only to help you understand the structure of the course and the progress you should be making by different points. You should additionally be updating your personal portfolio throughout the project. The times indicated are just a rough guide and tasks may take longer. <br /> <br /> == Week 1: Introduction to Course ==<br /> <br /> * 30 minute introduction lecture<br /> * 15 minute intro to ImpVis lecture<br /> * 15 minute intro to using Gather Town and Miro boards <br /> * 30 minute ice breaker activity<br /> * 15 minute creating assessment criteria on menti<br /> * Homework: Fill out short form to help assign you to groups.<br /> <br /> == Week 2: Project Introduction ==<br /> <br /> * 30 minute lecture by Freddie with Q/A on design principles and Freddie's experience designing MOOC visualisations.<br /> * 10 minute lecture explaining group project work and how groups have been decided<br /> * 10 minute introduction with other team members on Gather Town<br /> * 20 minute topic discussion with group (Discuss when you can all meet and how you want to work together.)<br /> *20 minute lecture introducing you to the portfolio and self reflection you should do each week.<br /> *Homework: Research your topic to explain to your group next week.<br /> *Homework: Miro brainstorm in groups ideas for educational design.<br /> <br /> == Week 3: Educational Design ==<br /> <br /> * 30 minute lecture by subject expert + Q/A<br /> * 30 minute group activity where each team member tries to explain their topic to each other<br /> * 30 minute group discussion of the application of educational design ideas to their project<br /> * 15 minute updating of assessment criteria and tasks tree (and skills matrix if necessary)<br /> * Homework: Miro brainstorm ideas for graphical design in groups<br /> <br /> == Week 4: Graphical Design ==<br /> <br /> * 30 minute lecture by subject expert + Q/A<br /> * 30 minute group discussion of application of graphical design ideas to their project and what elements they will need<br /> * 10 minute updating the skills matrix/task tree and assessment criteria<br /> * Homework: Miro brainstorm ideas for interaction design in groups<br /> <br /> == Week 5: Interaction Design ==<br /> [[File:VisCritique.png|thumb|An example of how students should critique their chosen visualisation.]]<br /> * 30 minute lecture by subject expert + Q/A<br /> * 30 minute hands on test of different visualisations and how they deal with interaction<br /> * 30 minute group discussion of the application of interaction design ideas to their project<br /> * 10 minute update of assessment criteria and skills matrix/task tree<br /> * Homework: Annotate your favourite visualisation with what you do and don't like. <br /> <br /> == Week 6: Project work ==<br /> <br /> * 60 minute workshop session<br /> * 10 minute talk on project timeline<br /> * 20 minute discussion of skills matrix/task tree<br /> * 20 minute discussion of important aspects of design related to each strand (education, graphical, interaction)<br /> * 10 minute finalise assessment criteria for cohort and groups.<br /> * Homework: Group work<br /> <br /> <br /> <br /> '''Recommended project status'''<br /> [[File:Page1 Revised.png|thumb|A sketch of how the visualisation design should look in week 6.]]<br /> * Task tree mostly complete, individual tasks ready to be assigned<br /> * Personal Learning Goals complete (can be changed in the future)<br /> * Have a good idea of how your visualisation will look, what components, etc.<br /> * Adding info to wiki submission as you go along<br /> <br /> ==Week 7: Project work==<br /> <br /> *60 minute workshop session<br /> *20 minute lecture on how to give good feedback<br /> *30 minute rapid feedback session<br /> *10 minute update of assessment criteria and task tree/skills matrix<br /> *Homework: Group work<br /> <br /> <br /> '''Recommended project status'''<br /> [[File:Page1 Final.png|thumb|An example of a more polished visualisation design, which you should have in week 7.]]<br /> * Wiki submission should be up to date with group's progress<br /> * Design should be mostly complete, graphics made to whatever standard is possible with the timeframe and resources<br /> <br /> ==Week 8: Project work==<br /> <br /> *30 minute rapid feedback session<br /> *60-90 minute group discussion of project design<br /> *Homework: Group work<br /> <br /> ==Week 9: Project work==<br /> <br /> *30 minute rapid feedback session<br /> *30 minute lecture introducing the self assessment<br /> *Homework: Create a poster and upload miroboard link to GatherTown<br /> *Homework: Critique your own visualisation design based on the 3 design strands (same format as week 5)<br /> <br /> ==Week 10: Review==<br /> <br /> *60 minute GatherTown poster presentation (feel free to leave comments on other team's posters as feedback)<br /> *30 minute final wrap up lecture reflecting on what has been done, and explain impvis wiki. Introduce students to Code &amp; Crisps and give them the option to implement their designs.<br /> *Homework: Complete self assessment and reflection<br /> <br /> [[Category:iExplore Module]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=File:Page1_Final.png&diff=572 2021-09-16T10:57:04Z

<p>Admin: </p> <hr /> <div>An example of a more polished design, which you should have in week 7.</div>

Admin https://wiki.impvis.co.uk/index.php?title=File:Page1_Revised.png&diff=571 2021-09-16T10:55:30Z

<p>Admin: </p> <hr /> <div>A sketch of how the visualisation design should look in week 6.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Embedding_Miro_Boards&diff=568 2021-09-16T10:45:44Z

<p>Admin: Protected &quot;Embedding Miro Boards&quot; ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))</p> <hr /> <div>This page explains how to embed a Miro board in Gather Town.<br /> [[File:Export Icon.png|thumb|Export icon on Miro.]]<br /> <br /> # Go to your Miro board and click the export icon in the top left. <br /> # In the menu that opens, click on &quot;Embed&quot;.<br /> # Copy the link from the &quot;src&quot; section of the iframe html tag at the bottom of the page. [[File:MiroLink.png|thumb|The export link for Miro, circled in red.]]<br /> # In the top right of your Miro board click the &quot;Share&quot; button, and edit the settings as required.<br /> <br /> [[Category:iExplore Module]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Embedding_Miro_Boards&diff=567 2021-09-16T10:40:00Z

<p>Admin: </p> <hr /> <div>This page explains how to embed a Miro board in Gather Town.<br /> [[File:Export Icon.png|thumb|Export icon on Miro.]]<br /> <br /> # Go to your Miro board and click the export icon in the top left. <br /> # In the menu that opens, click on &quot;Embed&quot;.<br /> # Copy the link from the &quot;src&quot; section of the iframe html tag at the bottom of the page. [[File:MiroLink.png|thumb|The export link for Miro, circled in red.]]<br /> # In the top right of your Miro board click the &quot;Share&quot; button, and edit the settings as required.<br /> <br /> [[Category:iExplore Module]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Embedding_Miro_Boards&diff=566 2021-09-16T10:39:45Z

<p>Admin: Created page with &quot;This page explains how to embed a Miro board in Gather Town. Export icon on Miro. # Go to your Miro board and click the export icon in the top...&quot;</p> <hr /> <div>This page explains how to embed a Miro board in Gather Town.<br /> [[File:Export Icon.png|thumb|Export icon on Miro.]]<br /> <br /> # Go to your Miro board and click the export icon in the top left. <br /> # In the menu that opens, click on &quot;Embed&quot;.<br /> # Copy the link from the &quot;src&quot; section of the iframe html tag at the bottom of the page. [[File:MiroLink.png|thumb|The export link for Miro, circled in red.]]<br /> # In the top right of your Miro board click the &quot;Share&quot; button, and edit the settings as required.</div>

Admin https://wiki.impvis.co.uk/index.php?title=File:MiroLink.png&diff=563 2021-09-16T10:36:39Z

<p>Admin: </p> <hr /> <div>The export link for Miro, circled in red.</div>

Admin https://wiki.impvis.co.uk/index.php?title=File:Export_Icon.png&diff=561 2021-09-16T10:33:25Z

<p>Admin: </p> <hr /> <div>Export icon on Miro.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Module_Timetable&diff=560 2021-09-16T10:24:05Z

<p>Admin: </p> <hr /> <div>This rough timetable is intended as a guide only to help you understand the structure of the course and the progress you should be making by different points. You should additionally be updating your personal portfolio throughout the project. The times indicated are just a rough guide and tasks may take longer. <br /> <br /> == Week 1: Introduction to Course ==<br /> <br /> * 30 minute introduction lecture<br /> * 15 minute intro to ImpVis lecture<br /> * 15 minute into to using Gather Town and Miro boards<br /> * 30 minute ice breaker activity<br /> * 15 minute creating assessment criteria on menti<br /> * Homework: Fill out short form to help assign you to groups.<br /> <br /> == Week 2: Project Introduction ==<br /> <br /> * 30 minute lecture by Freddie with Q/A on design principles and Freddie's experience designing MOOC visualisations.<br /> * 10 minute lecture explaining group project work and how groups have been decided<br /> * 10 minute introduction with other team members on Gather Town<br /> * 20 minute topic discussion with group (Discuss when you can all meet and how you want to work together.)<br /> *20 minute lecture introducing you to the portfolio and self reflection you should do each week.<br /> *Homework: Research your topic to explain to your group next week.<br /> *Homework: Miro brainstorm in groups ideas for educational design.<br /> <br /> == Week 3: Educational Design ==<br /> <br /> * 30 minute lecture by subject expert + Q/A<br /> * 30 minute group activity where each team member tries to explain their topic to each other<br /> * 30 minute group discussion of the application of educational design ideas to their project<br /> * 15 minute creation of assessment criteria and tasks tree (or skills matrix)<br /> * Homework: Miro brainstorm ideas for graphical design in groups<br /> <br /> == Week 4: Graphical Design ==<br /> <br /> * 30 minute lecture by subject expert + Q/A<br /> * 30 minute group discussion of application of graphical design ideas to their project and what elements they will need<br /> * 10 minute updating the skills matrix/task tree and assessment criteria<br /> * Homework: Miro brainstorm ideas for interaction design in groups<br /> <br /> == Week 5: Interaction Design ==<br /> [[File:VisCritique.png|thumb|An example of how students should critique their chosen visualisation.]]<br /> * 30 minute lecture by subject expert + Q/A<br /> * 30 minute hands on test of different visualisations and how they deal with interaction<br /> * 30 minute group discussion of the application of interaction design ideas to their project<br /> * 10 minute update of assessment criteria and skills matrix/task tree<br /> * Homework: Annotate your favourite visualisation with what you do and don't like. <br /> <br /> == Week 6: Project work ==<br /> <br /> * 60 minute workshop session<br /> * 10 minute talk on project timeline<br /> * 20 minute discussion of skills matrix/task tree<br /> * 20 minute discussion of important aspects of design related to each strand (education, graphical, interaction)<br /> * 10 minute update of assessment criteria and task tree/skills matrix<br /> * Homework: Group work<br /> <br /> == Week 7: Project work ==<br /> <br /> * 60 minute workshop session <br /> * 20 minute lecture on how to give good feedback<br /> * 30 minute rapid feedback session<br /> * 10 minute update of assessment criteria and task tree/skills matrix<br /> * Homework: Group work<br /> <br /> == Week 8: Project work ==<br /> <br /> * 30 minute rapid feedback session<br /> * 60-90 minute group discussion of project design<br /> * Homework: Group work<br /> <br /> == Week 9: Project work ==<br /> <br /> * 30 minute rapid feedback session<br /> * 30 minute lecture introducing the self assessment<br /> * Homework: Create a poster and upload miroboard link to GatherTown<br /> * Homework: Critique your own visualisation design based on the 3 design strands (same format as week 5)<br /> <br /> == Week 10: Review ==<br /> <br /> * 60 minute GatherTown poster presentation (feel free to leave comments on other team's posters as feedback)<br /> * 30 minute final wrap up lecture reflecting on what has been done, and explain impvis wiki. Introduce students to Code &amp; Crisps and give them the option to implement their designs.<br /> * Homework: Complete self assessment and reflection<br /> <br /> [[Category:iExplore Module]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Module_Timetable&diff=558 2021-09-15T10:21:14Z

<p>Admin: Removed protection from &quot;Module Timetable&quot;</p> <hr /> <div>This rough timetable is intended as a guide only to help you understand the structure of the course and the progress you should be making by different points. You should additionally be updating your personal portfolio throughout the project.<br /> <br /> == Week 1: Introduction to Course ==<br /> <br /> * 30 minute introduction lecture<br /> * 15 minute intro to ImpVis lecture<br /> * 15 minute into to using Gather Town and Miro boards<br /> * 30 minute ice breaker activity<br /> * 15 minute creating assessment criteria on menti<br /> * Homework: Fill out short form to help assign you to groups.<br /> <br /> == Week 2: Project Introduction ==<br /> <br /> * 30 minute lecture by Freddie with Q/A on design principles and Freddie's experience designing MOOC visualisations.<br /> * 10 minute lecture explaining group project work and how groups have been decided<br /> * 10 minute introduction with other team members on Gather Town<br /> * 20 minute topic discussion with group (Discuss when you can all meet and how you want to work together.)<br /> *20 minute lecture introducing you to the portfolio and self reflection you should do each week.<br /> *Homework: Research your topic to explain to your group next week.<br /> *Homework: Miro brainstorm in groups ideas for educational design.<br /> <br /> == Week 3: Educational Design ==<br /> <br /> * 30 minute lecture by subject expert + Q/A<br /> * 30 minute group activity where each team member tries to explain their topic to each other<br /> * 30 minute group discussion of the application of educational design ideas to their project<br /> * 15 minute creation of assessment criteria and tasks tree (or skills matrix)<br /> * Homework: Miro brainstorm ideas for graphical design in groups<br /> <br /> == Week 4: Graphical Design ==<br /> <br /> * 30 minute lecture by subject expert + Q/A<br /> * 30 minute group discussion of application of graphical design ideas to their project and what elements they will need<br /> * 10 minute updating the skills matrix/task tree and assessment criteria<br /> * Homework: Miro brainstorm ideas for interaction design in groups<br /> <br /> == Week 5: Interaction Design ==<br /> [[File:VisCriticism.png|thumb|An example of how students should criticise their chosen visualisation.]]<br /> <br /> * 30 minute lecture by subject expert + Q/A<br /> * 30 minute hands on test of different visualisations and how they deal with interaction<br /> * 30 minute group discussion of the application of interaction design ideas to their project<br /> * 10 minute update of assessment criteria and skills matrix/task tree<br /> * Homework: Annotate your favourite visualisation with what you do and don't like. <br /> <br /> == Week 6: Project work ==<br /> <br /> * 60 minute workshop session<br /> * 10 minute talk on project timeline<br /> * 20 minute discussion of skills matrix/task tree<br /> * 20 minute discussion of important aspects of design related to each strand (education, graphical, interaction)<br /> * 10 minute update of assessment criteria and task tree/skills matrix<br /> * Homework: Group work<br /> <br /> == Week 7: Project work ==<br /> <br /> * 60 minute workshop session <br /> * 20 minute lecture on how to give good feedback<br /> * 30 minute rapid feedback session<br /> * 10 minute update of assessment criteria and task tree/skills matrix<br /> * Homework: Group work<br /> <br /> == Week 8: Project work ==<br /> <br /> * 30 minute rapid feedback session<br /> * 60-90 minute group discussion of project design<br /> * Homework: Group work<br /> <br /> == Week 9: Project work ==<br /> <br /> * 30 minute rapid feedback session<br /> * 30 minute lecture introducing the self assessment<br /> * Homework: Create a poster and upload miroboard link to GatherTown<br /> * Homework: Critique your own visualisation design based on the 3 design strands (same format as week 5)<br /> <br /> == Week 10: Review ==<br /> <br /> * 60 minute GatherTown poster presentation (feel free to leave comments on other team's posters as feedback)<br /> * 30 minute final wrap up lecture reflecting on what has been done, and explain impvis wiki. Introduce students to Code &amp; Crisps and give them the option to implement their designs.<br /> * Homework: Complete self assessment and reflection<br /> <br /> [[Category:iExplore Module]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=File:VisCritique.png&diff=557 2021-09-15T10:18:01Z

<p>Admin: </p> <hr /> <div>An example of how students should critique their chosen visualisation.</div>

Admin https://wiki.impvis.co.uk/index.php?title=File:VisCritique.png&diff=556 2021-09-15T10:17:41Z

<p>Admin: Admin moved page File:VisCriticism.png to File:VisCritique.png without leaving a redirect</p> <hr /> <div>An example of how students should criticise their chosen visualisation.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=554 2021-09-15T09:52:42Z

<p>Admin: </p> <hr /> <div>[[Category:Visualisation Designs]]<br /> == Introduction ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> ==== Assessment criteria ====<br /> i) Explain the key concepts of the problem through clear and engaging visualisations designed with a target audience in mind, using analogies where appropriate<br /> <br /> ii) Create a simple and intuitive design with clear consideration of accessibility issues<br /> <br /> iii) Clear design progression with justifications for choices<br /> <br /> == Visualisation Overview ==<br /> [[File:Solid Angles Page 1.png|thumb|The first page of the solid angles visualisation design.]]<br /> The first page has a circle showing the definition of an angle, which the students should be very familiar with. On the right hand side, is the three dimensional analogue with solid angles instead of a normal angle. The plot is 3D and made with plotly.js, users are able to pan, rotate and zoom to get a clear idea of what the picture is showing. The green lines in both plots represent the radii of the circle and sphere. As the arc length or area sliders are changed the plots will update to extend the arc length or shaded area in the respective plots. When the radii sliders are updated the radii of the sphere or circle will update in the plot above the slider only. The numbers in the equations will update as the sliders are changed.[[File:Solid Angles Page 2.png|left|thumb|The second page of the solid angles visualisation design.]]In the second page there are two plots which are intended to show the same scenario from different perspectives, as a result, adjusting any sliders will change both plots simultaneously. The plot on the left hand side is two dimensional and shows the view from the observer. The plot on the right hand side shows the three dimensional scenario, where the user can pan, resize and zoom to look around and get a full picture of what is going on. The position of the observer is shown as a person in the right hand side plot, along with their field of view which is shown as a semi-transparent cone. <br /> <br /> The third page shows static images to help improve understanding of how to apply the theory to questions. There is one more key equation to learn however no interactive diagrams are provided as they would not provide any benefit. Instead, the page has a toggle which would switch to display some example questions, along with buttons to show the solution. <br /> [[File:Solid Angles Page 3b.png|thumb|An example question on the third page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3a.png|center|thumb|The third page of the solid angles visualisation design.]]<br /> <br /> == Education Strand ==<br /> The 2D/3D comparison in the first page allows users to see that solid angles are just an extension of something they already know and boosts their confidence in their understanding. This use of analogy satisfies assessment criteria i). The equations for solid angle and angle are displayed and the values in these equations update dynamically with the plots, as the sliders are adjusted; this gives the students another perspective and helps clarify how solid angles work, addressing assessment criteria i).<br /> <br /> In the second page, the student’s intuition about solid angles is improved by showing how solid angles are related to the familiar concept of field of view. This again satisfies assessment criteria i) with the analogy to a familiar concept. Allowing the user to move the object in 3D space and see how the solid angle changes introduces the fact that solid angles are dependent on the dot product of the separation vector and the surface vector through an intuitive example, satisfying assessment criteria ii).<br /> <br /> Initially, we planned to add an additional section to page two where a flashlight was added and arbitrary shapes could be selected, however we decided that this would add too much complexity and potentially confuse the user so we removed this section. This progression of ideas towards a simplified design satisfies assessment criteria ii) and iii). We also moved from explicitly mentioning that 3D objects have a solid angle to simply using a 3D object in the visualisation and letting the students figure this out by playing around with it themselves since this will give them a more intuitive understanding; this satisfies assessment criteria ii) and iii). We decided to add a static diagram to page 2 which shows clearly how it is the projection of the object which gives the solid angle, as we thought that this effect may be too subtle to notice on the visualisation without prompting. This change towards a design with greater clarity satisfies assessment criteria i) and iii). <br /> <br /> The third page shows students how solid angles are relevant to integration and Gauss’s law should motivate how important solid angles are. The integration example also shows how solid angles can be reached using simple trigonometry which the students should be familiar with; this gives an introduction to solid angles from a different perspective, helping the students get a more well rounded understanding. This satisfies assessment criteria i). <br /> <br /> == Graphics Strand ==<br /> The design has used the Imperial Visualisation template due to its effective use of space along with appropriate positioning elements for the application. All of the interactive visualisations could be centred on the page as the main focus, with a clear information panel on the left to guide the user through the visualisation. This follows the Home Office Design recommendations for users with dyslexia, which could form a significant part of the target audience. Whilst there exist many other groups of users with various handicaps, catering to all of them would not be possible therefore efforts were focused on dyslexic users.<br /> <br /> For all diagrams where comparison was a key part in understanding, the graphics were displayed side by side horizontally. Whilst this limited the maximum size of the graphics, it allowed the user to more easily recognise similarities and differences; use of a toggle to switch between the images would potentially cause frustration when having to repeatedly change diagrams. The result was a more intuitive design in accordance with criteria ii).<br /> <br /> Colour coding the diagrams and sliders used would help to improve the user’s understanding, by improving comparison ability and highlighting key points of the images. On page one, the radius on both diagrams would have the same colour, whilst the arc length and surface area would also have their own colour. This highlights the similarity between the two concepts and aids the user in making this link. Similarly, the sliders corresponding to these variables also have the same respective colour; any use of the variable itself or its numerical value would also follow the same colour scheme as they are the key factors in the equation. <br /> <br /> Positioning of the elements on the main area of the visualisation required consideration of the intuitiveness of the design. The diagrams are placed in the most central position as they are the key focus, with their titles just above. The sliders and equation could have been placed in a toggled hotspot however as the focus of the page is to understand the key factors of solid angles, they are positioned directly below the diagrams. Equations relating the variables are situated below the sliders to simulate the natural flow of thought for the user, from the variables and their values to the equation and the result.<br /> <br /> Feedback noted the potential to improve the design by considering colourblind users when determining the colour scheme. [do research] Extensions for browsers exist which would automatically convert colours on a page to remove this issue. (&lt;nowiki&gt;https://addons.mozilla.org/en-GB/firefox/addon/axe-devtools/&lt;/nowiki&gt;).<br /> <br /> == Interactivity Strand ==<br /> Use of Sliders to adjust the parameters of the 2D and 3D figures [2D - arc length, radius; 3D - area, radius]. In page one the motivation behind using sliders apart from the ease of use was that it was best suited to assist the student to move on to the 3d figure once their intuition about the 2d structure was built (Familiarity would make the transition for the student simpler). In page 2, to adjust the x and z position in 2d and the object size in the 3d figure, sliders were implemented in the design keeping the user’s convenience the first priority.<br /> <br /> The camera angles on the 3d figures on page 1 and 2 can be adjusted using a trackpad or mouse which would help the student get a better understanding of solid angles after using the visualisation by aiding the development of intuition regarding the topic.<br /> <br /> Accessibility - The use of low contrast coloured sliders in a simple layout makes the visualisation accessible to a large audience. The parameters of the 2d and 3d figures can be adjusted using sliders that can be controlled via touch, mouse, trackpad as well as a keyboard which is another reason behind using sliders.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=553 2021-09-15T09:52:25Z

<p>Admin: </p> <hr /> <div>[[Category:Visualisation Designs]]<br /> == Introduction ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> ==== Assessment criteria ====<br /> i) Explain the key concepts of the problem through clear and engaging visualisations designed with a target audience in mind, using analogies where appropriate<br /> <br /> ii) Create a simple and intuitive design with clear consideration of accessibility issues<br /> <br /> iii) Clear design progression with justifications for choices<br /> <br /> == Visualisation Overview ==<br /> [[File:Solid Angles Page 1.png|thumb|The first page of the solid angles visualisation design.]]<br /> The first page has a circle showing the definition of an angle, which the students should be very familiar with. On the right hand side, is the three dimensional analogue with solid angles instead of a normal angle. The plot is 3D and made with plotly.js, users are able to pan, rotate and zoom to get a clear idea of what the picture is showing. The green lines in both plots represent the radii of the circle and sphere. As the arc length or area sliders are changed the plots will update to extend the arc length or shaded area in the respective plots. When the radii sliders are updated the radii of the sphere or circle will update in the plot above the slider only. The numbers in the equations will update as the sliders are changed.<br /> <br /> In the second page there are two plots which are intended to show the same scenario from different perspectives, as a result, adjusting any sliders will change both plots simultaneously. The plot on the left hand side is two dimensional and shows the view from the observer. The plot on the right hand side shows the three dimensional scenario, where the user can pan, resize and zoom to look around and get a full picture of what is going on. The position of the observer is shown as a person in the right hand side plot, along with their field of view which is shown as a semi-transparent cone. <br /> <br /> The third page shows static images to help improve understanding of how to apply the theory to questions. There is one more key equation to learn however no interactive diagrams are provided as they would not provide any benefit. Instead, the page has a toggle which would switch to display some example questions, along with buttons to show the solution. <br /> [[File:Solid Angles Page 2.png|left|thumb|The second page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3b.png|thumb|An example question on the third page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3a.png|center|thumb|The third page of the solid angles visualisation design.]]<br /> <br /> == Education Strand ==<br /> The 2D/3D comparison in the first page allows users to see that solid angles are just an extension of something they already know and boosts their confidence in their understanding. This use of analogy satisfies assessment criteria i). The equations for solid angle and angle are displayed and the values in these equations update dynamically with the plots, as the sliders are adjusted; this gives the students another perspective and helps clarify how solid angles work, addressing assessment criteria i).<br /> <br /> In the second page, the student’s intuition about solid angles is improved by showing how solid angles are related to the familiar concept of field of view. This again satisfies assessment criteria i) with the analogy to a familiar concept. Allowing the user to move the object in 3D space and see how the solid angle changes introduces the fact that solid angles are dependent on the dot product of the separation vector and the surface vector through an intuitive example, satisfying assessment criteria ii).<br /> <br /> Initially, we planned to add an additional section to page two where a flashlight was added and arbitrary shapes could be selected, however we decided that this would add too much complexity and potentially confuse the user so we removed this section. This progression of ideas towards a simplified design satisfies assessment criteria ii) and iii). We also moved from explicitly mentioning that 3D objects have a solid angle to simply using a 3D object in the visualisation and letting the students figure this out by playing around with it themselves since this will give them a more intuitive understanding; this satisfies assessment criteria ii) and iii). We decided to add a static diagram to page 2 which shows clearly how it is the projection of the object which gives the solid angle, as we thought that this effect may be too subtle to notice on the visualisation without prompting. This change towards a design with greater clarity satisfies assessment criteria i) and iii). <br /> <br /> The third page shows students how solid angles are relevant to integration and Gauss’s law should motivate how important solid angles are. The integration example also shows how solid angles can be reached using simple trigonometry which the students should be familiar with; this gives an introduction to solid angles from a different perspective, helping the students get a more well rounded understanding. This satisfies assessment criteria i). <br /> <br /> == Graphics Strand ==<br /> The design has used the Imperial Visualisation template due to its effective use of space along with appropriate positioning elements for the application. All of the interactive visualisations could be centred on the page as the main focus, with a clear information panel on the left to guide the user through the visualisation. This follows the Home Office Design recommendations for users with dyslexia, which could form a significant part of the target audience. Whilst there exist many other groups of users with various handicaps, catering to all of them would not be possible therefore efforts were focused on dyslexic users.<br /> <br /> For all diagrams where comparison was a key part in understanding, the graphics were displayed side by side horizontally. Whilst this limited the maximum size of the graphics, it allowed the user to more easily recognise similarities and differences; use of a toggle to switch between the images would potentially cause frustration when having to repeatedly change diagrams. The result was a more intuitive design in accordance with criteria ii).<br /> <br /> Colour coding the diagrams and sliders used would help to improve the user’s understanding, by improving comparison ability and highlighting key points of the images. On page one, the radius on both diagrams would have the same colour, whilst the arc length and surface area would also have their own colour. This highlights the similarity between the two concepts and aids the user in making this link. Similarly, the sliders corresponding to these variables also have the same respective colour; any use of the variable itself or its numerical value would also follow the same colour scheme as they are the key factors in the equation. <br /> <br /> Positioning of the elements on the main area of the visualisation required consideration of the intuitiveness of the design. The diagrams are placed in the most central position as they are the key focus, with their titles just above. The sliders and equation could have been placed in a toggled hotspot however as the focus of the page is to understand the key factors of solid angles, they are positioned directly below the diagrams. Equations relating the variables are situated below the sliders to simulate the natural flow of thought for the user, from the variables and their values to the equation and the result.<br /> <br /> Feedback noted the potential to improve the design by considering colourblind users when determining the colour scheme. [do research] Extensions for browsers exist which would automatically convert colours on a page to remove this issue. (&lt;nowiki&gt;https://addons.mozilla.org/en-GB/firefox/addon/axe-devtools/&lt;/nowiki&gt;).<br /> <br /> == Interactivity Strand ==<br /> Use of Sliders to adjust the parameters of the 2D and 3D figures [2D - arc length, radius; 3D - area, radius]. In page one the motivation behind using sliders apart from the ease of use was that it was best suited to assist the student to move on to the 3d figure once their intuition about the 2d structure was built (Familiarity would make the transition for the student simpler). In page 2, to adjust the x and z position in 2d and the object size in the 3d figure, sliders were implemented in the design keeping the user’s convenience the first priority.<br /> <br /> The camera angles on the 3d figures on page 1 and 2 can be adjusted using a trackpad or mouse which would help the student get a better understanding of solid angles after using the visualisation by aiding the development of intuition regarding the topic.<br /> <br /> Accessibility - The use of low contrast coloured sliders in a simple layout makes the visualisation accessible to a large audience. The parameters of the 2d and 3d figures can be adjusted using sliders that can be controlled via touch, mouse, trackpad as well as a keyboard which is another reason behind using sliders.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=550 2021-09-15T09:48:42Z

<p>Admin: </p> <hr /> <div>[[Category:Visualisation Designs]]<br /> == Introduction ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> ==== Assessment criteria ====<br /> i) Explain the key concepts of the problem through clear and engaging visualisations designed with a target audience in mind, using analogies where appropriate<br /> <br /> ii) Create a simple and intuitive design with clear consideration of accessibility issues<br /> <br /> iii) Clear design progression with justifications for choices<br /> <br /> == Visualisation Overview ==<br /> [[File:Solid Angles Page 1.png|thumb|The first page of the solid angles visualisation design.]]<br /> The first page has a circle showing the definition of an angle, which the students should be very familiar with. On the right hand side, is the three dimensional analogue with solid angles instead of a normal angle. The plot is 3D and made with plotly.js, users are able to pan, rotate and zoom to get a clear idea of what the picture is showing. The green lines in both plots represent the radii of the circle and sphere. As the arc length or area sliders are changed the plots will update to extend the arc length or shaded area in the respective plots. When the radii sliders are updated the radii of the sphere or circle will update in the plot above the slider only. The numbers in the equations will update as the sliders are changed.<br /> <br /> In the second page there are two plots which are intended to show the same scenario from different perspectives, as a result, adjusting any sliders will change both plots simultaneously. The plot on the left hand side is two dimensional and shows the view from the observer. The plot on the right hand side shows the three dimensional scenario, where the user can pan, resize and zoom to look around and get a full picture of what is going on. The position of the observer is shown as a person in the right hand side plot, along with their field of view which is shown as a semi-transparent cone. <br /> <br /> The third page shows static images to help improve understanding of how to apply the theory to questions. There is one more key equation to learn however no interactive diagrams are provided as they would not provide any benefit. Instead, the page has a toggle which would switch to display some example questions, along with buttons to show the solution. <br /> [[File:Solid Angles Page 3b.png|thumb|An example question on the third page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 2.png|left|thumb|The second page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3a.png|center|thumb|The third page of the solid angles visualisation design.]]<br /> <br /> == Education Strand ==<br /> The 2D/3D comparison in the first page allows users to see that solid angles are just an extension of something they already know and boosts their confidence in their understanding. This use of analogy satisfies assessment criteria i). The equations for solid angle and angle are displayed and the values in these equations update dynamically with the plots, as the sliders are adjusted; this gives the students another perspective and helps clarify how solid angles work, addressing assessment criteria i).<br /> <br /> In the second page, the student’s intuition about solid angles is improved by showing how solid angles are related to the familiar concept of field of view. This again satisfies assessment criteria i) with the analogy to a familiar concept. Allowing the user to move the object in 3D space and see how the solid angle changes introduces the fact that solid angles are dependent on the dot product of the separation vector and the surface vector through an intuitive example, satisfying assessment criteria ii).<br /> <br /> Initially, we planned to add an additional section to page two where a flashlight was added and arbitrary shapes could be selected, however we decided that this would add too much complexity and potentially confuse the user so we removed this section. This progression of ideas towards a simplified design satisfies assessment criteria ii) and iii). We also moved from explicitly mentioning that 3D objects have a solid angle to simply using a 3D object in the visualisation and letting the students figure this out by playing around with it themselves since this will give them a more intuitive understanding; this satisfies assessment criteria ii) and iii). We decided to add a static diagram to page 2 which shows clearly how it is the projection of the object which gives the solid angle, as we thought that this effect may be too subtle to notice on the visualisation without prompting. This change towards a design with greater clarity satisfies assessment criteria i) and iii). <br /> <br /> The third page shows students how solid angles are relevant to integration and Gauss’s law should motivate how important solid angles are. The integration example also shows how solid angles can be reached using simple trigonometry which the students should be familiar with; this gives an introduction to solid angles from a different perspective, helping the students get a more well rounded understanding. This satisfies assessment criteria i). <br /> <br /> == Graphics Strand ==<br /> The design has used the Imperial Visualisation template due to its effective use of space along with appropriate positioning elements for the application. All of the interactive visualisations could be centred on the page as the main focus, with a clear information panel on the left to guide the user through the visualisation. This follows the Home Office Design recommendations for users with dyslexia, which could form a significant part of the target audience. Whilst there exist many other groups of users with various handicaps, catering to all of them would not be possible therefore efforts were focused on dyslexic users.<br /> <br /> For all diagrams where comparison was a key part in understanding, the graphics were displayed side by side horizontally. Whilst this limited the maximum size of the graphics, it allowed the user to more easily recognise similarities and differences; use of a toggle to switch between the images would potentially cause frustration when having to repeatedly change diagrams. The result was a more intuitive design in accordance with criteria ii).<br /> <br /> Colour coding the diagrams and sliders used would help to improve the user’s understanding, by improving comparison ability and highlighting key points of the images. On page one, the radius on both diagrams would have the same colour, whilst the arc length and surface area would also have their own colour. This highlights the similarity between the two concepts and aids the user in making this link. Similarly, the sliders corresponding to these variables also have the same respective colour; any use of the variable itself or its numerical value would also follow the same colour scheme as they are the key factors in the equation. <br /> <br /> Positioning of the elements on the main area of the visualisation required consideration of the intuitiveness of the design. The diagrams are placed in the most central position as they are the key focus, with their titles just above. The sliders and equation could have been placed in a toggled hotspot however as the focus of the page is to understand the key factors of solid angles, they are positioned directly below the diagrams. Equations relating the variables are situated below the sliders to simulate the natural flow of thought for the user, from the variables and their values to the equation and the result.<br /> <br /> Feedback noted the potential to improve the design by considering colourblind users when determining the colour scheme. [do research] Extensions for browsers exist which would automatically convert colours on a page to remove this issue. (&lt;nowiki&gt;https://addons.mozilla.org/en-GB/firefox/addon/axe-devtools/&lt;/nowiki&gt;).<br /> <br /> == Interactivity Strand ==<br /> Use of Sliders to adjust the parameters of the 2D and 3D figures [2D - arc length, radius; 3D - area, radius]. In page one the motivation behind using sliders apart from the ease of use was that it was best suited to assist the student to move on to the 3d figure once their intuition about the 2d structure was built (Familiarity would make the transition for the student simpler). In page 2, to adjust the x and z position in 2d and the object size in the 3d figure, sliders were implemented in the design keeping the user’s convenience the first priority.<br /> <br /> The camera angles on the 3d figures on page 1 and 2 can be adjusted using a trackpad or mouse which would help the student get a better understanding of solid angles after using the visualisation by aiding the development of intuition regarding the topic.<br /> <br /> Accessibility - The use of low contrast coloured sliders in a simple layout makes the visualisation accessible to a large audience. The parameters of the 2d and 3d figures can be adjusted using sliders that can be controlled via touch, mouse, trackpad as well as a keyboard which is another reason behind using sliders.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=549 2021-09-15T09:47:50Z

<p>Admin: </p> <hr /> <div>[[Category:iExplore Module]]<br /> == Introduction ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> ==== Assessment criteria ====<br /> i) Explain the key concepts of the problem through clear and engaging visualisations designed with a target audience in mind, using analogies where appropriate<br /> <br /> ii) Create a simple and intuitive design with clear consideration of accessibility issues<br /> <br /> iii) Clear design progression with justifications for choices<br /> <br /> == Visualisation Overview ==<br /> [[File:Solid Angles Page 1.png|thumb|The first page of the solid angles visualisation design.]]<br /> The first page has a circle showing the definition of an angle, which the students should be very familiar with. On the right hand side, is the three dimensional analogue with solid angles instead of a normal angle. The plot is 3D and made with plotly.js, users are able to pan, rotate and zoom to get a clear idea of what the picture is showing. The green lines in both plots represent the radii of the circle and sphere. As the arc length or area sliders are changed the plots will update to extend the arc length or shaded area in the respective plots. When the radii sliders are updated the radii of the sphere or circle will update in the plot above the slider only. The numbers in the equations will update as the sliders are changed.<br /> <br /> In the second page there are two plots which are intended to show the same scenario from different perspectives, as a result, adjusting any sliders will change both plots simultaneously. The plot on the left hand side is two dimensional and shows the view from the observer. The plot on the right hand side shows the three dimensional scenario, where the user can pan, resize and zoom to look around and get a full picture of what is going on. The position of the observer is shown as a person in the right hand side plot, along with their field of view which is shown as a semi-transparent cone. <br /> <br /> The third page shows static images to help improve understanding of how to apply the theory to questions. There is one more key equation to learn however no interactive diagrams are provided as they would not provide any benefit. Instead, the page has a toggle which would switch to display some example questions, along with buttons to show the solution. <br /> [[File:Solid Angles Page 3b.png|thumb|An example question on the third page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 2.png|left|thumb|The second page of the solid angles visualisation design.]]<br /> [[File:Solid Angles Page 3a.png|center|thumb|The third page of the solid angles visualisation design.]]<br /> <br /> == Education Strand ==<br /> The 2D/3D comparison in the first page allows users to see that solid angles are just an extension of something they already know and boosts their confidence in their understanding. This use of analogy satisfies assessment criteria i). The equations for solid angle and angle are displayed and the values in these equations update dynamically with the plots, as the sliders are adjusted; this gives the students another perspective and helps clarify how solid angles work, addressing assessment criteria i).<br /> <br /> In the second page, the student’s intuition about solid angles is improved by showing how solid angles are related to the familiar concept of field of view. This again satisfies assessment criteria i) with the analogy to a familiar concept. Allowing the user to move the object in 3D space and see how the solid angle changes introduces the fact that solid angles are dependent on the dot product of the separation vector and the surface vector through an intuitive example, satisfying assessment criteria ii).<br /> <br /> Initially, we planned to add an additional section to page two where a flashlight was added and arbitrary shapes could be selected, however we decided that this would add too much complexity and potentially confuse the user so we removed this section. This progression of ideas towards a simplified design satisfies assessment criteria ii) and iii). We also moved from explicitly mentioning that 3D objects have a solid angle to simply using a 3D object in the visualisation and letting the students figure this out by playing around with it themselves since this will give them a more intuitive understanding; this satisfies assessment criteria ii) and iii). We decided to add a static diagram to page 2 which shows clearly how it is the projection of the object which gives the solid angle, as we thought that this effect may be too subtle to notice on the visualisation without prompting. This change towards a design with greater clarity satisfies assessment criteria i) and iii). <br /> <br /> The third page shows students how solid angles are relevant to integration and Gauss’s law should motivate how important solid angles are. The integration example also shows how solid angles can be reached using simple trigonometry which the students should be familiar with; this gives an introduction to solid angles from a different perspective, helping the students get a more well rounded understanding. This satisfies assessment criteria i). <br /> <br /> == Graphics Strand ==<br /> The design has used the Imperial Visualisation template due to its effective use of space along with appropriate positioning elements for the application. All of the interactive visualisations could be centred on the page as the main focus, with a clear information panel on the left to guide the user through the visualisation. This follows the Home Office Design recommendations for users with dyslexia, which could form a significant part of the target audience. Whilst there exist many other groups of users with various handicaps, catering to all of them would not be possible therefore efforts were focused on dyslexic users.<br /> <br /> For all diagrams where comparison was a key part in understanding, the graphics were displayed side by side horizontally. Whilst this limited the maximum size of the graphics, it allowed the user to more easily recognise similarities and differences; use of a toggle to switch between the images would potentially cause frustration when having to repeatedly change diagrams. The result was a more intuitive design in accordance with criteria ii).<br /> <br /> Colour coding the diagrams and sliders used would help to improve the user’s understanding, by improving comparison ability and highlighting key points of the images. On page one, the radius on both diagrams would have the same colour, whilst the arc length and surface area would also have their own colour. This highlights the similarity between the two concepts and aids the user in making this link. Similarly, the sliders corresponding to these variables also have the same respective colour; any use of the variable itself or its numerical value would also follow the same colour scheme as they are the key factors in the equation. <br /> <br /> Positioning of the elements on the main area of the visualisation required consideration of the intuitiveness of the design. The diagrams are placed in the most central position as they are the key focus, with their titles just above. The sliders and equation could have been placed in a toggled hotspot however as the focus of the page is to understand the key factors of solid angles, they are positioned directly below the diagrams. Equations relating the variables are situated below the sliders to simulate the natural flow of thought for the user, from the variables and their values to the equation and the result.<br /> <br /> Feedback noted the potential to improve the design by considering colourblind users when determining the colour scheme. [do research] Extensions for browsers exist which would automatically convert colours on a page to remove this issue. (&lt;nowiki&gt;https://addons.mozilla.org/en-GB/firefox/addon/axe-devtools/&lt;/nowiki&gt;).<br /> <br /> == Interactivity Strand ==<br /> Use of Sliders to adjust the parameters of the 2D and 3D figures [2D - arc length, radius; 3D - area, radius]. In page one the motivation behind using sliders apart from the ease of use was that it was best suited to assist the student to move on to the 3d figure once their intuition about the 2d structure was built (Familiarity would make the transition for the student simpler). In page 2, to adjust the x and z position in 2d and the object size in the 3d figure, sliders were implemented in the design keeping the user’s convenience the first priority.<br /> <br /> The camera angles on the 3d figures on page 1 and 2 can be adjusted using a trackpad or mouse which would help the student get a better understanding of solid angles after using the visualisation by aiding the development of intuition regarding the topic.<br /> <br /> Accessibility - The use of low contrast coloured sliders in a simple layout makes the visualisation accessible to a large audience. The parameters of the 2d and 3d figures can be adjusted using sliders that can be controlled via touch, mouse, trackpad as well as a keyboard which is another reason behind using sliders.</div>

Admin https://wiki.impvis.co.uk/index.php?title=File:Solid_Angles_Page_3b.png&diff=548 2021-09-15T09:44:06Z

<p>Admin: </p> <hr /> <div>An example question on the third page of the solid angles visualisation design.</div>

Admin https://wiki.impvis.co.uk/index.php?title=File:Solid_Angles_Page_3a.png&diff=547 2021-09-15T09:42:54Z

<p>Admin: </p> <hr /> <div>The third page of the solid angles visualisation design.</div>

Admin https://wiki.impvis.co.uk/index.php?title=File:Solid_Angles_Page_2.png&diff=546 2021-09-15T09:41:09Z

<p>Admin: </p> <hr /> <div>The second page of the solid angles visualisation design.</div>

Admin https://wiki.impvis.co.uk/index.php?title=File:Solid_Angles_Page_1.png&diff=545 2021-09-15T09:39:25Z

<p>Admin: </p> <hr /> <div>The first page of the solid angles visualisation design.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Solid_Angles_Design&diff=544 2021-09-15T09:37:23Z

<p>Admin: Created page with &quot;Category:iExplore Module This is a template which you can use to help get you started on the wiki submission. It is just intended as a guide and you may modify the structu...&quot;</p> <hr /> <div>[[Category:iExplore Module]]<br /> This is a template which you can use to help get you started on the wiki submission. It is just intended as a guide and you may modify the structure to suit your project.<br /> <br /> == Introduction ==<br /> <br /> Solid angles are the 3D variant of a normal angle, commonly associated with the field of view of an observer. In physics, this topic is typically taught with a focus on its uses in Gauss’ law. Whilst the actual concept is not complex, the topic is not covered in as much detail as other areas, due to a lack of time and resources. Whilst resources exist online to improve their understanding, the time required to research and find suitable sources would be better spent on more difficult and vital concepts. For this reason, a visualisation has been designed to improve the conceptual understanding of solid angles along with its applications.<br /> <br /> == Visualisation Overview ==<br /> <br /> * What the final outcome was, how it looks, how it functions etc.<br /> * Include graphics.<br /> * Do not include justification or design progression, leave this for later sections.<br /> <br /> == Education Strand ==<br /> <br /> * What Methods were considered to convey concepts?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Graphics Strand ==<br /> <br /> * How were accessibility issues considered?<br /> * How was space used effectively?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Interactivity Strand ==<br /> <br /> * How is the design intuitive?<br /> *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).<br /> *Keeping accessibility of interactive elements in mind during design phase.<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Category:Maintaining_ImpVis&diff=540 2021-09-10T16:26:33Z

<p>Admin: </p> <hr /> <div>Pages here cover tasks required to keep ImpVis functioning and up to date.<br /> <br /> [[Category:Development Process]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Category:ImpVis_Components&diff=538 2021-09-10T16:25:15Z

<p>Admin: </p> <hr /> <div>Documentation for all of the ImpVis Vue.js components. <br /> <br /> ImpVis has its own front-end library, which can be found on the [https://github.com/Imperial-visualizations/Vue-Components Imperial Visualisations Github]. It provides a standardised set of components for educators &amp; students to create powerful interactive educational visualisations. This page serves as the main page to navigate to the documentation of the components, which are categorised into the broader themes:<br /> <br /> * [[Dropdowns]]<br /> <br /> * [[:Category:Buttons|Buttons]]<br /> <br /> *[[Loading tools]]<br /> <br /> *[[Navigation]]<br /> <br /> *[[Sliders]]<br /> <br /> *[[:Category:Toggles|Toggles]]<br /> <br /> *[[:Category:Layouts|Layouts]]<br /> <br /> *[[Hover Text]] <br /> <br /> *[[Tickbox]]<br /> <br /> [https://wiki.impvis.co.uk/index.php?title=Editing_ImpVis_Components How to edit the ImpVis components] <br /> <br /> [[Category:Development Process]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Wiki_Submission_Template&diff=537 2021-09-10T12:26:42Z

<p>Admin: </p> <hr /> <div>[[Category:iExplore Module]]<br /> This is a template which you can use to help get you started on the wiki submission. It is just intended as a guide and you may modify the structure to suit your project.<br /> <br /> == Introduction ==<br /> <br /> * Explain the motivation for your visualisation.<br /> * Introduce the subject of your visualisation.<br /> * List and explain your assessment criteria. You may want to number the assessment criteria so you can refer to them easily later.<br /> <br /> == Visualisation Overview ==<br /> <br /> * What the final outcome was, how it looks, how it functions etc.<br /> * Include graphics.<br /> * Do not include justification or design progression, leave this for later sections.<br /> <br /> == Education Strand ==<br /> <br /> * What Methods were considered to convey concepts?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Graphics Strand ==<br /> <br /> * How were accessibility issues considered?<br /> * How was space used effectively?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Interactivity Strand ==<br /> <br /> * How is the design intuitive?<br /> *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).<br /> *Keeping accessibility of interactive elements in mind during design phase.<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Wiki_Submission_Template&diff=536 2021-09-10T10:21:18Z

<p>Admin: </p> <hr /> <div>[[Category:iExplore Module]]<br /> <br /> == Introduction ==<br /> <br /> * Explain the motivation for your visualisation.<br /> * Introduce the subject of your visualisation.<br /> * List and explain your assessment criteria. You may want to number the assessment criteria so you can refer to them easily later.<br /> <br /> == Visualisation Overview ==<br /> <br /> * What the final outcome was, how it looks, how it functions etc.<br /> * Include graphics.<br /> * Do not include justification or design progression, leave this for later sections.<br /> <br /> == Education Strand ==<br /> <br /> * What Methods were considered to convey concepts?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Graphics Strand ==<br /> <br /> * How were accessibility issues considered?<br /> * How was space used effectively?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Interactivity Strand ==<br /> <br /> * How is the design intuitive?<br /> *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).<br /> *Keeping accessibility of interactive elements in mind during design phase.<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Wiki_Submission_Template&diff=535 2021-09-10T10:02:41Z

<p>Admin: </p> <hr /> <div>[[Category:iExplore Module]]<br /> <br /> == Introduction ==<br /> <br /> * Explain the motivation for your visualisation.<br /> * Introduce the subject of your visualisation.<br /> * List and explain your assessment criteria.<br /> <br /> == Visualisation Overview ==<br /> <br /> * What the final outcome was, how it looks, how it functions etc.<br /> * Include graphics.<br /> * Do not include justification or design progression, leave this for later sections.<br /> <br /> == Education Strand ==<br /> <br /> * What Methods were considered to convey concepts?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Graphics Strand ==<br /> <br /> * How were accessibility issues considered?<br /> * How was space used effectively?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.<br /> <br /> == Interactivity Strand ==<br /> <br /> * How is the design intuitive?<br /> * Design progression, key choices with justifications.<br /> * How has feedback been incorporated.</div>

Admin https://wiki.impvis.co.uk/index.php?title=Wiki_Submission_Template&diff=534 2021-09-10T09:46:48Z

<p>Admin: Created page with &quot;Category:iExplore Module&quot;</p> <hr /> <div>[[Category:iExplore Module]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Main_Page&diff=533 2021-09-10T09:46:27Z

<p>Admin: </p> <hr /> <div>== Navigate Categories ==<br /> <br /> &lt;categorytree mode=&quot;pages&quot;&gt;Everything&lt;/categorytree&gt;<br /> <br /> == iExplore Module ==<br /> <br /> * [[Module Timetable]]<br /> *[[Example Design Project]]<br /> *[[Example Self Assessment]]<br /> *[[Example Portfolio]]<br /> *[[Wiki Submission Template]]<br /> *[[Tasks Tree]]<br /> *[[Assessment Criteria]]<br /> <br /> == Wiki Divisions ==<br /> <br /> * [[Blackboard]]<br /> * [[Visualisations]]<br /> * [[Knowledge]]<br /> <br /> == Summer 2021==<br /> *[[Tech Team Final Documentation]]<br /> *[[Module Team Design Sprint]]<br /> *[[ImpVis wiki status quo summer 2021]]<br /> *[[ImpVis Website]]<br /> *[[Module status quo July 2021]]<br /> <br /> ==Getting started==<br /> Consult the [[mediawikiwiki:Special:MyLanguage/Help:Contents|User's Guide]] for information on using the wiki software.<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:Configuration_settings|Configuration settings list]]<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:FAQ|MediaWiki FAQ]]<br /> *[https://lists.wikimedia.org/mailman/listinfo/mediawiki-announce MediaWiki release mailing list]<br /> *[[mediawikiwiki:Special:MyLanguage/Localisation#Translation_resources|Localise MediaWiki for your language]]<br /> *[[mediawikiwiki:Special:MyLanguage/Manual:Combating_spam|Learn how to combat spam on your wiki]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=Module_status_quo_July_2021&diff=532 2021-09-09T10:54:42Z

<p>Admin: </p> <hr /> <div>Status Quo Document, July 2021 <br /> <br /> In this document, we survey the current state of the module design project and identify key areas that still need to be worked on. This document is split up into three themes: general, activities, and assessments.  <br /> <br /> Each section starts with an overview table listing the sub-tasks (essentially open questions), status (either not started, in progress, or done), and comments (explaining what actions have been or need to be taken). The summary then gives a bird eye view of the section.  <br /> <br /> Each section ends with detailed discussions on each of the sub-tasks (detailed discussion should include links to current work on the sub-task, an explanation of those links, and list of todo that need to be done). The sections should be written with sufficient detail such that any person can use this document to pick up the project.  <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Table of contents:&lt;/span&gt;<br /> &lt;categorytree mode=&quot;pages&quot;&gt;Everything&lt;/categorytree&gt;<br /> <br /> == General ==<br /> This section includes discussion on the module specification, guest lecturers, and technology.  <br /> {| class=&quot;wikitable&quot;<br /> |Sub-task <br /> |Status <br /> |Comments <br /> |-<br /> |Module specification <br /> |Done <br /> |<br /> * Submitted for review by Caroline <br /> |-<br /> |Guest lecturers <br /> |In progress <br /> |<br /> * Main lecturers invited, response from 2  <br /> * Yet to invite specialism workshop lecturers  <br /> |-<br /> |Staff-partners <br /> |In progress <br /> |<br /> * Some contacted, most yet to be decided  <br /> |-<br /> |Teaching platform <br /> |In progress <br /> |<br /> * Have thought about gather.town space requirements <br /> * Initial draft space made and tested with different features <br /> |-<br /> |Submission platform <br /> |In progress <br /> |<br /> * Decided to use wiki + Miro  <br /> * Yet to try sharepoint as assignment submission platform  <br /> |}<br /> <br /> <br /> '''Summary''' <br /> <br /> Overall, all tasks in this category are in progress. The module specification is done and should be approved soon. We have sent out invites for guest lecturers, however the ones for the specialism workshops have not been sent. We have a few candidates for staff-partners but have not formally confirmed any. Finally, the technology platforms are basically decided (and if they are not, it is not super important, e.g. where module materials are going to be hosted).  <br /> <br /> Moving forward, we need to finalize the list of guest lecturers and find a list of 5-6 staff-partners who have a project and are willing to mentor students. The gather.town space also needs to be designed such that it facilitates the activities we have planned.  <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Details&lt;/span&gt;<br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Module Specification &lt;/span&gt;<br /> <br /> * Final module spec location: &lt;nowiki&gt;https://imperiallondon.sharepoint.com/:w:/r/sites/ImpVis2020-EQ/Shared%20Documents/Summer%20project%2021%20-%20STEMM%20module%20team/Module%20Specification%20Revised.docx?d=wd43b4dd4fa8645e794e039d2bd93f1d9&amp;csf=1&amp;web=1&amp;e=06VuHk&lt;/nowiki&gt;  <br /> * Submitted for review, awaiting final approval <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Guest Lecturers&lt;/span&gt;<br /> <br /> * Main lecturers: invited <br /> <br /> * Education: Juan ~ <br /> * Graphical: Tracey ~ <br /> * Interactive: Bob √ <br /> * General: Freddie √ <br /> <br /> * Specialism workshops: not yet invited  <br /> <br /> * See miro board for status: &lt;nowiki&gt;https://miro.com/app/board/o9J_l6ZdCjY=/&lt;/nowiki&gt; <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Todo&lt;/span&gt;  <br /> <br /> * Decide on who to invite for specialism workshops  <br /> * Communicate on topic of lectures to design activities for that day  <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Staff-partners&lt;/span&gt;  <br /> <br /> * Caroline invited people in MBBS  <br /> * Rest not yet invited or decided  <br /> * See miro board for potential invites: &lt;nowiki&gt;https://miro.com/app/board/o9J_l6ZdCjY=/&lt;/nowiki&gt; <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Todo&lt;/span&gt; <br /> <br /> * Create table to track progress of invites  <br /> <br /> * Find 5-6 staff-partners  <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Teaching Platform&lt;/span&gt;<br /> <br /> * Draft space (on a free plan): &lt;nowiki&gt;https://gather.town/app/yctcFVqJTSDJ7jMU/Design%20Sprint&lt;/nowiki&gt; <br /> * Miro board for planning: &lt;nowiki&gt;https://miro.com/app/board/o9J_l6Cy4vM=/&lt;/nowiki&gt; <br /> * Teams will be used for main information as will automatically have all students <br /> <br /> * Will have a main room for initial teaching, although this may take place on teams, to be decided fully <br /> * We want round tables if possible, but might need square to fit correct numbers <br /> * Want individual group rooms for each team which will depend on the number of students/number of groups we have, each as a private space <br /> * Colour coded rooms to make it easy to direct people <br /> * Can use spotlight square/mode to e.g. call back groups to main room <br /> <br /> * Can show a video to a group in a synchronous way with a start time if a guest lecturer were to record a video <br /> * Can have 1:1 private spaces for rapid feedback sessions <br /> * Will have a conference-style poster space with final designs embedded in poster boards, will need to colour code these posters in the same way as the group rooms for consistency and create a private space around each with enough room for a few people at a time <br /> * Final account (with paid plan if needed) to be made and then final space constructed in this <br /> * On a paid plan, can have iCal integration for sessions if wanted <br /> <br /> * Need to remember to add in the impassable squares so that people can’t just walk around anywhere as walls don’t initially do this, as well as the private spaces <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;To-do:&lt;/span&gt; <br /> <br /> * Create gather.town space with features detailed above <br /> * Decide on integration/use alongside Teams <br /> * Get the correct paid plan for use and number of students <br /> <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Submission platform &lt;/span&gt;<br /> <br /> * Options for submission platform: sharepoint, blackboard, wiki…  <br /> <br /> * Most likely will use Sharepoint within teams  <br /> * Flexible, as students will work in wiki + Miro + pdf  <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Todo  &lt;/span&gt;<br /> <br /> * Try out Sharepoint assignment submission  <br /> * Try out creating page in wiki  <br /> * Page Break <br /> <br /> == Activities ==<br /> This section includes discussion on the planning for the activities for each week with emphasis on the time distribution for the activities and how complete the activity materials are.  <br /> {| class=&quot;wikitable&quot;<br /> |Sub-task <br /> |Status <br /> |Comments <br /> |-<br /> |Macro-design <br /> |Done <br /> |<br /> * General topic for each week decided  <br /> * Decided to move project introduction to W2 of module  <br /> |-<br /> |Module Introduction [W1] <br /> |In-progress <br /> |<br /> * Decided on icebreaker - List of random question and each person answers one or introduces themselves <br /> |-<br /> |Introduction to Groups and Projects [W2] <br /> |In-progress <br /> |<br /> * Students introduce themselves after they are assigned project groups and a staff partner <br /> * Preliminary discussion of the topic with staff partner <br /> * Skills matrix introduction  <br /> |-<br /> |Individual design strand lectures [W3-W5] <br /> |In-progress <br /> |<br /> * Q/A after 30-minute guest lecture <br /> * Design strand specific group discussions for each of the 3 weeks <br /> * Exchange of ideas within group on the general term <br /> * Updating Skills Matrix <br /> * Asynchronous Activity [W5] - Critique visualisation of choice based on the three strands of design <br /> |-<br /> |Specialism Workshops + Project [W6-W7] <br /> |In-progress <br /> |<br /> * 4 specialism workshops (2 per week) [Presentation + Q/A] <br /> * Discussions on project with group and staff partner <br /> * Pending – Finalize activities during/post specialism workshop after discussion with lecturer conducting that specific workshop <br /> |-<br /> |Project Presentation + Final Review [W8-W10] <br /> |In-progress <br /> |<br /> * Complete project design and present to panel of judges <br /> * Asynchronous Activity [W10] (for Portfolio) - Students critique their own visualisations based on the three strands of design as done in W5  <br /> |}<br /> <br /> <br /> '''Summary''' <br /> <br /> We have a very solid overall plan as to the topic of each week of the module. In addition, we have completed more detailed hour by hour plan for each week. Furthermore, we have multiple guest lecturers who we have invited and are waiting for a reply on. <br /> <br /> However, the activities board is not finalised and there are multiple ideas for the activities to do on each day. To move forward, we need to do a week-by-week discussion on which activities are necessary to do in-class, which activities specifically target the ILOs, and how long the activities will actually take. Furthermore, the activities for now are general pointers and ideas, not yet written up as a document that can be given to a TA or instructor. Finally, a lot more work needs to be done to consider how to scaffold the project design process. Or if it isn’t going to be scaffolded, guidance needs to be written up for the instructor/TA for how to guide the project creation within the groups.  <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Details &lt;/span&gt;<br /> <br /> Course Structure and Activities - &lt;nowiki&gt;https://miro.com/app/board/o9J_l8ecJCk=/&lt;/nowiki&gt; [Course Activities, Course Flow v5] <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Macro-design &lt;/span&gt;<br /> <br /> * General topic for each week and outline of course decided   <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;To-do:&lt;/span&gt; Consider time constraint that might arise and star-mark activities that might need to be done Asynchronously if time runs out <br /> <br /> Module Introduction [W1]   <br /> <br /> * Introduce course  <br /> * what will happen each week <br /> * course aim <br /> * course submission <br /> * Assessment <br /> * Icebreaker <br /> * list of random questions, each person answers one or introduce yourself one by one <br /> * Introduce related tools <br /> * Introduce to ImpVis <br /> * Introduce how to use Miro <br /> * Introduce how to use Gather town <br /> * Cianne: creating assessment criteria + Menti Exercise <br /> * Asynchronous Activity  <br /> * Students fill out preference forms by W2 so that they can be assigned to project groups <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Still uncertain:&lt;/span&gt;<br /> <br /> * Form of Icebreaker <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Introduction to Groups and Projects [W2]   &lt;/span&gt;<br /> <br /> * Freddie’s lecture – Holistic overview of designing interactive visualisations, his experience with working on MOOC visualisations and his own projects <br /> * Portfolio explanation <br /> * Show group division and how to communicate <br /> * Introduce self in group <br /> * Discuss their topic <br /> * asynchronous activity <br /> * students research their topic to explain to the group next week <br /> <br />  <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Individual design strand lectures [W3-W5]   &lt;/span&gt;<br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;W3 - Educational design &lt;/span&gt;<br /> <br /> * Before Week 3 <br /> * Miro brainstorm in groups ideas about educational design strand <br /> * Expert Talk  <br /> * Experts Talk (Presenter: Juan Nunez) <br /> * Q/A after 30-minute guest lecture  <br /> * Workshop <br /> * each member of group tries to explain their topic to each other <br /> * group discussion of application of educational design ideas to their project <br /> * Cianne: creating assessment criteria + skills matrix skills <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;W4 - Graphical design &lt;/span&gt;<br /> <br /> * Before Week 4 <br /> * Miro brainstorm in groups ideas about Graphical design strand <br /> * Expert Talk  <br /> * Experts Talk (Presenter: XXX) <br /> * Q/A after 30-minute guest lecture  <br /> * Workshop <br /> * group discussion of application of graphical design ideas to their project and what elements they will need <br /> * Cianne: creating assessment criteria + skills matrix skills <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;W5: Interaction design &lt;/span&gt;<br /> <br /> * Before Week 5 <br /> * Miro brainstorm in groups ideas about Interaction design strand <br /> * Expert Talk  <br /> * Experts Talk (Presenter: Bob Spence) <br /> * Q/A after 30-minute guest lecture  <br /> * Workshop <br /> * students try out different methods of interaction (through links to different visualisations) <br /> * group discussion of application of interaction design ideas to their project <br /> * Cianne: creating assessment criteria + skills matrix skills <br /> * asynchronous activity <br /> * Miro - critique your favourite vis based on the three design strands <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Still uncertain: &lt;/span&gt;<br /> <br /> * How much time we need for creating assessment criteria + skills matrix skills <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Specialism Workshops + Project [W6-W7]   &lt;/span&gt;<br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;W6-project &lt;/span&gt;<br /> <br /> * Workshop (experts give topic or lecturer set) <br /> * Group Skills matrix discussion <br /> * Group discussion: What are the important aspects for the design related to each strand? <br /> * give students a timeline for their project <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Still uncertain: &lt;/span&gt;<br /> <br /> * When the timeline will be delivered and content <br /> * Experts give topic or lecturer set <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Pending&lt;/span&gt; – Finalize activities during/post specialism workshop after discussion with lecturer conducting that specific workshop <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;W7-project &lt;/span&gt;<br /> <br /> * Workshop (experts give topic or lecturer set) <br /> <br /> * Introduce how to give good feedback <br /> * Rapid Feedback Sessions <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Still uncertain: &lt;/span&gt;<br /> <br /> * Workshop form <br /> * How to get Rapid Feedback Sessions <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Pending&lt;/span&gt; – Finalize activities during/post specialism workshop after discussion with lecturer conducting that specific workshop <br /> <br /> Project Presentation + Final Review [W8-W10]  <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;W8-project &lt;/span&gt;<br /> <br /> * Rapid Feedback Sessions <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Still uncertain: &lt;/span&gt;<br /> <br /> * How to get Rapid Feedback Sessions <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;W9-review &lt;/span&gt;<br /> <br /> * Rapid Feedback Sessions <br /> * introduction to self-assessment <br /> * Asynchronous -&gt; Critique your own visualisation - Three strands of design [template similar to the exercise in W5] (As part of the student’s portfolio) <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;W10-final review &lt;/span&gt;<br /> <br /> * Poster in public place of gather town. Teams are free to leave comments to other teams (might serve as encouragement) <br /> * Final Wrap up - Reflect on what they've done for 10W + ImpVis Wiki an if students want to join code &amp; crisps to implement design <br /> * Asynchronous activity - fill out self-assessment/ reflection<br /> <br /> == Assessments   ==<br /> This section includes discussion on the three assessments and related items (such as the design of the assessment criteria and skills matrix, though there is some overlap with the activities section).  <br /> {| class=&quot;wikitable&quot;<br /> |Sub-task <br /> |Status <br /> |Comments <br /> |-<br /> |Assessment criteria  <br /> |Done <br /> |<br /> * Assessment criteria for design project will be completed by students in class  <br /> * Timeline for producing the criteria has been created <br /> * Some more specific details of how the in-class discussion will work might be needed <br /> |-<br /> |Design project <br /> |In progress <br /> |<br /> * Tried design sprint <br /> * Need to decide on how to scaffold design process  <br /> |-<br /> |Self-assessment <br /> |In progress <br /> |<br /> * Meetings with staff in charge of the Imperial Award and Change Makers programmes have given ideas <br /> * Specific template / structure needs deciding  <br /> |-<br /> |Portfolio <br /> |In progress <br /> |<br /> * There are thoughts about what should be included <br /> * Specific structure needs to be considered further <br /> |-<br /> |Feedback <br /> |Done <br /> |<br /> * Not a direct assessment <br /> * Ideas of how students can give useful feedback <br /> * Will always be possible to add more examples/more detail to this if there is time, but can be used as is <br /> |-<br /> |Skills Matrix <br /> |In progress <br /> |<br /> * Timeline for producing the skills matrix in class has been created and skills that should be included have been considered <br /> * Decisions on template to use and skills to include need finalising <br /> |}<br /> <br /> <br /> '''Summary''' <br /> <br /> Overall, we have made great strides in improving the original three assessments. In particular, we have changed the structure to include external-, instructor-, and student-led assessment to give the student more agency. Furthermore, we switched to assessing a whole portfolio that allows the student to better show their learning versus only the final product. In the process, we have a clear idea for how to do feedback and through the design sprint have an idea for the requirements of the final design project submission. <br /> <br /> However, a number of key questions have yet to be answered. In particular, we have not yet tried the entire process for creating the assessment criteria. We have not done a proper run through of creating and refining the skills matrix. We have not created an exemplar design project. And we have not decided the format or content of the portfolio. These tasks are important to see how much we have to scaffold these activities and to test how the process will actually work with a group of students.  <br /> <br /> Moving forward, we need to find time (most likely in September) to try out each of the assessments. From there, we can decide whether to tweak timings of the sessions and what materials we still need to develop.  <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Details &lt;/span&gt;<br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Assessment Criteria &lt;/span&gt;<br /> <br /> * Students will co-create the assessment criteria with the module lead in class through a combination of small group discussion, in-class discussion, and Menti submissions – time has been allocated for this in weeks 1-6 - the proposed plan is on Assessment Criteria and Skills Matrix, Online Whiteboard for Visual Collaboration (miro.com) (The specific weeks listed have been adjusted due to moving the formation of project groups to week 2 instead of week 5) <br /> * No specific assessment criteria have been created as this will be done in class – this will be led by Caroline  <br /> * Some more thought might need to be given to how to structure the in-class discussions  <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;To-do: &lt;/span&gt;<br /> <br /> * Ensure assessment criteria creation has been incorporated into course structure &amp; activities timeline (Course Structure and Activities, Online Whiteboard for Visual Collaboration (miro.com)) <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Design Project &lt;/span&gt;<br /> <br /> * Design sprint:  <br /> <br /> * For the design created, see &lt;nowiki&gt;https://miro.com/app/board/o9J_l6BMMjQ=/&lt;/nowiki&gt; <br /> * For comments on the process, see homebase miro board, heading “Design sprint observations”  <br /> <br /> * Initial planning for formatting final design: &lt;nowiki&gt;https://miro.com/app/board/o9J_l5-ymT8=/&lt;/nowiki&gt; <br /> * Interactive elements for students to test and use: &lt;nowiki&gt;https://impvis.co.uk/launch/impvis-layouts-v2/page1.html?collection=39&lt;/nowiki&gt; <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Todo &lt;/span&gt;<br /> <br /> * Decide how to scaffold the design process <br /> <br /> * E.g. give prompts for the students to think about or ideas for how to do effective brainstorming  <br /> <br /> * Finalise guidelines for the submission of the final design  <br /> * Create example project of a “good” submission  <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Self-assessment &lt;/span&gt;<br /> <br /> * Meetings with staff involved in the Imperial Award and Change Makers programmes have given ideas about how to create a good self-assessment format – notes from these meetings are on Assessment Criteria and Skills Matrix, Online Whiteboard for Visual Collaboration (miro.com) under the ‘self-assessment brainstorm’ and ‘self-assessment comments’ sections <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;To-do: &lt;/span&gt;<br /> <br /> * Compile ideas to determine final plan for how self-assessment will be structured <br /> * Decide on the template, if any, that will be given to students  <br /> * Decide on the time allocated, either in-class or asynchronously, for students to complete it <br /> <br /> * Decide on how much introduction / guidance will be given to students about how to complete a good self-assessment in class  <br /> * Incorporate the self-assessment plan into the course structure &amp; activities timeline (Course Structure and Activities, Online Whiteboard for Visual Collaboration (miro.com)) <br /> <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Portfolio &lt;/span&gt;<br /> <br /> * Will be via a Miro board for each student <br /> <br /> * Used for the self-assessment/reflection as well as being a record of what they did during the project and their learning journey <br /> * Some example templates that could be used, but will give a lot of freedom <br /> * Will need to give areas on the Miro board for each activity <br /> * Would be nice to use a timeline type structure for their learning journey to help with their self-reflection at the end <br /> * A to-do list created at the start of each week and then reviewed before the next week could be useful for tracking what has been done <br /> <br /> * Plan so far: &lt;nowiki&gt;https://miro.com/app/board/o9J_l6YC4ic=/&lt;/nowiki&gt; <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;To-do: &lt;/span&gt;<br /> <br /> * Create structured Miro board for portfolio <br /> * Create spaces for individual weeks/activities <br /> * Create areas for linking to group project work <br /> <br /> * Create an area for self-reflection with some limitations/guidance so that people don’t go over the top/not give enough (e.g. specific locked frame size, text size, space to review their own design) <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Feedback &lt;/span&gt;<br /> <br /> * Focus on reviewing rather than feedback to fit with ImpVis procedure <br /> * Using a traffic light system (RAG) for priority of points <br /> * Focusing on points being Specific, Formative and Rich, which are detailed in the word doc <br /> <br /> * Examples of traffic light review systems have been found, but there will always be room for more, especially in biology/medicine (there are more on physics/engineering right now) <br /> * Could add more detail about the ImpVis review process, maybe with screenshots if there is time, but not necessary <br /> * Some templates have been created, some more creative than others, to make use of these methods and give choice to suit different kinds of learners, found on the Miro board <br /> * Tested cloning Miro boards and annotating pdfs as well as access/editing permissions: &lt;nowiki&gt;https://miro.com/app/board/o9J_l7CTGkk=/&lt;/nowiki&gt; <br /> * Word doc detailing good review practices and giving examples: &lt;nowiki&gt;https://imperiallondon.sharepoint.com/:w:/s/ImpVis2020-EQ/Ef-dKtgL9UBKh-OI5uZIqUkBXiloOJbtGp5w-G7zZ33n5g?e=YrCbIf&lt;/nowiki&gt; <br /> <br /> * Miro board with plan for final word doc (above) and feedback templates: &lt;nowiki&gt;https://miro.com/app/board/o9J_l6p-lcw=/&lt;/nowiki&gt; <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;To-do: &lt;/span&gt;<br /> <br /> * Create Miro boards for students to review designs at time of use <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;Skills Matrix &lt;/span&gt;<br /> <br /> * The broad skills matrix will be filled in by students in-class, then students will add to this in their project groups to create a project-specific skills matrix  <br /> <br /> * Students will use the project-specific skills matrix to set personal learning goals for the project  <br /> * The purpose of the skills matrix is to allow students to identify what skills their group requires, what skills each group member already has, and what skills each group member will work to develop during the project <br /> * A timeline for producing the skills matrix in weeks 1-6 has been created on Assessment Criteria and Skills Matrix, Online Whiteboard for Visual Collaboration (miro.com) (The specific weeks listed have been adjusted due to moving the group formation from week 5 to week 2) <br /> * An example skills matrix was created in the design sprint to trial the process - Solid Angles Design Sprint, Online Whiteboard for Visual Collaboration (miro.com)  <br /> * Observations of the process of creating the skills matrix can be found on Homebase, Online Whiteboard for Visual Collaboration (miro.com) <br /> <br /> &lt;span style=&quot;color:blue&quot;&gt;To-do: &lt;/span&gt;<br /> <br /> * Decide on if there are any specific skills that need to be included, or whether this will be done completely in class <br /> * Determine the final template to be used (most competency matrixes seem quite similar so lots of examples online) <br /> * Some consideration might need to be given to how in-class discussions will be structured <br /> * Ensure skills matrix production plan is incorporated into course structure &amp; activities timeline (Course Structure and Activities, Online Whiteboard for Visual Collaboration (miro.com))<br /> <br /> [[Category:Summer 2021]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=ImpVis_Website&diff=531 2021-09-09T10:54:30Z

<p>Admin: </p> <hr /> <div>step-by-step guides of:<br /> <br /> - How to upload. *Not written yet*<br /> <br /> - How to update (incl. crediting authors) *Not written yet* (perhaps [[Upgrading Visualisation's Templates]] is relevant?)<br /> <br /> is relevant) - How to create a collection *Not written yet*<br /> <br /> <br /> Some relevant links: <br /> <br /> - How to [[review]]<br /> <br /> - [[The ImpVis Visual Identity - Ethos]]<br /> <br /> - [[Tutorial for setting up the coding environment]]<br /> <br /> - [[The visualisation development cycle]]<br /> <br /> <br /> <br /> Explanation of:<br /> <br /> - Learn, teach, code environments *Not written yet*<br /> <br /> <br /> GitHub: <br /> <br /> [[Getting connected on Github]] <br /> <br /> - ImpVis user (link to ImpVis GitHub: https://github.com/Imperial-visualizations)<br /> <br /> - Reflects every latest upload of vis on the website<br /> <br /> - When you upload a new vis, a repo is created and the dist folder is pushed, together with a zip folder of the src folder.<br /> <br /> - When you update a vis, any changes are pushed to the repo. So what is there is always the latest upload (not the latest approved or published version).<br /> <br /> - If you want to specifically download a previous version, you need to do that via the website (you will need developer or reviewer permissions to the vis). Go to versions --&gt; press the download button alongside the version you are looking for.<br /> <br /> <br /> [[Category:Summer 2021]]</div>

Admin https://wiki.impvis.co.uk/index.php?title=ImpVis_wiki_status_quo_summer_2021&diff=530 2021-09-09T10:54:20Z

<p>Admin: </p> <hr /> <div>On this page, everything with regards to the current (July 2021) state of the wiki will be stated; this includes things that have been accomplished, ideas that have been discussed but not yet implemented, and any other miscellaneous information regarding the wiki.<br /> <br /> == Implementation == <br /> The ImpVis wiki is implemented through MediaWiki, which is both free and open-source. This decision was made after considering using the already existing organisation structure on the ImpVis website, as well as other free and paid Wiki services. Some of the later discussions regarding the choice of MediaWiki being made can be found at https://docs.google.com/document/d/1Ly28aOzML8BRNvKjWHGtVKnsYemzcqmx2wLbCt7bdJc.<br /> <br /> <br /> == Structure == <br /> <br /> Currently the Wiki is divided into two main &quot;departments&quot; through the main page - those under &quot;Wiki Divisions&quot; on the main page, and those that are not. Everything on the wiki should be able to be found through following relevant links from the main page. The Wiki Divisions sub-title is the intended location for where everything will be housed within the Wiki eventually. Currently, Wiki Divisions is split into the three titles &quot;Blackboard&quot;, &quot;Visualisations&quot;, and &quot;Knowledge&quot;.<br /> <br /> The Blackboard section is intended to house all of the information that people taking the module need to see, and is intended to act as a homebase link for them to be able to refer to whenever looking for information with regards to the course. The Visualisation section is intended to be tied to visualisations that are visible on the website (whether this means only visualisations that are complete, or both that as well as designs submitted from the module is up for decision). As of the time of writing, no visualisations have been posted or tagged to this section yet. &quot;Knowledge&quot; is intended to hold all knowledge that people have found useful in the creation process of a visualisation. This can be at any stage from design, right through to project completion. For example, &quot;How to contact an academic professional&quot;, &quot;Things to consider when using discrete sliders&quot;, or &quot;How this awkward to use function works&quot; would all be found under the knowledge division of the wiki. <br /> <br /> The &quot;Impvis website&quot; wiki page has been linked through the Blackboard division of the wiki (links to [[ImpVis Website]]). Relevant links that exist for the page already posted on, but content not yet filled out (needs writing).<br /> <br /> == Tutorial ==<br /> <br /> The 2020 tutorial document has had all of its content worked into the wiki, with some minor modifications and additions. These pages can be found spread between the Blackboard and Knowledge divisions of the wiki. It must be noted that a lot of content has been copy and pasted in from the tutorial - a lot of improvements in writing to fit the context of being in the wiki need now to be made. In the tutorial there were some individual pages that had content missing/that needed expanding on anyway. The only page of real concern that we might not be able to write to though is the modal content written in red on this page: https://wiki.impvis.co.uk/index.php?title=Components_and_Vue_additional_comments. Outside of this, all content I've seen that's missing shouldn't require particular expertise to fill out (but they still do need filling out!). There is no &quot;new&quot; tutorial document as such; the pages are now just placed in the relevant places on the wiki (and shouldn't be difficult to find).<br /> <br /> == Permissions == <br /> Robert Jones currently has the highest permission privileges out of students remaining into Autumn 2021. Cianne Park has edit permissions, as do some students who were part of the &quot;tech team&quot; in summer 2021. Not all of these students have admin privileges however. <br /> <br /> There are 3 main user groups: <br /> <br /> * Autoconfirmed users <br /> * Writers <br /> * Administrators <br /> <br /> Autoconfirmed users have permissions to read all pages, but edit none. (All new users are members of this group) <br /> <br /> Writers have permissions to read all pages and edit all unprotected pages. (New pages are unprotected by default) <br /> <br /> Administrators have permissions to read and edit all pages. <br /> <br /> It is advised to make structural pages protected so that writers can not edit them. <br /> <br /> It is expected that students on the iExplore module will be given writer permissions. <br /> == Unfinished == <br /> Discussions regarding setting up the permission structure (hierarchy of bureaucrats) to easily allow staff/students taking part in the module have been had, but not cleared up (no decisions were made). <br /> <br /> No visualisations have yet been tagged to the Visualisations division of the wiki. I suggest the first one that this could be done/trialed with would be Shahbanno's demo visualisation which shows off the components. <br /> <br /> Missing content: Welcome to ImpVis (in the context of the module, not the summer team or code and crisps).<br /> <br /> General tidyup of most wiki pages is needed at this point; <br /> <br /> Images on https://wiki.impvis.co.uk/index.php?title=Getting_connected_on_Github not sorted yet; need a conversation about the copyright for uploading screenshots of npm (might not be an issue at all). The images of concern are from the page https://impvis.co.uk/launch/impvis-tutorial-unpublished/page_10.html.<br /> <br /> Need to set up categories so that https://wiki.impvis.co.uk/index.php?title=Special%3AAllPages works properly.<br /> <br /> [[Category:Summer 2021]]</div>

Admin