Skip to content

Instantly share code, notes, and snippets.

@hobbes7878

hobbes7878/README.md

Last active August 29, 2015 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hobbes7878/4d58a830176023229d7f to your computer and use it in GitHub Desktop.
Save hobbes7878/4d58a830176023229d7f to your computer and use it in GitHub Desktop.
Download ZIP
Scatter plot pivot
Raw
README.md

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

Raw
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
Raw
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>
Raw
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);
Raw
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");
}
} );
Raw
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}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment