chart = {
const radiusScale = 0.8;
const chartOffsetY = 500; // space above chart for title
const root = tree(d3.hierarchy(data)
.sort((a, b) => d3.descending(a.data.value, b.data.value))
);
setColor(root);
const svg = d3.create("svg");
// Title and metadata
const titleGroup = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 14)
.attr("text-anchor", "middle")
.attr("transform", `translate(0, 20)`);
const metadata = [
"Mapping the Web of Seattle Nightlife: A Network View of Bars, Lounges, and Social Hubs",
"Data Source: Author-collected data (2025)",
"Author: Fatimah Abanur hassan",
"Date of Creation: May 2025"
];
titleGroup.selectAll("text")
.data(metadata)
.join("text")
.attr("x", 0)
.attr("y", (d, i) => i * 18)
.text(d => d);
// Shift chart down to prevent overlap
const g = svg.append("g")
.attr("transform", `translate(0, ${chartOffsetY})`);
g.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 * radiusScale))
.each(function(d) { d.target.linkNode = this; })
.attr("stroke", d => d.target.color);
g.append("g")
.selectAll("circle")
.data(root.descendants())
.join("circle")
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y * radiusScale},0)
`)
.attr("fill", d => d.children ? color(d.data.name) : color(d.data.group))
.attr("fill-opacity", d => d.children ? 1 : CircleAlpha(d.data.value))
.attr("r", d => d.children ? 4 : CirSize(d.data.value));
g.append("g")
.attr("font-family", "sans-serif")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("text")
.data(root.descendants())
.join("text")
.attr("font-size", d => d.children ? 8 : 10)
.attr("transform", d => `
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y * radiusScale},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 => shortenText(d.data.name, 15))
.clone(true).lower()
.attr("stroke", "white");
return svg.attr("viewBox", autoBox).node();
}
function shortenText(text, maxLength) {
return text.length > maxLength ? text.substring(0, maxLength) + "..." : text;
}
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("myYelpData (1).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.
