import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7";
import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6";
import {autoType, csv} from "https://cdn.jsdelivr.net/npm/d3-dsv@3";
import {hierarchy, treemap} from "https://cdn.jsdelivr.net/npm/d3-hierarchy@3";
import {scaleOrdinal} from "https://cdn.jsdelivr.net/npm/d3-scale@4";
data = FileAttachment("keeping-track-of-the-big-picture-radial.csv").csv({ typed: true })
function nest(data, keys) {
if (!keys.length) return data;
const [first, ...rest] = keys;
return Object.values(data.reduce((acc, row) => {
const key = row[first];
if (!acc[key]) {
acc[key] = { name: key, children: [] };
}
acc[key].children.push(rest.length ? row : {...row, name: row.Item}); // Ensure leaf nodes have a name
return acc;
}, {}));
}
{
// Specify the chart’s dimensions.
const width = 928;
const height = width;
const cx = width * 0.5; // adjust as needed to fit
const cy = height * 0.54; // adjust as needed to fit
const outerRadius = Math.min(width, height) / 2 - 20; // Adjust overall outer radius if needed
const innerRadiusForTrends = outerRadius * 0.2; // Define a radius for Trend label positioning
// Define color mapping for Trend
const trendColors = new Map([
["Growing self-censorship", "#730362"],
["Harm to independent outlets", "#9D0998"],
["Erosion of public access", "#0CA5B3"],
["Media curry favor with the president", "#1A2E7F"],
["Hostility of media environment", "#28124A"]
]);
// Create a radial cluster layout. The layout’s first dimension (x)
// is the angle, while the second (y) is the radius.
const tree = d3.cluster()
.size([2 * Math.PI, outerRadius * 0.8]) // Expand the radial extent for Data/Items
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);
// Define the hierarchical structure based on 'Trend', 'Data', and 'Item'
const root = tree(d3.hierarchy({name: "Root", children: nest(data, ["Trend", "Data", "Item"])})
.sort((a, b) => d3.ascending(a.data.name, b.data.name)));
// Define color scale for Item Type
const itemTypeColors = d3.scaleOrdinal()
.domain(["bad", "good"])
.range(["#FF312E", "#1CD81F"]);
// Creates the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-cx, -cy, width, height])
.attr("style", "width: 100%; height: auto; font: 10px sans-serif;");
// Append links (representing the connection to the 'Data' level)
const link = svg.append("g")
.attr("fill", "none")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll()
.data(root.links())
.join("path")
.attr("d", d3.linkRadial()
.angle(d => d.x)
.radius(d => d.y))
.attr("stroke", d => d.target.depth === 2 && d.target.parent ? trendColors.get(d.target.parent.data.name) : "#555"); // Color Data level links
// Append labels for Trends following the lines
svg.append("g")
.attr("font-weight", "bold")
.attr("font-size", "12px")
.selectAll()
.data(root.children) // Target the direct children (Trends)
.join("text")
.attr("transform", d => {
const angle = d.x * 180 / Math.PI;
const radius = innerRadiusForTrends; // Position labels at the defined inner radius
return `rotate(${angle - 90}) translate(${radius}, 0) rotate(${angle < 180 ? 0 : 180})`;
})
.attr("dy", "0.31em")
.attr("text-anchor", "middle")
.attr("paint-order", "stroke")
.attr("stroke", "white")
.attr("fill", d => trendColors.get(d.data.name) || "currentColor") // Use mapped color or default
.text(d => d.data.name);
// Append nodes.
const node = svg.append("g")
.selectAll()
.data(root.descendants())
.join("g")
.attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`);
node.append("circle")
.attr("fill", d => d.children ? "#555" : itemTypeColors(d.data.Type)) // Color leaf nodes based on Type
.attr("r", 2.5);
// Append labels with color-coded text, connecting lines, and links for Items
node.filter(d => !d.children && d.depth > 1) // Target leaf nodes (Items)
.append("g") // Group for the label and its connecting line
.attr("transform", d => `rotate(${d.x >= Math.PI ? 180 : 0})`) // Flip text orientation
.call(g => g.append("path") // Connecting line
.attr("d", `M${d => d.y + 2.5},0 L${d => (d.y + 15)},0`) // Adjust line length (15) as needed
.attr("stroke", d => itemTypeColors(d.data.Type))
.attr("stroke-opacity", 0.8)
.attr("stroke-width", 1))
.call(g => g.append("a")
.attr("xlink:href", d => d.data.URL)
.attr("target", "_blank")
.append("text")
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI ? 20 : -20) // Adjust text position (20) to avoid overlap
.attr("text-anchor", d => d.x < Math.PI ? "start" : "end")
.attr("paint-order", "stroke")
.attr("stroke", "white")
.attr("fill", d => itemTypeColors(d.data.Type)) // Color the text
.text(d => d.data.Item)); // Use 'Item' for the label
return svg.node();
}
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.
