Skip to content

Instantly share code, notes, and snippets.

@saraquigley
Created November 27, 2012 19:08
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 saraquigley/4156317 to your computer and use it in GitHub Desktop.
Save saraquigley/4156317 to your computer and use it in GitHub Desktop.
Donut : IT System Costs
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;
}
<!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