block by hobbes7878 4d58a830176023229d7f

Scatter plot pivot

Full Screen

A scatter plot that pivots one axis from raw to percent.

index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Scatterplot Pivot</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script src="jquery.tipsy.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.css">
        <link rel="stylesheet" type="text/css" href="styles.css">

    </head>
    <body>


<div class="chartContainer">
        <div href="" class="scatterSelect">View Rates</div>
    <div id="scatterChart">
    </div>
</div>

<script src="scatter.js"></script>



    </body>
</html>

analysis.csv

id,state,union,emplys,actual_fatal,expected_fatal,residual,perform,risk_rate
48,Texas,1,99594239,4593,4014.422158441758899348239221,578.577841558241100651760779,1.144124812668636301911946,0.5809350494241349649
28,Mississippi,1,10877847,726,382.248089354161915377100871,343.751910645838084622899129,1.89929006898800687349022,3.1601098144314595032
22,Louisiana,1,18425979,1127,791.175013019008638709016204,335.824986980991361290983796,1.424463590804684432378865,1.8225625188273109466
05,Arkansas,1,11327985,707,410.067910356830086796566268,296.932089643169913203433732,1.724104671796404601170873,2.6212260136570618093
01,Alabama,1,18543188,944,651.985527262938186120376421,292.014472737061813879623579,1.4478849000881207761223,1.5747803060458741716
40,Oklahoma,1,14843858,883,598.272030684562759411184721,284.727969315437240588815279,1.475917232817389150617668,1.9181534161498799072
21,Kentucky,0,17415400,930,655.965593513696962392256484,274.034406486303037607743516,1.417757286656500577211018,1.5735177284834286758
45,South Carolina,1,17994925,888,627.044700786279216625666311,260.955299213720783374333689,1.416166979621225307625257,1.4501605270025898045
12,Florida,1,73944271,2916,2668.218019548000436280218766,247.781980451999563719781234,1.092864218229803481293043,0.335092870753975739
29,Missouri,0,26303854,1141,907.471006797545582319832912,233.528993202454417680167088,1.257340445538392972291617,0.8878128399072410365
54,West Virginia,0,6957791,514,295.386716806004445518872307,218.613283193995554481127693,1.740091787328304512524207,3.1419926697136426559
56,Wyoming,1,2650654,322,158.999742229335110434433505,163.000257770664889565566495,2.025160515892909998811477,6.1494354891534274019
13,Georgia,1,38622530,1531,1371.425993897619248141837556,159.574006102380751858162444,1.116356264802060761969198,0.4131630064171890134
20,Kansas,1,13080140,614,456.131961886081007511190823,157.868038113918992488809177,1.346101679569094846995188,1.2069292692120955318
47,Tennessee,1,26433376,1117,963.721580707159058717693824,153.278419292840941282306176,1.15904844548605873522296,0.57986698064159849
35,New Mexico,0,7766620,454,309.855782907892178460724131,144.144217092107821539275869,1.465197763099216302454129,1.8559452772519811905
08,Colorado,0,22010121,956,821.943744671241952679478656,134.056255328758047320521344,1.163096630636659175663154,0.6090664168941099748
30,Montana,0,4160070,289,163.02568092766106694748788,125.97431907233893305251212,1.772726838836128941641766,3.0281778689382374107
18,Indiana,1,28072385,1127,1003.326578484484797402202175,123.673421515515202597797825,1.123263376220255944164389,0.4405518858319847159
37,North Carolina,1,38489669,1420,1310.867163747017553018111619,109.132836252982446981888381,1.083252399076832656567678,0.2835379962685115504
02,Alaska,0,3094234,238,153.364462462503224741658794,84.635537537496775258341206,1.551858860772192925300673,2.7352662254211147334
19,Iowa,1,14381255,564,490.971653520333294490773857,73.028346479666705509226143,1.148742490439200642462009,0.5078023196144335492
38,North Dakota,1,3457915,208,136.609230588305691641187851,71.390769411694308358812149,1.522591109724071968688032,2.0645611419509822641
51,Virginia,1,35616196,1307,1244.706719446060882443706726,62.293280553939117556293274,1.050046552798929101025876,0.1749015547700240575
46,South Dakota,1,3818656,177,126.276387861706362993973229,50.723612138293637006026771,1.401687227495328933824296,1.3283105924779199018
49,Utah,1,11496274,494,452.733278095891026956954487,41.266721904108973043045513,1.09115018466870572794043,0.3589573622210898335
42,Pennsylvania,0,55260826,1922,1882.762930073379234201179231,39.237069926620765798820769,1.020840154275340194443632,0.0710034083215129028
31,Nebraska,1,8900883,334,314.7935443115663089671756,19.2064556884336910328244,1.061012863940513780725319,0.2157814644730606057
16,Idaho,1,5963551,235,218.85867285034005593260628,16.14132714965994406739372,1.073752284702455940006571,0.2706663722614251822
15,Hawaii,0,5931522,202,213.898723882376058886558494,-11.898723882376058886558494,0.944372160495360296750904,-0.2006015299677900358
32,Nevada,1,11722182,464,479.46909322221304401053755,-15.46909322221304401053755,0.967737037817693510903297,-0.131964281242289567
50,Vermont,0,2959306,78,93.636104400798370272151286,-15.636104400798370272151286,0.83301201496091872838433,-0.5283706517946562563
10,Delaware,0,4102909,105,126.382712407006165409072187,-21.382712407006165409072187,0.830809831504923523836264,-0.5211598016676988305
23,Maine,0,5868389,146,185.144598650420425644272347,-39.144598650420425644272347,0.788572829368189962911225,-0.6670416472122148965
44,Rhode Island,0,4645258,83,140.438859048376374031273374,-57.438859048376374031273374,0.591004516573360542982446,-1.2365052500501882572
33,New Hampshire,0,6130479,117,189.386924944351972449759387,-72.386924944351972449759387,0.617782880388276005579127,-1.1807711101261740306
41,Oregon,0,15910906,463,557.885619905794647283008753,-94.885619905794647283008753,0.829919222650303897591738,-0.5963558574589947756
09,Connecticut,0,16347656,393,492.734400776280569183243786,-99.734400776280569183243786,0.797589937663874146427487,-0.6100837990246465254
72,Puerto Rico,0,9804887,245,348.285903406495226225195035,-103.285903406495226225195035,0.703445065113798014154967,-1.0534124810055967624
24,Maryland,0,24860089,763,875.213041264016050296076427,-112.213041264016050296076427,0.871787740843128094986941,-0.4513782764977874789
04,Arizona,1,24259488,804,922.226169292512008409054335,-118.226169292512008409054335,0.871803497635282357693176,-0.4873399195090679919
26,Michigan,1,40488332,1116,1283.004461543043991803852625,-167.004461543043991803852625,0.869833296337729767685395,-0.412475528858644984
55,Wisconsin,0,26901059,728,900.541848570952545297616369,-172.541848570952545297616369,0.808402187144600873257397,-0.6413942609878389743
39,Ohio,0,51469758,1494,1688.125086451332785008634357,-194.125086451332785008634357,0.885005508176286884019929,-0.3771633945730477012
53,Washington,0,27362441,690,976.064874954823900349292882,-286.064874954823900349292882,0.706920223957383876233226,-1.045465479321906625
17,Illinois,0,56777383,1661,1952.754152122654936289181349,-291.754152122654936289181349,0.850593505687586681803608,-0.5138562869702094869
34,New Jersey,0,38397544,964,1297.435767991796240875563976,-333.435767991796240875563976,0.743004026698064197397337,-0.8683778524787841662
25,Massachusetts,0,31764291,606,955.119904319194779681183142,-349.119904319194779681183142,0.634475312743015344318323,-1.0990955356730448656
27,Minnesota,0,26051205,502,851.642608828592022267435704,-349.642608828592022267435704,0.589449136053074446850586,-1.3421360310534273646
36,New York,0,83906927,1994,2636.470019788420492504559185,-642.470019788420492504559185,0.756314308538968559525828,-0.7656936593428341053
06,California,0,146374411,3902,5105.655976294655795054574033,-1203.655976294655795054574033,0.764250474007026823806631,-0.8223131133860930071

jquery.tipsy.js

!function(a){function b(a,b){return"function"==typeof a?a.call(b):a}function d(b,d){this.$element=a(b),this.options=d,this.enabled=!0,this.fixTitle(),c(this)}var c=function(){function d(){for(var a=0;a<c.length;){var b=c[a];0===b.options.gcInterval||0===b.$element.closest("body").length?(b.hoverState="out",b.hide(),c.splice(a,1)):a++}}function e(){b=setTimeout(function(){d(),e()},a)}var a,b=null,c=[];return function(d){0!==d.options.gcInterval&&(b&&d.options.gcInterval<a&&(clearTimeout(b),b=null,a=d.options.gcInterval),c.push(d),b||e())}}();d.prototype={show:function(){var c=this.getTitle();if(c&&this.enabled){var d=this.tip();d.find(".tipsy-inner")[this.options.html?"html":"text"](c),d[0].className="tipsy",d.remove().css({top:0,left:0,visibility:"hidden",display:"block"}).prependTo(document.body);var e=a.extend({},this.$element.offset(),{width:this.$element[0].offsetWidth||0,height:this.$element[0].offsetHeight||0});if("object"==typeof this.$element[0].nearestViewportElement){var f=this.$element[0],g=f.getBoundingClientRect();e.width=g.width,e.height=g.height}var k,h=d[0].offsetWidth,i=d[0].offsetHeight,j=b(this.options.gravity,this.$element[0]);switch(j.charAt(0)){case"n":k={top:e.top+e.height+this.options.offset,left:e.left+e.width/2-h/2};break;case"s":k={top:e.top-i-this.options.offset,left:e.left+e.width/2-h/2};break;case"e":k={top:e.top+e.height/2-i/2,left:e.left-h-this.options.offset};break;case"w":k={top:e.top+e.height/2-i/2,left:e.left+e.width+this.options.offset}}2==j.length&&(k.left="w"==j.charAt(1)?e.left+e.width/2-15:e.left+e.width/2-h+15),d.css(k).addClass("tipsy-"+j),d.find(".tipsy-arrow")[0].className="tipsy-arrow tipsy-arrow-"+j.charAt(0),this.options.className&&d.addClass(b(this.options.className,this.$element[0])),this.options.fade?d.stop().css({opacity:0,display:"block",visibility:"visible"}).animate({opacity:this.options.opacity}):d.css({visibility:"visible",opacity:this.options.opacity});var l=this,m=function(a){return function(){l.$tip.stop(),l.tipHovered=a,a||(0===l.options.delayOut&&"manual"!=l.options.trigger?l.hide():setTimeout(function(){"out"==l.hoverState&&l.hide()},l.options.delayOut))}};d.hover(m(!0),m(!1))}},hide:function(){this.options.fade?this.tip().stop().fadeOut(function(){a(this).remove()}):this.tip().remove()},fixTitle:function(){var a=this.$element;(a.attr("title")||"string"!=typeof a.attr("original-title"))&&a.attr("original-title",a.attr("title")||"").removeAttr("title"),"object"==typeof a.context.nearestViewportElement&&a.children("title").length&&a.append("<original-title>"+(a.children("title").text()||"")+"</original-title>").children("title").remove()},getTitle:function(){var a,b=this.$element,c=this.options;if(this.fixTitle(),"string"==typeof c.title){var d="title"==c.title?"original-title":c.title;b.children(d).length?a=b.children(d).html():(a=b.attr(d),"undefined"==typeof a&&(a=""))}else"function"==typeof c.title&&(a=c.title.call(b[0]));return a=(""+a).replace(/(^\s*|\s*$)/,""),a||c.fallback},tip:function(){return this.$tip||(this.$tip=a('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>')),this.$tip},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled}},a.fn.tipsy=function(b){function c(c){var e=a.data(c,"tipsy");return e||(e=new d(c,a.fn.tipsy.elementOptions(c,b)),a.data(c,"tipsy",e)),e}function e(){var a=c(this);a.hoverState="in",0===b.delayIn?a.show():(a.fixTitle(),setTimeout(function(){"in"==a.hoverState&&a.show()},b.delayIn))}function f(){var a=c(this);if(a.hoverState="out",0===b.delayOut)a.hide();else{var d=function(){a.tipHovered&&b.hoverlock||"out"==a.hoverState&&a.hide()};setTimeout(d,b.delayOut)}}if(b===!0)return this.data("tipsy");if("string"==typeof b)return a(this).each(function(c,d){a(d).data("tipsy")&&(tipsy=a(d).data("tipsy"),tipsy[b]())}),this;if(b=a.extend({},a.fn.tipsy.defaults,b),b.hoverlock&&0===b.delayOut&&(b.delayOut=100),b.live||this.each(function(){c(this)}),"manual"!=b.trigger){var g=b.live?"live":"bind",h="hover"==b.trigger?"mouseenter":"focus",i="hover"==b.trigger?"mouseleave":"blur";this[g](h,e)[g](i,f)}return this},a.fn.tipsy.defaults={className:null,delayIn:0,delayOut:0,fade:!1,fallback:"",gcInterval:0,gravity:"n",html:!1,live:!1,offset:0,opacity:.8,title:"title",trigger:"hover",hoverlock:!1},a.fn.tipsy.elementOptions=function(b,c){return a.metadata?a.extend({},c,a(b).metadata()):c},a.fn.tipsy.autoNS=function(){return a(this).offset().top>a(document).scrollTop()+a(window).height()/2?"s":"n"},a.fn.tipsy.autoWE=function(){return a(this).offset().left>a(document).scrollLeft()+a(window).width()/2?"e":"w"},a.fn.tipsy.autoBounds=function(b,c){return function(){var d={ns:c[0],ew:c.length>1?c[1]:!1},e=a(document).scrollTop()+b,f=a(document).scrollLeft()+b,g=a(this);return g.offset().top<e&&(d.ns="n"),g.offset().left<f&&(d.ew="w"),a(window).width()+a(document).scrollLeft()-g.offset().left<b&&(d.ew="e"),a(window).height()+a(document).scrollTop()-g.offset().top<b&&(d.ns="s"),d.ns+(d.ew?d.ew:"")}}}(jQuery);

scatter.js

var sk_margin = {t:30, r:20, b:30, l:50 },
	w = 600 - sk_margin.l - sk_margin.r,
	h = 450 - sk_margin.t - sk_margin.b;

var sk_trans = 1500;
	
var sk_color = d3.scale.ordinal()
    	.range(['#880000','#325C74']);
	
	sk_radius=6;

var sk_transparency = d3.scale.sqrt().range([1,1]);

var sk_svg = d3.select("#scatterChart").append("svg")
	.attr("width", w + sk_margin.l + sk_margin.r)
	.attr("height", h + sk_margin.t + sk_margin.b);


var sk_xAxis = d3.svg.axis()
	.ticks(6)
	.tickSubdivide(4)
	.tickSize(6, 4, 0)
	.orient("bottom");

var sk_yAxis = d3.svg.axis()
	.ticks(10)
	.tickSubdivide(4)
	.tickSize(6, 4, 0)
	.orient("left");

var plus = d3.format("+");
var comma = d3.format(",");
var percent = d3.format("+%f");

var sk_groups = sk_svg.append("g").attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")");

var scatter_data;
d3.csv("analysis.csv", function(data) {
	window.scatter_data=data;
	initialize(scatter_data);
});

var guide_data = [{	x_adjust:20,	y_adjust:1.99,	text:"+99%"},{	x_adjust:20,	y_adjust:1.95,	text:"+95%"},{	x_adjust:20,	y_adjust:1.9,	text:"+90%"},{	x_adjust:20,	y_adjust:1.8,	text:"+80%"},{	x_adjust:20,	y_adjust:1.6,	text:"+60%"},{	x_adjust:20,	y_adjust:1.4,	text:"+40%"},{	x_adjust:20,	y_adjust:1.2,	text:"+20%"},{	x_adjust:30,	y_adjust:1,	text:"+0%"},{	x_adjust:20,	y_adjust:.8,	text:"-20%"},{	x_adjust:20,	y_adjust:.6,	text:"-40%"},{	x_adjust:20,	y_adjust:.4,	text:"-60%"},{	x_adjust:20,	y_adjust:.2,	text:"-80%"},{	x_adjust:20,	y_adjust:.1,	text:"-90%"},{	x_adjust:20,	y_adjust:.05,	text:"-95%"},{	x_adjust:20,	y_adjust:.01,	text:"-99%"},];


function scatterplot(data,signal){

data = dataPrepare(data,signal);

if(signal ===1){
	var sk_x = d3.scale.sqrt().range([0, w]),
    	sk_y = d3.scale.sqrt().range([h - sk_margin.b - 10,0]);
	    sk_x.domain([0, d3.max(data, function(d) { return parseFloat(d.x_plot); })*1.15]);
		sk_y.domain([0, d3.max(data, function(d) { return parseFloat(d.y_plot); })*1.1]);
		sk_yAxis.scale(sk_y).tickFormat(comma);
}else{
	var sk_x = d3.scale.sqrt().range([0, w]),
    	sk_y = d3.scale.linear().range([h - sk_margin.b - 10,0]);
    	sk_x.domain([0, d3.max(data, function(d) { return parseFloat(d.x_plot); })*1.15]);
		sk_y.domain([-1,1]);
		sk_yAxis.scale(sk_y).tickFormat(percent);
}


var sk_expect_max = d3.max(data, function(d) { return parseFloat(d.x_plot); });

sk_xAxis.scale(sk_x);

sk_transparency.domain([d3.min(data, function(d) { return parseFloat(d.x_plot); }),d3.max(data, function(d) { return parseFloat(d.x_plot); })])

guides
	.transition().duration(sk_trans)
	.attr("class", function(d){return d.y_adjust ===1 ? "trendline guides" :"compline guides"})
	.attr('x1',sk_x(0) )
    .attr('x2',sk_x(sk_expect_max))
    .attr('y1',function(d){return signal===1 ? sk_y(0): sk_y((1-d.y_adjust)*-1) ;} )
    .attr('y2',function(d){ return signal===1 ?  sk_y(sk_expect_max * d.y_adjust) : sk_y((1-d.y_adjust)*-1) ; });


var guide_text = sk_svg.selectAll(".guide_text")
			.data(guide_data);
guide_text.enter().append("text")
	.attr("class","guide_text")
	.attr("x", function(d){return w+d.x_adjust})
	.text(function(d){return d.text;});
guide_text
	.transition().duration(sk_trans)
	.attr("y", function(d){ return sk_y(sk_expect_max * d.y_adjust)+30; }); 


sk_svg.selectAll(".guide_text.spare")
.transition().duration(sk_trans)
.attr("y",function(){return signal ===1 ? 10 :-1000 ;});

	// style the circles, set their locations based on data
	var sk_circles =
	sk_groups.selectAll("circle");

	sk_circles
		.transition().duration(sk_trans)
		.attr({
			cx: function(d) { return sk_x(+d.x_plot); },
	    	cy: function(d) { return sk_y(+d.y_plot); },
		})
		.style("fill", function(d) { return sk_color(d.union); })
		.style("opacity",function(d){
			if(signal ===1){
				return 1;
			}else{
				return sk_transparency(d.x_plot);
			} })
		;


	sk_circles.on("mouseover",mouseOn)
		.on("mouseout",mouseOff);
	
	// what to do when we mouse over a bubble
	function mouseOn() { 
		var sk_circle = d3.select(this);

	// transition to increase size/opacity of bubble
		sk_circle.transition()
		.duration(800).style("opacity", 1)
		.attr("r", 20).ease("elastic");

		// append lines to bubbles that will be used to show the precise data points.
		// translate their location based on margins
		sk_svg.append("g")
			.attr("class", "guide")
		.append("line")
			.attr("x1", sk_circle.attr("cx"))
			.attr("x2", sk_circle.attr("cx"))
			.attr("y1", +sk_circle.attr("cy") )
			.attr("y2", h-30)
			.attr("transform", "translate(50,20)")
			.style("stroke", sk_circle.style("fill"))
			.transition().delay(200).duration(400).styleTween("opacity", 
						function() { return d3.interpolate(0, .5); });

		sk_svg.append("g")
			.data(data)
			.attr("class", "guide")
		.append("line")
			.attr("x1", +sk_circle.attr("cx") )
			.attr("x2", 0)
			.attr("y1", sk_circle.attr("cy"))
			.attr("y2", sk_circle.attr("cy"))
			.attr("transform", "translate(50,30)")
			.style("stroke", sk_circle.style("fill"))
			.transition().delay(200).duration(400).styleTween("opacity", 
						function() { return d3.interpolate(0, .5); });


	// function to move mouseover item to front of SVG stage, in case
	// another bubble overlaps it
		d3.selection.prototype.moveToFront = function() { 
		  return this.each(function() { 
			this.parentNode.appendChild(this); 
		  }); 
		};
	};

	// what happens when we leave a bubble?
	function mouseOff() {
		var sk_circle = d3.select(this);

		// go back to original size and opacity
		sk_circle.transition()
		.duration(800)
		.style("opacity",function(d){
			if(scatterClicker ===1){
				return 1;
			}else{
				return sk_transparency(d.x_plot);
			} })
		.attr("r", sk_radius).ease("elastic");

		// fade out guide lines, then remove them
		d3.selectAll(".guide").transition().duration(100).styleTween("opacity", 
						function() { return d3.interpolate(.5, 0); })
			.remove()
	};


	// tooltips (using jQuery plugin tipsy)
	sk_circles;

	$(".circles").tipsy({ 
		gravity: 's',
		html: 'true'
		});

	xxAxis.transition()
        .duration(sk_trans).call(sk_xAxis);
	yyAxis.transition()
        .duration(sk_trans).call(sk_yAxis);

};

function initialize(scatter_data){

var data=dataPrepare(scatter_data,1);

var sk_circles =
sk_groups.selectAll("circle")
	.data(data);

sk_circles.enter().append("circle")
  .attr({
  	class: function(d){return  "circles "+d.state;},
  	r: sk_radius,
    id: function(d) { return d.state; },
    cy:2000,
  })
	.append("title")
	.attr("class","tipsies")
	.text(function(d) { return '<font size="5px">'+d.state+'</font>' + '<br/><font size="2px">' +'Actual: '+ comma(d.y_plot)+ '<br/>' +"Expected: "+comma(d.x_plot) +'<br/>'+'Rate: '+ plus(d3.round((1- (+d.perform))*-100,2))+'%'; });
	scatterplot(data,1);
}


function dataPrepare(data,signal){
if(signal ===1){
	for(d in data){
		data[d].x_plot = Math.round(data[d].expected_fatal);
		data[d].y_plot = data[d].actual_fatal;
		data[d].perform = Math.round(data[d].perform*100)/100;
	}
}else{
	for(d in data){
		data[d].x_plot = Math.round(data[d].expected_fatal);
		data[d].y_plot = data[d].perform-1;
		data[d].perform = Math.round(data[d].perform*100)/100;
	}
}
return data;
}


// draw axes and axis labels
var xxAxis = sk_svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + sk_margin.l  + "," + (h-10) + ")");
var yyAxis = sk_svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")");

var guides = sk_svg.selectAll(".complines.guides")
				.data(guide_data);
guides.enter().append("line")
	.attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")");


sk_svg.append("text")
	.attr("class", "x label")
	.attr("text-anchor", "end")
	.attr("x", w + 50)
	.attr("y", h - 15)
	.text("Expected Deaths");
sk_svg.append("text")
	.attr("class", "y label")
	.attr("text-anchor", "end")
	.attr("x", -20)
	.attr("y", 55)
	.attr("dy", ".75em")
	.attr("transform", "rotate(-90)")
	.text("Actual Deaths");
sk_svg.append("text")
	.text("Below Expected")
	.attr("class","scatter_lab")
	.attr("x", 280)
	.attr("y", 325);
/*sk_svg.append("rect")
	.attr("class","rectback")
	.attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")")
	.attr("x", 100)
	.attr("y", 80)
	.attr("width",140)
	.attr("height",19)
	.style({
		fill:"white",
		opacity:.5
	});*/
sk_svg.append("text")
 	.text("Above Expected")
 	.attr("class","scatter_lab")
	.attr("x", 220)
	.attr("y", 90);
sk_svg.append("line")
	.attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")")
	.attr("class", "trendlinekey")
	.attr('x1',0)
    .attr('x2',30)
    .attr('y1',h-10)
    .attr('y2',h-10);
sk_svg.append("text")
	.attr("class","chartkey")
 	.text("Expected workplace deaths based on national averages.")
	.attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")")
	.attr("x", 32)
	.attr("y", h-6);

sk_svg.append("circle")
	.attr("class","chartkey")
	.attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")")
	.attr("cx", 10)
	.attr("cy", h+8)
	.attr("r",5)
	.style("fill","#880000")
	.style("stroke","black");
sk_svg.append("circle")
	.attr("class","chartkey")
	.attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")")
	.attr("cx", 140)
	.attr("cy", h+8)
	.attr("r",5)
	.style("fill","#325C74")
	.style("stroke","black");

sk_svg.append("text")
	.attr("class","chartkey")
 	.text("Right-to-work state")
	.attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")")
	.attr("x", 20)
	.attr("y", h+12);
sk_svg.append("text")
	.attr("class","chartkey")
 	.text("Closed-shop state")
	.attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")")
	.attr("x", 150)
	.attr("y", h+12);

/*Spares along the top*/
sk_svg.append("rect")

	.attr("x",400)
	.attr("y",0)
	.attr("width",150)
	.attr("height",12)
	.style("fill","white");
sk_svg.append("text")
	.attr("class","guide_text spare")
 	.text("+20%")
 	.style("font-size","11px")
	.attr("x", w-5);
sk_svg.append("text")
	.attr("class","guide_text spare")
 	.text("+40%")
 	.style("font-size","11px")
	.attr("x", w-40);
sk_svg.append("text")
	.attr("class","guide_text spare")
 	.text("+60%")
 	.style("font-size","11px")
	.attr("x", w-70);
sk_svg.append("text")
	.attr("class","guide_text spare")
 	.text("+99%")
	.attr("x", w-115)
	.style("font-size","10px");

sk_svg.append("circle")
	.attr("cx",463)
	.attr("cy",h+20)
	.attr("r",5)
	.style("fill","#880000")
	.style("stroke","black")
	.style("stroke-width",1);
sk_svg.append("image")
	.attr("xlink:href", "cursor.png")
	.attr("x",436)
	.attr("y",h+18)
	.attr("width",30)
	.attr("height",30);

sk_svg.append("text")
	.attr("class","chartkey")
 	.text("Touch for")
	.attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")")
	.attr("x", 420)
	.attr("y", h);
sk_svg.append("text")
	.attr("class","chartkey")
 	.text("more info.")
	.attr("transform", "translate(" + sk_margin.l + "," + sk_margin.t + ")")
	.attr("x", 422)
	.attr("y", h+12);


var scatterClicker =1;
$('.scatterSelect').click(function(){
	if(scatterClicker===1){
		scatterplot(scatter_data,0);
		scatterClicker = 0;
		$('.scatterSelect').text("View Totals");
	}else{
		scatterplot(scatter_data,1);
		scatterClicker = 1;
		$('.scatterSelect').text("View Rates");
	}

}	);
	

styles.css

@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono|Lora);.axis text{font:14px arial,sans-serif}.axis line,.axis path{fill:none;stroke:#000;stroke-width:1px;shape-rendering:crispEdges}.lab{font-size:11px;font-family:'Ubuntu Mono',arial,sans-serif}svg{overflow:hidden}#scatterChart text{font:13px arial}.circles{opacity:.7;stroke:#000;stroke-opacity:1}.tipsy{margin-top:-14px}.guide line{fill:none;stroke:#000;stroke-width:2px;shape-rendering:crispEdges;opacity:.2}.trendline{fill:none;stroke:#000;stroke-width:1.5px;stroke-dasharray:10,10;opacity:1}.trendlinekey{fill:none;stroke:#000;stroke-width:1.5px;stroke-dasharray:5,5;opacity:1}.chartkey{font:14px sans-serif}.compline,.complinekey{fill:none;stroke-width:.5px;stroke:grey;opacity:.6}#scatterChart .label{font-size:16px;font-family:'Ubuntu Mono',arial,sans-serif}#scatterChart text.scatter_lab{font-size:20px;font-family:'Ubuntu Mono',arial,sans-serif}#scatterChart text.guide_text{font-size:12px;font-family:'Ubuntu Mono',arial,sans-serif}#scatterChart .circles{cursor:pointer}#scatterChart .scatter_lab{pointer-events:none}.tipsy{padding:5px;font-size:10px;position:absolute;z-index:100000;font-family:Arial,sans-serif}.tipsy-inner{padding:5px 8px 4px;background-color:#000;color:#fff;max-width:200px;text-align:center;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.tipsy-arrow{position:absolute;background:url(../images/tipsy.gif) top left no-repeat;width:9px;height:5px}.tipsy-n .tipsy-arrow{top:0;left:50%;margin-left:-4px}.tipsy-nw .tipsy-arrow{top:0;left:10px}.tipsy-ne .tipsy-arrow{top:0;right:10px}.tipsy-s .tipsy-arrow{bottom:0;left:50%;margin-left:-4px;background-position:bottom left}.tipsy-sw .tipsy-arrow{bottom:0;left:10px;background-position:bottom left}.tipsy-se .tipsy-arrow{bottom:0;right:10px;background-position:bottom left}.tipsy-e .tipsy-arrow{top:50%;margin-top:-4px;right:0;width:5px;height:9px;background-position:top right}.tipsy-w .tipsy-arrow{top:50%;margin-top:-4px;left:0;width:5px;height:9px}.scatterSelect{transition:background-color .5s ease;background-color:#F0F0F0;border-radius:4px;text-indent:0;border:1px solid #000;display:inline-block;color:#000;font-family:Arial;font-size:15px;font-style:normal;height:20px;line-height:18px;width:110px;text-decoration:none;text-align:center;cursor:pointer;margin-right:20px}.scatterSelect:hover{transition:background-color .5s ease;background-color:#B4CDCD}.scatterSelect:active{position:relative;top:1px}.rectback{pointer-events:none}.chartContainer{width:600px;}.chartContainer .scatterSelect{float:right}.chartContainer p{margin:5px 20px 15px}.barchartContainer{height:930px;width:400px;margin-right:40px;margin-bottom:30px}.barchartContainer h1{text-align:center}.barchartContainer p{margin:5px 0 15px}.barchartContainer #barChart{margin:0 auto -20px}