Created
November 29, 2012 22:30
-
-
Save saraquigley/4172341 to your computer and use it in GitHub Desktop.
IT costs: donut and horizontal stack
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
.rule { | |
fill: #525252; | |
font: 300 13px "Helvetica Neue"; | |
} | |
#header { | |
position: absolute; | |
z-index: 1; | |
display: block; | |
} | |
#header { | |
top: 20px; | |
left: 40px; | |
font: 300 36px "Helvetica Neue"; | |
color: #525252; | |
} | |
#mini-pie { | |
position: absolute; | |
z-index: 1; | |
display: block; | |
top: 70px; | |
left: 40px; | |
} | |
#sub-header { | |
position: absolute; | |
z-index: 1; | |
display: block; | |
top: 60px; | |
left: 80px; | |
font: 300 26px "Helvetica Neue"; | |
color: #525252; | |
} | |
#button { | |
position: absolute; | |
display: block; | |
top: 300px; | |
left: 600px; | |
} | |
#button-label { | |
position: absolute; | |
display: block; | |
top: 320px; | |
left: 510px; | |
font: 300 18px "Helvetica Neue"; | |
color: #525252; | |
} | |
.greenPie { | |
fill: #74C476; | |
fill-opacity: .75; | |
color: #74C476; | |
} | |
.clearPie { | |
fill: #FE9929; | |
fill-opacity: 0; | |
color: #FE9929; | |
} | |
#chart { | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
font: 300 20px "Helvetica Neue"; | |
} | |
.FunctionPie { | |
position: absolute; | |
top: 100px; | |
left: 0px; | |
font: 300 18px "Helvetica Neue"; | |
} | |
.totalLabel { | |
font-size: 26px; | |
font-weight: bold; | |
font-family: "Helvetica Neue"; | |
} | |
.percentLabel { | |
font: 400 16px "Helvetica Neue"; | |
} | |
.projectCosts { | |
fill: #525252; | |
fill-opacity: 1; | |
} | |
.swCosts { | |
fill: #FFED6F; | |
fill-opacity: 1; | |
} | |
.tooltip { | |
font: 400 11px "Helvetica Neue"; | |
color: steelblue; | |
} | |
.Admissions { | |
fill: #E7298A; | |
fill-opacity: .95; | |
font: 200 13px "Helvetica Neue"; | |
color: #E7298A; | |
} | |
.FinancialAid { | |
fill: #D95F02; | |
fill-opacity: .95; | |
font: 200 13px "Helvetica Neue"; | |
color: #D95F02; | |
} | |
.RegEnrollment { | |
fill: #7570B3; | |
fill-opacity: .95; | |
font: 200 13px "Helvetica Neue"; | |
color: #7570B3; | |
} | |
.AcadPlanning { | |
fill: #E6AB02; | |
fill-opacity: .95; | |
font: 200 13px "Helvetica Neue"; | |
color: #E6AB02; | |
} | |
.Financials { | |
fill: #66A61E; | |
fill-opacity: .95; | |
font: 200 13px "Helvetica Neue"; | |
color: #66A61E; | |
} | |
.Conduct { | |
fill: #A6761D; | |
fill-opacity: .95; | |
font: 200 13px "Helvetica Neue"; | |
color: #A6761D; | |
} | |
.Events { | |
fill: #666666; | |
fill-opacity: .95; | |
font: 200 13px "Helvetica Neue"; | |
color: #666666; | |
} | |
.GroupMgmt { | |
fill: #1B9E77; | |
fill-opacity: .95; | |
font: 200 13px "Helvetica Neue"; | |
color: #1B9E77; | |
} | |
#FTE-calc-note { | |
position: absolute; | |
z-index: 1; | |
display: block; | |
font: 300 12px "Helvetica Neue"; | |
color: #525252; | |
left: 40px; | |
top: 700px; | |
} | |
#author { | |
position: absolute; | |
z-index: 1; | |
font: 300 12px "Helvetica Neue"; | |
color: #525252; | |
} | |
.legendLabel { | |
font: 400 12px "Helvetica Neue"; | |
} | |
#legendTitle { | |
position: absolute; | |
left: 702px; | |
top: 50px; | |
font: 300 14px "Helvetica Neue"; | |
} | |
.legendBar { | |
top: 30px; | |
} | |
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
[ | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Enrollment", | |
"name": "ACE - Batch Enrollment", | |
"resourceCosts": 728576, | |
"swCosts": 37500, | |
"projectCosts": 0, | |
"tco": 766076 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Student Reports", | |
"name": "BearFacts Reporting UI", | |
"resourceCosts": 908381, | |
"swCosts": 11667, | |
"projectCosts": 0, | |
"tco": 920048 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Registration", | |
"name": "BearFacts Statement of Legal Residence (SLR)", | |
"resourceCosts": 244018, | |
"swCosts": 11667, | |
"projectCosts": 0, | |
"tco": 255685 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Student Reports", | |
"name": "BearFacts Student UI", | |
"resourceCosts": 80663, | |
"swCosts": 11667, | |
"projectCosts": 0, | |
"tco": 92330 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Admin Scheduling", | |
"name": "Classroom Scheduling", | |
"resourceCosts": 364159, | |
"swCosts": 37500, | |
"projectCosts": 0, | |
"tco": 401659 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Enrollment", | |
"name": "Concurrent Enrollment Approval", | |
"resourceCosts": 83181, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 83181 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Curr Mgmt", | |
"name": "Course Approval (Green Screens)", | |
"resourceCosts": 257676, | |
"swCosts": 37500, | |
"projectCosts": 491625, | |
"tco": 786801 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Curr Mgmt", | |
"name": "Course Catalog Updates (print)", | |
"resourceCosts": 453044, | |
"swCosts": 37500, | |
"projectCosts": 0, | |
"tco": 490544 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Other", | |
"name": "CSIR (Class Schedule and Instructional Record)", | |
"resourceCosts": 256996, | |
"swCosts": 37500, | |
"projectCosts": 0, | |
"tco": 294496 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Grading", | |
"name": "eGrades - Law", | |
"resourceCosts": 526246, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 526246 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Enrollment", | |
"name": "Enrollment Administration (Green Screens)", | |
"resourceCosts": 104711, | |
"swCosts": 37500, | |
"projectCosts": 0, | |
"tco": 142211 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Enrollment", | |
"name": "Fall Program for Freshman (DB2 support)", | |
"resourceCosts": 396207, | |
"swCosts": 37500, | |
"projectCosts": 0, | |
"tco": 433707 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Registration", | |
"name": "My Residency", | |
"resourceCosts": 568685, | |
"swCosts": 34000, | |
"projectCosts": 0, | |
"tco": 602685 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Enrollment", | |
"name": "NCAA Enrollment", | |
"resourceCosts": 840884, | |
"swCosts": 37500, | |
"projectCosts": 0, | |
"tco": 878384 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Admin Scheduling", | |
"name": "Online Room Request Form", | |
"resourceCosts": 164006, | |
"swCosts": 10000, | |
"projectCosts": 0, | |
"tco": 174006 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Admin Scheduling", | |
"name": "OSOC - Online Schedule of Classes", | |
"resourceCosts": 733934, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 733934 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Student Records", | |
"name": "Paradigm (Diplomas)", | |
"resourceCosts": 48730, | |
"swCosts": 49606, | |
"projectCosts": 0, | |
"tco": 98336 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Registration", | |
"name": "Registration Blocking (BLK) (Green Screen)", | |
"resourceCosts": 0, | |
"swCosts": 21348, | |
"projectCosts": 0, | |
"tco": 21348 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Registration", | |
"name": "Registration Fees", | |
"resourceCosts": 630164, | |
"swCosts": 37500, | |
"projectCosts": 0, | |
"tco": 667664 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Registration", | |
"name": "Registration Main (Green Screen & URIS Batch)", | |
"resourceCosts": 339969, | |
"swCosts": 37500, | |
"projectCosts": 17250, | |
"tco": 394719 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Student Records", | |
"name": "Student Transcript System (STS) (Green Screen)", | |
"resourceCosts": 933660, | |
"swCosts": 37500, | |
"projectCosts": 0, | |
"tco": 971160 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Enrollment", | |
"name": "Summer Session (Green Screen)", | |
"resourceCosts": 855132, | |
"swCosts": 37500, | |
"projectCosts": 0, | |
"tco": 892632 | |
}, | |
{ | |
"class": "RegEnrollment", | |
"Function3": "Enrollment", | |
"name": "TeleBears", | |
"resourceCosts": 0, | |
"swCosts": 81175, | |
"projectCosts": 483000, | |
"tco": 401825 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Awards and Packaging", | |
"name": "Auto Withdraw Cancel System (AWCS)", | |
"resourceCosts": 440702, | |
"swCosts": 10000, | |
"projectCosts": 0, | |
"tco": 450702 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Scholarships", | |
"name": "Check Tracking System (CTS)", | |
"resourceCosts": 247877, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 247877 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Awards and Packaging", | |
"name": "CSAC (California Student Aid Commission)", | |
"resourceCosts": 760834, | |
"swCosts": 2500, | |
"projectCosts": 0, | |
"tco": 763334 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Awards and Packaging", | |
"name": "Department Student Award System (DSAS)", | |
"resourceCosts": 550456, | |
"swCosts": 10000, | |
"projectCosts": 0, | |
"tco": 560456 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Awards and Packaging", | |
"name": "ED Connect", | |
"resourceCosts": 5054614, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 5054614 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Loans", | |
"name": "Emergency Loan", | |
"resourceCosts": 151020, | |
"swCosts": 10000, | |
"projectCosts": 0, | |
"tco": 161020 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Awards and Packaging", | |
"name": "ImageNow (FinAid)", | |
"resourceCosts": 836044, | |
"swCosts": 8000, | |
"projectCosts": 0, | |
"tco": 844044 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Awards and Packaging", | |
"name": "MyFinAid", | |
"resourceCosts": 841097, | |
"swCosts": 10000, | |
"projectCosts": 0, | |
"tco": 851097 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Awards and Packaging", | |
"name": "National Student Loan Data System (NLSDS)", | |
"resourceCosts": 56262, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 56262 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Awards and Packaging", | |
"name": "ProSAM", | |
"resourceCosts": 738878, | |
"swCosts": 51480, | |
"projectCosts": 0, | |
"tco": 790358 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Awards and Packaging", | |
"name": "Reg Interface", | |
"resourceCosts": 402364, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 402364 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Scholarships", | |
"name": "Scholarship Processing (SIMS )", | |
"resourceCosts": 45867, | |
"swCosts": 10000, | |
"projectCosts": 0, | |
"tco": 55867 | |
}, | |
{ | |
"class": "FinancialAid", | |
"Function3": "Work Study", | |
"name": "Work Study Mgmnt System (WSMS )", | |
"resourceCosts": 826152, | |
"swCosts": 10000, | |
"projectCosts": 0, | |
"tco": 836152 | |
}, | |
{ | |
"class": "Admissions", | |
"Function3": "App/Decision", | |
"name": "Foxpro Admissions Reporting", | |
"resourceCosts": 7564, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 7564 | |
}, | |
{ | |
"class": "Admissions", | |
"Function3": "Outreach/Yield", | |
"name": "Hobsons EMT Connect", | |
"resourceCosts": 292773, | |
"swCosts": 47212, | |
"projectCosts": 0, | |
"tco": 339985 | |
}, | |
{ | |
"class": "Admissions", | |
"Function3": "App/Decision", | |
"name": "Hyperion Reporting", | |
"resourceCosts": 805393, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 805393 | |
}, | |
{ | |
"class": "Admissions", | |
"Function3": "Outreach/Yield", | |
"name": "Inigral School Apps FaceBook Admit Support", | |
"resourceCosts": 412245, | |
"swCosts": 7492, | |
"projectCosts": 0, | |
"tco": 419737 | |
}, | |
{ | |
"class": "Admissions", | |
"Function3": "App/Decision", | |
"name": "My Berkeley App", | |
"resourceCosts": 377182, | |
"swCosts": 10000, | |
"projectCosts": 0, | |
"tco": 387182 | |
}, | |
{ | |
"class": "Admissions", | |
"Function3": "App/Decision", | |
"name": "My Berkeley Reporting", | |
"resourceCosts": 737056, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 737056 | |
}, | |
{ | |
"class": "Admissions", | |
"Function3": "App/Decision", | |
"name": "OUAE", | |
"resourceCosts": 579677, | |
"swCosts": 33000, | |
"projectCosts": 189750, | |
"tco": 802427 | |
}, | |
{ | |
"class": "Admissions", | |
"Function3": "App/Decision", | |
"name": "UGA UGuate Admissions", | |
"resourceCosts": 550759, | |
"swCosts": 37500, | |
"projectCosts": 0, | |
"tco": 588259 | |
}, | |
{ | |
"class": "AcadPlanning", | |
"Function3": "Degree Audit", | |
"name": "Degree Audit (DARS)", | |
"resourceCosts": 804923, | |
"swCosts": 36441, | |
"projectCosts": 17250, | |
"tco": 858614 | |
}, | |
{ | |
"class": "AcadPlanning", | |
"Function3": "Term Planning", | |
"name": "Schedule Builder (Ninja)", | |
"resourceCosts": 25638, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 25638 | |
}, | |
{ | |
"class": "AcadPlanning", | |
"Function3": "Transfer Credit", | |
"name": "Transfer Course System (TCS) (Green Screen)", | |
"resourceCosts": 369, | |
"swCosts": 37500, | |
"projectCosts": 17250, | |
"tco": 55119 | |
}, | |
{ | |
"class": "Conduct", | |
"Function3": "Campus, ResHall, Behavior", | |
"name": "OSCAR", | |
"resourceCosts": 80096, | |
"swCosts": 0, | |
"projectCosts": 51750, | |
"tco": 131846 | |
}, | |
{ | |
"class": "Conduct", | |
"Function3": "Campus, ResHall, Behavior", | |
"name": "OSCAR-RSSP", | |
"resourceCosts": 341850, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 341850 | |
}, | |
{ | |
"class": "GroupMgmt", | |
"Function3": "Greek", | |
"name": "CalMuse", | |
"resourceCosts": 235482, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 235482 | |
}, | |
{ | |
"class": "GroupMgmt", | |
"Function3": "Student Orgs", | |
"name": "Student Org system (current)", | |
"resourceCosts": 210482, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 210482 | |
}, | |
{ | |
"class": "Events", | |
"Function3": "Scheduling", | |
"name": "Classroom Tracker", | |
"resourceCosts": 451293, | |
"swCosts": 10000, | |
"projectCosts": 0, | |
"tco": 461293 | |
}, | |
{ | |
"class": "Events", | |
"Function3": "Scheduling", | |
"name": "EMS Space Mgmt (ASUC)", | |
"resourceCosts": 437306, | |
"swCosts": 2228, | |
"projectCosts": 0, | |
"tco": 439534 | |
}, | |
{ | |
"class": "Events", | |
"Function3": "Rsk Mgmt", | |
"name": "OSD Events Database", | |
"resourceCosts": 53310, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 53310 | |
}, | |
{ | |
"class": "Events", | |
"Function3": "Rsk Mgmt", | |
"name": "Risk Management/Event Insurance", | |
"resourceCosts": 2427387, | |
"swCosts": 0, | |
"projectCosts": 0, | |
"tco": 2427387 | |
}, | |
{ | |
"class": "Financials", | |
"Function3": "Stu Financial Acct Processing", | |
"name": "Sallie Mae", | |
"resourceCosts": 202803, | |
"swCosts": 54000, | |
"projectCosts": 0, | |
"tco": 256803 | |
} | |
] |
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
<html> | |
<head> | |
<title>Technical Resource Costs by Application Function</title> | |
<script src='http://mbostock.github.com/d3/d3.v2.js'></script> | |
<link rel="stylesheet" type="text/css" href="appCosts_stackDummy.css" /> | |
</head> | |
<body> | |
<div id="header">Student IT Maintenance/Operations</div> | |
<div id="mini-pie"> | |
<script type="text/javascript"> | |
var h = 80, | |
w = 80, | |
r = Math.min(w, h) * .15, | |
donut = d3.layout.pie().sort(null), | |
arc = d3.svg.arc().innerRadius(r / 1.75).outerRadius(r), | |
mode = 'numClasses'; | |
var pieData = [ | |
{name:"Maintenance/Operations", "tco":9.0, "class":"greenPie"}, | |
{name:"Overhead / Other", "tco":1.0, "class":"clearPie"}, | |
] | |
var pie = d3.select("body").append("svg:svg") | |
.attr("width", w ) | |
.attr("height", h) | |
.data([pieData]); | |
var arcs = pie.selectAll("g") | |
.data(donut.value(function(d) { return d.tco })) | |
.enter().append("svg:g") | |
.attr("transform", "translate(" + 50 + "," + 68 + ")") | |
.append("svg:path") | |
.attr("d", arc) | |
.each(function(d) { this._current = d; }) | |
.attr("class", function(d) { return d.data.class ;}); | |
// Computes the angle of an arc, converting from radians to degrees. Thanks to Frank Guerino.) | |
function angle(d) { | |
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90; | |
return a > 90 ? a - 180 : a; | |
} | |
// 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="sub-header">The 90% all at once*</div> | |
<div id="button-div"> | |
<text id="button-label" class="start">CONTINUE</text> | |
<svg | |
xmlns:dc="http://purl.org/dc/elements/1.1/" | |
xmlns:cc="http://creativecommons.org/ns#" | |
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | |
xmlns:svg="http://www.w3.org/2000/svg" | |
xmlns="http://www.w3.org/2000/svg" | |
xmlns:xlink="http://www.w3.org/1999/xlink" | |
version="1.1" | |
width="64.193283" | |
height="63.523876" | |
viewBox="0 0 51.354626 50.819101" | |
id="button" | |
class="start"> | |
<metadata | |
id="metadata527389"> | |
<dc:date>2012-11-25 05:03Z</dc:date> | |
<!-- Produced by OmniGraffle Professional 5.4.2 --> | |
<rdf:RDF> | |
<cc:Work | |
rdf:about=""> | |
<dc:format>image/svg+xml</dc:format> | |
<dc:type | |
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | |
<dc:title></dc:title> | |
</cc:Work> | |
</rdf:RDF> | |
</metadata> | |
<defs | |
id="defs527391"> | |
<linearGradient | |
id="linearGradient541386"> | |
<stop | |
id="stop541388" | |
style="stop-color:#ffcc00;stop-opacity:1" | |
offset="0" /> | |
<stop | |
id="stop541390" | |
style="stop-color:#ff2a2a;stop-opacity:0" | |
offset="1" /> | |
</linearGradient> | |
<linearGradient | |
id="linearGradient535288"> | |
<stop | |
id="stop535290" | |
style="stop-color:#d7e3f4;stop-opacity:1" | |
offset="0" /> | |
<stop | |
id="stop535292" | |
style="stop-color:#535d6c;stop-opacity:1" | |
offset="1" /> | |
</linearGradient> | |
<linearGradient | |
id="linearGradient533400"> | |
<stop | |
id="stop533402" | |
style="stop-color:#ffffff;stop-opacity:1" | |
offset="0" /> | |
<stop | |
id="stop533404" | |
style="stop-color:#373e48;stop-opacity:1" | |
offset="1" /> | |
</linearGradient> | |
<linearGradient | |
id="linearGradient531414"> | |
<stop | |
id="stop531416" | |
style="stop-color:#ffcc00;stop-opacity:1" | |
offset="0" /> | |
<stop | |
id="stop531418" | |
style="stop-color:#ffcc00;stop-opacity:0" | |
offset="1" /> | |
</linearGradient> | |
<linearGradient | |
id="linearGradient528354"> | |
<stop | |
id="stop528356" | |
style="stop-color:#ff6600;stop-opacity:1" | |
offset="0" /> | |
<stop | |
id="stop528374" | |
style="stop-color:#ffcc00;stop-opacity:1" | |
offset="1" /> | |
</linearGradient> | |
<filter | |
filterUnits="userSpaceOnUse" | |
color-interpolation-filters="sRGB" | |
id="Shadow"> | |
<feGaussianBlur | |
id="feGaussianBlur527394" | |
stdDeviation="3.488" | |
result="blur" | |
in="SourceAlpha" /> | |
<feOffset | |
id="feOffset527396" | |
dy="4" | |
dx="0" | |
result="offset" | |
in="blur" /> | |
<feFlood | |
id="feFlood527398" | |
result="flood" | |
flood-opacity=".75" | |
flood-color="black" /> | |
<feComposite | |
in2="offset" | |
operator="in" | |
in="flood" | |
id="feComposite527400" /> | |
</filter> | |
<radialGradient | |
cx="227.65974" | |
cy="90.694878" | |
r="30.940439" | |
fx="227.65974" | |
fy="90.694878" | |
id="radialGradient533390" | |
xlink:href="#linearGradient531414" | |
gradientUnits="userSpaceOnUse" | |
gradientTransform="matrix(-0.12422631,-0.377448,0.3891499,-0.09040866,231.51592,200.34014)" /> | |
<linearGradient | |
x1="228.59381" | |
y1="121.61312" | |
x2="234.2569" | |
y2="105.58002" | |
id="linearGradient533980" | |
xlink:href="#linearGradient533400" | |
gradientUnits="userSpaceOnUse" /> | |
<linearGradient | |
x1="220.85742" | |
y1="109.04664" | |
x2="228.58353" | |
y2="99.513435" | |
id="linearGradient537186" | |
xlink:href="#linearGradient535288" | |
gradientUnits="userSpaceOnUse" /> | |
<linearGradient | |
x1="228.59381" | |
y1="121.61312" | |
x2="234.2569" | |
y2="105.58002" | |
id="linearGradient537198" | |
xlink:href="#linearGradient533400" | |
gradientUnits="userSpaceOnUse" /> | |
<linearGradient | |
x1="220.85742" | |
y1="109.04664" | |
x2="228.58353" | |
y2="99.513435" | |
id="linearGradient537200" | |
xlink:href="#linearGradient535288" | |
gradientUnits="userSpaceOnUse" /> | |
<radialGradient | |
cx="312.42923" | |
cy="84.296028" | |
r="30.940439" | |
fx="312.42923" | |
fy="84.296028" | |
id="radialGradient543762" | |
xlink:href="#linearGradient541386" | |
gradientUnits="userSpaceOnUse" | |
gradientTransform="matrix(-1.1325633,-1.1757427,1.1480104,-0.7806073,487.79422,520.88536)" /> | |
<linearGradient | |
x1="228.59381" | |
y1="121.61312" | |
x2="234.2569" | |
y2="105.58002" | |
id="linearGradient543789" | |
xlink:href="#linearGradient533400" | |
gradientUnits="userSpaceOnUse" /> | |
<linearGradient | |
x1="220.85742" | |
y1="109.04664" | |
x2="228.58353" | |
y2="99.513435" | |
id="linearGradient543791" | |
xlink:href="#linearGradient535288" | |
gradientUnits="userSpaceOnUse" /> | |
<radialGradient | |
cx="312.42923" | |
cy="84.296028" | |
r="30.940439" | |
fx="312.42923" | |
fy="84.296028" | |
id="radialGradient543793" | |
xlink:href="#linearGradient541386" | |
gradientUnits="userSpaceOnUse" | |
gradientTransform="matrix(-1.1325633,-1.1757427,1.1480104,-0.7806073,487.79422,520.88536)" /> | |
</defs> | |
<g | |
transform="translate(-111.69879,-51.677118)" | |
id="g527402" | |
style="fill:none;stroke:none"> | |
<title | |
id="title527404">Canvas 1</title> | |
<g | |
id="g527406"> | |
<title | |
id="title527408">Show me the viz</title> | |
<g | |
id="g527410"> | |
<use | |
id="use527412" | |
style="filter:url(#Shadow)" | |
x="0" | |
y="0" | |
width="576" | |
height="733" | |
xlink:href="#id11_Graphic" /> | |
<use | |
id="use527414" | |
style="filter:url(#Shadow)" | |
x="0" | |
y="0" | |
width="576" | |
height="733" | |
xlink:href="#id10_Graphic" /> | |
</g> | |
<g | |
id="id11_Graphic"> | |
<path | |
d="m 184,277.3 0,-69.6 c 0,-4.8024 43.008,-8.7 96,-8.7 52.992,0 96,3.8976 96,8.7 l 0,69.6 c 0,4.8024 -43.008,8.7 -96,8.7 -52.992,0 -96,-3.8976 -96,-8.7" | |
id="path527417" | |
style="fill:#ffffff" /> | |
<path | |
d="m 184,277.3 0,-69.6 c 0,-4.8024 43.008,-8.7 96,-8.7 52.992,0 96,3.8976 96,8.7 l 0,69.6 c 0,4.8024 -43.008,8.7 -96,8.7 -52.992,0 -96,-3.8976 -96,-8.7 m 0,-69.6 c 0,4.8024 43.008,8.7 96,8.7 52.992,0 96,-3.8976 96,-8.7" | |
id="path527419" | |
style="stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round" /> | |
</g> | |
<g | |
id="id10_Graphic"> | |
<g | |
transform="translate(-47.442006,-3.2413793)" | |
id="g543764"> | |
<path | |
d="m 272.93887,100.3801 a 30.940439,22.83699 0 1 1 -61.88088,0 30.940439,22.83699 0 1 1 61.88088,0 z" | |
transform="matrix(0.5713336,0,0,0.68001955,46.556279,13.947572)" | |
id="path533396" | |
style="fill:url(#linearGradient543789);fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |
<path | |
d="m 272.93887,100.3801 a 30.940439,22.83699 0 1 1 -61.88088,0 30.940439,22.83699 0 1 1 61.88088,0 z" | |
transform="matrix(0.5713336,0,0,0.68001955,46.556279,11.547572)" | |
id="path533398" | |
style="fill:url(#linearGradient543791);fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |
<path | |
d="m 272.93887,100.3801 a 30.940439,22.83699 0 1 1 -61.88088,0 30.940439,22.83699 0 1 1 61.88088,0 z" | |
transform="matrix(0.50952381,0,0,0.60645161,61.601991,19.092356)" | |
id="path533394" | |
style="fill:#d40000;fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |
<path | |
d="m 272.93887,100.3801 a 30.940439,22.83699 0 1 1 -61.88088,0 30.940439,22.83699 0 1 1 61.88088,0 z" | |
transform="matrix(0.50952381,0,0,0.60645161,61.601991,15.892356)" | |
id="path527430" | |
style="fill:#ff2a2a;fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |
<path | |
d="m 272.93887,100.3801 a 30.940439,22.83699 0 1 1 -61.88088,0 30.940439,22.83699 0 1 1 61.88088,0 z" | |
transform="matrix(0.50952381,0,0,0.60645161,61.601991,15.892356)" | |
id="path541384" | |
style="fill:url(#radialGradient543793);fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |
</g> | |
</g> | |
</g> | |
</g> | |
</svg></div> | |
<div id="FunctionPie"> | |
<script type="text/javascript"> | |
var w = 450, | |
h = 450, | |
r = Math.min(w, h) * .25, | |
labelr = r + 10, // radius for label anchor | |
donut = d3.layout.pie().sort(null), | |
arc = d3.svg.arc().innerRadius(r / 1.75).outerRadius(r) | |
mode = 'numClasses'; | |
// .data([data]) | |
var data = [{"name": "Admissions","tco": 4087603,"class": "Admissions", "percent": 13 }, | |
{"name": "GroupMgmt","tco": 445964,"class": "GroupMgmt", "percent": 1 }, | |
{"name": "Events","tco": 3381524,"class": "Events", "percent": 11 }, | |
{"name": "Conduct","tco": 473696,"class": "Conduct", "percent": 1 }, | |
{"name": "FinancialAid","tco": 11074147,"class": "FinancialAid", "percent": 35 }, | |
{"name": "Financials","tco": 256803,"class": "Financials", "percent": 1 }, | |
{"name": "Reg/Enrollment","tco": 11029674,"class": "RegEnrollment", "percent": 35 }, | |
{"name": "Acad Planning","tco": 939370,"class": "AcadPlanning", "percent": 3 }, | |
]; | |
var qFormat = d3.format(","); | |
var vis = d3.select("body").append("svg:svg") | |
.attr("class", "FunctionPie") | |
.attr("width", w ) | |
.attr("height", h) | |
.data([data]); | |
var arcs = vis.selectAll("g") | |
.data(donut.value(function(d) { return d.percent })) | |
.enter().append("svg:g") | |
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")") | |
.attr("class", function(d, i) { return data[i].class ;}) | |
.append("svg:path") | |
.attr("d", arc) | |
.each(function(d) { this._current = d; }); | |
var percentLabels = vis.selectAll("g") | |
.append("svg:text") | |
.attr("fill", "white") | |
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) | |
.text(function(d, i) { return d.value + "%"; }) | |
.attr("text-anchor", "middle") | |
.attr("display", function(d) { return d.value > 3 ? null : "none"; }) | |
.attr("class", "percentLabel"); | |
var labels = vis.selectAll("g") | |
.append("svg:text") | |
.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) + ")rotate(" + angle(d) + ")" ; | |
}) | |
.attr("dy", "1.5em") | |
.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); }) | |
.attr("class", function(d, i) { return data[i].class ;}); | |
vis.selectAll("g").append("svg:text") | |
.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) + ")rotate(" + angle(d) + ")" ; | |
}) | |
.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", function(d, i) { return data[i].class ;}); | |
//add the total amount in the center | |
vis.append("svg:text") | |
.attr("fill", "white") | |
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")") | |
.attr("dy", ".35em") | |
.attr("text-anchor", "middle") | |
.transition().delay(4000).duration(3000) | |
.attr("fill", "#525252") | |
.text("$" + qFormat(31.6) + "MM") | |
.attr("class", "totalLabel"); | |
// Computes the angle of an arc, converting from radians to degrees. Thanks to Frank Guerino. | |
function angle(d) { | |
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90; | |
return a > 90 ? a - 180 : a; | |
} | |
// 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="chart"> | |
<script type="text/javascript"> | |
var w = 500, | |
h = 680, | |
m = [0, 40, 70, 694], //margin top, right, bottom, left | |
z = d3.scale.ordinal().range(["", "projectCosts", "swCosts"]); | |
d3.json("appCostsDummy.json", function(data) { | |
var y = d3.scale.ordinal() | |
.domain([data.length]) | |
.rangeBands([0, h]); | |
var x = d3.scale.linear() | |
.domain([0, d3.max(data.map(function(d) {return parseInt(d.tco);}))]) | |
.range([0, w - m[1]]); | |
// Transpose the data into layers by cost. | |
stack = d3.layout.stack()(["resourceCosts", "projectCosts", "swCosts"].map(function(cost) { | |
return data.map(function(d, i) { | |
return {x: d.name, y: +d[cost], class: cost}; | |
}); | |
})); | |
var qFormat = d3.format(","); | |
// add the resource support costs | |
var chart = d3.select("body").append("svg") | |
.attr("class", "chart") | |
.attr("width", w + m[1] + m[3]) | |
.attr("height", h + m[0] +m[2]); | |
// Add a group for each app. | |
var costs = chart.selectAll("g.costs") | |
.data(stack) | |
.enter().append("svg:g") | |
.attr("class", function(d, i) { return z(i); }); | |
d3.selectAll(".start").on("click", function() { | |
// hide the start button | |
d3.select("#path527430") | |
.style("fill", "#CB181D") | |
.transition().duration(750) | |
.style("fill", "#ff2a2a"); | |
d3.selectAll("#button") | |
.transition().delay(1000) | |
.attr("opacity", 0); | |
d3.select("#button-label") | |
.transition().delay(250) | |
.style("opacity", 0); | |
// Add a rect for each member of the series. | |
var rect = costs.selectAll("rect") | |
.data(Object) | |
.enter().append("svg:rect") | |
.attr("opacity", 100) | |
.attr("x", m[3]) | |
.attr("y", m[0]) | |
.attr("height", (y.rangeBand()/data.length) -1) | |
.attr("transform", function (d, i) { return "translate(" + x(d.y0) + "," + (y.rangeBand() / data.length * i) + ")"; }) | |
.attr("class", function (d, i) { return (d.class == "resourceCosts" ? data[i].class : "") ; }) | |
.transition().delay(1000).duration(2000).attr("width", function (d) { return x(d.y); }); | |
//add y-axis labels | |
chart.selectAll(".deptLabel") | |
.data(data) | |
.enter().append("svg:text") | |
.attr("x",0) | |
.attr("y", m[0]) | |
.attr("class", function(d) { return d.class ;}) | |
.attr("text-anchor", "end") | |
.attr("vertical-align", "top") | |
.attr("dy", ".5em") | |
.attr("transform", function(d,i) { return ("translate(" + (m[3] - 5) + "," + ((y.rangeBand() / data.length * i) + (y.rangeBand() / data.length / 2.5)) + ")");}) | |
.transition().delay(1000) | |
.text(function(d) { return d.name ;}); | |
// Add x-axis rules. | |
var xRule = chart.selectAll("g.rule") | |
.data(x.ticks(6)) | |
.enter().append("svg:g") | |
.attr("class", "rule") | |
.attr("transform", function(d) { return "translate(" + (m[3] + x(d)) + ",0)"; }); | |
xRule.append("svg:line") | |
.attr("y2", h + m[3]) | |
.style("stroke", "#fff") | |
.style("stroke-opacity", function(d) { return d ? .7 : null; }); | |
xRule.append("svg:text") | |
.attr("y", m[0] - 10) | |
.attr("dy", ".35em") | |
.attr("text-anchor", "middle") | |
.text(d3.format(",d.tco")); | |
//add total cost labels | |
chart.selectAll(".enrollCountLabel") | |
.data(data) | |
.enter().append("svg:text") | |
.attr("x", m[3]) | |
.attr("y", m[0]) | |
.attr("class", function(d) { return d.class }) | |
.attr("text-anchor", "start") | |
.attr("vertical-align", "middle") | |
.attr("dy", ".52em") | |
.attr("transform", function(d,i) { return ("translate(" + (x(d.tco + m[3]) + 10) + "," + ((y.rangeBand() / data.length * i) + (y.rangeBand() / data.length / 2.5)) + ")");}) | |
.transition().delay(1000) | |
.text(function(d) { return qFormat(d.tco);}); | |
//show the legend for the stacked bars | |
d3.select("#svg_leg") | |
.transition().delay(2000).duration(2000).attr("opacity", 100); | |
}); | |
}); | |
</script> | |
</div> | |
<div id="legendTitle"> | |
<script type="text/javascript"> | |
var w_leg = 400, | |
h_leg = 50, | |
p_leg = [5, 0, 0, 20], | |
data_leg = [{"x":0, "y":64, "y0":0, "name":"Operational Resources"}, {"x":0, "y":50, "y0":64, "name":"Project Resources"}, {"x":0, "y":46, "y0":114, "name":"SW Licensing**"}], | |
color_leg = ["#7570B3", "#525252", "#FFED6F"], | |
labelColor_leg = ["#FFFFFF", "#FFFFFF", "#525252"]; | |
var x_leg = d3.scale.linear() | |
.domain([0, 170]) | |
.range([0, w_leg]); | |
// Visualisation selection | |
var svg_leg = d3.select("#legendTitle").append("svg:svg") | |
.attr("width", w_leg) | |
.attr("height", h_leg) | |
.attr("opacity", 0) | |
.attr("id", "svg_leg") | |
.append("svg:g"); | |
// Add a rect for each member of the series. | |
var rect_leg = svg_leg.selectAll("rect") | |
.data(data_leg) | |
.enter().append("svg:rect") | |
.attr("x", 0) | |
.attr("y", 5) | |
.attr("width", function (d) { return x_leg(d.y); }) | |
.attr("height", 15) | |
.attr("transform", function (d, i) { return "translate(" + x_leg(d.y0) + ")"; }) | |
.style("fill", function (d, i) { return color_leg[i]; }) | |
.style("fill-opacity", "1"); | |
svg_leg.selectAll(".legendLabel") | |
.data(data_leg) | |
.enter().append("svg:text") | |
.attr("x",0) | |
.attr("y", 17) | |
.attr("class", "legendLabel") | |
.attr("text-anchor", "start") | |
.attr("vertical-align", "middle") | |
.text(function(d) { return d.name ;}) | |
.style("fill", function (d, i) { return labelColor_leg[i]; }) | |
.attr("transform", function(d,i) { return "translate(" + x_leg((d.y0) + 5) + ")" ; }); | |
</script> | |
</div> | |
<div id="FTE-calc-note"> | |
* This data is for the purposes of an example, and is not real data | |
<P> | |
<div id="author">BY SARA QUIGLEY</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment