Skip to content

Instantly share code, notes, and snippets.

@MisunoKitara

MisunoKitara/.block

Last active February 17, 2026 13:09
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save MisunoKitara/28aada8d2e8ea4a694f6a05781bd2d18 to your computer and use it in GitHub Desktop.
Download ZIP
2025: 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 alle Portfolio’s-ACR 1054
ICTS-spam/geannuleerd-IT alle Portfolio’s-ACR 1840
ICTS-ICTS Tickets-IT Portfolio Onderwijs en Studenten-AES 530
ICTS-ICTS Tickets-IT Portfolio Ondersteunende Functies-AFI 1577
ICTS-spam/geannuleerd-IT Portfolio Ondersteunende Functies-AFI 618
ICTS-spam/geannuleerd-IT Portfolio Ondersteunende Functies-AHR Core 1689
ICTS-ICTS Tickets-IT Portfolio Ondersteunende Functies-AHR Core 1361
ICTS-spam/geannuleerd-IT Portfolio Ondersteunende Functies-AHR PyTm 222
ICTS-ICTS Tickets-IT Portfolio Ondersteunende Functies-AHR PyTm 444
ICTS-ICTS Tickets-IT Portfolio Ondersteunende Functies-AHR Soft 797
ICTS-spam/geannuleerd-IT Portfolio Ondersteunende Functies-AHR Soft 374
ICTS-ICTS Tickets-IT alle Portfolio’s-AIC Red 185
ICTS-spam/geannuleerd-IT alle Portfolio’s-AIC Red 4
ICTS-ICTS Tickets-IT Portfolio Onderwijs en Studenten-AIS 574
ICTS-spam/geannuleerd-IT Portfolio Onderwijs en Studenten-AIS 41
ICTS-spam/geannuleerd-IT Portfolio Ondersteunende Functies-ALT 307
ICTS-ICTS Tickets-IT Portfolio Ondersteunende Functies-ALT 901
ICTS-ICTS Tickets-IT Portfolio Onderwijs en Studenten-AMI 883
ICTS-spam/geannuleerd-IT Portfolio Onderwijs en Studenten-AMI 242
ICTS-ICTS Tickets-IT Portfolio Onderwijs en Studenten-AOW 596
ICTS-spam/geannuleerd-IT Portfolio Onderwijs en Studenten-AOW 210
ICTS-spam/geannuleerd-IT Portfolio Onderzoek-AOZ 382
ICTS-ICTS Tickets-IT Portfolio Onderzoek-AOZ 1509
ICTS-spam/geannuleerd-IT Portfolio Onderwijs en Studenten-AST 511
ICTS-ICTS Tickets-IT Portfolio Onderwijs en Studenten-AST 733
ICTS-spam/geannuleerd-IT systemen en IT faciliteiten-BaSys 761
ICTS-ICTS Tickets-IT systemen en IT faciliteiten-BaSys 818
ICTS-ICTS Tickets-IT alle Portfolio’s-CBO 100
ICTS-spam/geannuleerd-IT alle Portfolio’s-CBO 1
ICTS-ICTS Tickets-IT alle Portfolio’s-CBI 717
ICTS-spam/geannuleerd-IT alle Portfolio’s-CBI 183
ICTS-ICTS Tickets-IT alle Portfolio’s-CBO 334
ICTS-spam/geannuleerd-IT alle Portfolio’s-CBO 18
ICTS-ICTS Tickets-IT systemen en IT faciliteiten-CDC 284
ICTS-spam/geannuleerd-IT systemen en IT faciliteiten-CDC 15
ICTS-ICTS Tickets-IT alle Portfolio’s-CIS IAM 273
ICTS-spam/geannuleerd-IT alle Portfolio’s-CIS IAM 35
ICTS-ICTS Tickets-IT systemen en IT faciliteiten-CLX 86
ICTS-spam/geannuleerd-IT systemen en IT faciliteiten-CLX 12
ICTS-ICTS Tickets-IT Portfolio Onderzoek-COZ 5
ICTS-ICTS Tickets-Algemene IT Ondersteuning-CSA 15
ICTS-ICTS Tickets-IT alle Portfolio’s-CSO 2
ICTS-ICTS Tickets-IT systemen en IT faciliteiten-CSP 22
ICTS-ICTS Tickets-IT systemen en IT faciliteiten-CWN 179
ICTS-spam/geannuleerd-IT systemen en IT faciliteiten-CWN 11
ICTS-ICTS Tickets-IT systemen en IT faciliteiten-FCS Com 1308
ICTS-spam/geannuleerd-IT systemen en IT faciliteiten-FCS Com 128
ICTS-ICTS Tickets-IT alle Portfolio’s-FCS Sam 623
ICTS-ICTS Tickets-IT alle Portfolio’s-FII Toep 407
ICTS-spam/geannuleerd-IT alle Portfolio’s-FII Toep 52
ICTS-ICTS Tickets-IT systemen en IT faciliteiten-FII WmsDev 967
ICTS-spam/geannuleerd-IT systemen en IT faciliteiten-FII WmsDev 48
ICTS-spam/geannuleerd-IT Portfolio Onderwijs en Studenten-FOW 246
ICTS-ICTS Tickets-IT Portfolio Onderwijs en Studenten-FOW 2503
ICTS-ICTS Tickets-IT Portfolio Onderzoek-FOZ HPC 4555
ICTS-spam/geannuleerd-IT Portfolio Onderzoek-FOZ HPC 451
ICTS-ICTS Tickets-IT Portfolio Onderzoek-FOZ RDM 852
ICTS-spam/geannuleerd-IT Portfolio Onderzoek-FOZ RDM 214
ICTS-ICTS Tickets-IT alle Portfolio’s-CBO 7
ICTS-ICTS Tickets-IT alle Portfolio’s-IDS 281
ICTS-spam/geannuleerd-IT 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 21001
ICTS-spam/geannuleerd-Algemene IT Ondersteuning-KOS A 2
ICTS-ICTS Tickets-IT Portfolio Onderwijs en Studenten-LEC 746
ICTS-spam/geannuleerd-IT 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 Portfolio Onderwijs en Studenten-LPC 99
ICTS-spam/geannuleerd-IT Portfolio Onderwijs en Studenten-LPC 1
ICTS-ICTS Tickets-IT Portfolio Onderwijs en Studenten-LPC 25
ICTS-ICTS Tickets-IT Portfolio Onderwijs en Studenten-LPC 48
ICTS-spam/geannuleerd-IT Portfolio Onderwijs en Studenten-LPC 1
ICTS-ICTS Tickets-IT Portfolio Onderwijs en Studenten-LPC 265
ICTS-ICTS Tickets-IT Portfolio Onderwijs en Studenten-LPC 529
ICTS-spam/geannuleerd-IT Portfolio Onderwijs en Studenten-LPC 4
ICTS-ICTS Tickets-IT systemen en IT faciliteiten-LSY 518
ICTS-spam/geannuleerd-IT systemen en IT faciliteiten-LSY 492
ICTS-ICTS Tickets-ICTSMGT 90
ICTS-ICTS Tickets-IT systemen en IT faciliteiten-NIC 821
ICTS-spam/geannuleerd-IT systemen en IT faciliteiten-NIC 231
ICTS-ICTS Tickets-IT systemen en IT faciliteiten-NSA 333
ICTS-spam/geannuleerd-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 31678
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