Difference between revisions of "Knowledgebase"

From ImpVis Wiki
Jump to navigation Jump to search
 
(55 intermediate revisions by the same user not shown)
Line 1: Line 1:
This page is a child of the [http://109.153.210.84/index.php/Main_Page Main Impvis Wiki Page].
This is the ImpVis knowledge base; it contains all of the information ImpVis has accumulated as a community in order to design and develop effective interactive visualisations for education.  
This is the ImpVis knowledge base; it contains all of the information ImpVis has accumulated as a community in order to design and develop effective interactive visualisations for education.  


Line 5: Line 4:


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


Browsing projects & managing project
# Read a brief overview of [[our design and development process]] (ensure to take the first step: connecting with our community).
# Find out how to [[Getting involved|get involved]] with a visualisation project.
# Understand what it means to [[Working in partnership|work in partnership]].


Development process overview
You can follow the links in the pages above to find out more information. Below are listed all the pages in the 'Getting Started' category in alphabetical order.<categorytree mode="pages">Getting Started
</categorytree>


Opportunities to work together
==Visualisation design guidance==
To create an interactive visualisation for education, you will need to consider the design of your visualisation carefully from several angles. The ImpVis template implements some of our ideas so that you do not need to design your visualisation entirely from scratch. Suggested steps to follow:
# Carefully phrase the visualisation's aim, learning outcomes, and intended implementation. Read [[Scaffolding concepts]] for guidance. Document these in your own project's Wiki page. If you haven't yet created your own project Wiki page, do so now by copying the [[Wiki Template for new project|template Wiki]] and filling in the sections. Have a look at [[Solid Angles Design|this example]] of a finalised design.
# Familiarise yourself with the [https://impvis.co.uk/launch/impvis-layouts-v2/page1.html?collection=39 ImpVis visualisation template] (hosted on the ImpVis website) so you understand how it can support your visualisation design and read the [[ImpVis template description|description of the ImpVis template]].
#Check out the [[Organising content]] page to consider how to populate the visualisation template with your own visualisation's content.
#Decide on what the visualisation will look like and how it will work. Peruse the design guidance documents listed below to help you. 
#Insert a design sketch, including the visual and interactive elements of the visualisation, in your visualisation's dedicated Wiki project page. Explain the rationale of your decisions.
#Once all staff partners are happy with the design, they need to formally confirm their agreement on the website to move their project to the development stage (read [[Managing your project on the ImpVis website#Changing the progress status of your project|here]] about how to do this).
 
Below we list all our design guidance documents alphabetically, split up into three different categories: education, graphic, and interaction design. Note that we have only just started collating our experience in this section, so it is sparsely populated - we aim to incorporate all knowledge generated by the ImpVis module students in this Wiki going forward.<categorytree mode="pages">Design Guidance
</categorytree>
 
== Guidance for coding up visualisations==


==Visualisation design guidance==
'''Before you start coding, ensure the visualisation design is well documented on your Wiki project page and all partners have agreed on the design!''' If you haven't done this yet, revisit [[Our design and development process#Visualisation design based on aims and learning outcomes|the steps to take in the design process]] to find out how to do this.


*[[The visualisation development cycle]]
The sections below contain technical guidance to support you with the coding side of ImpVis.
*[[The ImpVis Visual Identity - Ethos]]
*[[Designing a visualisation]]


*[[ Education focused design]]
=== Setting up===
*[[Graphical and Artistic design]]
When starting coding, these are the suggested steps to follow:
*[[Technical design and coding choices]]


==Guidance for coding up visualisations==  
# [[Programming languages|Read about our programming languages]] and where to find some training resources.
# [[Tutorial for setting up the coding environment|Follow this tutorial]] to set up your coding environment.
#[[Getting connected on Github|Learn]] about getting started on GitHub.
All our pages with guidance for setting up are listed below in alphabetical order.<categorytree mode="pages">Setting Up</categorytree>
===The ImpVis visualisations template===
Here you can find information about the ImpVis template created in 2020, using vue.js. You should already have familiarised yourself with the ImpVis template during the design phase. However, before you proceed with the coding, make sure you have an in-depth understanding of the template and its components, including how to include the components in your code. Suggested steps to take:


The link below has technical content on how to get started with the coding side of ImpVis.
# See the template in action here: [https://impvis.co.uk/launch/impvis-layouts-v2/page1.html?collection=39 ImpVis template].
# Read the [[ImpVis template description]].
#Follow the [[Basic Component Tutorial|basic tutorial]] on how to include components in your code and/or take the [[introduction to Vue workshop]].
# Find technical documentation on all ImpVis [[Vue Components|Vue components]].


=== Setting up ===
Below are all our guidance pages for the ImpVis and the associated components, in alphabetical order.<categorytree mode="pages">ImpVis Template


* Training
</categorytree>
===The coding process===
Look here for tips and help on issues that may come up while you're coding. Here are some pages to get your started:


* [[Tutorial for setting up the coding environment]]
# [[Structuring your code]]
# [[Help on HTML, CSS, JS and JS libraries]]
#[[JavaScript packages for graphics|Javascript packages for graphics]]
#[[Introduction to Vue workshop]]
#[[Tips for the developer]]


* [[Getting connected on Github]]
All our coding tips pages are listed alphabetically below.<categorytree mode="pages">Tips Whilst Coding
</categorytree>
==Review and publication of your visualisation==
When you have completed coding up your visualisation, it is time to upload it to the ImpVis website. It will then need to be reviewed before it can be published in 'Teach' environment. You should also create a Collection so your intended learners will easily be able to access your visualisation. Suggested reading:


*[[Common errors and how to handle them]]
# [[Uploading a new visualisation]]
===The Visualisations template===
# [[Managing your visualisation]]
# The [[review]] process
# The [[Visualisation status|status]] of your visualisation
# [[Uploading a new version of your visualisation]]
# [[Creating a Collection]]
# [[Managing your Collection]]


*[[Vue Components]]
You can find all pages related to the ImpVis website functionality in the [[Knowledgebase#Website guidance|relevant section below]].


*[[2019 style template]]
== Maintaining ImpVis ==
Maintaining ImpVis involves moving old visualisations to the new template, updating or creating new components, improving the ImpVis CLI, etc.


*[[2017-2018 style template]]
Below are listed all the pages in this category in alphabetical order.<categorytree mode="pages">Maintaining ImpVis


=== The coding process ===
</categorytree>
Look here for tips and help on issues that may come up while you're coding.
== Website guidance ==
*[[Functionality guide]]
Everything about the functionality on the website and its design. Relevant pages listed in alphabetical order below.<categorytree mode="pages">ImpVis Website Guidance
*[[Help on HTML, CSS, JS and JS libraries]]
*[[Debugging and Console]]
*[[Components and Vue additional comments]]
*[[Legacy content]]
*[[Extra comments for the developer]]
*[[Vis template skeleton content]]


*[[Design choices skeleton content]]


"
</categorytree>
*[[Skeleton topic 3]]
[[Category:Everything]]
==Review and publication of your visualisation==
*Uploading
*[[Review]]
*Versioning
*Creating a collection

Latest revision as of 12:32, 16 February 2022

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

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

Getting started

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

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

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

Visualisation design guidance

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

  1. Carefully phrase the visualisation's aim, learning outcomes, and intended implementation. Read Scaffolding concepts for guidance. Document these in your own project's Wiki page. If you haven't yet created your own project Wiki page, do so now by copying the template Wiki and filling in the sections. Have a look at this example of a finalised design.
  2. Familiarise yourself with the ImpVis visualisation template (hosted on the ImpVis website) so you understand how it can support your visualisation design and read the description of the ImpVis template.
  3. Check out the Organising content page to consider how to populate the visualisation template with your own visualisation's content.
  4. Decide on what the visualisation will look like and how it will work. Peruse the design guidance documents listed below to help you.
  5. Insert a design sketch, including the visual and interactive elements of the visualisation, in your visualisation's dedicated Wiki project page. Explain the rationale of your decisions.
  6. Once all staff partners are happy with the design, they need to formally confirm their agreement on the website to move their project to the development stage (read here about how to do this).

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

Guidance for coding up visualisations

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

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

Setting up

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

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

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

The ImpVis visualisations template

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

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

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

The coding process

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

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

All our coding tips pages are listed alphabetically below.

Review and publication of your visualisation

When you have completed coding up your visualisation, it is time to upload it to the ImpVis website. It will then need to be reviewed before it can be published in 'Teach' environment. You should also create a Collection so your intended learners will easily be able to access your visualisation. Suggested reading:

  1. Uploading a new visualisation
  2. Managing your visualisation
  3. The review process
  4. The status of your visualisation
  5. Uploading a new version of your visualisation
  6. Creating a Collection
  7. Managing your Collection

You can find all pages related to the ImpVis website functionality in the relevant section below.

Maintaining ImpVis

Maintaining ImpVis involves moving old visualisations to the new template, updating or creating new components, improving the ImpVis CLI, etc.

Below are listed all the pages in this category in alphabetical order.

Website guidance

Everything about the functionality on the website and its design. Relevant pages listed in alphabetical order below.