Skip to content

Instantly share code, notes, and snippets.

@soulteary

soulteary/quadrant.js Secret

Created September 4, 2020 13:54
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 soulteary/10db068c77e5cec10378278f464dec86 to your computer and use it in GitHub Desktop.
Save soulteary/10db068c77e5cec10378278f464dec86 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
quadrant.js
var cobra;function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}(cobra=cobra||{}).simple_event=function(){var e=[];return{listen:function(t){e.push(t)},fire:function(){var a=arguments;e.forEach(function(t){t.apply(this,a)})}}},window.Modernizr=function(p,r){function t(t){l.cssText=t}function e(t,a){return _typeof(t)===a}var a,i,n={},u=p.documentElement,f="modernizr",o=p.createElement(f),l=o.style,c=" -webkit- -moz- -o- -ms- ".split(" "),s={},d=[],h=d.slice,_={}.hasOwnProperty;for(var b in i=e(_,"undefined")||e(_.call,"undefined")?function(t,a){return a in t&&e(t.constructor.prototype[a],"undefined")}:function(t,a){return _.call(t,a)},Function.prototype.bind||(Function.prototype.bind=function(i){var n=this;if("function"!=typeof n)throw new TypeError;var o=h.call(arguments,1);return function t(){if(this instanceof t){function a(){}a.prototype=n.prototype;var e=new a,r=n.apply(e,o.concat(h.call(arguments)));return Object(r)===r?r:e}return n.apply(i,o.concat(h.call(arguments)))}}),s)i(s,b)&&(a=b.toLowerCase(),n[a]=s[b](),d.push((n[a]?"":"no-")+a));return n.addTest=function(t,a){if("object"==_typeof(t))for(var e in t)i(t,e)&&n.addTest(e,t[e]);else{if(t=t.toLowerCase(),n[t]!==r)return n;a="function"==typeof a?a():a,"undefined"!=typeof enableClasses&&enableClasses&&(u.className+=" "+(a?"":"no-")+t),n[t]=a}return n},t(""),o=null,n._version="2.8.2",n._prefixes=c,n.testStyles=function(t,a,e,r){var i,n,o,l,c=p.createElement("div"),s=p.body,d=s||p.createElement("body");if(parseInt(e,10))for(;e--;)(o=p.createElement("div")).id=r?r[e]:f+(e+1),c.appendChild(o);return i=["&#173;",'<style id="s',f,'">',t,"</style>"].join(""),c.id=f,(s?c:d).innerHTML+=i,d.appendChild(c),s||(d.style.background="",d.style.overflow="hidden",l=u.style.overflow,u.style.overflow="hidden",u.appendChild(d)),n=a(c,t),s?c.parentNode.removeChild(c):(d.parentNode.removeChild(d),u.style.overflow=l),!!n},n}(this.document),Modernizr.addTest("csspositionsticky",function(){var t="position:",a=document.createElement("modernizr").style;return a.cssText=t+Modernizr._prefixes.join("sticky;"+t).slice(0,-t.length),-1!==a.position.indexOf("sticky")}),(cobra=cobra||{}).quadrant_setup=function(){"use strict";return{tools:{startAngle:0,tx:0,ty:1,colour:"#83AD78",move_in:"bottomLeft",move_out:"topRight"},"languages-and-frameworks":{startAngle:90,tx:0,ty:0,colour:"#8D2145",move_in:"topLeft",move_out:"bottomRight"},platforms:{startAngle:180,tx:1,ty:0,colour:"#E88744",move_in:"topRight",move_out:"bottomLeft"},techniques:{startAngle:270,tx:1,ty:1,colour:"#3DB5BE",move_in:"bottomRight",move_out:"topLeft"}}},cobra.radar_draw=function(){"use strict";function e(t){d3.selectAll("main a circle, main a path").attr("opacity",.3),d3.select("#blip-"+t).selectAll("circle path").attr("opacity",1),$radar_chart_ft&&(d3.select("#blip-"+t).selectAll("path").attr("transform","scale(1.25) translate(-3.5, -3.5)").attr("opacity",.5),d3.select("#blip-"+t).selectAll("circle").attr("opacity",1))}function i(){d3.selectAll("a circle a path").attr("opacity",1),$radar_chart_ft&&(d3.selectAll("a path").attr("transform","scale(1.25) translate(-3.5, -3.5)").attr("opacity",.5),d3.selectAll("a circle").attr("opacity",1))}var c={enter_spotlight:cobra.simple_event(),leave_spotlight:cobra.simple_event()},T={};function t(){$(".static-quadrant").hide(),$(".blip-link .blip-name").show(),$(".non-js-blip-desc-link").hide();function R(t,a,e,r,i){if($radar_chart_ft){var n=t.append("g").attr("transform","scale("+r/34+") translate("+(a*(34/r)-17)+", "+(e*(34/r)-1)+")");switch(i){case"topLeft":n.append("path").attr("opacity","0.5").attr("transform","scale(1.25) translate(-3.5, -3.5)").attr("d","M19.5,1.56c0,0.86-0.7,1.56-1.56,1.56c-8.16,0-14.8,6.64-14.8,14.8c0,0.86-0.7,1.56-1.56,1.56S0,18.8,0,17.93C0,8.04,8.04,0,17.93,0C18.8,0,19.5,0.7,19.5,1.56z");break;case"topRight":n.append("path").attr("opacity","0.5").attr("transform","scale(1.25) translate(-3.5, -3.5)").attr("d","M16.5,1.56c0,0.86,0.7,1.56,1.56,1.56c8.16,0,14.8,6.64,14.8,14.8c0,0.86,0.7,1.56,1.56,1.56 c0.86,0,1.56-0.7,1.56-1.56C36,8.04,27.96,0,18.07,0C17.2,0,16.5,0.7,16.5,1.56z");break;case"bottomLeft":n.append("path").attr("opacity","0.5").attr("transform","scale(1.25) translate(-3.5, -3.5)").attr("d","M19.5,34.44c0-0.86-0.7-1.56-1.56-1.56c-8.16,0-14.8-6.64-14.8-14.8c0-0.86-0.7-1.56-1.56-1.56 S0,17.2,0,18.07C0,27.96,8.04,36,17.93,36C18.8,36,19.5,35.3,19.5,34.44z");break;case"bottomRight":n.append("path").attr("opacity","0.5").attr("transform","scale(1.25) translate(-3.5, -3.5)").attr("d","M16.5,34.44c0-0.86,0.7-1.56,1.56-1.56c8.16,0,14.8-6.64,14.8-14.8c0-0.86,0.7-1.56,1.56-1.56 c0.86,0,1.56,0.7,1.56,1.56C36,27.96,27.96,36,18.07,36C17.2,36,16.5,35.3,16.5,34.44z");break;default:n.append("path").attr("opacity","0.5").attr("transform","scale(1.25) translate(-3.5, -3.5)").attr("d","M18,36C8.07,36,0,27.93,0,18S8.07,0,18,0c9.92,0,18,8.07,18,18S27.93,36,18,36z M18,3.14,C9.81,3.14,3.14,9.81,3.14 18S9.81,32.86,18,32.86S32.86,26.19,32.86,18S26.19,3.14,18,3.14z")}return n.append("circle").attr("r","15").attr("cx","18").attr("cy","18"),n}return t.append("path").attr("d","M412.201,311.406c0.021,0,0.042,0,0.063,0c0.067,0,0.135,0,0.201,0c4.052,0,6.106-0.051,8.168-0.102c2.053-0.051,4.115-0.102,8.176-0.102h0.103c6.976-0.183,10.227-5.306,6.306-11.53c-3.988-6.121-4.97-5.407-8.598-11.224c-1.631-3.008-3.872-4.577-6.179-4.577c-2.276,0-4.613,1.528-6.48,4.699c-3.578,6.077-3.26,6.014-7.306,11.723C402.598,306.067,405.426,311.406,412.201,311.406").attr("transform","scale("+r/34+") translate("+(a*(34/r)-404-17)+", "+(e*(34/r)-282-17)+")")}function M(t,a,e,r){if($radar_chart_ft){var i=t.append("g").attr("transform","scale("+r/34+") translate("+(a*(34/r)-17)+", "+(e*(34/r)-1)+")");return i.append("circle").attr("r","15").attr("cx","18").attr("cy","18"),i}return t.append("path").attr("d","M420.084,282.092c-1.073,0-2.16,0.103-3.243,0.313c-6.912,1.345-13.188,8.587-11.423,16.874c1.732,8.141,8.632,13.711,17.806,13.711c0.025,0,0.052,0,0.074-0.003c0.551-0.025,1.395-0.011,2.225-0.109c4.404-0.534,8.148-2.218,10.069-6.487c1.747-3.886,2.114-7.993,0.913-12.118C434.379,286.944,427.494,282.092,420.084,282.092").attr("transform","scale("+r/34+") translate("+(a*(34/r)-404-17)+", "+(e*(34/r)-282-17)+")")}function o(t,a,e,r,i){return t.append("rect").attr("x",a).attr("y",e).attr("width",r).attr("height",i)}function z(t){return t*Math.PI/180}function r(t,a,e,r,i,n,o,l,c){var s,d,p,u,f,h,_,b,v,g;s=t,d=e,p=r,u=i,f=n,h=o,_=l,b=c,v=d3.svg.arc().innerRadius(d).outerRadius(p).startAngle(z(h)).endAngle(z(h+90)),g=s.append("path").attr("d",v).attr("fill",u).attr("transform","translate("+_*f+", "+b*f+")"),$radar_chart_ft&&g.attr("stroke","#808184").attr("stroke-width","1px").attr("transform","translate("+(_*f+1)+", "+(b*f+(0===b?34:0))+")")}function n(s,t,d,p,a,e,u,f,h){_(a).each(function(t){r(s,0,t.startRadius*p,t.endRadius*p,t.colour,d,e,u,f)}),$radar_chart_ft||function(t,a,e,r){var i=0;e&&(i=a-15);var n=0;r&&(n=a-15),o(t,0,n,a,15).attr("fill","white").attr("opacity",.5),o(t,i,0,15,a).attr("fill","white").attr("opacity",.5)}(s,d,u,f),_(a).each(function(t){var a,e,r,i,n,o,l,c;a=s,e=t.title,r=t.startRadius*p,i=t.endRadius*p,n=d,o=h,l=(r+i)/2,c=$radar_chart_ft?14:12,u&&(l=n-l),f&&(c=n+($radar_chart_ft?34:-5)),a.append("text").attr({x:l,y:c,"text-anchor":"middle",fill:o}).style($radar_chart_ft?{"font-size":"16px","font-weight":600}:{"font-size":"10px","font-weight":900}).text($radar_chart_ft?e:e.toUpperCase())})}function A(t){c.leave_spotlight.fire(t,""),i()}function F(t,a){c.enter_spotlight.fire(t,a),e(t)}function l(a,t,e,r,i,n,o,l,c){var s,d,p,u,f,h,_,b,v,g,y,m,x,w=(s=a,d=r,p=i,u=n,f=o,$radar_chart_ft?{x:Math.abs(Math.abs(s.radius*d*Math.cos(z(s.theta)))-u*p),y:Math.abs(Math.abs(s.radius*d*Math.sin(z(s.theta)))-(f*p-(0===f?15:0)))}:{x:Math.abs(Math.abs(s.radius*d*Math.cos(z(s.theta)))-u*p),y:Math.abs(Math.abs(s.radius*d*Math.sin(z(s.theta)))-f*p)}),C=t.append("svg:a").attr("class","quadrant-blip").attr({id:"blip-"+a.id,"xlink:href":a.nameUrl,title:$("#blip-link-"+a.id+" span.blip-name").text()}).style({"text-decoration":"none",cursor:"pointer"});function k(t){$("#quadrant").is(":visible")&&$("#blip-"+a.id).tooltipster(t)}T[a.id]={show:function(){k("open")},hide:function(){k("close")}},h=a,_=C,b=e,v=w.x,g=w.y,y=l,m=$("#quadrant-blip-list").data("quadrant"),x=S.quadrantData[m],(0,{t:R,c:M}[h.movement])(_,v,g,y,x[h.blip_status]).attr("fill",b).attr("class",h.ring.toLowerCase()+"-blip");var q="t"===a.movement?w.y+6:w.y+($radar_chart_ft?6:4);C.append("text").attr({x:w.x+($radar_chart_ft?1:0),y:q-($radar_chart_ft?-11:0),"font-size":c,"font-style":$radar_chart_ft?"normal":"italic","font-weight":"bold",fill:"white"}).text(a.radarId).style({"text-anchor":"middle"}),C.on("click",function(){dataLayer.push({event:"radar_click",eventLabel:a.eventLabel,eventCategory:a.eventCategory,eventAction:a.eventAction})}),C.on("touchstart",function(){F(a.id,"white")}),C.on("touchend",function(){A(a.id)}),C.on("mouseenter",function(){$("#blip-"+a.id).tooltipster("open"),F(a.id,"white")}),C.on("mouseleave",function(){$("#blip-"+a.id).tooltipster("close"),A(a.id)})}var a,t=(a=[],$(".ring").toArray().map(function(t){a.push($(t).text().slice(1,-1))}),a);var S={graphHeight:$radar_chart_ft?550:500,graphWidth:$radar_chart_ft?502:500,quadrantRadius:500,blipWidth:25,blipFontSize:"10px",blipColours:{adopt:"#44b500",trial:"#859900",assess:"#99df00",hold:"#bb5500"},textColour:"#221D1F",maxRadius:400,segmentData:[{title:t[0],startRadius:0,endRadius:150,colour:$radar_chart_ft?"#FFF":"#BFC0BF"},{title:t[1],startRadius:150,endRadius:275,colour:$radar_chart_ft?"#FFF":"#CBCCCB"},{title:t[2],startRadius:275,endRadius:350,colour:$radar_chart_ft?"#FFF":"#D7D8D6"},{title:t[3],startRadius:350,endRadius:400,colour:$radar_chart_ft?"#FFF":"#E4E5E4"}],quadrantData:cobra.quadrant_setup()};$(function(){if(document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")&&$("#quadrant-blip-list").length){var a=d3.select("#quadrant").insert("svg",":first-child").attr("width",S.graphWidth).attr("height",S.graphHeight),t=s();if(void 0!==t){var e=$("#quadrant-blip-list").data("quadrant"),r=S.quadrantData[e],i=S.quadrantRadius/S.maxRadius;n(a,0,S.quadrantRadius,i,S.segmentData,r.startAngle,r.tx,r.ty,S.textColour),_(t).each(function(t){_(t.blips).each(function(t){l(t,a,r.colour,i,S.quadrantRadius,r.tx,r.ty,S.blipWidth,S.blipFontSize)})}),function(t,a,e,r,i){var n=a/10,o=a/10,l=$("#quadrant .hide").text().split(","),c=l[0],s=l[1];if(e||(n=a-n-10*Math.max(c.length,s.length)),r||(o=a-o),$radar_chart_ft){var d=l[2],p="#808184";r||e||(n+=30,o+=30),R(t,n,o-45,18).attr("fill",p),t.append("text").attr({x:n+20,y:o-30,fill:i,"font-size":"0.8em"}).text(c),R(t,n,o-15,18,S.quadrantData[$("#quadrant-blip-list").data("quadrant")].move_in).attr("fill",p),t.append("text").attr({x:n+20,y:o,fill:i,"font-size":"0.8em"}).text(s),M(t,n,o+15,18).attr("fill",p),t.append("text").attr({x:n+20,y:o+30,fill:i,"font-size":"0.8em"}).text(d)}else R(t,n,o-10,10).attr("fill",i),t.append("text").attr({x:n+10,y:o-5,fill:i,"font-size":"0.8em"}).text(c),M(t,n,o+10,10).attr("fill",i),t.append("text").attr({x:n+10,y:o+15,fill:i,"font-size":"0.8em"}).text(s)}(a,S.quadrantRadius,r.tx,r.ty,S.textColour)}}})}function s(){var a=[];return $("#quadrant-blip-list").children("div").toArray().forEach(function(e){var r=[];$(e).find(".blip-link").toArray().forEach(function(t){var a={radius:$(t).data("radius"),theta:$(t).data("theta"),movement:$(t).data("movement"),blip_status:$(t).data("blipStatus"),id:$(t).data("blip-id"),ring:$(e).attr("id"),radarId:$(t).data("radar-id"),nameUrl:$(t).data("url"),eventCategory:$(t).data("event-category"),eventLabel:$(t).data("event-label"),eventAction:"Click to Blip"};r.push(a)});var t={blips:r};a.push(t)}),a}return{apply_to_page:function(){var i,n,o,l,c;t(),$("#quadrant").length&&(i=$("#quadrant"),n=$(window),o=i.offset().top-20,l=$("#quadrant-blip-list"),c=n.scrollTop(),Modernizr.csspositionsticky||n.scroll(function(){var t=l.offset().top+l.outerHeight(!0),a=i.offset().top,e=a+i.outerHeight(),r=n.scrollTop()<c;n.scrollTop()>o?!r&&e<t?i.css("margin-top",n.scrollTop()-o):r&&n.scrollTop()<=a&&i.css("margin-top",n.scrollTop()-o):i.css("margin-top",0),c=n.scrollTop()}))},ring_list:s,on_enter_spotlight:c.enter_spotlight.listen,on_leave_spotlight:c.leave_spotlight.listen,highlight_blip:function(t){T[t].show(),e(t)},unhighlight_blip:function(t){T[t].hide(),i()}}},(cobra=cobra||{}).blip_list_view=function(n){"use strict";var r,o,l=n.location.protocol+"//"+n.location.host+n.location.pathname;function i(t){var a,e=$(this).data("blip-id"),r="#blip-description-"+e;if(dataLayer.push({event:"radar_click",eventLabel:$(this).data("event-label"),eventCategory:$(this).data("event-category"),eventAction:$(this).data("event-action")}),$radar_chart_ft&&($("#blip-link-"+o).css({"font-weight":"normal"}),$(this).siblings(".blip-description").is(":hidden")&&($("#blip-link-"+e).css({"font-weight":"bold"}),o=e)),$blip_id_query_param_ft){a=e,$("#language-switchers li a").each(function(){var t=$(this).attr("href").split("?")[0];$(this).attr("href",t+"?blipid="+a)});var i="";$(this).siblings(".blip-description").is(":hidden")&&(i="?blipid="+e),n.history.replaceState({path:l},"",l+i)}$.fx.off?$(r).slideToggle(400,"swing",function(){t&&t instanceof Function&&t()}):($(".blip-description").not(r).slideUp(250),$(r).delay(250).slideToggle(250,"swing",function(){t&&t instanceof Function&&t()}))}function e(t,a,e){$("#blip-link-"+t).css({"background-color":a,color:e})}function c(t,a,e){$("#blip-link-"+t+" .radar-movement").css({"background-color":a,color:e})}var s={enter_spotlight:cobra.simple_event(),leave_spotlight:cobra.simple_event()},a=function(t){e(t,"white","black"),c(t,"","")},d=function(t,a){r&&(p.bind(r)(),r=void 0),e(t,"rgba(0, 0, 0, 0.8)",a),c(t,"white","black")};function p(){var t=$(this).data("blip-id");a(t),s.leave_spotlight.fire(t)}function u(){var t=$(this).data("blip-id");d(t,"white"),s.enter_spotlight.fire(t)}function f(t){var a,e=$(".blip-link[data-blip-id="+t+"]");if(0===e.length)return a=$("#responsive-tech-radar .container").data("selected-blip-name"),void(n.location=n.location.href.split("?")[0]+"/"+a);i.bind(e)(function(){d(t,"white"),s.enter_spotlight.fire(t),r=e,$(e).get(0).scrollIntoView()})}return{apply_to_page:function(){$(".blip-link").click(i),$(".blip-link").mouseleave(p),$(".blip-link").mouseenter(u);var t=$("#responsive-tech-radar .container").data("selected-blip-id");t&&f(t)},on_enter_spotlight:s.enter_spotlight.listen,on_leave_spotlight:s.leave_spotlight.listen,highlight:d,unhighlight:a}},(cobra=cobra||{}).quadrant_controller=function(t,a){t.on_enter_spotlight(a.highlight_blip),t.on_leave_spotlight(a.unhighlight_blip),a.on_enter_spotlight(t.highlight),a.on_leave_spotlight(t.unhighlight)};var blip_radar_view=cobra.radar_draw();blip_radar_view.apply_to_page(),$(document).ready(function(){"use strict";var t=cobra.blip_list_view(window);cobra.quadrant_controller(t,blip_radar_view),t.apply_to_page()});
//# sourceMappingURL=quadrant.js.map
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment