Skip to content

Instantly share code, notes, and snippets.

@MisunoKitara

MisunoKitara/.block

Last active February 17, 2026 11:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MisunoKitara/45cbe8ca5588cb8cc4de2a297907f392 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MisunoKitara/45cbe8ca5588cb8cc4de2a297907f392 to your computer and use it in GitHub Desktop.
Download ZIP
2024: ICTS Sequences Sunburst
Raw
.block
license: apache-2.0
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ICTS Sequences sunburst</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<link rel="stylesheet" type="text/css" href="sequences.css"/>
</head>
<body>
<div id="main">
<div id="sequence"></div>
<div id="chart">
<div id="explanation" style="visibility: hidden;">
<span id="percentage"></span><br/>
</div>
</div>
</div>
<div id="sidebar">
<input type="checkbox" id="togglelegend"> Legend<br/>
<div id="legend" style="visibility: hidden;"></div>
</div>
<script type="text/javascript" src="sequences.js"></script>
<script type="text/javascript">
// Hack to make this example display correctly in an iframe on bl.ocks.org
d3.select(self.frameElement).style("height", "700px");
</script>
</body>
</html>
Raw
LICENSE
Copyright 2013 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Raw
sequences.css
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 400;
background-color: #fff;
width: 960px;
height: 700px;
margin-top: 10px;
}
#main {
float: left;
width: 750px;
}
#sidebar {
float: right;
width: 100px;
}
#sequence {
width: 600px;
height: 70px;
}
#legend {
padding: 10px 0 0 3px;
}
#sequence text, #legend text {
font-weight: 600;
fill: #fff;
}
#chart {
position: relative;
}
#chart path {
stroke: #fff;
}
#explanation {
position: absolute;
top: 260px;
left: 305px;
width: 140px;
text-align: center;
color: #666;
z-index: -1;
}
#percentage {
font-size: 2.5em;
}
Raw
sequences.js
// Dimensions of sunburst.
var width = 750;
var height = 600;
var radius = Math.min(width, height) / 2;
// Breadcrumb dimensions: width, height, spacing, width of tip/tail.
var b = {
w: 75, h: 30, s: 3, t: 10
};
// Mapping of step names to colors.
var colors = {
"ICTS": "#116E8A",
"ICTS tickets": "#1D8DB0",
"spam/geannuleerd": "#61AF50",
"Algemene IT Ondersteuning": "#831A2E",
"IOI": "#915f77",
"IOS": "#cfc787",
"Ivanti Vraagbaak": "#918b5f",
"KOC": "#CF879B",
"CSA": "#CF879B",
"KOS": "#996985",
"KOS A": "#B95470",
"Servicepunt": "#9F224C",
"OWI": "#B97281",
"OWL": "#B97281",
"OWH": "#B97281",
"WPB": "#B97281",
"IT Portfolio Onderzoek": "#00CAC9",
"AOZ": "#00B5DF",
"COZ": "#008d9c",
"FOZ RDM": "#009AE5",
"FOZ HPC": "#00DCC6",
"IT alle Portfolio’s": "#F9F871",
"ACR": "#C1C23C",
"AIC Red": "#8A8F00",
"CBI": "#566000",
"CBO": "#767440",
"CIS IAM": "#96935D",
"FCS Sam": "#0A6473",
"FII Toep": "#F0DEB4",
"IDS": "#F0DEB4",
"CSO": "#0A6473",
"IT systemen en IT faciliteiten": "#5C5393",
"BaSys": "#2568AC",
"CDC": "#007DB9",
"CLX": "#CE756D",
"CSP": "#00AA87",
"CWN": "#009EA4",
"FCS Com": "#00AA87",
"FII WmsDev": "#9085C9",
"LSY": "#94423D",
"NIC": "#008FB5",
"NSA": "#008FB5",
"IT Portfolio Onderwijs en Studenten": "#DD8A2E",
"AES": "#FFE183",
"AIS": "#FFD284",
"AMI": "#B56902",
"AOW": "#8F4900",
"AST": "#62BAAC",
"FOW": "#006B5F",
"LEC": "#BD9A00",
"LPC": "#A18F65",
"ICTS": "#7d8da7",
"MGT": "#b3efe4",
"IT Portfolio Ondersteunende Functies": "#E1E1D6",
"AHR Core": "#c8c8b5",
"AHR PyTm": "#F3F3CC",
"AHR Soft": "#ADAE89",
"ALT": "#aeae92",
"AFI": "#ACAC9A"
};
// Total size of all segments; we set this later, after loading the data.
var totalSize = 0;
var vis = d3.select("#chart").append("svg:svg")
.attr("width", width)
.attr("height", height)
.append("svg:g")
.attr("id", "container")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var partition = d3.layout.partition()
.size([2 * Math.PI, radius * radius])
.value(function(d) { return d.size; });
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
// Use d3.text and d3.csv.parseRows so that we do not need to have a header
// row, and can receive the csv as an array of arrays.
d3.text("visit-sequences.csv", function(text) {
var csv = d3.csv.parseRows(text);
var json = buildHierarchy(csv);
createVisualization(json);
});
// Main function to draw and set up the visualization, once we have the data.
function createVisualization(json) {
// Basic setup of page elements.
initializeBreadcrumbTrail();
drawLegend();
d3.select("#togglelegend").on("click", toggleLegend);
// Bounding circle underneath the sunburst, to make it easier to detect
// when the mouse leaves the parent g.
vis.append("svg:circle")
.attr("r", radius)
.style("opacity", 0);
// For efficiency, filter nodes to keep only those large enough to see.
var nodes = partition.nodes(json)
.filter(function(d) {
return (d.dx > 0.005); // 0.005 radians = 0.29 degrees
});
var path = vis.data([json]).selectAll("path")
.data(nodes)
.enter().append("svg:path")
.attr("display", function(d) { return d.depth ? null : "none"; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("fill", function(d) { return colors[d.name]; })
.style("opacity", 1)
.on("mouseover", mouseover);
// Add the mouseleave handler to the bounding circle.
d3.select("#container").on("mouseleave", mouseleave);
// Get total size of the tree = value of root node from partition.
totalSize = path.node().__data__.value;
};
// Fade all but the current sequence, and show it in the breadcrumb trail.
function mouseover(d) {
var percentage = (100 * d.value / totalSize).toPrecision(3);
var percentageString = percentage + "%";
if (percentage < 0.1) {
percentageString = "< 0.1%";
}
d3.select("#percentage")
.text(percentageString);
d3.select("#explanation")
.style("visibility", "");
var sequenceArray = getAncestors(d);
updateBreadcrumbs(sequenceArray, percentageString);
// Fade all the segments.
d3.selectAll("path")
.style("opacity", 0.3);
// Then highlight only those that are an ancestor of the current segment.
vis.selectAll("path")
.filter(function(node) {
return (sequenceArray.indexOf(node) >= 0);
})
.style("opacity", 1);
}
// Restore everything to full opacity when moving off the visualization.
function mouseleave(d) {
// Hide the breadcrumb trail
d3.select("#trail")
.style("visibility", "hidden");
// Deactivate all segments during transition.
d3.selectAll("path").on("mouseover", null);
// Transition each segment to full opacity and then reactivate it.
d3.selectAll("path")
.transition()
.duration(1000)
.style("opacity", 1)
.each("end", function() {
d3.select(this).on("mouseover", mouseover);
});
d3.select("#explanation")
.style("visibility", "hidden");
}
// Given a node in a partition layout, return an array of all of its ancestor
// nodes, highest first, but excluding the root.
function getAncestors(node) {
var path = [];
var current = node;
while (current.parent) {
path.unshift(current);
current = current.parent;
}
return path;
}
function initializeBreadcrumbTrail() {
// Add the svg area.
var trail = d3.select("#sequence").append("svg:svg")
.attr("width", width)
.attr("height", 50)
.attr("id", "trail");
// Add the label at the end, for the percentage.
trail.append("svg:text")
.attr("id", "endlabel")
.style("fill", "#000");
}
// Generate a string that describes the points of a breadcrumb polygon.
function breadcrumbPoints(d, i) {
var points = [];
points.push("0,0");
points.push(b.w + ",0");
points.push(b.w + b.t + "," + (b.h / 2));
points.push(b.w + "," + b.h);
points.push("0," + b.h);
if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
points.push(b.t + "," + (b.h / 2));
}
return points.join(" ");
}
// Update the breadcrumb trail to show the current sequence and percentage.
function updateBreadcrumbs(nodeArray, percentageString) {
// Data join; key function combines name and depth (= position in sequence).
var g = d3.select("#trail")
.selectAll("g")
.data(nodeArray, function(d) { return d.name + d.depth; });
// Add breadcrumb and label for entering nodes.
var entering = g.enter().append("svg:g");
entering.append("svg:polygon")
.attr("points", breadcrumbPoints)
.style("fill", function(d) { return colors[d.name]; });
entering.append("svg:text")
.attr("x", (b.w + b.t) / 2)
.attr("y", b.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; });
// Set position for entering and updating nodes.
g.attr("transform", function(d, i) {
return "translate(" + i * (b.w + b.s) + ", 0)";
});
// Remove exiting nodes.
g.exit().remove();
// Now move and update the percentage at the end.
d3.select("#trail").select("#endlabel")
.attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
.attr("y", b.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(percentageString);
// Make the breadcrumb trail visible, if it's hidden.
d3.select("#trail")
.style("visibility", "");
}
function drawLegend() {
// Dimensions of legend item: width, height, spacing, radius of rounded rect.
var li = {
w: 240, h: 30, s: 3, r: 3
};
var legend = d3.select("#legend").append("svg:svg")
.attr("width", li.w)
.attr("height", d3.keys(colors).length * (li.h + li.s));
var g = legend.selectAll("g")
.data(d3.entries(colors))
.enter().append("svg:g")
.attr("transform", function(d, i) {
return "translate(0," + i * (li.h + li.s) + ")";
});
g.append("svg:rect")
.attr("rx", li.r)
.attr("ry", li.r)
.attr("width", li.w)
.attr("height", li.h)
.style("fill", function(d) { return d.value; });
g.append("svg:text")
.attr("x", li.w / 2)
.attr("y", li.h / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.key; });
}
function toggleLegend() {
var legend = d3.select("#legend");
if (legend.style("visibility") == "hidden") {
legend.style("visibility", "");
} else {
legend.style("visibility", "hidden");
}
}
// Take a 2-column CSV and transform it into a hierarchical structure suitable
// for a partition layout. The first column is a sequence of step names, from
// root to leaf, separated by hyphens. The second column is a count of how
// often that sequence occurred.
function buildHierarchy(csv) {
var root = {"name": "root", "children": []};
for (var i = 0; i < csv.length; i++) {
var sequence = csv[i][0];
var size = +csv[i][1];
if (isNaN(size)) { // e.g. if this is a header row
continue;
}
var parts = sequence.split("-");
var currentNode = root;
for (var j = 0; j < parts.length; j++) {
var children = currentNode["children"];
var nodeName = parts[j];
var childNode;
if (j + 1 < parts.length) {
// Not yet at the end of the sequence; move down the tree.
var foundChild = false;
for (var k = 0; k < children.length; k++) {
if (children[k]["name"] == nodeName) {
childNode = children[k];
foundChild = true;
break;
}
}
// If we don't already have a child node for this branch, create it.
if (!foundChild) {
childNode = {"name": nodeName, "children": []};
children.push(childNode);
}
currentNode = childNode;
} else {
// Reached the end of the sequence; create a leaf node.
childNode = {"name": nodeName, "size": size};
children.push(childNode);
}
}
}
return root;
};
Raw
visit-sequences.csv
ICTS-ICTS Tickets-IT ten dienste van alle Portfolio’s-ACR 1054
ICTS-spam/geannuleerd-IT ten dienste van alle Portfolio’s-ACR 1840
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-AES 530
ICTS-ICTS Tickets-IT voor de Portfolio Ondersteunende Functies-AFI 1577
ICTS-spam/geannuleerd-IT voor de Portfolio Ondersteunende Functies-AFI 618
ICTS-spam/geannuleerd-IT voor de Portfolio Ondersteunende Functies-AHR Core 1689
ICTS-ICTS Tickets-IT voor de Portfolio Ondersteunende Functies-AHR Core 1361
ICTS-spam/geannuleerd-IT voor de Portfolio Ondersteunende Functies-AHR PyTm 222
ICTS-ICTS Tickets-IT voor de Portfolio Ondersteunende Functies-AHR PyTm 444
ICTS-ICTS Tickets-IT voor de Portfolio Ondersteunende Functies-AHR Soft 797
ICTS-spam/geannuleerd-IT voor de Portfolio Ondersteunende Functies-AHR Soft 374
ICTS-ICTS Tickets-IT ten dienste van alle Portfolio’s-AIC Red 185
ICTS-spam/geannuleerd-IT ten dienste van alle Portfolio’s-AIC Red 4
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-AIS 574
ICTS-spam/geannuleerd-IT voor de Portfolio Onderwijs en Studenten-AIS 41
ICTS-spam/geannuleerd-IT voor de Portfolio Ondersteunende Functies-ALT 307
ICTS-ICTS Tickets-IT voor de Portfolio Ondersteunende Functies-ALT 901
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-AMI 883
ICTS-spam/geannuleerd-IT voor de Portfolio Onderwijs en Studenten-AMI 242
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-AOW 596
ICTS-spam/geannuleerd-IT voor de Portfolio Onderwijs en Studenten-AOW 210
ICTS-spam/geannuleerd-IT voor de Portfolio Onderzoek-AOZ 382
ICTS-ICTS Tickets-IT voor de Portfolio Onderzoek-AOZ 1509
ICTS-spam/geannuleerd-IT voor de Portfolio Onderwijs en Studenten-AST 511
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-AST 733
ICTS-spam/geannuleerd-Algemene IT-systemen en IT-faciliteiten-BaSys 761
ICTS-ICTS Tickets-Algemene IT-systemen en IT-faciliteiten-BaSys 818
ICTS-ICTS Tickets-IT ten dienste van alle Portfolio’s-CBO 100
ICTS-spam/geannuleerd-IT ten dienste van alle Portfolio’s-CBO 1
ICTS-ICTS Tickets-IT ten dienste van alle Portfolio’s-CBI 717
ICTS-spam/geannuleerd-IT ten dienste van alle Portfolio’s-CBI 183
ICTS-ICTS Tickets-IT ten dienste van alle Portfolio’s-CBO 334
ICTS-spam/geannuleerd-IT ten dienste van alle Portfolio’s-CBO 18
ICTS-ICTS Tickets-Algemene IT-systemen en IT-faciliteiten-CDC 284
ICTS-spam/geannuleerd-Algemene IT-systemen en IT-faciliteiten-CDC 15
ICTS-ICTS Tickets-IT ten dienste van alle Portfolio’s-CIS IAM 273
ICTS-spam/geannuleerd-IT ten dienste van alle Portfolio’s-CIS IAM 35
ICTS-ICTS Tickets-Algemene IT-systemen en IT-faciliteiten-CLX 86
ICTS-spam/geannuleerd-Algemene IT-systemen en IT-faciliteiten-CLX 12
ICTS-ICTS Tickets-IT voor de Portfolio Onderzoek-COZ 5
ICTS-ICTS Tickets-Algemene IT-ondersteuning-CSA 15
ICTS-ICTS Tickets-IT ten dienste van alle Portfolio’s-CSO 2
ICTS-ICTS Tickets-Algemene IT-systemen en IT-faciliteiten-CSP 22
ICTS-ICTS Tickets-Algemene IT-systemen en IT-faciliteiten-CWN 179
ICTS-spam/geannuleerd-Algemene IT-systemen en IT-faciliteiten-CWN 11
ICTS-ICTS Tickets-Algemene IT-systemen en IT-faciliteiten-FCS Com 1308
ICTS-spam/geannuleerd-Algemene IT-systemen en IT-faciliteiten-FCS Com 128
ICTS-ICTS Tickets-IT ten dienste van alle Portfolio’s-FCS Sam 623
ICTS-ICTS Tickets-IT ten dienste van alle Portfolio’s-FII Toep 407
ICTS-spam/geannuleerd-IT ten dienste van alle Portfolio’s-FII Toep 52
ICTS-ICTS Tickets-Algemene IT-systemen en IT-faciliteiten-FII WmsDev 967
ICTS-spam/geannuleerd-Algemene IT-systemen en IT-faciliteiten-FII WmsDev 48
ICTS-spam/geannuleerd-IT voor de Portfolio Onderwijs en Studenten-FOW 246
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-FOW 2503
ICTS-ICTS Tickets-IT voor de Portfolio Onderzoek-FOZ HPC 4555
ICTS-spam/geannuleerd-IT voor de Portfolio Onderzoek-FOZ HPC 451
ICTS-ICTS Tickets-IT voor de Portfolio Onderzoek-FOZ RDM 852
ICTS-spam/geannuleerd-IT voor de Portfolio Onderzoek-FOZ RDM 214
ICTS-ICTS Tickets-IT ten dienste van alle Portfolio’s-CBO 7
ICTS-ICTS Tickets-IT ten dienste van alle Portfolio’s-IDS 281
ICTS-spam/geannuleerd-IT ten dienste van alle Portfolio’s-IDS 2
ICTS-ICTS Tickets-Algemene IT-ondersteuning-IOI 4
ICTS-ICTS Tickets-Algemene IT-ondersteuning-IOS 63
ICTS-spam/geannuleerd-Algemene IT-ondersteuning-IOS 17
ICTS-ICTS Tickets-Algemene IT-ondersteuning-Ivanti Vraagbaak 124
ICTS-spam/geannuleerd-Algemene IT-ondersteuning-Ivanti Vraagbaak 180
ICTS-ICTS Tickets-Algemene IT-ondersteuning-KOC 263
ICTS-spam/geannuleerd-Algemene IT-ondersteuning-KOC 12
ICTS-ICTS Tickets-Algemene IT-ondersteuning-KOS 1912
ICTS-spam/geannuleerd-Algemene IT-ondersteuning-KOS 68
ICTS-ICTS Tickets-Algemene IT-ondersteuning-KOS A 5546
ICTS-spam/geannuleerd-Algemene IT-ondersteuning-KOS A 2
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-LEC 746
ICTS-spam/geannuleerd-IT voor de Portfolio Onderwijs en Studenten-LEC 193
ICTS-ICTS Tickets-Algemene IT-ondersteuning-OWI 1448
ICTS-spam/geannuleerd-Algemene IT-ondersteuning-OWI 15
ICTS-ICTS Tickets-Algemene IT-ondersteuning-OWI 1249
ICTS-spam/geannuleerd-Algemene IT-ondersteuning-OWI 18
ICTS-ICTS Tickets-Algemene IT-ondersteuning-OWI 1208
ICTS-spam/geannuleerd-Algemene IT-ondersteuning-OWI 22
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-LPC 99
ICTS-spam/geannuleerd-IT voor de Portfolio Onderwijs en Studenten-LPC 1
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-LPC 25
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-LPC 48
ICTS-spam/geannuleerd-IT voor de Portfolio Onderwijs en Studenten-LPC 1
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-LPC 265
ICTS-ICTS Tickets-IT voor de Portfolio Onderwijs en Studenten-LPC 529
ICTS-spam/geannuleerd-IT voor de Portfolio Onderwijs en Studenten-LPC 4
ICTS-ICTS Tickets-Algemene IT-systemen en IT-faciliteiten-LSY 518
ICTS-spam/geannuleerd-Algemene IT-systemen en IT-faciliteiten-LSY 492
ICTS-ICTS Tickets-ICTSMGT 90
ICTS-ICTS Tickets-Algemene IT-systemen en IT-faciliteiten-NIC 821
ICTS-spam/geannuleerd-Algemene IT-systemen en IT-faciliteiten-NIC 231
ICTS-ICTS Tickets-Algemene IT-systemen en IT-faciliteiten-NSA 333
ICTS-spam/geannuleerd-Algemene IT-systemen en IT-faciliteiten-NSA 4
ICTS-ICTS Tickets-Algemene IT-ondersteuning-OWH 91
ICTS-ICTS Tickets-Algemene IT-ondersteuning-OWL 100
ICTS-spam/geannuleerd-Algemene IT-ondersteuning-Servicepunt 13008
ICTS-ICTS Tickets-Algemene IT-ondersteuning-Servicepunt 15887
ICTS-ICTS Tickets-Algemene IT-ondersteuning-Servicepunt 9606
ICTS-spam/geannuleerd-Algemene IT-ondersteuning-Servicepunt 255
ICTS-ICTS Tickets-Algemene IT-ondersteuning-WPB 31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment