<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Measures of income inequality: an interactive graph</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!--[if IE]><script  type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">!window.jQuery && document.write(unescape("%3Cscript src='jquery.min.js' type='text/javascript'%3E%3C/script%3E"))</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">!window.jQuery.ui && document.write(unescape("%3Cscript src='jquery-ui.min.js' type='text/javascript'%3E%3C/script%3E"))</script>
  <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
  <script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.logAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.highlighter.min.js"></script>
<script type="text/javascript">
// Levels of pay by occupational group, 2010: data from National Statistics Online http://www.statistics.gov.uk/STATBASE/Product.asp?vlnk=14123
// Median gross earnings in pounds
var raise = 0; var percentage = 0; var theform;
var base_variance;

ser = [[15598, "Customer service" ],
[16984, "Hairdresser" ],
[17200, "Warehouse worker" ],
[19761, "Secretary" ],
[21708, "Machine operator" ],
[23787, "Electrician" ],
[29338, "Programmer" ],
[36507, "Solicitor" ],
[37837, "Manager" ],
[230000, "Derivatives trader" ], // Source: http://www.prospects.ac.uk/financial_trader_salary.htm
[676000, "Premiership Footballer" ]    // Source: http://news.bbc.co.uk/sport1/hi/football/4898392.stm
];

var ser_copy=ser;

function addCommas(nStr) // Public domain function, taken from http://www.mredkj.com/javascript/nfbasic.html
{nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}

function redraw(r, p) {
raise=r; percentage=p;

// Show numbers to user
theform=document.forms[0];
theform.percentage.value = percentage;
theform.raise.value = raise;

//Update graph data  and calculate mean
var total=0;
d_lin=lin_plot.series[0].data;
var fin=d_lin.length;

for ( i=0; i<ser.length; i++ )
	{d_lin[i][0] = ser[i][0] + r + (ser[i][0] * p/100);
	total+= d_lin[i][0];
	};

// Calculate range
theform.range.value =addCommas(Math.round( d_lin[fin - 1][0] - d_lin[0][0] )) + (percentage >0 ? " ("+percentage+"% greater)" :' (0% greater)');

var mean= total / fin;
var sum_XX;
for ( i=0; i<fin; i++ )
	{sum_XX = (d_lin[i][0] - mean) * (d_lin[i][0] - mean);
	};
var variance = addCommas(Math.round( sum_XX/fin ) );
theform.variance.value =variance + (percentage >0 ? " ("+Math.round(((percentage/100 +1) * (percentage/100 +1) -1) * 100)+"% greater)" :' (0% greater)');
var sd = addCommas(Math.round( Math.sqrt(sum_XX / fin) ));
theform.sd.value = sd+" ("+percentage+"% greater)";

// Redraw graphs
lin_plot.drawSeries(0);
}

$(document).ready(function() {
lin_plot = $.jqplot('chart1', [ser],
    {title:'Annual Salary (Pounds) (Linear axis)',

	seriesDefaults:{renderer:$.jqplot.BarRenderer, rendererOptions: {
        barDirection: 'horizontal', barWidth:10, shadowDepth:2
        }},
  seriesColors: ["#5054cf",],
	axes:{ yaxis:{ renderer: $.jqplot.CategoryAxisRenderer },
	       xaxis:{ min:0, max:1000000, tickInterval:250000, tickOptions:{formatString:'%d'}}
		},
		highlighter: {show: true, sizeAdjust: 8, tooltipAxes:"x", tooltipLocation:"e"
      }
	});

$( "#slider" ).slider({min:0, max:50000, value:0, step:1000,
	change: function(ev, ui) { redraw(ui.value, percentage) } 
	});

$( "#slider2" ).slider({min:0, max:100, value:0, step:1,
	change: function(ev, ui) { redraw(raise, ui.value) } 
	});
});
</script>
<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="destress.css" type="text/css" media="all" />
<style type="text/css">
.jqplot-yaxis { width: 140px; }
</style><!-- This ensures the job titles fit on one line -->
</head>
<body>
<h1>Measures of income inequality</h1>
<div id="content">
<form id="theForm" onSubmit="void(0);" name="theForm">

<div id="main">
<div class="jqPlot" id="chart1" style="height:340px; width:580px;"></div>

<p class="large">Range (largest - smallest):<br />£<input type="text" name="range" value="" size="29" readonly="readonly" /></p>

<p class="large">Variance:<br /><input type="text" name="variance" value="" size="30" readonly="readonly" /></p>

<p class="large">Standard deviation:<br />£<input type="text" name="sd" value="" size="29" readonly="readonly" /></p>

</div>
<div id="narrative">

<p>The graph shows some individuals and their typical salaries. Below the graph are some measures of the <em>spread</em> of incomes of the group.</p>
<p>With the sliders, you can increase everyone's salary. What happens to the measures of spread?</p>

<h3>Absolute pay raise</h3>
<div>This slider raises all salaries by a fixed amount:</div>
<div style="padding:10px; width:300px; float:left"><div id="slider"></div></div><br /><br />

<div class="huge">&#163;&nbsp;<input type="text" name="raise" value="0" size="6" /></div>

<h3>Percentage pay raise</h3>
<div>This slider raises all salaries by the same percentage of the original:</div>
<div style="padding:10px;width:300px;float:left"><div id="slider2"></div></div>

<div class="huge"><input type="text" name="percentage" value="0" size="3" style="text-align:right" />%</div>

</div>

<input type="submit" name="submit" style="display:none" />
</form>
</div>
<div id="footer"><p><a href="#footer" onClick="document.getElementById('credits').style.display='block'">Credits</a></p>
<div id="credits" style="display:none">Created by Martin Poulter for the <a href="https://economicsnetwork.ac.uk/projects/destress">DeSTRESS project</a>. Text content is <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a> licensed. Javascript based on the <a href="https://jquery.com/">jQuery</a> and <a href="http://www.jqplot.com/">jqPlot</a> libraries; <a href="https://opensource.org/licenses/mit-license.php">MIT licence</a>.</div></div>
<!--#include virtual="/ssi/ga_footer.shtm" -->
 </body>
</html>