Visualising academic integrity research terminology - Revision history

Cclewley at 13:24, 9 February 2022

2022-02-09T13:24:30Z

← Older revision		Revision as of 13:24, 9 February 2022
Line 122:		Line 122:
	*''Project's Miro Board:'' https://miro.com/app/board/o9J_lpvA2FQ=/		*''Project's Miro Board:'' https://miro.com/app/board/o9J_lpvA2FQ=/
	*''Staff-partner's Research Paper:'' https://doi.org/10.1007/s10805-021-09422-4		*''Staff-partner's Research Paper:'' https://doi.org/10.1007/s10805-021-09422-4
	[[Category:~~Visualisation~~ Project ~~Pages~~]]		<references />
			[[Category:Project pages]]

Man HoLam at 15:44, 13 December 2021

2021-12-13T15:44:50Z

← Older revision		Revision as of 15:44, 13 December 2021
Line 34:		Line 34:
	On the home page users can input keywords of their choice in the search bar or simply click the "Surprise me" button. This will then lead them to the respective (or random) topic page. On these pages multiple charts are displayed supplying the user with key statistics about the search term. Fore more information, the icon in the top right corner of each section can be clicked to expand the respective section and receive further information and clarifications about the data displayed.		On the home page users can input keywords of their choice in the search bar or simply click the "Surprise me" button. This will then lead them to the respective (or random) topic page. On these pages multiple charts are displayed supplying the user with key statistics about the search term. Fore more information, the icon in the top right corner of each section can be clicked to expand the respective section and receive further information and clarifications about the data displayed.

	The main part on the right of the topic page is a representation of publications that include the search term in their title. They are presented in bubbles with the number of citations dictating their size. The main part has got an extend button which will show more information such as an ~~embeded~~ page of some of the most cited papers. In the side bar on the left there are placed two diagrams, but more can easily be added as the bar is scrollable. The top diagram is a radial graph displaying the sentiment of the language used (i.e. is it positive/neutral/negative?). This page has also got an extend button which will provide more information on how the score was calculated, and the main positive/neutral/negative terms. Finally, the bottom chart contains information about the most commonly used bigrams. By expanding this, users can get more information about the publications making use of these keywords.		The main part on the right of the topic page is a representation of publications that include the search term in their title. They are presented in bubbles with the number of citations dictating their size. The main part has got an extend button which will show more information such as an embedded page of some of the most cited papers. In the side bar on the left there are placed two diagrams, but more can easily be added as the bar is scrollable. The top diagram is a radial graph displaying the sentiment of the language used (i.e. is it positive/neutral/negative?). This page has also got an extend button which will provide more information on how the score was calculated, and the main positive/neutral/negative terms. Finally, the bottom chart contains information about the most commonly used bigrams. By expanding this, users can get more information about the publications making use of these keywords.

	On the bottom of the screen, three related topics are listed that take the user to their respective topic pages upon being clicked. Other navigations include the "home"-icon and the ImpVis logo in the navigation bar on top that lead to the home page and the main ImpVis website. Also present on top is the search bar enabling users to look up keywords without having to visit the home page first.		On the bottom of the screen, three related topics are listed that take the user to their respective topic pages upon being clicked. Other navigations include the "home"-icon and the ImpVis logo in the navigation bar on top that lead to the home page and the main ImpVis website. Also present on top is the search bar enabling users to look up keywords without having to visit the home page first.

MikoOberhauser at 15:16, 13 December 2021

2021-12-13T15:16:09Z

← Older revision		Revision as of 15:16, 13 December 2021
Line 94:		Line 94:
	* make the design responsive		* make the design responsive

	[https://www.figma.com/proto/SVziYGbNHYZQQue8e1PWQ6/ImpVis?node-id=312%3A3&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=312%3A3 Click here] and take a look at our first prototype!		[https://www.figma.com/proto/SVziYGbNHYZQQue8e1PWQ6/ImpVis?node-id=312%3A3&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=312%3A3 Click here] and take a look at our first prototype! HTML and CSS can be extracted from it to make coding the visualisation easier (need edit permission).

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

AlexandruDanila: /* Progress and Future Work */

2021-12-13T15:04:36Z

Progress and Future Work

← Older revision		Revision as of 15:04, 13 December 2021
Line 113:		Line 113:
	*The design is not finalised. We have done the prototype of the project and the main frame.		*The design is not finalised. We have done the prototype of the project and the main frame.
	*Pages uploaded are: The main page and template pages for positive/neutral/negative terms.		*Pages uploaded are: The main page and template pages for positive/neutral/negative terms.
	*Main ideas for future improvements are coding the website and making it functional and using a broader data set to get more accurate results.		*Main ideas for future improvements are coding the website and making it functional and using a broader data set to get more accurate results. Adding on that, the graphical design could be further improved by adding a scroll bar to the side column, make bubbles float and be movable and adding expanded views for individual graphs.
	==Links==		==Links==
	*''Link to GitHub repository for code in development:''		*''Link to GitHub repository for code in development:''

AlexandruDanila: /* Progress and Future Work */

2021-12-13T14:48:53Z

Progress and Future Work

← Older revision		Revision as of 14:48, 13 December 2021
Line 22:		Line 22:
	[[File:Main Page.png\|thumb\|350x350px\|Figure 1: The home page of the visualisation.]]		[[File:Main Page.png\|thumb\|350x350px\|Figure 1: The home page of the visualisation.]]
	[[File:ExamplePage.png\|thumb\|350x350px\|Figure 2: Topic page users are led to after a keyword has been searched for or the "Surprise me" button has been clicked.]]		[[File:ExamplePage.png\|thumb\|350x350px\|Figure 2: Topic page users are led to after a keyword has been searched for or the "Surprise me" button has been clicked.]]
	*''What the final outcome was, how it looks, how it functions etc.''
	*''Include graphics.''
	*''Do not include justification or design progression, leave this for later sections.''


	The final outcome realised over the course of the ImpVis iExplore module was an interactive prototype which displayed information from our staff-partner's research paper.		The final outcome realised over the course of the ImpVis iExplore module was an interactive prototype which displayed information from our staff-partner's research paper.
Line 115:		Line 111:

	==Progress and Future Work==		==Progress and Future Work==
	*''Is the design finalised?''
	*The design is not finalised. We have done the prototype of the project and the main frame.		*The design is not finalised. We have done the prototype of the project and the main frame.
	*''Which pages have been uploaded to website?''
	*Pages uploaded are: The main page and template pages for positive/neutral/negative terms.		*Pages uploaded are: The main page and template pages for positive/neutral/negative terms.
	*''Any ideas for future improvements.''
	*Main ideas for future improvements are coding the website and making it functional and using a broader data set to get more accurate results.		*Main ideas for future improvements are coding the website and making it functional and using a broader data set to get more accurate results.
	==Links==		==Links==

MikoOberhauser: Design Overview

2021-12-13T14:28:36Z

Design Overview

← Older revision		Revision as of 14:28, 13 December 2021
Line 20:		Line 20:

	==Design Overview==		==Design Overview==
	[[File:Main Page.png\|thumb\|350x350px\|Figure 1: The ~~main~~ page of the ~~project~~.]]		[[File:Main Page.png\|thumb\|350x350px\|Figure 1: The home page of the visualisation.]]
	[[File:ExamplePage.png\|thumb\|350x350px\|Figure 2: ~~The example~~ page ~~of what happens~~ after a keyword has been ~~introduced~~ or the "Surprise me" button has been clicked.]]		[[File:ExamplePage.png\|thumb\|350x350px\|Figure 2: Topic page users are led to after a keyword has been searched for or the "Surprise me" button has been clicked.]]
	*''What the final outcome was, how it looks, how it functions etc.''		*''What the final outcome was, how it looks, how it functions etc.''
	*The final outcome of our design was to get a visualisation that the user can interact with and get the information they desire. You can take a look at our first prototype in the pictures on the side. The way it functions is the first thing you are seeing is the main page and from there you can then search for a keyword which will take you to more information on that respective keyword, or you can click on the "Surprise me" button which will take you to a random concept on our website. Once you have done one of these, you will see a new page (Figure 2) where more data will be displayed. The main part of the page on the right is a figure of the papers with the most citations including the keyword and underneath that there are hyperlinks taking you to related subpages on the website. The main part has got an extend button which will show more information such as a mini page of some of the most cited papers. On the left of that there are two diagrams. The top diagram is a radial graph displaying the use of language and how much of it is positive/neutral/negative. This page has also got an extend button which will provide more information on how the score was calculated, and the main positive/neutral/negative terms. Finally, the bottom diagram contains information about the most common terms. By expanding this, you will get more information about the papers that use these keywords.
	*''Include graphics.''		*''Include graphics.''
	*''Do not include justification or design progression, leave this for later sections.''		*''Do not include justification or design progression, leave this for later sections.''


			The final outcome realised over the course of the ImpVis iExplore module was an interactive prototype which displayed information from our staff-partner's research paper.

			The overall visualisation was divided into different sections:

			* home page (Fig. 1)
			* topic page (Fig. 2)
			* chart page (not conceptualised)


			On the home page users can input keywords of their choice in the search bar or simply click the "Surprise me" button. This will then lead them to the respective (or random) topic page. On these pages multiple charts are displayed supplying the user with key statistics about the search term. Fore more information, the icon in the top right corner of each section can be clicked to expand the respective section and receive further information and clarifications about the data displayed.

			The main part on the right of the topic page is a representation of publications that include the search term in their title. They are presented in bubbles with the number of citations dictating their size. The main part has got an extend button which will show more information such as an embeded page of some of the most cited papers. In the side bar on the left there are placed two diagrams, but more can easily be added as the bar is scrollable. The top diagram is a radial graph displaying the sentiment of the language used (i.e. is it positive/neutral/negative?). This page has also got an extend button which will provide more information on how the score was calculated, and the main positive/neutral/negative terms. Finally, the bottom chart contains information about the most commonly used bigrams. By expanding this, users can get more information about the publications making use of these keywords.

			On the bottom of the screen, three related topics are listed that take the user to their respective topic pages upon being clicked. Other navigations include the "home"-icon and the ImpVis logo in the navigation bar on top that lead to the home page and the main ImpVis website. Also present on top is the search bar enabling users to look up keywords without having to visit the home page first.

	==Design Justification==		==Design Justification==

Man HoLam: /* Education Design */

2021-12-13T08:24:23Z

Education Design

← Older revision		Revision as of 08:24, 13 December 2021
Line 59:		Line 59:

	# For each paper, the paper title, year of publish and number of citations will be shown in a single word bubble. The bigger the size of bubble, the more citations the paper has. The learners will gain a clear view to contrast how paper titles and year of publish would generally influence the number of citations.		# For each paper, the paper title, year of publish and number of citations will be shown in a single word bubble. The bigger the size of bubble, the more citations the paper has. The learners will gain a clear view to contrast how paper titles and year of publish would generally influence the number of citations.
	# Radial bar chart was chosen to best present sentiments analysis (positive, neutral and negative) of language in papers' titles change over time. It can show the ~~porpotions~~ and different sentiments as different coloured sections at the same time.		# Radial bar chart was chosen to best present sentiments analysis (positive, neutral and negative) of language in papers' titles change over time. It can show the proportions and different sentiments as different coloured sections at the same time.
	# The histogram indicates the frequency of bigrams in the field of academic integrity research. This should give learners a general idea on what the key messages in these papers conveyed and how different terminology evolved.		# The histogram indicates the frequency of bigrams in the field of academic integrity research. This should give learners a general idea on what the key messages in these papers conveyed and how different terminology evolved.

Man HoLam: /* Design Overview */

2021-12-13T08:22:34Z

Design Overview

← Older revision		Revision as of 08:22, 13 December 2021
Line 23:		Line 23:
	[[File:ExamplePage.png\|thumb\|350x350px\|Figure 2: The example page of what happens after a keyword has been introduced or the "Surprise me" button has been clicked.]]		[[File:ExamplePage.png\|thumb\|350x350px\|Figure 2: The example page of what happens after a keyword has been introduced or the "Surprise me" button has been clicked.]]
	*''What the final outcome was, how it looks, how it functions etc.''		*''What the final outcome was, how it looks, how it functions etc.''
	*The final outcome of our design was to get a visualisation that the user can interact with and get the information they desire. You can take a look at our first prototype in the pictures on the side. The way it functions is the first thing you are seeing is the main page and from there you can then search for a keyword which will take you to more information on that respective keyword, or you can click on the "Surprise me" button which will take you to a random concept on our website. Once you have done one of these, you will see a new page (Figure 2) where more data will be displayed. The main part of the page on the right is a figure of the papers with the most citations including the keyword and underneath that there are hyperlinks taking you to related subpages on the website. The main part has got an extend button which will show more information such as a mini page of some of the most cited papers. On the left of that there are two diagrams. The top diagram is a radial graph displaying the use of language and how much of it is ~~postive~~/neutral/negative. This page has also got an extend button which will provide more information on how the score was calculated, and the main positive/neutral/negative terms. Finally, the bottom diagram contains information about the most common terms. By expanding this, you will get more information about the papers that use these keywords.		*The final outcome of our design was to get a visualisation that the user can interact with and get the information they desire. You can take a look at our first prototype in the pictures on the side. The way it functions is the first thing you are seeing is the main page and from there you can then search for a keyword which will take you to more information on that respective keyword, or you can click on the "Surprise me" button which will take you to a random concept on our website. Once you have done one of these, you will see a new page (Figure 2) where more data will be displayed. The main part of the page on the right is a figure of the papers with the most citations including the keyword and underneath that there are hyperlinks taking you to related subpages on the website. The main part has got an extend button which will show more information such as a mini page of some of the most cited papers. On the left of that there are two diagrams. The top diagram is a radial graph displaying the use of language and how much of it is positive/neutral/negative. This page has also got an extend button which will provide more information on how the score was calculated, and the main positive/neutral/negative terms. Finally, the bottom diagram contains information about the most common terms. By expanding this, you will get more information about the papers that use these keywords.
	*''Include graphics.''		*''Include graphics.''
	*''Do not include justification or design progression, leave this for later sections.''		*''Do not include justification or design progression, leave this for later sections.''

Man HoLam: /* Education Design */

2021-12-13T08:14:11Z

Education Design

← Older revision		Revision as of 08:14, 13 December 2021
Line 56:		Line 56:
	After learners just finish quickly scanning through the visualisation, they may then wish to further explore more details in the topics they are interested in, so we created a search bar in the home page to accommodate everyone's own preference.		After learners just finish quickly scanning through the visualisation, they may then wish to further explore more details in the topics they are interested in, so we created a search bar in the home page to accommodate everyone's own preference.

	In each topic area, we chose to split the page into three different sections as shown in Figure 2 to present information so that the learners don't suddenly get overwhelmed by loads of materials. The size of each section also intuitively indicates the order of importance. The 3 sections from largest to smallest are: word bubbles containing specific information about papers, radial bar chart representing sentiments of language (positive, neutral and negative) and frequency histogram of different terminology.		In each topic area, we chose to split the page into three different sections as shown in Figure 2 to present information so that the learners don't suddenly get overwhelmed by loads of materials. The size of each section also intuitively indicates the order of importance. The 3 sections from largest to smallest are: word bubbles containing specific information about papers, radial bar chart representing sentiments of language (positive, neutral and negative) and frequency histogram of different terminology:

	For each paper, the paper title, year of publish and number of citations will be shown in a single word bubble. The bigger the size of bubble, the more citations the paper has. The learners will gain a clear view to contrast how paper titles and year of publish would generally influence the number of citations.		# For each paper, the paper title, year of publish and number of citations will be shown in a single word bubble. The bigger the size of bubble, the more citations the paper has. The learners will gain a clear view to contrast how paper titles and year of publish would generally influence the number of citations.
			# Radial bar chart was chosen to best present sentiments analysis (positive, neutral and negative) of language in papers' titles change over time. It can show the porpotions and different sentiments as different coloured sections at the same time.
	Radial bar chart was chosen to best present sentiments analysis (positive, neutral and negative) of language in papers' titles change over time. It can show the porpotions and different sentiments as different coloured sections at the same time.		# The histogram indicates the frequency of bigrams in the field of academic integrity research. This should give learners a general idea on what the key messages in these papers conveyed and how different terminology evolved.

	The histogram indicates the frequency of bigrams in the field of academic integrity research. This should give learners a general idea on what the key messages in these papers conveyed and how different terminology evolved.

	Researchers in the field of academic integrity and learners with much background knowledge might also be interested in using the visualisation to further investigate around the field. If they click the title of a paper, there will be a link to that particular paper of their interest.		Researchers in the field of academic integrity and learners with much background knowledge might also be interested in using the visualisation to further investigate around the field. If they click the title of a paper, there will be a link to that particular paper of their interest.

Man HoLam: /* Education Design */

2021-12-13T08:00:20Z

Education Design

← Older revision		Revision as of 08:00, 13 December 2021
Line 62:		Line 62:
	Radial bar chart was chosen to best present sentiments analysis (positive, neutral and negative) of language in papers' titles change over time. It can show the porpotions and different sentiments as different coloured sections at the same time.		Radial bar chart was chosen to best present sentiments analysis (positive, neutral and negative) of language in papers' titles change over time. It can show the porpotions and different sentiments as different coloured sections at the same time.

	The ~~frequency~~ histogram indicates		The histogram indicates the frequency of bigrams in the field of academic integrity research. This should give learners a general idea on what the key messages in these papers conveyed and how different terminology evolved.

	Researchers in the field of academic integrity and learners with much background knowledge might also be interested in using the visualisation to further investigate around the field. If they click the title of a paper, there will be a link to that particular paper of their interest.		Researchers in the field of academic integrity and learners with much background knowledge might also be interested in using the visualisation to further investigate around the field. If they click the title of a paper, there will be a link to that particular paper of their interest.