CSC/ECE 517 Spring 2015 E1522 Visualization - Revision history

Marufino: /* Reliability Metric */

2015-05-05T04:13:00Z

Reliability Metric

← Older revision		Revision as of 04:13, 5 May 2015
Line 463:		Line 463:
	end		end
	end		end

			=Instructor View=

			In the instructor view of the assignment scores we added similar charts to the one shown for students.
			In this case we include a class average in the form of a circle chart, and a class distribution in the form of a bar chart. An example of this is shown below
			[[File:Instructor_viz.png]]


	==Reference==		==Reference==
	<references/>		<references/>

Njiang4: /* Project Description */

2015-05-05T01:41:50Z

Project Description

← Older revision		Revision as of 01:41, 5 May 2015
Line 4:		Line 4:
	The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.		The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.

	Our project video ~~http~~://~~youtu~~.be/26jVUAyF6TA		Our project video https://www.youtube.com/watch?v=26jVUAyF6TA
	==Purpose==		==Purpose==
	The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.		The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.

Njiang4: /* Project Description */

2015-05-05T01:01:37Z

Project Description

← Older revision		Revision as of 01:01, 5 May 2015
Line 4:		Line 4:
	The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.		The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.

	Our project video ~~https~~://~~www.youtube.com/watch?v=-Oe9YesiU5Y&feature=~~youtu.be		Our project video http://youtu.be/26jVUAyF6TA
	==Purpose==		==Purpose==
	The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.		The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.

Njiang4: /* Project Description */

2015-05-05T00:56:09Z

Project Description

← Older revision		Revision as of 00:56, 5 May 2015
Line 4:		Line 4:
	The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.		The goal of this project is to present the the data in Expertiza in a more convenient way. Through the use of charts and graphs to enhance certain pages, such as the student's scores page and the instructor's scores page, and allow for the users to get an at-a-glance analysis of the data without having to dive into the tables.

			Our project video https://www.youtube.com/watch?v=-Oe9YesiU5Y&feature=youtu.be
	==Purpose==		==Purpose==
	The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.		The purpose of this project is to add a visualization element to some of the data collected in expertiza. The aim of this is to provide a more intuitive “at-a-glance” idea of the data, some examples would be: how a student is doing on his/her assignments, or how their work compares to that of their classmates. On a less functional angle, it also enhances the aesthetics of the pages, taking the drab tables and giving them a more appealing look.

Njiang4: /* Circles */

2015-05-03T20:48:55Z

Circles

← Older revision		Revision as of 20:48, 3 May 2015
Line 248:		Line 248:

	===Circles===		===Circles===
			----
			We use the Circles lightweight JavaScript library generating circular graphs to represent the average scores expressed as percentage with animation.

			Here is an example of the circles we use.
			[[File:Circles.png\|center]]

			For more details about the circles.js, you can refer to https://github.com/lugolabs/circles
			====Usage====
			----
			Include the circles.js or circles.min.js file in your HTML file. There are no dependencies.

			And create a placeholder div in your HTML:
			<pre>
			<div class="circle" id="circles-1"></div>
			</pre>

			Create a graph by calling, the id should match id of the placeholder div:

			<pre>
			var myCircle = Circles.create({
			id: 'circles-1',
			radius: 60,
			value: 43,
			maxValue: 100,
			width: 10,
			text: function(value){return value + '%';},
			colors: ['#D3B6C6', '#4B253A'],
			duration: 400,
			wrpClass: 'circles-wrp',
			textClass: 'circles-text'
			styleWrapper: true,
			styleText: true
			});
			</pre>

			where

			* `id` - the DOM element that will hold the graph
			* `radius` - the radius of the circles
			* `value` - init value of the circle (optional, defaults to 0)
			* `maxValue` - maximum value of the circle (optional, defaults to 100)
			* `width` - the width of the ring (optional, has value 10, if not specified)
			* `colors` - an array of colors, with the first item coloring the full circle (optional, it will be `['#EEE', '#F00']` if not specified)
			* `duration` - value in ms of animation's duration; defaults to 500; if 0 or `null` is passed, the animation will not run.
			* `wrpClass` - class name to apply on the generated element wrapping the whole circle.
			* `textClass` - class name to apply on the generated element wrapping the text content.
			* `styleWrapper' - whether or not to add inline styles to the wrapper element (defaults to true)
			* `styleText` - whether or not to add inline styles to the text (defaults to true)
			* `text` - the text to display at the center of the graph (optional, the current "htmlified" value will be shown). If `null` or an empty string, no text will be displayed.


			API
			----
			<pre>
			myCircle.updateRadius(Number radius)
			</pre>

			Regenerates the circle with the given `radius` (see `spec/responsive.html` for an example on how to create a responsive circle).

			<pre>
			myCircle.updateWidth(Number width)
			</pre>

			Regenerates the circle with the given `width`

			<pre>
			myCircle.updateColors(Array colors)
			</pre>

			Change `colors` used to draw the circle.

			<pre>
			myCircle.update(Number value [, Number duration])
			</pre>

			Set the value of the circle to `value`.
			Animation will take `duration` ms to execute. If no `duration` is given, default duration set in constructor will be used.
			If you don't want animation, set `duration` to 0.

			<pre>
			myCircle.update(Boolean force)
			</pre>

			Force the redrawing of the circle if `force` is set to true. Do nothing otherwise.

			<pre>
			myCircle.getPercent()
			</pre>

			Returns the percentage value of the circle, based on its current value and its max value.

			<pre>
			myCircle.getValue()
			</pre>

			Returns the value of the circle.

			<pre>
			myCircle.getMaxValue()
			</pre>

			Returns the max value of the circle.

			<pre>
			myCircle.getValueFromPercent(Number percentage)
			</pre>

			Returns the corresponding value of the circle based on its max value and given `percentage`.

			<pre>
			myCircle.htmlifyNumber(Number number[, integerPartClass, decimalPartClass])
			</pre>

	=Visualization in Expertiza=		=Visualization in Expertiza=

Zchen15: /* Bar Charthttp://googlevisualr.herokuapp.com/examples/interactive/bar_chart */

2015-05-03T20:48:40Z

Bar Charthttp://googlevisualr.herokuapp.com/examples/interactive/bar_chart

← Older revision		Revision as of 20:48, 3 May 2015
Line 106:		Line 106:
	</pre>		</pre>

	~~The resulting chart looks like below.~~
	~~[[File:BarChart.png\|center]]~~
	=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====		=====Bubble Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bubble_chart</ref>=====
	The following code presents the example of area chart.		The following code presents the example of area chart.

Zchen15: /* Area Charthttp://googlevisualr.herokuapp.com/examples/interactive/area_chart */

2015-05-03T20:48:28Z

Area Charthttp://googlevisualr.herokuapp.com/examples/interactive/area_chart

← Older revision		Revision as of 20:48, 3 May 2015
Line 75:		Line 75:
	</pre>		</pre>

	~~The resulting chart looks like below.~~
	~~[[File:AeraChart.png\|center]]~~
	=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====		=====Bar Chart<ref>http://googlevisualr.herokuapp.com/examples/interactive/bar_chart</ref>=====
	The following code presents the example of area chart.		The following code presents the example of area chart.

Zchen15: /* Examples */

2015-05-03T20:46:24Z

Examples

@@ Line 231: / Line 231: @@
 The bar chart would look like below.
 [[File:BarChart.png|center]]
 ===Circles===

Zchen15: /* usage in the project */

2015-05-03T20:44:00Z

usage in the project

← Older revision		Revision as of 20:44, 3 May 2015
Line 216:		Line 216:
	</pre>		</pre>

	====~~usage in the project~~====		====Examples====
	~~In the project~~, ~~all~~ bar ~~charts and reliability charts are implemented by gchartrb, as is shown~~ below.		=====Bar Chart=====
	[[File:~~All_charts~~.png\|center]]		The following example code would generate a bar chart.
			<pre>
	~~The bar chart shows the score of each individual review or feedback. To generate the chart, the score data is first extracted using method <code>get_scores_for_chart.</code>~~		# Bar Chart
			GoogleChart::BarChart.new('800x200', "Bar Chart", :vertical, false) do \|bc\|
			bc.data "Trend 1", [5,4,3,1,3,5], '0000ff'
			bc.data "Trend 2", [1,2,3,4,5,6], 'ff0000'
			bc.data "Trend 3", [6,5,4,4,5,6], '00ff00'
			puts "\nBar Chart"
			puts bc.to_url
			end
			</pre>
			The bar chart would look like below.
			[[File:BarChart.png\|center]]

	===Circles===		===Circles===

Marufino: /* Reliability Metric */

2015-05-03T20:33:52Z

Reliability Metric

← Older revision		Revision as of 20:33, 3 May 2015
Line 291:		Line 291:

	=Reliability Metric=		=Reliability Metric=
	Based on the uniformity of the review scores, we ~~will compile~~ a reliability metric. This metric encapsulates the level of agreement between the reviews, and should provide a quick at a glance notion of whether reviewers agree on the scoring for the particular assignment, or whether there is a high variance in the scores given. A good reliability score indicates that the grade given to the assignment by the reviewers is to be trusted, whereas a poor reliability score indicates that there was a high level of disagreement in the reviewers and the instructors should perhaps take a closer look at the participant's assignment.		Based on the uniformity of the review scores, we compiled a reliability metric. This metric encapsulates the level of agreement between the reviews, and should provide a quick at a glance notion of whether reviewers agree on the scoring for the particular assignment, or whether there is a high variance in the scores given. A good reliability score indicates that the grade given to the assignment by the reviewers is to be trusted, whereas a poor reliability score indicates that there was a high level of disagreement in the reviewers and the instructors should perhaps take a closer look at the participant's assignment.
	This reliability score is computed from the standard deviation of the review scores. A standard deviation that's less than 10 will award a good reliability score. A standard deviation between 10 and 20 will award a medium reliability score, whereas a standard deviation greater than 20 will give a poor reliability score.		This reliability score is computed from the standard deviation of the review scores. A standard deviation that's less than 10 will award a good reliability score. A standard deviation between 10 and 20 will award a medium reliability score, whereas a standard deviation greater than 20 will give a poor reliability score.
	===Different Icon colors===		===Different Icon colors===
	[[File:~~MockupG~~.png]]		[[File:Green_icon.png]]

	The color of the three bars Icon, and the number of filled bars is representative of the reliability of the reviews.		The color of the three bars Icon, and the number of filled bars is representative of the reliability of the reviews.
	Take the case of the green sample icon in the image above, the reviews mostly all agree. Whereas in the following two images, the icon is yellow and red respectively to signify increasingly worrying levels of disparity in review scores.		Take the case of the green sample icon in the image above, the reviews mostly all agree. Whereas in the following two images, the icon is yellow and red respectively to signify increasingly worrying levels of disparity in review scores.
	[[File:~~MockupY~~.png]]
	[[File:~~MockupR~~.png]]		[[File:Yellow_icon.png]]

			[[File:Red_icon.png]]

			A similar method to the one used for the bar charts was used. In this case, a horizontal bar chart was created, and the data was dictated by the qualitative score that was passed into the method. This score could be 'good', 'medium' or 'bad'. Based on this string argument the graph is created with the correct number of bars and the correct color.

			def reliability_chart(score,type)
			GoogleChart::BarChart.new("25x20", " ", :horizontal, false) do \|bc\|
			if score == 'good'
			data = [1,1,1]
			color = '00ff00'
			elsif score == 'medium'
			data = [1,1]
			color = 'FFCC00'
			else
			data = [1]
			color = '990000'
			end
			bc.data "Reliability Symbol", data, color
			bc.show_legend = false
			bc.stacked = false
			bc.width_spacing_options({:bar_width => 5,:bar_spacing => 10, :group_spacing => 1})
			bc.data_encoding = :extended
			@grades_bar_charts[type.to_sym] = (bc.to_url)
			end
			end

	==Reference==		==Reference==
	<references/>		<references/>