Published
Edited
May 29, 2021
2 stars
chart = {
const root = tree(d3.hierarchy(data)
//Sorting of words. Uncomment the adopted one.
//the following line is for sorting the topic words by alphabetical order.
//.sort((a, b) => a.data.name.toLowerCase().localeCompare (b.data.name.toLowerCase()))
//the following line is for sorting the topic words by their weightings.
.sort((a, b) => d3.descending(a.data.value, b.data.value))
);
setColor(root);
const svg = d3.create("svg");
svg.append("g")
.attr("fill", "none")
.attr("stroke", "grey")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", d3.linkRadial()
.angle(d => d.x)
.radius(d => d.y))
.each(function(d) { d.target.linkNode = this; })
.attr("stroke", d => d.target.color);
svg.append("g")
.selectAll("circle")
.data(root.descendants())
.join("circle")
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y},0)
`)
.attr("fill", d => d.children ? color(d.data.name) : color(d.data.group))
//uncomment the following line to show circles with different opacities
//.attr("fill-opacity", d => d.children ? 1 : CircleAlpha(d.data.value))
.attr("r", d => d.children ? 4 : CirSize(d.data.value));
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("text")
.data(root.descendants())
.join("text")
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y},0)
rotate(${d.x >= Math.PI ? 180 : 0})
`)
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)
.attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")
.text(d => d.data.name)
.clone(true).lower()
.attr("stroke", "white");
return svg.attr("viewBox", autoBox).node();
}
md `## Radial Dendrogram Color Setting
Contents of the domain part of "color" variables are the names of topics. There are 16 topics and this is the domain of the following cell is "Topic 00" to "Topic 15".`
//get the min and max values of the topic word weightings. These values are obtained during the process of topic modeling. So, it is also possible to get the values from python and change the domain parts of CirSize and CircleAlpha manually.
toppicData = data.children.map(d => d.name)
color = d3.scaleOrdinal()
.domain(toppicData)
.range(d3.schemeCategory10)
// Set the color of each node by recursively inheriting.
function setColor(d) {
var name = d.data.name;
d.color = color.domain().indexOf(name) >= 0 ? color(name) : d.parent ? d.parent.color : null;
if (d.children) d.children.forEach(setColor);
}
function autoBox() {
document.body.appendChild(this);
const {x, y, width, height} = this.getBBox();
document.body.removeChild(this);
return [x, y, width, height];
}
md `## Data File for the Radial Dendrogram
The data file is in json format. The json file can be generated by following the python tutorial introduced in the introduction of this radial dendrogram.`
data = FileAttachment("1000_topic_words_lsi.json").json()
//get the min and max values of the topic word weightings. These values are obtained during the process of topic modeling. So, it is also possible to get the values from python and change the domain parts of CirSize and CircleAlpha manually.
function getMinMaxvalues() {
let mappedData = data.children.map(d => d.children)
var allthedata = []
for (let i = 0; i < mappedData.length; i++) {
let j = i * 2;
allthedata[j] = d3.min(mappedData[i].map(v => v.value));
allthedata[j+1] = d3.max(mappedData[i].map(v => v.value));
}
return allthedata;
}
//define circle sizes by using getMinMaxvalues(). It is also possible to use the values obtained from python. In this case, it is not needed to define getMinMaxvalues().
CirSize = d3.scaleSqrt().domain([d3.min(getMinMaxvalues()),d3.max(getMinMaxvalues())]).range([1,8])
//define circle opacities by using getMinMaxvalues()
CircleAlpha = d3.scaleLinear().domain([d3.min(getMinMaxvalues()),d3.max(getMinMaxvalues())]).range([0.3,1])
width = 975
radius = width / 2
tree = d3.cluster().size([2 * Math.PI, radius - 100])
d3 = require("d3@6")
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.
