// RAW DATA
var text = "website,7\n\
WebPage,1\n\
schema.orgBreadcrumbList-schema.orgListItem-schema.orgWebPage,1\n\
product.group,2\n\
Product-website,2\n\
Organization-website,1\n\
Organization-WebPage,1\n\
Organization-SearchAction-WebSite,1\n\
Organization-product.group,1\n\
Organization,1\n\
ListItem,1\n\
ItemList-Offer-Product-website,1\n\
ContactPoint-Organization-Product-WebSite,1\n\
BreadcrumbList-ListItem-website,4\n\
BreadcrumbList-ListItem-WebSite,1\n\
BreadcrumbList-ListItem-WebPage,1\n\
BreadcrumbList-ListItem-rating-Review-aggregate,1\n\
BreadcrumbList-ListItem-product,2\n\
BreadcrumbList-ListItem-Organization-SearchAction-Service-SiteNavigationElement-WebSite,1\n\
BreadcrumbList-ListItem-Organization,1\n\
BreadcrumbList-ListItem-Offer-Product-WebPage-WebPageElement,1\n\
BreadcrumbList-ListItem-Offer-Product-SiteNavigationElement-WebPage,1\n\
BreadcrumbList-ListItem-Offer-Product-SiteNavigationElement-sport,1\n\
BreadcrumbList-ListItem-Offer-Product-SearchAction-WebPage-WebSite,1\n\
BreadcrumbList-ListItem-Offer-Organization-Product-Store,1\n\
BreadcrumbList-ListItem-Offer-Organization-Product-site-Thing,1\n\
BreadcrumbList-ListItem-Offer-Organization-Product,1\n\
BreadcrumbList-ClothingStore-ListItem-Offer-og:product-PostalAddress-Product-WebSite,1\n\
Breadcrumb-SearchAction-WebSite,1\n\
Breadcrumb-Organization-WebPage,1\n\
Breadcrumb-Offer-Organization-PostalAddress-Product-website,1\n\
Breadcrumb-BreadcrumbList-ClothingStore-ListItem-OfferCatalog-PostalAddress-Product-WebPage-WebSite,1\n\
Breadcrumb-BreadcrumbList-ClothingStore-ItemList-ListItem-PostalAddress-Product-WebPage-WebSite,1\n\
Breadcrumb,2\n\
Brand-BreadcrumbList-ListItem-Offer-Product,1\n\
Brand-BreadcrumbList-ListItem-offer-Organization-Product-PropertyValueSpecification-SearchAction-website,1\n\
article-Organization-Person,1\n\
article-Offer-Organization-Product,1\n\
article-BreadcrumbList-ImageObject-InteractionCounter-ListItem-NewsArticle-Organization-Person-WebPage,1\n\
article-Breadcrumb-ImageObject-NewsArticle-Organization,1\n\
article-Breadcrumb-ContactPoint-Organization-SearchAction,1\n\
article-Breadcrumb,1\n\
article,2\n\
AggregateRating-Organization,1\n\
AggregateRating-BreadcrumbList-ListItem-Product-SiteNavigationElement-WebPage-website,1\n\
AggregateRating-BreadcrumbList-ListItem-Offer-Organization-Product,1\n\
AggregateRating-article-BreadcrumbList-ContactPoint-ListItem-OpeningHoursSpecification-Organization-Place-PostalAddress-SearchAction,1\n";
// BEGIN DATA MANIPULATION
var csv = d3.csv.parseRows(text);
var data = buildHierarchy(csv);
// 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": [], id: 'ROOT'};
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;
console.log(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": [], id: create_id() };
children.push(childNode);
}
currentNode = childNode;
} else {
// Reached the end of the sequence; create a leaf node.
childNode = {"name": nodeName, "value": size, id: create_id() };
children.push(childNode);
}
}
}
return root;
};
// Retrieved from https://gist.github.com/gordonbrander/2230317
function create_id() {
return '_' + Math.random().toString(36).substr(2, 9);
};
// END DATA MANIPULATION
// log out deep clone of data for review
//console.debug(JSON.parse(JSON.stringify(data)));
/*********************
BEGIN BUILDING CHART
********************/
// Size/state related variables
var width = 500,
height = 500,
outer_radius = width/2.5,
arc_transition; // save current arc transition
// Create scales
var x = d3.scale.linear()
.range([0, 2 * Math.PI]),
y = d3.scale.sqrt()
.range([0, width/2]),
color = d3.scale.category20c();
// Partition layout
var partition = d3.layout.partition(),
nodes = partition.nodes(data);
// Arc generator
var arc_generator = d3.svg.arc()
.startAngle(function(d) {
return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
})
.endAngle(function(d) {
return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
})
.innerRadius(function(d) {
return Math.max(0, y(d.y));
})
.outerRadius(function(d) {
return Math.max(0, y(d.y + d.dy));
});
// Append a centered group for the burst to be added to
var burst_group = d3.select('.chart')
.append('svg')
.attr({
width: width,
height: height
})
.append('g')
.attr('transform', 'translate(' + width/2 + ',' + height/2 + ')');
// Append Arcs
var arcs = burst_group.selectAll("path.ark")
.data( nodes )
.enter().append("path")
.attr({
d: arc_generator,
class: function(d) { return 'ark -depth-' + d.depth; }
})
.style("fill", function(d,i) {
if (d.depth > 0) return color(i);
})
.on("click", click)
.on('mouseover', function(d) {
if (d.depth > 0) {
var ids = getIDArray(d);
fade(arcs, 0.1, ids, 'id');
update_crumbs(d);
}
})
.on('mouseout', function(d) {
fade(arcs, 1);
remove_crumbs();
});
// Updates breadcrumbs
function update_crumbs(d) {
var crumb_container = d3.select('.crumbs'),
sections = getNameArray(d);
// Remove existing crumbs
remove_crumbs();
// Append new crumbs
sections.reverse().forEach(function(name) {
crumb_container.append('span')
.classed('crumb', true)
.text(name);
});
};
// Removes all crumb spans
function remove_crumbs() {
d3.select('.crumbs').selectAll('.crumb').remove();
};
// Handle Clicks
function click(d) {
arc_transition = arcs.transition('arc_tween')
.duration(750)
.attrTween("d", arcTween(d));
};
// Retrieve arc name and parent names
function getNameArray(d, array) {
array = array || [];
// Push the current objects name to the array
array.push(d.name);
// Recurse to retrieve parent names
if (d.parent) getNameArray(d.parent, array);
return array;
};
// Retrieve arc name and parent names
function getIDArray(d, array) {
array = array || [];
// Push the current objects name to the array
array.push(d.id);
// Recurse to retrieve parent names
if (d.parent) getIDArray(d.parent, array);
return array;
};
// Interpolate the scales!
function arcTween(d) {
var xd = d3.interpolate( x.domain(), [d.x, d.x + d.dx] ),
yd = d3.interpolate( y.domain(), [d.y, 1] ),
yr = d3.interpolate( y.range(), [d.y ? 20 : 0, outer_radius] );
return function(d, i) {
return i
? function(t) { return arc_generator(d); }
: function(t) {
x.domain( xd(t) );
y.domain( yd(t) ).range( yr(t) );
return arc_generator(d);
};
};
};
// Fade a selection filtering out the comparator(s)
function fade(selection, opacity, comparators, comparatee) {
var type = typeof comparators,
key = comparatee ? comparatee : 'value';
selection.filter(function(d, i) {
// Remove elements based on a string or number
if (type === "string" || type === "number") {
return d[key] !== comparators;
// Remove elements based on an array
} else if (type === 'object' && typeof comparators.slice === 'function') {
return comparators.indexOf(d[key]) === -1;
// If there is no comparator keep everything
} else return true;
})
.transition('fade')
.duration(250)
.style('opacity', opacity);
};
!
