Northeastern University Visualization group
Public
Edited
Mar 19, 2023
1 fork
viewof ratings = Inputs.select([">4", "3-4", "2-3", "1-2", "<1"], {
label: "Ratings",
value: "All"
})
chartColor = {
const svg = d3.create("svg");
const rootData = d3
.hierarchy(treeData)
.sort((a, b) => d3.ascending(a.data.name, b.data.name));
const radius = width;
const tree = d3
.tree()
.size([2 * Math.PI, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);
const root = tree(rootData);
const color = d3
.scaleOrdinal()
.domain(treeData.children.map((d) => d.name))
.range(d3.schemeCategory10);
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);
}
setColor(root);
svg
.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 2)
.attr("stroke-dasharray", "1 2.4")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(root.links())
.join("path")
.attr(
"d",
d3
.linkRadial()
.angle((d) => d.x)
.radius((d) => d.y)
)
.attr("stroke", (d) => (d.children ? "currentColor" : 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 ? "#555" : "#999"))
.attr("r", 2.5);
svg
.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.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");
function autoBox() {
document.body.appendChild(this);
const { x, y, width, height } = this.getBBox();
document.body.removeChild(this);
return [x, y, width, height];
}
return svg.attr("viewBox", autoBox).node();
}
width = 5000
height = 1200
treeData
(treeData.name = "Authors")
treeData = table2Tree(rawData, ["Author", "Book_Name"])
filteredData
function getRatings(input) {
switch (input) {
case ">4":
filteredData = [...rawData.slice().filter((d) => d.Average_star > 4)];
return filteredData;
case "3-4":
filteredData = [
...rawData
.slice()
.filter((d) => d.Average_star <= 4 && d.Average_star > 3)
];
return filteredData;
case "2-3":
filteredData = [
...rawData
.slice()
.filter((d) => d.Average_star <= 3 && d.Average_star > 2)
];
return filteredData;
case "1-3":
filteredData = [
...rawData
.slice()
.filter((d) => d.Average_star <= 2 && d.Average_star > 1)
];
return filteredData;
case "<1":
filteredData = [...rawData.slice().filter((d) => d.Average_star <= 1)];
return filteredData;
}
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
rawData = FileAttachment("Goodreads All Time Greatest Books 8k Data.csv").csv()
import { table2Tree } from "@john-guerra/table-2-tree"
import { Tree } from "@d3/radial-tree"
// import { Tree as LinearTree } from "@d3/tree@257"
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.
