var width = 960,
height = 600,
radius = Math.min(width, height) / 2,
colors = {'Person': '#E14E5F', 'Organisation': '#A87621', 'Place': '#43943E', 'Work': '#AC5CC4', 'Species': '#2E99A0', 'Event': '#2986EC'};
var svg = d3.select("body").append("svg")
.attr('viewBox', -width/2 + " " + (-height/2) + " " + width + " " + height)
var zoomable_layer = svg.append('g');
zoom = d3.behavior.zoom()
.scaleExtent([0,12])
.on('zoom', function() {
zoomable_layer
.attr('transform', "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");
});
svg.call(zoom);
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); });
var text = zoomable_layer.append("text")
.attr("x", 0)
.attr("y", 0)
.attr("dy", "0.35em");
getColor = function(d) {
var flag;
if (d.name === "owl:Thing") {
return '#7E7F7E';
} else if (d.name in colors) {
return colors[d.name];
} else {
flag = '#7E7F7E';
while (d.parent.name !== "owl:Thing") {
if (d.parent.name in colors) {
flag = colors[d.parent.name];
break;
} else {
d = d.parent;
}
}
return flag;
}
};
thousand_sep_format = d3.format(',');
drawLegend();
d3.json("sized_ontology_2.json", function(error, root) {
root.size = d3.sum(root.children, function(d) {
return d.size;
});
root = {"name": root.name, "size": root.size, "children": [root]};
function mouseover(d) {
var percentage = (100 * d.value / root.size).toPrecision(3);
text.html("" + thousand_sep_format(d.size) + "" + d.name + "" + percentage + "%");
d3.selectAll("path")
.filter(function(d1) {
return d === d1;
})
.style("opacity", 0.75);
}
function mouseout(d) {
text.html("");
d3.selectAll("path")
.filter(function(d1) {
return d === d1;
})
.style("opacity", function(d) { return d.children ? 0.5 : 1; });
}
var path = zoomable_layer.datum(root).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return getColor(d); })
.style("opacity", function(d) { return d.children ? 0.5 : 1; })
.on("mouseover", mouseover)
.on("mouseout", mouseout);
});
d3.select(self.frameElement).style("height", height + "px");
function drawLegend() {
var li = {
w: 85, h: 30, s: 3, r: 3
};
var legend = svg.append("g")
.attr("transform", function(d, i) {
return "translate(" + (width/2 - li.w*1.3) + "," + (height/2 - li.h*Object.keys(colors).length*1.2) + ")";
});
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")
.classed("legendItem", true)
.text(function(d) { return d.key; });
}