Quantitative PCR - Revision history

Cclewley at 13:23, 9 February 2022

2022-02-09T13:23:17Z

← Older revision		Revision as of 13:23, 9 February 2022
Line 104:		Line 104:
	*''Link to Collection on ImpVis website (when created):''		*''Link to Collection on ImpVis website (when created):''
	*https://miro.com/app/board/o9J_lpvA2AE=/?invite_link_id=762082753954		*https://miro.com/app/board/o9J_lpvA2AE=/?invite_link_id=762082753954
	[[Category:~~Visualisation~~ Project ~~Pages~~]]		[[Category:Project pages]]

JaroslawCiba: Deleted Note

2021-12-13T15:53:38Z

Deleted Note

← Older revision		Revision as of 15:53, 13 December 2021
Line 99:		Line 99:
	*The design is not finalised, with the DNA production and qPCR graph subsections not completed.		*The design is not finalised, with the DNA production and qPCR graph subsections not completed.
	*Including a home page with an introduction was suggested by our peers, and could be a good starting point for the visualisation.		*Including a home page with an introduction was suggested by our peers, and could be a good starting point for the visualisation.
	'''IMPORTANT:''' This wiki page is still a work in progress. While the overall structure is unlikely to change, certain elements have not been completely filled in yet, including the different aspects of design justification (above section).
	==Links==		==Links==
	*''Link to GitHub repository for code in development:''		*''Link to GitHub repository for code in development:''

JaroslawCiba: Interaction Design and Others

2021-12-13T15:50:37Z

Interaction Design and Others

Show changes

JaroslawCiba: Education and Design Justifications Done

2021-12-13T15:05:46Z

Education and Design Justifications Done

← Older revision		Revision as of 15:05, 13 December 2021
Line 64:		Line 64:

	===Education Design===		===Education Design===
	*Diagrams - easy to read - convey a lot of information in understandable sections - can use lots of colour and make certain areas stand out		*Diagrams - easy to read - convey a lot of information in understandable sections - can use lots of colour and make certain areas stand out.

	* Decided to remove the text box and go with diagrams with small bitesize amounts of information		* Decided to remove the text box and go with diagrams with small bitesize amounts of information.
			*At the end of each section, we want to include a question testing the learner's knowledge - a mastery learning approach. These are included for the finished sections of the design. They are short questions, as was agreed with our staff partners in discussion.
	*~~Use~~ of ~~imperial colour scheme (dark blue yellows~~, ~~whites) high contrast colours so easy~~ to ~~see and clear~~ and ~~suggested by peers during initial peer reviews~~ of ~~initial draft design~~		*The visualisation uses a scaffolding approach, where concepts are built upon through the entire visualisation. We first cover PCR, the technique built upon by qPCR, followed by looking at specific qPCR methods. In the next section, the result of these procedures, a qPCR graph, is discussed in more detail. Its shape is first described in the basics section, followed by methods needed to analyse it. We then finally introduce the factors affecting the Ct value in the graph one by one, before giving the user full access to an interactive graph with all the introduced complexity available (control of starting amount and the effect of a drug).
	===Graphical Design===		===Graphical Design===
	*Most spaces are filled with custom made diagrams with captions to explain the different elements involved.		*Most spaces are filled with custom made diagrams with captions to explain the different elements involved.
	*Diagrams are designed or borrowed from biorender.com		*Diagrams are designed or borrowed from biorender.com
	*Pages have a side section explaining concepts in text and a graphical panel on the right		*Pages have a side section explaining concepts in text and a graphical panel on the right.
	*~~Taqman Probe Design~~ ~~- The body~~ of ~~the probe was made in a style consistent with previous visuals - sharp angles, no rounding, mostly~~ straight lines. - ~~Lemon yellow (#FFDD00) used for~~ the ~~body~~ of the ~~probe~~, ~~from~~ the ~~Imperial palette~~. ~~Differentiates the probe from other elements;different~~ colour ~~from thermal cycles elements;~~ - ~~Quencher~~. ~~Completely passive element~~, ~~so grey~~ used to ~~not~~ stand out. ~~Different greys from~~ the Imperial palette ~~looked at~~, ~~and finally settled on dark grey~~ (#~~373A36~~). ~~Light grey~~ a ~~bit difficult to see against the background, whilst dark grey simply looks better than cool grey~~. ~~- The fluorescent probe emits green light; Imperials dark green~~ used ~~to show that~~ the ~~probe is inactive~~. ~~When probe is detached off taqman, fluorescene starts. The greens featured~~ on the ~~Imperial colour palette not deemed suitable~~. ~~A more vibrant light green~~ used (#~~66ff0a~~) ~~after playing around~~ with the ~~colours~~.		*Use of imperial colour scheme (dark blue yellows, whites) high contrast colours so easy to see and clear and suggested by peers during initial peer reviews of initial draft design.

			==== PCR and qPCR Reagants ====

			===== ''DNA Strands'' =====

			* Chose a simple design made of straight lines. A lot of abstraction is allowed, as learners focus is on understanding PCR/qPCR - they already have brilliant grasps on the structure of DNA and other reagants, so do not need the detail. For example, the double helix of structure of DNA is simply reduced to straight lines with bases connecting them. Bases in uniform colour too - we do not need to match complementary bases, learners are more than aware of it. We instead use different colours to signfify areas of interest on the strands.
			* Specifically, a simple green (#00FF00) was used to indicate area where the primer attaches, making it stand out. Later, this was changed to Imperials Teal for consistency with the Imperial palette and for contrast with SYBR green, reserving green for fluorescence.
			* Different colours for DNA were trialled, with black (#000000) eventually chosen for simplicity.
			* The thickness of strands was also played around with. Very thin and very thick designs both look awful, and a midrange thickness was chosen.
			* Rounded caps are used at the ends of the strands as they do look better.

			===== ''Primers'' =====

			* Settled on red for contrasting against the green of area of interest on DNA strands.
			* Imperials Red used (#DD2501) in final design, for consistency with the Imperial palette. This still contrasts the teal areas of interest well.

			===== ''Polymerase'' =====

	* ~~SYBR Green Design - An inactive and active version exist; when attached~~ to ~~dsDNA~~, ~~the dye is active~~. ~~Inactive otherwise. This~~ is ~~simply shown via colour change. - Inactive version uses cool grey. Dark grey would have been used, however as this was already used for~~ the ~~quencher~~, ~~we do not want to confuse~~ the ~~learner, so different~~ colour ~~chosen. - Active version features the same lime green that Taqman~~ used, to indicate ~~fluorescence consistently between the two. Note: Perhaps will switch cool grey and dark grey~~, as ~~cool grey actually looks better when taqman probe is attached to strands~~.		* Polymerase simplified to a rounded rectangle, with two ellipses, similar to some designs in research.
			* The rectangle is orange from the imperial palette (#D24000), whilst the ellipses are tangerine (#EC7300). The darker colour is used to indicate depth, as the elliptical components of the polymerase "wrap" around a strand.

	~~[[File:Side 3 4.png\|thumb\|More slides of the revised visualization]]~~		===== ''Taqman Probe - Body'' =====

	* ~~DNA Strands - Chose for~~ a ~~simple design made of straight lines. A lot of abstraction is allowed, as learners focus is on understanding PCR/qPCR~~ - ~~they already have brilliant grasps on the structure of DNA and other reagants~~, ~~so do not need the detail. - For example~~, ~~the double helix of structure of DNA is simply reduced to~~ straight lines ~~with bases connecting them~~. Bases in uniform colour too - we do not need to match complementary bases, learners are more than aware of it! We instead use different colours to signfify areas of interest on the strands. Specifically, a simple green (~~0,255,0~~) ~~was~~ used ~~to indicate area where~~ the ~~primer attaches, making it stand out. Later~~, ~~this was changed to Imperials Teal for consistency with~~ the Imperial palette ~~and for contrast with SYBR green, reserving green for fluorescence~~. - Different colours for DNA were trialled, with black eventually chosen for simplicity. - The thickness of strands was also played around with. Very thin and very thick designs both look awful, and a midrange thickness was chosen. - Rounded caps are used at the ~~ends of the strands as they do look better~~.		* The body of the probe was made in a style consistent with previous visuals - sharp angles, no rounding, mostly straight lines.
			* Lemon yellow (#FFDD00) used for the body of the probe, from the Imperial palette. Differentiates the probe from other elements;different colour from thermal cycles elements.

	*Polymerase - Polymerase simplified to a rounded rectangle, with two ellipses, similar to some designs in research. - The rectangle is orange from the imperial palette (#D24000), whilst the ellipses are tangerine (#EC7300). The darker colour is used to indicate depth, as the elliptical components of the polymerase "wrap" around a strand.
	*Primer - Settled on red for contrasting against the green of area of interest on DNA strands. - Imperials Red used (#DD2501) in final design, for consistency with the Imperial palette.
	~~[[File:VD1.png\|thumb\|Design of probe and SYBR Green]]~~
	[[File:VD2.png\|thumb\|Comparison of old and improved design.]]		[[File:VD2.png\|thumb\|Comparison of old and improved design.]]

			===== ''Taqman Probe - Quencher and Fluorescent Probe'' =====
			*The quencher is a completely passive element, so grey used to not stand out. Different greys from the Imperial palette looked at, and initially settled on dark grey (#373A36). Light grey a bit difficult to see against the white background, whilst dark grey simply stands out better than cool grey - however, when the probe was combined with a DNA strand, it looked better with cool grey. As a result, cool grey (#9D9D9D) used in final design.
			*The fluorescent probe emits green light; Imperials dark green used to show that the probe is inactive. When probe is detached off taqman, fluorescene starts. The greens featured on the Imperial colour palette not deemed suitable. A more vibrant light green used (#66ff0a) after playing around with the colours.

			===== ''SYBR Green Design'' =====
			*An inactive and active version exist; when attached to dsDNA, the dye is active. Inactive otherwise. This is simply shown via colour change.
			*The inactive version uses dark grey. As noted in the fluorescent probe section, dark grey looks better than other greys in the Imperial colour paletter when on its own.
			*Active version features the same lime green that Taqman used, to indicate fluorescence consistently between the two.
			[[File:VD1.png\|thumb\|Design of probe and SYBR Green]]
	===Interaction Design===		===Interaction Design===
	*Our first design included a large text box section however with feedback and self reflection we realised this wouldn't be engaging for the user even though it would be an efficient way to display information in a small space		*Our first design included a large text box section however with feedback and self reflection we realised this wouldn't be engaging for the user even though it would be an efficient way to display information in a small space
	*One page will allow users to tweak with PCR parameters to observe how it can affect experimental outcomes		*One page will allow users to tweak with PCR parameters to observe how it can affect experimental outcomes
	*In most part of the visualization at this stage though, the interaction is limited to PPT style animation presentation		*In most part of the visualization at this stage though, the interaction is limited to PPT style animation presentation
			[[File:Side 3 4.png\|thumb\|More slides of the revised visualization]]
	==Progress and Future Work==		==Progress and Future Work==
	*The design is closed to being finalized, with certain tweaks still on the way		*The design is closed to being finalized, with certain tweaks still on the way

JackyZhu: Graphical design update

2021-12-12T18:09:10Z

Graphical design update

← Older revision		Revision as of 18:09, 12 December 2021
Line 74:		Line 74:
	*Pages have a side section explaining concepts in text and a graphical panel on the right		*Pages have a side section explaining concepts in text and a graphical panel on the right
	*Taqman Probe Design - The body of the probe was made in a style consistent with previous visuals - sharp angles, no rounding, mostly straight lines. - Lemon yellow (#FFDD00) used for the body of the probe, from the Imperial palette. Differentiates the probe from other elements;different colour from thermal cycles elements; - Quencher. Completely passive element, so grey used to not stand out. Different greys from the Imperial palette looked at, and finally settled on dark grey (#373A36). Light grey a bit difficult to see against the background, whilst dark grey simply looks better than cool grey. - The fluorescent probe emits green light; Imperials dark green used to show that the probe is inactive. When probe is detached off taqman, fluorescene starts. The greens featured on the Imperial colour palette not deemed suitable. A more vibrant light green used (#66ff0a) after playing around with the colours.		*Taqman Probe Design - The body of the probe was made in a style consistent with previous visuals - sharp angles, no rounding, mostly straight lines. - Lemon yellow (#FFDD00) used for the body of the probe, from the Imperial palette. Differentiates the probe from other elements;different colour from thermal cycles elements; - Quencher. Completely passive element, so grey used to not stand out. Different greys from the Imperial palette looked at, and finally settled on dark grey (#373A36). Light grey a bit difficult to see against the background, whilst dark grey simply looks better than cool grey. - The fluorescent probe emits green light; Imperials dark green used to show that the probe is inactive. When probe is detached off taqman, fluorescene starts. The greens featured on the Imperial colour palette not deemed suitable. A more vibrant light green used (#66ff0a) after playing around with the colours.
	*SYBR Green Design - An inactive and active version exist; when attached to dsDNA, the dye is active. Inactive otherwise. This is simply shown via colour change. - Inactive version uses cool grey. Dark grey would have been used, however as this was already used for the quencher, we do not want to confuse the learner, so different colour chosen. - Active version features the same lime green that Taqman used, to indicate fluorescence consistently between the two. Note: Perhaps will switch cool grey and dark grey, as cool grey actually looks better when taqman probe is attached to strands.
	*DNA Strands - Chose for a simple design made of straight lines. A lot of abstraction is allowed, as learners focus is on understanding PCR/qPCR - they already have brilliant grasps on the structure of DNA and other reagants, so do not need the detail. - For example, the double helix of structure of DNA is simply reduced to straight lines with bases connecting them. Bases in uniform colour too - we do not need to match complementary bases, learners are more than aware of it! We instead use different colours to signfify areas of interest on the strands. Specifically, a simple green (0,255,0) was used to indicate area where the primer attaches, making it stand out. Later, this was changed to Imperials Teal for consistency with the Imperial palette and for contrast with SYBR green, reserving green for fluorescence. - Different colours for DNA were trialled, with black eventually chosen for simplicity. - The thickness of strands was also played around with. Very thin and very thick designs both look awful, and a midrange thickness was chosen. - Rounded caps are used at the ends of the strands as they do look better.		* SYBR Green Design - An inactive and active version exist; when attached to dsDNA, the dye is active. Inactive otherwise. This is simply shown via colour change. - Inactive version uses cool grey. Dark grey would have been used, however as this was already used for the quencher, we do not want to confuse the learner, so different colour chosen. - Active version features the same lime green that Taqman used, to indicate fluorescence consistently between the two. Note: Perhaps will switch cool grey and dark grey, as cool grey actually looks better when taqman probe is attached to strands.
	*Polymerase - Polymerase simplified to a rounded rectangle, with two ellipses, similar to some designs in research. - The rectangle is orange from the imperial palette (#D24000), whilst the ellipses are tangerine (#EC7300). The darker colour is used to indicate depth, as the elliptical components of the polymerase "wrap" around a strand.
	*Primer - Settled on red for contrasting against the green of area of interest on DNA strands. - Imperials Red used (#DD2501) in final design, for consistency with the Imperial palette.
	[[File:Side 3 4.png\|thumb\|More slides of the revised visualization]]		[[File:Side 3 4.png\|thumb\|More slides of the revised visualization]]

			* DNA Strands - Chose for a simple design made of straight lines. A lot of abstraction is allowed, as learners focus is on understanding PCR/qPCR - they already have brilliant grasps on the structure of DNA and other reagants, so do not need the detail. - For example, the double helix of structure of DNA is simply reduced to straight lines with bases connecting them. Bases in uniform colour too - we do not need to match complementary bases, learners are more than aware of it! We instead use different colours to signfify areas of interest on the strands. Specifically, a simple green (0,255,0) was used to indicate area where the primer attaches, making it stand out. Later, this was changed to Imperials Teal for consistency with the Imperial palette and for contrast with SYBR green, reserving green for fluorescence. - Different colours for DNA were trialled, with black eventually chosen for simplicity. - The thickness of strands was also played around with. Very thin and very thick designs both look awful, and a midrange thickness was chosen. - Rounded caps are used at the ends of the strands as they do look better.

			*Polymerase - Polymerase simplified to a rounded rectangle, with two ellipses, similar to some designs in research. - The rectangle is orange from the imperial palette (#D24000), whilst the ellipses are tangerine (#EC7300). The darker colour is used to indicate depth, as the elliptical components of the polymerase "wrap" around a strand.
			*Primer - Settled on red for contrasting against the green of area of interest on DNA strands. - Imperials Red used (#DD2501) in final design, for consistency with the Imperial palette.
			[[File:VD1.png\|thumb\|Design of probe and SYBR Green]]
			[[File:VD2.png\|thumb\|Comparison of old and improved design.]]

	===Interaction Design===		===Interaction Design===

JackyZhu: /* Design Justification */

2021-12-12T17:58:13Z

Design Justification

← Older revision		Revision as of 17:58, 12 December 2021
Line 73:		Line 73:
	*Diagrams are designed or borrowed from biorender.com		*Diagrams are designed or borrowed from biorender.com
	*Pages have a side section explaining concepts in text and a graphical panel on the right		*Pages have a side section explaining concepts in text and a graphical panel on the right
			*Taqman Probe Design - The body of the probe was made in a style consistent with previous visuals - sharp angles, no rounding, mostly straight lines. - Lemon yellow (#FFDD00) used for the body of the probe, from the Imperial palette. Differentiates the probe from other elements;different colour from thermal cycles elements; - Quencher. Completely passive element, so grey used to not stand out. Different greys from the Imperial palette looked at, and finally settled on dark grey (#373A36). Light grey a bit difficult to see against the background, whilst dark grey simply looks better than cool grey. - The fluorescent probe emits green light; Imperials dark green used to show that the probe is inactive. When probe is detached off taqman, fluorescene starts. The greens featured on the Imperial colour palette not deemed suitable. A more vibrant light green used (#66ff0a) after playing around with the colours.
			*SYBR Green Design - An inactive and active version exist; when attached to dsDNA, the dye is active. Inactive otherwise. This is simply shown via colour change. - Inactive version uses cool grey. Dark grey would have been used, however as this was already used for the quencher, we do not want to confuse the learner, so different colour chosen. - Active version features the same lime green that Taqman used, to indicate fluorescence consistently between the two. Note: Perhaps will switch cool grey and dark grey, as cool grey actually looks better when taqman probe is attached to strands.
			*DNA Strands - Chose for a simple design made of straight lines. A lot of abstraction is allowed, as learners focus is on understanding PCR/qPCR - they already have brilliant grasps on the structure of DNA and other reagants, so do not need the detail. - For example, the double helix of structure of DNA is simply reduced to straight lines with bases connecting them. Bases in uniform colour too - we do not need to match complementary bases, learners are more than aware of it! We instead use different colours to signfify areas of interest on the strands. Specifically, a simple green (0,255,0) was used to indicate area where the primer attaches, making it stand out. Later, this was changed to Imperials Teal for consistency with the Imperial palette and for contrast with SYBR green, reserving green for fluorescence. - Different colours for DNA were trialled, with black eventually chosen for simplicity. - The thickness of strands was also played around with. Very thin and very thick designs both look awful, and a midrange thickness was chosen. - Rounded caps are used at the ends of the strands as they do look better.
			*Polymerase - Polymerase simplified to a rounded rectangle, with two ellipses, similar to some designs in research. - The rectangle is orange from the imperial palette (#D24000), whilst the ellipses are tangerine (#EC7300). The darker colour is used to indicate depth, as the elliptical components of the polymerase "wrap" around a strand.
			*Primer - Settled on red for contrasting against the green of area of interest on DNA strands. - Imperials Red used (#DD2501) in final design, for consistency with the Imperial palette.
	[[File:Side 3 4.png\|thumb\|More slides of the revised visualization]]		[[File:Side 3 4.png\|thumb\|More slides of the revised visualization]]

JackyZhu: /* Progress and Future Work */

2021-12-10T10:57:35Z

Progress and Future Work

← Older revision		Revision as of 10:57, 10 December 2021
Line 71:		Line 71:
	===Graphical Design===		===Graphical Design===
	*Most spaces are filled with custom made diagrams with captions to explain the different elements involved.		*Most spaces are filled with custom made diagrams with captions to explain the different elements involved.
			*Diagrams are designed or borrowed from biorender.com
			*Pages have a side section explaining concepts in text and a graphical panel on the right
	[[File:Side 3 4.png\|thumb\|More slides of the revised visualization]]		[[File:Side 3 4.png\|thumb\|More slides of the revised visualization]]

	===Interaction Design===		===Interaction Design===
	*''Our first design included a large text box section however with feedback and self reflection we realised this wouldn't be engaging for the user even though it would be an efficient way to display information in a small space''		*Our first design included a large text box section however with feedback and self reflection we realised this wouldn't be engaging for the user even though it would be an efficient way to display information in a small space
			*One page will allow users to tweak with PCR parameters to observe how it can affect experimental outcomes
			*In most part of the visualization at this stage though, the interaction is limited to PPT style animation presentation
	==Progress and Future Work==		==Progress and Future Work==
	*The design is closed to being finalized, with certain tweaks still on the way.		*The design is closed to being finalized, with certain tweaks still on the way
	*~~''Which pages have been~~ uploaded to ~~website?''~~		*Updated project designs will be continuously uploaded to this wiki page
	*~~''Any ideas~~ for ~~future improvements.''~~		*Programming still need work in order for certain features of our design to be feasible
	'''IMPORTANT:''' This wiki page is still a work in progress. While the overall structure is unlikely to change, certain elements have not been completely filled in yet, including the different aspects of design justification (above section).		'''IMPORTANT:''' This wiki page is still a work in progress. While the overall structure is unlikely to change, certain elements have not been completely filled in yet, including the different aspects of design justification (above section).

JackyZhu: /* Aims & Learning Outcomes */

2021-12-10T10:51:30Z

Aims & Learning Outcomes

← Older revision		Revision as of 10:51, 10 December 2021
Line 25:		Line 25:

	After using this visualization, students should be able to explain how changes in Ct values from a q-PCR experiment relate to changes in the numbers of copies of a gene that a cell contains (for example, a cancer cell upon treatment with a drug).		After using this visualization, students should be able to explain how changes in Ct values from a q-PCR experiment relate to changes in the numbers of copies of a gene that a cell contains (for example, a cancer cell upon treatment with a drug).

			* Understand how PCR is applied to various biological research
			* Describe the workflow of PCR centered protocols
			* Explain the roles of different reagents used in PCR
			* Provide basic analysis based on qPCR data, such as CT values

	==Design Overview==		==Design Overview==

JackyZhu: /* Aims & Learning Outcomes */

2021-12-10T10:44:57Z

Aims & Learning Outcomes

← Older revision		Revision as of 10:44, 10 December 2021
Line 15:		Line 15:

	This visualization is intended for self-study to support iBSc Cancer Frontiers Module 1 teaching (q-PCR principles, data analysis and application to an experiment involving cancer cells)		This visualization is intended for self-study to support iBSc Cancer Frontiers Module 1 teaching (q-PCR principles, data analysis and application to an experiment involving cancer cells)

			Learners are expected to have an basic understanding of how PCR functions as well as the purposes of using this technology, which are part of the standard A-level Biology curriculum.

	'''Topic Background'''		'''Topic Background'''

JaroslawCiba: Added links to design elements so far

2021-12-01T21:57:37Z

Added links to design elements so far

← Older revision		Revision as of 21:57, 1 December 2021
Line 31:		Line 31:

	Each of these parts will be explored with multiple slides aiming to introduce material to students in manageable bits. For instance, PCR principles will be dissected down into lab flow, protocols, reagents, etc., whereas PCR results will be explored by taking apart separate data for examination first before bringing them together to form the bigger picture.		Each of these parts will be explored with multiple slides aiming to introduce material to students in manageable bits. For instance, PCR principles will be dissected down into lab flow, protocols, reagents, etc., whereas PCR results will be explored by taking apart separate data for examination first before bringing them together to form the bigger picture.

			For a view of the entire project so far: https://imperiallondon-my.sharepoint.com/:p:/g/personal/jwc20_ic_ac_uk/EfWqmugEj01NlH_zrMdI9TgB94U2218wx4Q-P2nf1poV_Q?e=i9euEO&isSPOFile=1

			The Thermal Cycle Part has this animation in mind: https://imperiallondon-my.sharepoint.com/:p:/g/personal/jwc20_ic_ac_uk/EZAbz8uaTLxLtdJ3uAYK704BnMIbwp2jZ6ynFvNlL0tkQw?e=0v3Zgi
	[[File:PCR Slide 1.png\|thumb\|Original Design (1)]]		[[File:PCR Slide 1.png\|thumb\|Original Design (1)]]
	[[File:PCR Slide 2.png\|thumb\|Original Design (2)]]		[[File:PCR Slide 2.png\|thumb\|Original Design (2)]]