A scatter plot that pivots one axis from raw to percent.
Last active
August 29, 2015 14:16
-
-
Save hobbes7878/4d58a830176023229d7f to your computer and use it in GitHub Desktop.
Scatter plot pivot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"); | |
} | |
} ); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment