chart = {
const root = partition(data);
let focus = root;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif");
const cell = svg
.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.y0},${d.x0})`);
const rect = cell.append("rect")
.attr("width", d => d.y1 - d.y0 - 1)
.attr("height", d => rectHeight(d))
.attr("fill-opacity", 0.6)
.attr("fill", d => {
if (!d.depth) return "#ccc";
while (d.depth > 1) d = d.parent;
return color(d.data.name);
})
.style("cursor", "pointer")
.on("click", clicked);
const text = cell.append("text")
.style("user-select", "none")
.attr("pointer-events", "none")
.attr("x", 4)
.attr("y", 13)
.attr("fill-opacity", d => +labelVisible(d));
text.append("tspan")
.text(d => d.data.name);
const tspan = text.append("tspan")
.attr("fill-opacity", d => labelVisible(d) * 0.7)
.text(d => ` ${format(d.value)}`);
cell.append("title")
.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);
function clicked(p) {
focus = focus === p ? p = p.parent : p;
root.each(d => d.target = {
x0: (d.x0 - p.x0) / (p.x1 - p.x0) * height,
x1: (d.x1 - p.x0) / (p.x1 - p.x0) * height,
y0: d.y0 - p.y0,
y1: d.y1 - p.y0
});
const t = cell.transition().duration(750)
.attr("transform", d => `translate(${d.target.y0},${d.target.x0})`);
rect.transition(t).attr("height", d => rectHeight(d.target));
text.transition(t).attr("fill-opacity", d => +labelVisible(d.target));
tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7);
}
function rectHeight(d) {
return d.x1 - d.x0 - Math.min(1, (d.x1 - d.x0) / 2);
}
function labelVisible(d) {
return d.y1 <= width && d.y0 >= 0 && d.x1 - d.x0 > 16;
}
return svg.node();
}
data = {
var query = " PREFIX dcterms: <http://purl.org/dc/terms/> \n";
query += " PREFIX dcndl: <http://ndl.go.jp/dcndl/terms/> \n";
query += " SELECT DISTINCT count(?s) as ?c ?type ?org ?collection WHERE { \n";
query += " ?s dcndl:materialType ?type . \n";
query += " ?s dcndl:digitizedPublisher ?org . \n";
query += " filter(lang(?org) = \"ja\") \n";
query += " ?s dcterms:isPartOf ?collection . \n";
query += " filter(lang(?collection) = \"ja\") \n";
query += " } \n";
var url = "https://sparql.dl.itc.u-tokyo.ac.jp/?query=" + encodeURIComponent(query) + "&output=json"
var data_ = await d3.json(url);
var result = data_.results.bindings;
var data = []
for (var i = 0; i < result.length; i++) {
var obj = result[i]
var collection = obj.collection.value
var org = obj.org.value
var type = obj.type.value.replace("http://ndl.go.jp/ndltype/", "")
var c = Number(obj.c.value)
data.push({
"name": org,
"parent": null
})
data.push({
"name": collection,
"parent": org
})
data.push({
"name": type,
"parent": collection,
"value": c
})
}
// create a name: node map
var dataMap = {};
data.forEach(function (node) {
dataMap[node.name] = node;
});
// create the tree array
var tree = [];
data.forEach(function (node) {
// add to parent
var parent = dataMap[node.parent];
if (parent) {
// create child array if it doesn't exist
(parent.children || (parent.children = []))
// add node to child array
.push(node);
} else {
// parent is null or missing
tree.push(node);
}
});
tree = {
"name": "UTokyo Academic Archives Portal",
"children": tree
}
return tree;
}
partition = data => {
const root = d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.height - a.height || b.value - a.value);
return d3.partition()
.size([height, (root.height + 1) * width / 3])
(root);
}
color = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, data.children.length + 1))
format = d3.format(",d")
width = 975
height = 1200
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
