| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Danbooru Tree from JSON</title> |
| <script src="https://d3js.org/d3.v7.min.js"></script> |
| <style> |
| body { |
| font-family: sans-serif; |
| } |
| svg { |
| width: 100%; |
| height: 1500px; |
| } |
| .node circle { |
| fill: steelblue; |
| } |
| .node text { |
| font-size: 12px; |
| fill: #333; |
| } |
| .link { |
| fill: none; |
| stroke: #ccc; |
| stroke-width: 1.5px; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>Danbooru Categories</h2> |
| <button id="downloadBtn">Download SVG</button> |
| <svg></svg> |
|
|
| <script> |
| d3.json("json/danbooru_flat.json").then(function(data) { |
| const svg = d3.select("svg"); |
| const width = 750; |
| const height = 1200; |
| |
| |
| function limitSecondLevel(node, depth = 0) { |
| if (node.children && depth === 1 && node.children.length > 5) { |
| const visible = node.children.slice(0, 5); |
| visible.push({ name: "...", children: [] }); |
| node.children = visible; |
| } |
| if (node.children) { |
| node.children.forEach(child => limitSecondLevel(child, depth + 1)); |
| } |
| return node; |
| } |
| |
| const limited = limitSecondLevel(structuredClone(data)); |
| |
| const root = d3.hierarchy(limited, d => d.children); |
| |
| |
| root.eachAfter(d => { |
| if (d.depth === 1) { |
| d.data.rootCategory = d.data.name; |
| } else if (d.parent) { |
| d.data.rootCategory = d.parent.data.rootCategory; |
| } |
| }); |
| |
| const treeLayout = d3.tree().size([height, width]); |
| treeLayout(root); |
| |
| |
| const allTagCounts = root.descendants() |
| .filter(d => d.depth > 0) |
| .map(d => d.data.tag_count || 0); |
| const sizeScale = d3.scaleSqrt() |
| .domain([0, d3.max(allTagCounts)]) |
| .range([4, 20]); |
| |
| |
| const categoryColors = { |
| "attire": "#f4a261", |
| "body": "#e76f51", |
| "characters": "#2a9d8f", |
| "copyrights": "#264653", |
| "creatures": "#8ecae6", |
| "drawing software": "#219ebc", |
| "games": "#3a86ff", |
| "metatags": "#ffbe0b", |
| "more": "#b5179e", |
| "objects": "#6d6875", |
| "plant": "#7cb518", |
| "real_world": "#a5a58d", |
| "sex": "#ef476f", |
| "visual_characteristics": "#06d6a0", |
| "subject": "#ffd166", |
| "uncategorized": "#adb5bd", |
| "actions_and_expressions": "#d00000", |
| "objects_and_backgrounds": "#118ab2" |
| }; |
| |
| function getColor(d) { |
| if (d.data.name === "...") return "gray"; |
| const category = d.data.rootCategory?.toLowerCase(); |
| return categoryColors[category] || "steelblue"; |
| } |
| |
| |
| svg.selectAll(".link") |
| .data(root.links()) |
| .join("path") |
| .attr("class", "link") |
| .attr("d", d3.linkHorizontal() |
| .x(d => d.y) |
| .y(d => d.x) |
| ); |
| |
| |
| const node = svg.selectAll(".node") |
| .data(root.descendants()) |
| .join("g") |
| .attr("class", "node") |
| .attr("transform", d => `translate(${d.y},${d.x})`); |
| |
| node.append("circle") |
| .attr("r", d => d.depth === 0 ? 6 : sizeScale(d.data.tag_count || 0)) |
| .style("fill", d => d.data.color || "steelblue"); |
| |
| |
| node.append("title") |
| .text(d => `${d.data.name}\nTags: ${d.data.tag_count || 0}`); |
| |
| node.append("text") |
| .attr("x", 10) |
| .style("font-weight", "bold") |
| .attr("dy", "0.32em") |
| .text(d => d.data.name); |
| }); |
| |
| document.getElementById("downloadBtn").addEventListener("click", () => { |
| const svgNode = document.querySelector("svg"); |
| |
| |
| const clonedSvg = svgNode.cloneNode(true); |
| const outer = document.createElement("div"); |
| outer.appendChild(clonedSvg); |
| |
| |
| clonedSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); |
| |
| |
| const svgData = new XMLSerializer().serializeToString(clonedSvg); |
| const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" }); |
| |
| |
| const url = URL.createObjectURL(svgBlob); |
| const a = document.createElement("a"); |
| a.href = url; |
| a.download = "danbooru_tree.svg"; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| URL.revokeObjectURL(url); |
| }); |
| </script> |
| |
| |
| </body> |
| </html> |
|
|
