Created
November 27, 2012 19:08
-
-
Save saraquigley/4156317 to your computer and use it in GitHub Desktop.
Donut : IT System Costs
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
body { | |
font-size: 24px; | |
font-weight: normal; | |
font-family: "Helvetica Neue"; | |
} | |
#pie { | |
margin-top: 80px; | |
margin-left: 140px; | |
} | |
.nameLabel { | |
font-size: 20px; | |
font-weight: normal; | |
font-family: "Helvetica Neue"; | |
} | |
.valLabel { | |
font-size: 30px; | |
font-weight: 400; | |
font-family: "Helvetica Neue"; | |
} | |
.percentLabel { | |
font: 600 26px "Helvetica Neue"; | |
} | |
.totalLabel { | |
font: 600 40px "Helvetica Neue"; | |
} | |
#calc-notes { | |
position: absolute; | |
font: 300 16px "Helvetica Neue"; | |
color: #525252; | |
top: 40px; | |
left: 40px; | |
} | |
#tip { | |
position: absolute; | |
z-index: 1; | |
display: block; | |
top: 20px; | |
left: 40px; | |
font: 300 20px "Helvetica Neue"; | |
color: #2171B5; | |
} | |
.Operations { | |
fill: #74C476; | |
fill-opacity: .75; | |
font: 400 12px "Helvetica Neue"; | |
color: #74C476; | |
} | |
.Overhead { | |
fill: #FE9929; | |
fill-opacity: .75; | |
font: 400 12px "Helvetica Neue"; | |
color: #FE9929; | |
} | |
.Projects { | |
fill: #807DBA; | |
fill-opacity: .75; | |
font: 400 12px "Helvetica Neue"; | |
color: #807DBA; | |
} | |
.Licensing { | |
fill: #238B45; | |
fill-opacity: .75; | |
font: 400 12px "Helvetica Neue"; | |
color: #238B45; | |
} |
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> | |
<html> | |
<head> | |
<title>Pie Chart</title> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script> | |
<link rel="stylesheet" type="text/css" href="donut_style.css" /> | |
</head> | |
<body> | |
<div id="tip">click the donut to see the transition</div> | |
<div id="chart"> | |
<script type="text/javascript"> | |
var data1 = [ | |
{name:"Maintenance/Operations", val:90, "tco":79.6, "class":"Operations"}, | |
{name:"", val:null, "tco":null , "class":"Operations"}, | |
{name:"", val:null, "tco":null, "class":"Projects"}, | |
{name:"Overhead / Other", val:10, "tco":8.9, "class":"Overhead"}, | |
], | |
data2 = [ | |
{name:"Operational Resources", val:28, "tco":24.8, "class":"Operations"}, | |
{name:"Software Licensing, Hardware", val:37, "tco":32.7, "class":"Operations"}, | |
{name:"Project Resources", val:25, "tco":22.1, "class":"Projects"}, | |
{name:"Overhead / Other", val:10, "tco":8.9, "class":"Overhead"}, | |
], | |
data = data2; | |
var w = 1000, | |
h = 600, | |
r = Math.min(w, h - 100) / 3, | |
labelr = r + 40, // radius for label anchor | |
color = [ "#74C476", "#238B45","#807DBA","#FE9929"], | |
donut = d3.layout.pie().sort(null), | |
arc = d3.svg.arc().innerRadius(r * .6).outerRadius(r); | |
var qFormat = d3.format(","); | |
var vis = d3.select("body").append("svg:svg") | |
.attr("width", w + 100) | |
.attr("height", h + 100) | |
.attr("id", "pie") | |
.data([data]); | |
var arcs = vis.selectAll("g") | |
.data(donut.value(function(d) { return d.val })) | |
.enter().append("svg:g") | |
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")") | |
.attr("class", "arc") | |
.append("svg:path") | |
.attr("d", arc) | |
.each(function(d) { this._current = d; }) | |
.attr("fill", function(d, i) { return color[i]; }); | |
// percent labels | |
var percentLabels = vis.selectAll("g") | |
.append("svg:text") | |
.attr("opacity", 0) | |
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) | |
.attr("fill", "white") | |
.text(function(d, i) { return d.value + "%"; }) | |
.attr("text-anchor", "middle") | |
.attr("display", function(d) { return d.value > .15 ? null : "none"; }) | |
.attr("class", "percentLabel") | |
.transition().delay(6500).duration(3000) | |
.attr("opacity", 100); | |
// cost area name labels | |
vis.selectAll("g").append("svg:text") | |
.attr("opacity", 0) | |
.attr("transform", function(d) { | |
var c = arc.centroid(d), | |
x = c[0], | |
y = c[1], | |
// pythagorean theorem for hypotenuse | |
h = Math.sqrt(x*x + y*y); | |
return "translate(" + (x/h * labelr) + ',' + | |
(y/h * labelr) + ")"; | |
}) | |
.attr("fill", function(d, i) { return color[i]; }) | |
.attr("dy", ".35em") | |
.attr("text-anchor", function(d) { | |
// are we past the center? | |
return (d.endAngle + d.startAngle)/2 > Math.PI ? | |
"end" : "start"; | |
}) | |
.text(function(d, i) { return data[i].name; }) | |
.attr("class", "nameLabel") | |
.transition().delay(750).duration(2000) | |
.attr("opacity", 100); | |
// value label | |
vis.selectAll("g").append("svg:text") | |
.attr("opacity", 0) | |
.attr("transform", function(d) { | |
var c = arc.centroid(d), | |
x = c[0], | |
y = c[1], | |
// pythagorean theorem for hypotenuse | |
h = Math.sqrt(x*x + y*y); | |
return "translate(" + (x/h * labelr) + ',' + | |
(y/h * labelr) + ")"; | |
}) | |
.attr("dy", "1.5em") | |
.attr("fill", function(d, i) { return color[i]; }) | |
.attr("text-anchor", function(d) { | |
// are we past the center? | |
return (d.endAngle + d.startAngle)/2 > Math.PI ? | |
"end" : "start"; | |
}) | |
.text(function(d, i) { return "$" + qFormat(d.data.tco) + "MM"; }) | |
.attr("class", "valLabel") | |
.transition().delay(2000).duration(2000) | |
.attr("opacity", 100); | |
//total Label | |
vis.append("svg:text") | |
.attr("opacity", 0) | |
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")") | |
.attr("dy", ".35em") | |
.attr("text-anchor", "middle") | |
.attr("fill", "#525252") | |
.text("$" + qFormat(88.5) + "MM") | |
.attr("class", "totalLabel") | |
.transition().delay(4000).duration(3000) | |
.attr("opacity", 100); | |
// construction people | |
vis.append("svg:path") | |
.attr("opacity", 0) | |
.attr("d", "M 750.204,382.625 C 753.214,110.971 575.928,27.921 568.319,30.186 c 0,0 -43.013,119.984 -43.013,169.802 0,49.802 0,274.712 0,274.712 H 400.012 274.718 c 0,0 0,-224.911 0,-274.712 0,-49.818 -43.014,-169.802 -43.014,-169.802 -7.542,-2.288 -184.896,80.734 -181.884,352.439 -24.162,4.541 -31.68,7.551 -31.68,7.551 v 77.865 c 48.358,43.141 288.042,48.343 381.759,46.436 93.962,1.907 333.634,-3.306 381.985,-46.435 v -77.866 c 0,0 -7.518,-3.01 -31.68,-7.551 z m 44.127,89.051 c -42.575,49.322 -261.134,54.744 -354.985,54.744 -19.293,0 -33.311,-0.227 -39.447,-0.35 -35.803,0.741 -342.866,5.073 -394.2,-54.395 H 0 L 78.51,572.807 H 400 721.488 L 800,471.676 h -5.669 z M 463.417,155.457 c 9.035,0.752 22.645,-14.339 22.645,-24.904 0,-56.594 22.646,-122.259 22.646,-122.259 l 0.01,-0.017 c -0.01,0.005 -0.021,0.011 -0.021,0.017 -3.76,-6.795 -61.877,-9.811 -69.429,-7.553 2.264,18.128 2.264,113.202 2.264,129.812 -10e-4,16.599 12.816,24.151 21.885,24.904 z m -126.812,0 c 9.07,-0.752 21.887,-8.304 21.887,-24.904 0,-16.61 0,-111.684 2.265,-129.812 -7.53,-2.257 -65.671,0.753 -69.44,7.553 0,0 22.645,65.665 22.645,122.259 -10e-4,10.564 13.608,25.656 22.643,24.904 z M -894.51159,437.75513 c 3.01,-271.654 -174.27601,-354.704003 -181.88501,-352.439003 0,0 -43.013,119.984003 -43.013,169.802003 0,49.802 0,274.712 0,274.712 h -125.294 -125.294 c 0,0 0,-224.911 0,-274.712 0,-49.818 -43.014,-169.802003 -43.014,-169.802003 -7.542,-2.288 -184.896,80.734003 -181.884,352.439003 -24.162,4.541 -31.68,7.551 -31.68,7.551 v 77.865 c 48.358,43.141 288.042,48.343 381.759,46.436 93.962,1.907 333.63401,-3.306 381.98501,-46.435 v -77.866 c 0,0 -7.518,-3.01 -31.68,-7.551 z m 44.127,89.051 c -42.575,49.322 -261.13401,54.744 -354.98501,54.744 -19.293,0 -33.311,-0.227 -39.447,-0.35 -35.803,0.741 -342.866,5.073 -394.2,-54.395 h -5.699 l 78.51,101.132 h 321.49 321.48801 l 78.512,-101.131 h -5.669 z m -330.91401,-316.219 c 9.035,0.752 22.645,-14.339 22.645,-24.904 0,-56.594 22.646,-122.259003 22.646,-122.259003 l 0.01,-0.017 c -0.01,0.005 -0.021,0.011 -0.021,0.017 -3.76,-6.795 -61.877,-9.811 -69.429,-7.553 2.264,18.128 2.264,113.202003 2.264,129.812003 -10e-4,16.599 12.816,24.151 21.885,24.904 z m -126.812,0 c 9.07,-0.752 21.887,-8.304 21.887,-24.904 0,-16.61 0,-111.684003 2.265,-129.812003 -7.53,-2.257 -65.671,0.753 -69.44,7.553 0,0 22.645,65.665003 22.645,122.259003 -10e-4,10.564 13.608,25.656 22.643,24.904 z m 3570.0374,3494.38417 -323.8801,-395.307 -0.016,-0.1792 -214.2275,-830.45 c -0.1453,-0.8934 -0.4358,-1.7867 -0.6682,-2.6797 l -0.2422,-1.1166 -0.097,0.04 c -7.0571,-15.7218 -42.7059,-27.6739 -85.6969,-27.6739 -48.0546,0 -87.0552,14.9402 -87.0552,33.3887 l -4.421,17.017 c -0.1937,0.6702 -0.4358,1.3399 -0.4358,2.01 l -230.1992,884.4914 -251.4525,44.5659 c -18.8257,3.3499 -34.581,16.5034 -41.1917,34.4138 -6.6547,17.9327 -3.2588,38.1878 8.8435,52.9785 l 329.2375,401.8232 c 10.3175,12.6179 25.8161,19.7864 41.828,19.7864 3.1281,0 6.2533,-0.2421 9.3572,-0.8958 l 818.1357,-144.9282 c 18.8263,-3.3702 34.5994,-16.5257 41.2362,-34.4648 6.6553,-17.8883 3.2395,-38.1522 -8.8879,-52.9429 z m -544.8045,-1140.4127 72.865,336.616 c 1.1185,4.8684 0,9.9378 -2.9248,13.9799 -4.1546,5.8957 -23.7769,25.6305 -91.3691,28.3774 -0.2421,0.025 -0.4358,0.025 -0.8958,0.025 -6.3424,0 -12.2602,-3.4167 -15.3645,-8.9999 -3.2589,-5.8063 -2.9683,-12.9749 0.6682,-18.4686 12.3943,-16.8384 19.5182,-69.3679 19.0044,-125.7498 0.022,-101.5462 -16.8385,-219.2966 -16.9053,-219.5244 -1.3413,-9.4018 5.0471,-18.1783 14.3593,-19.8755 9.3349,-1.5631 18.3793,4.3996 20.3893,13.6002 z m -79.891,-99.3644 c 29.7954,0 53.9075,8.6202 53.9075,19.2056 0,10.5854 -24.1121,19.1832 -53.9075,19.1832 -29.8066,0 -53.9273,-8.5978 -53.9273,-19.1832 0,-10.5854 24.1251,-19.2056 53.9273,-19.2056 z m -170.0743,483.8291 c 32.7385,23.1115 96.5082,38.7685 169.8578,38.7685 71.5096,0 133.7961,-14.9178 167.2024,-37.0757 l 62.0386,242.2987 c -1.3413,5.65 -5.2703,12.0816 -13.1758,19.3172 -30.7672,28.8911 -116.6317,53.9298 -216.0676,53.4653 -66.4111,0.031 -126.4731,-10.4737 -168.4909,-26.6399 -20.9922,-8.0173 -37.3595,-17.5307 -47.5767,-26.8254 -8.0841,-7.4142 -11.9027,-13.9128 -13.2426,-19.6522 l 59.4567,-243.6766 z m 411.7187,758.9986 c -61.2212,27.2586 -144.7454,44.4273 -240.2397,44.4655 -82.4903,0 -158.2451,-11.0321 -218.6354,-29.9251 -60.185,-19.2059 -105.8921,-44.805 -127.3603,-81.443 -4.3532,-7.66 -2.8811,-17.285 3.5978,-23.2342 6.4538,-6.0073 16.1238,-6.7443 23.424,-1.7868 52.3599,35.7001 159.8194,62.5345 282.6773,62.2328 90.4404,0.097 169.1877,-16.5257 224.0065,-40.8765 55.6536,-24.2815 83.0729,-56.5828 82.2691,-78.877 0,-0.4359 0.038,-0.6683 0.048,-1.1186 -0.048,-1.1186 -0.1937,-2.5664 -0.4358,-4.3096 l -37.913,-165.2439 -0.4358,-2.2778 -0.4358,-3.7741 c -0.8958,-9.3794 5.1367,-18.1113 14.3152,-20.3668 9.1557,-2.3001 18.6025,2.5683 22.1083,11.3447 2.5906,6.6326 66.476,181.8075 75.3553,212.6372 0.6682,2.9054 1.1186,2.6342 1.5641,8.7766 -1.1186,49.2178 -43.6526,86.4519 -103.9625,113.7593 z m -3637.577,5.4847 -323.8801,-395.307 -0.015,-0.1792 -214.2275,-830.4499 c -0.1453,-0.8934 -0.4358,-1.7868 -0.6682,-2.6797 l -0.2421,-1.1166 -0.097,0.04 c -7.0571,-15.7218 -42.7058,-27.674 -85.6969,-27.674 -48.0546,0 -87.0552,14.9402 -87.0552,33.3888 l -4.421,17.017 c -0.1937,0.6701 -0.4358,1.3398 -0.4358,2.01 l -230.1992,884.4914 -251.4525,44.5659 c -18.8257,3.3499 -34.581,16.5034 -41.1917,34.4137 -6.6547,17.9327 -3.2588,38.1879 8.8435,52.9786 l 329.2375,401.8231 c 10.3175,12.618 25.8161,19.7865 41.828,19.7865 3.1281,0 6.2533,-0.2421 9.3572,-0.8958 l 818.1357,-144.9283 c 18.8263,-3.3702 34.5995,-16.5256 41.2363,-34.4648 6.6552,-17.8883 3.2394,-38.1522 -8.888,-52.9429 z m -544.8045,-1140.4126 72.865,336.616 c 1.1185,4.8684 0,9.9377 -2.9248,13.9799 -4.1546,5.8956 -23.7769,25.6305 -91.3691,28.3774 -0.2421,0.024 -0.4358,0.024 -0.8958,0.024 -6.3424,0 -12.2601,-3.4167 -15.3645,-8.9998 -3.2589,-5.8064 -2.9683,-12.9749 0.6682,-18.4686 12.3943,-16.8384 19.5182,-69.368 19.0044,-125.7498 0.022,-101.5462 -16.8384,-219.2967 -16.9053,-219.5244 -1.3413,-9.4018 5.0471,-18.1783 14.3593,-19.8756 9.3349,-1.5631 18.3793,4.3997 20.3893,13.6002 z m -79.891,-99.3644 c 29.7954,0 53.9075,8.6202 53.9075,19.2056 0,10.5854 -24.1121,19.1832 -53.9075,19.1832 -29.8066,0 -53.9273,-8.5978 -53.9273,-19.1832 0,-10.5854 24.1251,-19.2056 53.9273,-19.2056 z m -170.0743,483.8291 c 32.7385,23.1115 96.5082,38.7685 169.8579,38.7685 71.5095,0 133.796,-14.9178 167.2023,-37.0757 l 62.0386,242.2987 c -1.3413,5.65 -5.2703,12.0816 -13.1758,19.3172 -30.7672,28.891 -116.6317,53.9298 -216.0676,53.4653 -66.4111,0.031 -126.4731,-10.4738 -168.4909,-26.64 -20.9922,-8.0172 -37.3595,-17.5307 -47.5767,-26.8253 -8.0841,-7.4142 -11.9027,-13.9129 -13.2426,-19.6522 l 59.4567,-243.6766 z m 411.7187,758.9986 c -61.2212,27.2585 -144.7454,44.4272 -240.2397,44.4655 -82.4903,0 -158.2451,-11.0321 -218.6354,-29.9252 -60.185,-19.2059 -105.8921,-44.805 -127.3603,-81.443 -4.3532,-7.66 -2.8811,-17.2849 3.5978,-23.2341 6.4538,-6.0073 16.1238,-6.7443 23.424,-1.7868 52.3599,35.7 159.8194,62.5344 282.6773,62.2327 90.4404,0.097 169.1877,-16.5256 224.0065,-40.8764 55.6536,-24.2815 83.0729,-56.5828 82.2691,-78.8771 0,-0.4358 0.038,-0.6682 0.048,-1.1185 -0.048,-1.1186 -0.1937,-2.5664 -0.4358,-4.3097 l -37.913,-165.2438 -0.4358,-2.2778 -0.4358,-3.7741 c -0.8958,-9.3795 5.1367,-18.1113 14.3152,-20.3669 9.1557,-2.3 18.6025,2.5684 22.1083,11.3447 2.5906,6.6327 66.4761,181.8076 75.3553,212.6373 0.6682,2.9053 1.1186,2.6342 1.5641,8.7766 -1.1186,49.2177 -43.6526,86.4518 -103.9625,113.7593 z m 2967.43489,-2401.3085 -77.9877,-12.2484 4.4084,835.5739 -5.33032,222.2565 0.78639,102.5777 2.69084,1275.7739 0,11.1161 c 0,85.1385 -77.8895,153.7705 -163.02995,153.7705 l -8.92104,0.4406 c -85.04022,0 -154.11326,-68.9752 -154.11326,-154.1146 l -0.27601,-12.1495 0,-1293.3204 c 0,0 -17.87866,-129.7193 -40.41319,0 l 0,1305.3136 0,9.2119 c 0,85.1397 -77.88984,153.7694 -162.9809,153.7694 l -8.92473,0.4406 c -85.04167,0 -154.114178,-68.9734 -154.114178,-154.1129 l 0,-9.2172 0,-1320.549 0.493911,-50.5052 -5.785779,-240.6254 0,-827.9061 -77.999031,4.6006 0,-11.2206 0,1010.2625 c 0,72.1585 -55.551025,130.6004 -124.083913,130.6004 l 0,0 c -68.53328,0 -124.13404,-58.4419 -124.13404,-130.6004 l 0,-1108.2705 3.87962,-31.7934 c 0,0 39.77741,-222.20518 580.59604,-222.20518 l 254.1413,0 12.55017,0 m 58.72087,965.96708 0,0 M 100.37566,965.43061 222.79462,952.0573 l 12.54107,0 254.14566,0 c 540.86755,0 580.59605,222.2059 580.59605,222.2059 l 3.9184,31.7927 0,1108.2373 c 0,72.1582 -55.6006,130.5999 -124.18252,130.5999 l 0,0 c -68.48422,0 -124.08464,-58.4417 -124.08464,-130.5999 l 0,-999.0448 M 710.31639,587.54368 c 0,171.39268 -138.94109,310.33378 -310.33377,310.33378 -171.39274,0 -310.333829,-138.9411 -310.333829,-310.33378 0,-171.39275 138.941089,-310.33403 310.333829,-310.33403 171.39268,0 310.33377,138.94128 310.33377,310.33403 z m -1529.47815,727.70472 -77.9876,-12.2465 4.40888,835.5745 -5.38866,222.255 0.78299,102.5792 2.69424,1275.7734 0,11.1198 c 0,85.1397 -77.88965,153.7709 -163.02939,153.7709 l -8.8667,0.3825 c -85.0908,0 -154.1137,-68.9739 -154.1137,-154.1136 l -0.247,-12.1496 0,-1293.3093 c 0,0 -17.8803,-129.718 -40.4144,0 l 0,1305.3128 0,9.2101 c 0,85.1397 -77.8896,153.7708 -162.9804,153.7708 l -8.8667,0.3826 c -85.0908,0 -154.1138,-68.974 -154.1138,-154.1137 l 0,-9.2084 0,-1320.5478 0.492,-50.5058 -5.7805,-240.6251 0,-827.8835 -77.9876,4.604 0,-11.2017 0,1010.263 c 0,72.1582 -55.5515,130.5999 -124.0846,130.5999 l 0,0 c -68.533,0 -124.1335,-58.4417 -124.1335,-130.5999 l 0,-1108.2863 3.8699,-31.7927 c 0,0 39.7776,-222.20589 580.5963,-222.20589 l 254.098,0 12.5898,0 m 58.6376,966.02749 0,0 m -535.43,-952.65399 122.419,-13.3735 12.5407,0 254.1456,0 c 540.86755,0 580.64525,222.20589 580.64525,222.20589 l 3.87042,31.7927 0,1108.2373 c 0,72.1582 -55.60042,130.5999 -124.1335,130.5999 l 0,0 c -68.53309,0 -124.13355,-58.4417 -124.13355,-130.5999 l 0,-999.0447 M -934.52602,587.54349 c 0,171.39268 -138.94118,310.33377 -310.33388,310.33377 -171.3927,0 -310.3339,-138.94109 -310.3339,-310.33377 0,-171.3927 138.9412,-310.33399 310.3339,-310.33399 171.3927,0 310.33388,138.94129 310.33388,310.33399 z") | |
.attr("transform", "translate(240,326) scale(.0225) ") | |
.attr("class", "Projects") | |
.transition().delay(500).duration(2500) | |
.attr("opacity", 100); | |
// maintenance people | |
vis.append("svg:path") | |
.attr("opacity", 0) | |
.attr("d", "M 25.6875 0 C 23.6355 0 21.87925 1.545 21.53125 3.625 L 21.5 3.8125 L 21.46875 4.15625 L 21.28125 5.625 L 18.53125 5.75 L 16.8125 5.84375 C 16.7175 5.84775 16.65225 5.93525 16.65625 6.03125 L 16.625 6.03125 C 16.535 6.73825 17.19475 7.45475 18.46875 8.09375 C 19.14475 8.43375 19.94575 8.73475 20.84375 8.96875 L 20.875 8.96875 C 20.841 9.24975 20.8125 9.5225 20.8125 9.8125 C 20.8125 13.6885 23.9355 16.84375 27.8125 16.84375 C 31.3755 16.84375 34.32925 14.191 34.78125 10.75 L 34.8125 10.75 L 35.46875 5.40625 C 35.66875 3.10725 34.07675 1.036 31.84375 0.75 L 26.21875 0.03125 C 26.04775 0.0092500002 25.8595 0 25.6875 0 z M 76.4375 0.03125 C 74.3855 0.03125 72.62925 1.5762496 72.28125 3.65625 L 72.25 3.65625 L 72.25 3.8125 L 72.1875 4.15625 L 72 5.625 L 69.28125 5.78125 C 69.27325 5.78125 69.257 5.78025 69.25 5.78125 L 67.53125 5.84375 C 67.43625 5.84775 67.371 5.93525 67.375 6.03125 L 67.34375 6.03125 C 67.25375 6.73825 67.9135 7.486 69.1875 8.125 C 69.8635 8.465 70.69575 8.766 71.59375 9 C 71.55975 9.281 71.53125 9.55375 71.53125 9.84375 C 71.53125 13.71975 74.6855 16.875 78.5625 16.875 C 82.1255 16.875 85.048 14.191 85.5 10.75 L 85.53125 10.78125 L 86.21875 5.4375 L 86.1875 5.4375 C 86.3875 3.1385 84.82675 1.06725 82.59375 0.78125 L 76.9375 0.0625 C 76.7665 0.0405 76.6095 0.03125 76.4375 0.03125 z M 128.4375 0.03125 C 126.3855 0.03125 124.62925 1.5762496 124.28125 3.65625 L 124.25 3.65625 L 124.25 3.8125 L 124.1875 4.15625 L 124 5.625 L 121.28125 5.78125 C 121.27325 5.78125 121.257 5.78025 121.25 5.78125 L 119.53125 5.84375 C 119.43625 5.84775 119.371 5.93525 119.375 6.03125 L 119.34375 6.03125 C 119.25375 6.73825 119.9135 7.486 121.1875 8.125 C 121.8635 8.465 122.69575 8.766 123.59375 9 C 123.55975 9.281 123.53125 9.55375 123.53125 9.84375 C 123.53125 13.71975 126.6855 16.875 130.5625 16.875 C 134.1255 16.875 137.048 14.191 137.5 10.75 L 137.53125 10.78125 L 138.21875 5.4375 L 138.1875 5.4375 C 138.3875 3.1385 136.82675 1.06725 134.59375 0.78125 L 128.9375 0.0625 C 128.7665 0.0405 128.6095 0.03125 128.4375 0.03125 z M 20.15625 17.3125 L 20.0625 17.34375 C 15.4755 17.62175 11.875 21.23825 11.875 25.65625 L 11.90625 25.59375 C 11.90725 25.60975 11.90425 25.64125 11.90625 25.65625 L 11.875 25.65625 L 11.875 26.6875 L 11.1875 29.34375 L 16.8125 30.59375 L 17.375 28.4375 L 18.90625 28.4375 L 18.90625 42.46875 L 18.90625 42.5 L 18.90625 83.28125 C 18.90625 85.65925 20.857 87.5625 23.25 87.5625 C 25.643 87.5625 27.5625 85.65925 27.5625 83.28125 L 27.5625 52.28125 L 28.84375 52.28125 L 28.84375 83.28125 C 28.84375 85.65925 30.7935 87.5625 33.1875 87.5625 C 35.5795 87.5625 37.5 85.65925 37.5 83.28125 L 37.5 52.28125 L 37.5 42.46875 L 37.5 28.4375 L 38.71875 28.4375 L 38.71875 30.96875 L 44.5 30.96875 L 44.5 25.75 C 44.5 25.556 44.4805 25.3695 44.4375 25.1875 C 44.1945 20.9985 40.68825 17.62975 36.28125 17.34375 L 36.34375 17.3125 L 31.625 17.3125 L 28.25 21.6875 C 28.245 21.6955 28.22475 21.71175 28.21875 21.71875 C 28.20975 21.72775 28.22775 21.741 28.21875 21.75 C 28.20175 21.765 28.17525 21.76925 28.15625 21.78125 C 28.14325 21.78925 28.139 21.8065 28.125 21.8125 C 28.081 21.8315 28.01575 21.84375 27.96875 21.84375 C 27.92675 21.84375 27.88375 21.8285 27.84375 21.8125 C 27.83075 21.8075 27.8265 21.78825 27.8125 21.78125 C 27.7965 21.77225 27.79725 21.761 27.78125 21.75 C 27.77225 21.743 27.759 21.72675 27.75 21.71875 C 27.743 21.71275 27.72475 21.72675 27.71875 21.71875 L 25.25 18.9375 C 25.15 18.8525 25.073 18.76125 25 18.65625 L 23.8125 17.3125 L 20.15625 17.3125 z M 70.875 17.34375 L 70.8125 17.375 C 66.2255 17.653 62.59375 21.23825 62.59375 25.65625 L 62.65625 25.625 C 62.65725 25.641 62.65425 25.64125 62.65625 25.65625 L 62.59375 25.65625 L 62.59375 26.71875 L 61.90625 29.375 L 67.53125 30.625 L 68.09375 28.4375 L 69.625 28.4375 L 69.625 42.5 L 69.625 83.28125 C 69.625 85.65925 71.57575 87.59375 73.96875 87.59375 C 76.36175 87.59375 78.3125 85.65925 78.3125 83.28125 L 78.3125 52.28125 L 79.5625 52.28125 L 79.5625 83.28125 C 79.5625 85.65925 81.51225 87.59375 83.90625 87.59375 C 86.29825 87.59375 88.25 85.65925 88.25 83.28125 L 88.25 52.28125 L 88.25 42.5 L 88.25 28.4375 L 89.46875 28.4375 L 89.46875 30.96875 L 95.21875 30.96875 L 95.21875 25.75 C 95.21875 25.556 95.19925 25.3695 95.15625 25.1875 C 94.91325 20.9985 91.406996 17.661 87 17.375 L 87.0625 17.34375 L 82.34375 17.34375 L 78.96875 21.71875 C 78.95975 21.72775 78.9465 21.741 78.9375 21.75 C 78.9205 21.765 78.894 21.76925 78.875 21.78125 C 78.862 21.78925 78.85775 21.8065 78.84375 21.8125 C 78.79975 21.8315 78.76575 21.84375 78.71875 21.84375 C 78.67675 21.84375 78.63375 21.8285 78.59375 21.8125 C 78.58075 21.8075 78.54525 21.8195 78.53125 21.8125 C 78.51525 21.8035 78.516 21.79225 78.5 21.78125 C 78.491 21.77425 78.47775 21.758 78.46875 21.75 C 78.46175 21.744 78.4435 21.72675 78.4375 21.71875 L 75.96875 18.96875 C 75.86875 18.88375 75.79175 18.76125 75.71875 18.65625 L 74.53125 17.34375 L 70.875 17.34375 z M 122.875 17.34375 L 122.8125 17.375 C 118.2255 17.653 114.59375 21.23825 114.59375 25.65625 L 114.65625 25.625 C 114.65725 25.641 114.65425 25.64125 114.65625 25.65625 L 114.59375 25.65625 L 114.59375 26.71875 L 113.90625 29.375 L 119.53125 30.625 L 120.09375 28.4375 L 121.625 28.4375 L 121.625 42.5 L 121.625 83.28125 C 121.625 85.65925 123.57575 87.59375 125.96875 87.59375 C 128.36175 87.59375 130.3125 85.65925 130.3125 83.28125 L 130.3125 52.28125 L 131.5625 52.28125 L 131.5625 83.28125 C 131.5625 85.65925 133.51225 87.59375 135.90625 87.59375 C 138.29825 87.59375 140.25 85.65925 140.25 83.28125 L 140.25 52.28125 L 140.25 42.5 L 140.25 28.4375 L 141.46875 28.4375 L 141.46875 30.96875 L 147.21875 30.96875 L 147.21875 25.75 C 147.21875 25.556 147.19925 25.3695 147.15625 25.1875 C 146.91325 20.9985 143.407 17.661 139 17.375 L 139.0625 17.34375 L 134.34375 17.34375 L 130.96875 21.71875 C 130.95975 21.72775 130.9465 21.741 130.9375 21.75 C 130.9205 21.765 130.894 21.76925 130.875 21.78125 C 130.862 21.78925 130.85775 21.8065 130.84375 21.8125 C 130.79975 21.8315 130.76575 21.84375 130.71875 21.84375 C 130.67675 21.84375 130.63375 21.8285 130.59375 21.8125 C 130.58075 21.8075 130.54525 21.8195 130.53125 21.8125 C 130.51525 21.8035 130.516 21.79225 130.5 21.78125 C 130.491 21.77425 130.47775 21.758 130.46875 21.75 C 130.46175 21.744 130.4435 21.72675 130.4375 21.71875 L 127.96875 18.96875 C 127.86875 18.88375 127.79175 18.76125 127.71875 18.65625 L 126.53125 17.34375 L 122.875 17.34375 z M 28.03125 20.96875 L 28.03125 21 L 28.03125 20.96875 z M 78.75 21 L 78.78125 21 L 78.75 21 z M 130.75 21 L 130.78125 21 L 130.75 21 z M 32.71875 24.96875 C 34.20275 24.96875 35.40625 25.5685 35.40625 26.3125 C 35.40625 27.0555 34.20275 27.65625 32.71875 27.65625 C 31.23475 27.65625 30.03125 27.0555 30.03125 26.3125 C 30.03125 25.5685 31.23475 24.96875 32.71875 24.96875 z M 83.4375 25 C 84.9215 25 86.125 25.59975 86.125 26.34375 C 86.125 27.08675 84.9215 27.6875 83.4375 27.6875 C 81.9535 27.6875 80.75 27.08675 80.75 26.34375 C 80.75 25.59975 81.9535 25 83.4375 25 z M 135.4375 25 C 136.9215 25 138.125 25.59975 138.125 26.34375 C 138.125 27.08675 136.9215 27.6875 135.4375 27.6875 C 133.9535 27.6875 132.75 27.08675 132.75 26.34375 C 132.75 25.59975 133.9535 25 135.4375 25 z M 32.71875 25.40625 C 31.48175 25.40625 30.46875 25.83075 30.46875 26.34375 C 30.46875 26.85675 31.48075 27.25 32.71875 27.25 C 33.95575 27.25 34.96875 26.85675 34.96875 26.34375 C 34.96875 25.83075 33.95575 25.40625 32.71875 25.40625 z M 83.4375 25.40625 C 82.2005 25.40625 81.21875 25.83075 81.21875 26.34375 C 81.21875 26.85675 82.1995 27.28125 83.4375 27.28125 C 84.6745 27.28125 85.6875 26.85675 85.6875 26.34375 C 85.6875 25.83075 84.6745 25.40625 83.4375 25.40625 z M 135.4375 25.40625 C 134.2005 25.40625 133.21875 25.83075 133.21875 26.34375 C 133.21875 26.85675 134.1995 27.28125 135.4375 27.28125 C 136.6745 27.28125 137.6875 26.85675 137.6875 26.34375 C 137.6875 25.83075 136.6745 25.40625 135.4375 25.40625 z M 10.96875 29.9375 L 7 45.59375 L 12.625 46.75 L 16.59375 31.1875 L 10.96875 29.9375 z M 61.6875 29.96875 L 57.71875 45.59375 L 63.375 46.78125 L 67.3125 31.21875 L 61.6875 29.96875 z M 113.6875 29.96875 L 109.71875 45.59375 L 115.375 46.78125 L 119.3125 31.21875 L 113.6875 29.96875 z M 38.75 31.53125 L 38.75 49.34375 C 38.75 50.81275 40.06625 52 41.65625 52 C 43.24625 52 44.53125 50.81275 44.53125 49.34375 L 44.53125 31.53125 L 38.75 31.53125 z M 89.5 31.53125 L 89.5 49.34375 C 89.5 50.81275 90.785 52 92.375 52 C 93.965 52 95.25 50.81275 95.25 49.34375 L 95.25 31.53125 L 89.5 31.53125 z M 141.5 31.53125 L 141.5 49.34375 C 141.5 50.81275 142.785 52 144.375 52 C 145.965 52 147.25 50.81275 147.25 49.34375 L 147.25 31.53125 L 141.5 31.53125 z M 24.53125 42.21875 C 24.61925 42.208875 24.70625 42.253 24.78125 42.3125 C 24.93025 42.4295 24.96375 42.63125 24.84375 42.78125 L 21.75 46.65625 C 21.682 46.74225 21.602 46.78125 21.5 46.78125 C 21.424 46.78125 21.34525 46.7395 21.28125 46.6875 C 21.13125 46.5695 21.09975 46.36775 21.21875 46.21875 L 24.3125 42.34375 C 24.3725 42.26875 24.44325 42.228625 24.53125 42.21875 z M 31.6875 42.21875 C 31.77575 42.22875 31.84675 42.26875 31.90625 42.34375 L 35 46.21875 C 35.12 46.36875 35.0865 46.5695 34.9375 46.6875 C 34.8735 46.7395 34.79375 46.78125 34.71875 46.78125 C 34.61675 46.78125 34.5065 46.711 34.4375 46.625 L 31.375 42.78125 C 31.256 42.63125 31.2875 42.4315 31.4375 42.3125 C 31.512 42.2525 31.59925 42.20875 31.6875 42.21875 z M 75.25 42.25 C 75.338 42.240125 75.425 42.253 75.5 42.3125 C 75.649 42.4295 75.6825 42.6625 75.5625 42.8125 L 72.5 46.65625 C 72.432 46.74225 72.32075 46.78125 72.21875 46.78125 C 72.14275 46.78125 72.064 46.77075 72 46.71875 C 71.85 46.60075 71.8185 46.36775 71.9375 46.21875 L 75.03125 42.375 C 75.09125 42.3 75.162 42.259875 75.25 42.25 z M 82.28125 42.25 C 82.411281 42.213438 82.53575 42.2625 82.625 42.375 L 85.71875 46.21875 C 85.83875 46.36875 85.80525 46.60075 85.65625 46.71875 C 85.59225 46.77075 85.5125 46.78125 85.4375 46.78125 C 85.3355 46.78125 85.2565 46.74225 85.1875 46.65625 L 82.09375 42.8125 C 81.97475 42.6625 82.00625 42.4315 82.15625 42.3125 C 82.1935 42.2825 82.237906 42.262187 82.28125 42.25 z M 127.25 42.25 C 127.338 42.240125 127.425 42.253 127.5 42.3125 C 127.649 42.4295 127.6825 42.6625 127.5625 42.8125 L 124.5 46.65625 C 124.432 46.74225 124.32075 46.78125 124.21875 46.78125 C 124.14275 46.78125 124.064 46.77075 124 46.71875 C 123.85 46.60075 123.8185 46.36775 123.9375 46.21875 L 127.03125 42.375 C 127.09125 42.3 127.162 42.259875 127.25 42.25 z M 134.28125 42.25 C 134.41128 42.213438 134.53575 42.2625 134.625 42.375 L 137.71875 46.21875 C 137.83875 46.36875 137.80525 46.60075 137.65625 46.71875 C 137.59225 46.77075 137.5125 46.78125 137.4375 46.78125 C 137.3355 46.78125 137.2565 46.74225 137.1875 46.65625 L 134.09375 42.8125 C 133.97475 42.6625 134.00625 42.4315 134.15625 42.3125 C 134.1935 42.2825 134.23791 42.262187 134.28125 42.25 z M 2.28125 44.0625 C 1.4820313 44.154703 0.7585 44.62475 0.34375 45.3125 L 2.75 45.8125 L 2.40625 47.5 L 0 47.03125 C 0.147 48.09225 0.95450001 48.99275 2.0625 49.21875 C 2.9695 49.40575 3.8395 49.08975 4.4375 48.46875 L 6.0625 48.78125 L 11.6875 49.9375 L 13.65625 50.34375 C 13.96125 51.14975 14.6555 51.78275 15.5625 51.96875 C 16.9695 52.25775 18.337 51.3445 18.625 49.9375 C 18.913 48.5325 18.00075 47.163 16.59375 46.875 C 15.68775 46.689 14.7855 47.003 14.1875 47.625 L 5 45.75 C 4.695 44.945 3.99975 44.311 3.09375 44.125 C 2.8165 44.068 2.5476562 44.031766 2.28125 44.0625 z M 53.40625 44.90625 C 52.447879 44.865002 51.546375 45.353875 51.0625 46.15625 L 53.46875 46.65625 L 53.125 48.34375 L 50.71875 47.875 C 50.86575 48.936 51.67325 49.8365 52.78125 50.0625 C 53.68825 50.2495 54.5895 49.9335 55.1875 49.3125 L 56.75 49.625 C 56.871129 50.730275 57.714501 51.720923 58.9375 52.03125 C 60.266106 52.368011 61.582775 51.794151 62.15625 50.71875 L 62.4375 50.78125 L 64.375 51.1875 C 64.68 51.9935 65.37425 52.6265 66.28125 52.8125 C 67.68825 53.1015 69.05575 52.18825 69.34375 50.78125 C 69.63175 49.37625 68.7195 48.00675 67.3125 47.71875 C 66.4065 47.53275 65.5355 47.84675 64.9375 48.46875 L 55.71875 46.59375 C 55.41375 45.78875 54.7185 45.15475 53.8125 44.96875 C 53.673875 44.94025 53.54316 44.912143 53.40625 44.90625 z M 105.40625 44.90625 C 104.44788 44.865002 103.54637 45.353875 103.0625 46.15625 L 105.46875 46.65625 L 105.125 48.34375 L 102.71875 47.875 C 102.86575 48.936 103.67325 49.8365 104.78125 50.0625 C 105.68825 50.2495 106.5895 49.9335 107.1875 49.3125 L 108.75 49.625 C 108.87113 50.730275 109.7145 51.720923 110.9375 52.03125 C 112.26611 52.368011 113.58277 51.794151 114.15625 50.71875 L 114.4375 50.78125 L 116.375 51.1875 C 116.68 51.9935 117.37425 52.6265 118.28125 52.8125 C 119.68825 53.1015 121.05575 52.18825 121.34375 50.78125 C 121.63175 49.37625 120.7195 48.00675 119.3125 47.71875 C 118.4065 47.53275 117.5355 47.84675 116.9375 48.46875 L 107.71875 46.59375 C 107.41375 45.78875 106.7185 45.15475 105.8125 44.96875 C 105.67388 44.94025 105.54316 44.912143 105.40625 44.90625 z M 15.5625 47.875 L 17.15625 48.1875 L 17.6875 49.75 L 16.59375 50.96875 L 15 50.65625 L 14.46875 49.09375 L 15.5625 47.875 z M 66.28125 48.71875 L 67.875 49.0625 L 68.40625 50.59375 L 67.3125 51.8125 L 65.71875 51.5 L 65.1875 49.9375 L 66.28125 48.71875 z M 118.28125 48.71875 L 119.875 49.0625 L 120.40625 50.59375 L 119.3125 51.8125 L 117.71875 51.5 L 117.1875 49.9375 L 118.28125 48.71875 z M 6 49.5 C 6.068 50.655 6.9185 51.70925 8.1875 52.03125 C 9.5565 52.37825 10.92575 51.764 11.46875 50.625 L 6 49.5 z ") | |
.attr("transform", "translate(690,220)") | |
.attr("class", "Operations") | |
.transition().delay(500).duration(2500) | |
.attr("opacity", 100); | |
// management | |
vis.append("svg:path") | |
.attr("opacity", 0) | |
.attr("d", "m 726.922,453.783 -2.14,-210.891 c 0,-0.079 -0.014,-0.158 -0.028,-0.237 0,-0.122 0.028,-0.057 0.028,-0.187 0,-15.274 -12.374,-27.469 -27.634,-27.469 h -41.401 -91.144 -40.038 c -14.341,0 -25.983,10.76 -27.376,24.699 -0.215,1.062 -0.474,2.024 -0.53,3.136 l -3.862,210.818 c -0.89,13.451 -0.99,24.383 12.476,25.272 13.437,0.904 14.814,-9.974 15.719,-23.409 l 18.691,-160.773 c 2.297,22.229 4.378,47.752 4.378,67.556 0,41.279 -8.943,59.701 -10.063,85.701 H 534 v 2.625 c 0,0.976 -0.115,1.837 -0.115,2.828 0,1.291 0.115,2.426 0.115,3.603 v 2.397 c 0,0.388 -0.166,0.775 -0.166,1.162 l 0.089,2.701 L 527.897,598 h 11.799 l 4.364,101.221 c 0,18.002 4.307,32.601 22.294,32.601 17.988,0 22.295,-14.606 22.295,-32.608 L 597.362,598 h 25.64 l 8.699,101.221 c 0,18.002 4.307,32.601 22.294,32.601 17.987,0 22.294,-14.606 22.294,-32.608 L 680.653,598 h 12.676 l -6.804,-136.277 0.043,-1.121 c 0,-0.2 -0.029,-0.366 -0.058,-0.567 l -0.015,-3.829 c 0.015,-0.934 -0.154,-1.778 -0.154,-2.754 0,-1.02 -0.342,-2.008 -0.342,-3.027 V 448 h 0.367 c -1.034,-29 -10.078,-54.875 -10.078,-85.704 0,-15.913 2.44,-43.997 4.938,-68.681 l 17.471,161.806 c 0.804,13.451 2.067,24.331 15.533,23.528 13.481,-0.775 13.481,-11.715 12.692,-25.166 z M 610.169,305.544 576.764,226 h 66.796 l -33.391,79.544 z M 556.378,159.473 c 6.015,-27.361 29.888,-35.903 30.146,-35.989 l 2.556,-0.89 -6.891,18.555 c 8.886,-2.318 40.468,-11.011 55.856,-20.679 15.849,-9.956 25.754,-26.586 27.807,-30.283 -3.101,-3.618 -20.04,-21.548 -50.976,-21.548 -8.944,0 -18.404,1.507 -28.094,4.458 -28.999,8.85 -46.369,30.34 -46.483,57.494 -0.086,25.022 11.039,43.146 17.686,51.723 -1.808,-5.73 -3.488,-14.228 -1.607,-22.841 z m 104.565,-26.737 c 11.958,31.546 -0.459,60.092 -5.397,69.495 10.781,-4.896 42.822,-24.254 30.361,-77.413 -4.033,-17.233 -15.001,-29.5 -18.403,-32.996 l -13.078,17.851 c 0.646,2.85 3.689,15.634 6.517,23.063 z m -90.741,72.194 c -2.196,-3.008 -5.656,-8.355 -9.173,-15.368 -0.259,-0.223 -23.457,-22.553 -23.328,-59.152 0,-5.032 0.79,-9.798 1.924,-14.42 -4.436,8.003 -8.039,19.653 -8.039,36.851 0,37.597 28.553,49.181 38.616,52.089 z m -11.93,-44.94 c -1.005,4.601 -0.875,9.159 -0.272,13.3 9.475,18.755 28.869,31.64 51.307,31.64 23.815,0 44.244,-14.485 52.957,-35.128 1.206,-10.709 0.574,-23.077 -4.307,-36.004 -2.569,-6.761 -5.196,-17.356 -6.259,-21.828 -3.732,3.783 -7.953,7.522 -12.935,10.652 -18.26,11.484 -57.307,21.196 -58.958,21.605 l -2.368,0.582 6.604,-17.743 c -6.202,3.036 -21.261,12.395 -25.769,32.924 z M 392.618,234.193 C 388.081,222.86 376.884,215 363.935,215 H 163.546 c -12.963,0 -23.866,7.86 -28.43,19.193 -1.422,3.094 -2.116,6.324 -2.116,9.948 v 210.66 c 0,13.466 11.042,24.39 24.522,24.39 13.465,0 24.478,-10.924 24.478,-24.39 V 284 h 5 v 415.248 c 0,18.002 14.527,32.587 32.5,32.587 17.988,0 32.5,-14.585 32.5,-32.587 V 484 h 23 v 215.248 c 0,18.002 14.505,32.587 32.478,32.587 18.002,0 32.522,-14.585 32.522,-32.587 V 284 h 6 v 170.802 c 0,13.466 11.028,24.39 24.507,24.39 13.479,0 24.493,-10.924 24.493,-24.39 v -210.66 c 0,-3.625 -0.961,-6.855 -2.382,-9.949 z M 288.59,399.045 262.75,440.54 236.91,399.045 257.481,259.577 236.911,224 h 51.68 l -20.586,35.549 20.585,139.496 z M 262.757,199.97 c 34.654,0 62.763,-28.101 62.763,-62.77 0,-34.669 -28.108,-62.77 -62.763,-62.77 -34.683,0 -62.776,28.101 -62.776,62.77 0,34.669 28.094,62.77 62.776,62.77 z") | |
.attr("transform", "translate(170,70) scale(.12) ") | |
.attr("class", "Overhead") | |
.transition().delay(500).duration(2500) | |
.attr("opacity", 100); | |
// software licenses / hardware | |
vis.append("svg:path") | |
.attr("opacity", 0) | |
.attr("d", "m 54.884998,64.709 4.249,0 0,1.835 -4.249,0 z m 4.229264,36.83284 -2.093717,3.67903 -2.15654,-3.67923 -6.65e-4,-34.250755 4.249763,0.0011 z M 32.983916,101.01593 47.38966,75.70248 49.453847,76.877198 35.048103,102.19065 z m -5.32343,-3.029534 18.857305,-33.135632 2.064187,1.174718 -18.857305,33.135631 z M 22.337057,94.956862 41.194361,61.82123 43.258548,62.995948 24.401244,96.131579 z M 11.690198,88.897793 26.095942,63.584344 28.160129,64.759061 13.754385,90.072511 z M 6.3667691,85.868259 25.224074,52.732628 27.28826,53.907345 8.430956,87.042976 z M 1.0433398,82.838725 19.900644,49.703094 21.964831,50.877811 3.1075267,84.013442 z M 12.98423,25.631228 6.368717,37.255859 4.958986,36.453589 C 4.4809638,36.18155 3.8672767,36.350081 3.5952369,36.828103 L -2.4301974,47.41586 -5.0036953,45.951297 c -0.9560444,-0.544079 -2.1834186,-0.207017 -2.7274982,0.749027 l -5.8790275,10.330495 c -0.54408,0.956044 -0.207017,2.183419 0.749027,2.727498 l 2.573498,1.464564 -6.025434,10.587757 c -0.27204,0.478022 -0.103509,1.09171 0.374513,1.363749 l 1.4106,0.802765 -6.615513,11.624631 c -0.27204,0.478023 -0.103509,1.09171 0.374513,1.36375 L 57.81436,131.6869 c 0.478022,0.27204 1.09171,0.10351 1.363749,-0.37452 l 34.12863,-59.970057 c 0.27204,-0.478022 0.103509,-1.091709 -0.374513,-1.363749 L 14.347979,25.256715 C 13.870826,24.985169 13.25627,25.153206 12.98423,25.631228 z M -8.6551917,53.01259 c 0.5411119,-0.950829 1.7507574,-1.283023 2.7007179,-0.742406 0.9508296,0.541112 1.2825285,1.751627 0.7419112,2.701587 -0.5411119,0.95083 -1.7507574,1.283024 -2.701587,0.741912 -0.9499606,-0.540618 -1.282154,-1.750263 -0.7410421,-2.701093 z M 83.479506,73.234454 c 0.478023,0.27204 0.646554,0.885727 0.374514,1.363749 L 57.149604,121.5226 c -0.27204,0.47802 -0.885727,0.64656 -1.363749,0.37452 L -11.317167,83.709158 c -0.478022,-0.27204 -0.646553,-0.885727 -0.374513,-1.363749 l 2.9034064,-5.101801 1.4505801,0.825517 c 0.4780223,0.27204 1.0917094,0.103509 1.3637492,-0.374513 L 13.934423,42.712076 c 0.27204,-0.478022 0.103509,-1.091709 -0.374514,-1.363749 l -1.45058,-0.825517 2.903407,-5.101801 c 0.27204,-0.478022 0.885727,-0.646553 1.363749,-0.374513 l 67.103021,38.187958 z m -124.418598,36.349216 -7.249782,52.10358 73.465005,41.80852 1.404872,-55.42988 z m -32.142051,81.90018 22.210166,-29.61158 7.071749,-50.81635 -19.343533,25.79042 z m 23.823108,-27.37686 -23.198295,30.92504 71.63633135,40.77233 25.19293465,-29.79439 -73.630971,-41.90298 z m 56.1660556,57.0174 -33.2314266,-18.91182 2.385771,-3.30712 33.4944871,19.06152 -2.6488315,3.15742 z m -71.4505776,-27.79603 16.658743,-22.1916 7.27763,4.14166 -16.658742,22.1916 -7.277631,-4.14166 z m 10.322584,5.87453 16.658743,-22.1916 7.27763,4.14165 -16.658742,22.19161 -7.277631,-4.14166 z m 10.321455,5.87388 16.658743,-22.1916 7.27763,4.14166 -16.658742,22.1916 -7.277631,-4.14166 z") | |
.attr("transform", "translate(450,530) matrix(0.4946,0.8691,-0.8691,0.4946,85.8541,-16.3788) scale(.3)") | |
.attr("class", "Licensing") | |
.transition().delay(500).duration(2500) | |
.attr("opacity", 100); | |
d3.selectAll(".arc").on("click", function() { | |
data = data === data1 ? data2 : data1; // swap the data | |
arcs = arcs.data(donut(data)); // recompute the angles and rebind the data | |
arcs.transition().duration(750).attrTween("d", arcTween); // redraw the arcs | |
vis.selectAll(".percentLabel").data(data); | |
vis.selectAll(".percentLabel") | |
.transition().delay(200).duration(200) | |
//.attr("fill", function(d, i) { return color[i]; }) | |
.attr("opacity", 0) | |
.attr("text-anchor", "middle"); | |
vis.selectAll(".nameLabel").data(data); | |
vis.selectAll(".nameLabel") | |
.transition().duration(0) | |
.attr("opacity", 0) | |
.text(function(d, i) { return data[i].val == null ? "" : data[i].name; }); //update the name labels | |
vis.selectAll(".nameLabel") | |
.transition().delay(750).duration(2000) | |
.attr("opacity", 100); | |
vis.selectAll(".valLabel").data(data); //update the val labels | |
vis.selectAll(".valLabel") | |
.transition().duration(0) | |
.attr("opacity", 0) | |
.text(function(d, i) { return data[i].val == null ? "" : "$" + qFormat(data[i].tco) + "MM"; }); //update the val labels | |
vis.selectAll(".valLabel") | |
.transition().delay(750).duration(2000) | |
.attr("opacity", 100); | |
vis.selectAll(".percentLabel") | |
.transition().delay(400).duration(2000) | |
.attr("opacity", 100) | |
//.attr("fill", "white") | |
.text(function(d, i) { return data[i].val == null ? "" : data[i].val + "%"; }); //update the percent labels | |
vis.selectAll(".Licensing") | |
.transition().delay(400).duration(2000) | |
.attr("transform", function(d, i) { return data[1].val !== null ? ("translate(450,530) matrix(0.4946,0.8691,-0.8691,0.4946,85.8541,-16.3788) scale(.3)") : ("translate(800,390) matrix(0.4946,0.8691,-0.8691,0.4946,85.8541,-16.3788) scale(.3)") ; }); | |
vis.selectAll(".Projects") | |
.transition().delay(400).duration(2000) | |
.attr("transform", function(d, i) { return data[1].val !== null ? ("translate(240,326) scale(.0225) ") : ("translate(740,320) scale(.0225) ") ; }); | |
}); | |
// Store the currently-displayed angles in this._current. | |
// Then, interpolate from this._current to the new angles. | |
function arcTween(a) { | |
var i = d3.interpolate(this._current, a); | |
this._current = i(0); | |
return function(t) { | |
return arc(i(t)); | |
}; | |
}; | |
</script> | |
</div> | |
<div id="calc-notes"> | |
(the data shown is fabricated and does not reflect reality) | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment