Skip to content

Instantly share code, notes, and snippets.

@saraquigley

saraquigley/appCostsDummy.json

Created November 29, 2012 22:30
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/4172341 to your computer and use it in GitHub Desktop.
Save saraquigley/4172341 to your computer and use it in GitHub Desktop.
Download ZIP
IT costs: donut and horizontal stack
Raw
appCosts_stackDummy.css
.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;
}
Raw
appCostsDummy.json
[
{
"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
}
]
Raw
index.html
<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