| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <title>Unified Sankey Diagram</title> |
| <script src="https://d3js.org/d3.v7.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/d3-sankey@0.12.3/dist/d3-sankey.min.js"></script> |
| <style> |
| body { font-family: sans-serif; } |
| svg { font: bold 14px sans-serif; } |
| </style> |
| </head> |
| <body> |
| <svg id="sankey"></svg> |
| <script> |
| const data = [ |
| { source: "Total", target: "Checkpoint", value: 4520 }, |
| { source: "Total", target: "Other", value: 1327 }, |
| { source: "Total", target: "Adapters", value: 34153 }, |
| { source: "Adapters", target: "Textual Training Data", value: 11151 }, |
| { source: "Adapters", target: "Unknown Textual Training Data", value: 23002 }, |
| { source: "Textual Training Data", target: "POI True", value: 2327 }, |
| { source: "Textual Training Data", target: "POI False", value: 8824 }, |
| { source: "POI True", target: "explicit", value: 238 }, |
| { source: "POI True", target: "non-explicit", value: 2089 }, |
| { source: "POI False", target: "explicit", value: 4732 }, |
| { source: "POI False", target: "non-explicit", value: 4092 }, |
| { source: "explicit", target: "loli", value: 558 }, |
| { source: "explicit", target: "shota", value: 69 }, |
| { source: "explicit", target: "rape", value: 189 } |
| ]; |
| |
| |
| |
| function inlineStyles(svgElement) { |
| const styles = ` |
| text { font-family: sans-serif; fill: black; font-weight: bold; } |
| rect { stroke: none; } |
| `; |
| const styleElem = document.createElementNS("http://www.w3.org/2000/svg", "style"); |
| styleElem.textContent = styles; |
| svgElement.insertBefore(styleElem, svgElement.firstChild); |
| } |
| |
| function saveSVG() { |
| const svgElement = document.querySelector("svg"); |
| inlineStyles(svgElement); |
| const serializer = new XMLSerializer(); |
| const source = serializer.serializeToString(svgElement); |
| const svgBlob = new Blob([source], { type: "image/svg+xml;charset=utf-8" }); |
| const svgUrl = URL.createObjectURL(svgBlob); |
| const downloadLink = document.createElement("a"); |
| downloadLink.href = svgUrl; |
| downloadLink.download = "sankey-diagram.svg"; |
| document.body.appendChild(downloadLink); |
| downloadLink.click(); |
| document.body.removeChild(downloadLink); |
| } |
| |
| window.addEventListener("keydown", function (e) { |
| if (e.code === "Space") { |
| e.preventDefault(); |
| saveSVG(); |
| } |
| }); |
| |
| |
| |
| |
| const width = 680; |
| const height = 400; |
| |
| const svg = d3.select("#sankey") |
| .attr("width", width) |
| .attr("height", height); |
| |
| const sankey = d3.sankey() |
| .nodeId(d => d.name) |
| .nodeAlign(d3.sankeyLeft) |
| .nodeWidth(15) |
| .nodePadding(20) |
| .extent([[1, 1], [width - 1, height - 6]]); |
| |
| const nodeSet = new Set(); |
| data.forEach(d => { |
| nodeSet.add(d.source); |
| nodeSet.add(d.target); |
| }); |
| const nodes = Array.from(nodeSet).map(name => ({ name })); |
| |
| const { nodes: layoutNodes, links: layoutLinks } = sankey({ |
| nodes: nodes.map(d => Object.assign({}, d)), |
| links: data.map(d => Object.assign({}, d)) |
| }); |
| |
| |
| |
| const color = name => { |
| const map = { |
| "Total": "#C0C0C0", |
| "Adapters": "#C0C0C0", |
| "Checkpoint": "#C0C0C0", |
| "Other": "#C0C0C0", |
| "Textual Training Data": "#BC8F8F", |
| "No Textual Training Data": "#ccc", |
| "POI True": "#FFA07A", |
| "POI False": "#BC8F8F", |
| "explicit": "#DC143C", |
| "non-explicit": "#C0C0C0", |
| "loli": "#8A2BE2", |
| "shota": "#8A2BE2", |
| "rape": "#8A2BE2" |
| }; |
| return map[name] || "#ccc"; |
| }; |
| |
| const labelMap = { |
| "Textual Training Data": "Textual training data found", |
| "No Textual Training Data": "No textual training data", |
| "POI True": "POI true", |
| "POI False": "POI false", |
| "non-explicit": "Non-explicit", |
| "explicit": "Explicit", |
| "Total": "Total", |
| "Adapters": "Adapters", |
| "Checkpoint": "Checkpoint", |
| "Other": "Other", |
| "loli": "Loli", |
| "shota": "Shota", |
| "rape": "Rape" |
| }; |
| |
| |
| const defs = svg.append("defs"); |
| layoutLinks.forEach((d, i) => { |
| const grad = defs.append("linearGradient") |
| .attr("id", d.uid = `link-${i}`) |
| .attr("gradientUnits", "userSpaceOnUse") |
| .attr("x1", d.source.x1) |
| .attr("x2", d.target.x0); |
| |
| grad.append("stop").attr("offset", "0%").attr("stop-color", color(d.source.name)); |
| grad.append("stop").attr("offset", "100%").attr("stop-color", color(d.target.name)); |
| }); |
| |
| svg.append("g") |
| .attr("fill", "none") |
| .attr("stroke-opacity", 0.5) |
| .selectAll("path") |
| .data(layoutLinks) |
| .join("path") |
| .attr("d", d3.sankeyLinkHorizontal()) |
| .attr("stroke", d => `url(#${d.uid})`) |
| .attr("stroke-width", d => Math.max(1, d.width)) |
| .append("title") |
| .text(d => `${d.source.name} → ${d.target.name}\n${d.value}`); |
| |
| svg.append("g") |
| .selectAll("rect") |
| .data(layoutNodes) |
| .join("rect") |
| .attr("x", d => d.x0) |
| .attr("y", d => d.y0) |
| .attr("height", d => d.y1 - d.y0) |
| .attr("width", d => d.x1 - d.x0) |
| .attr("fill", d => color(d.name)) |
| .append("title") |
| .text(d => `${d.name}\n${d.value}`); |
| |
| svg.append("g") |
| .selectAll("text") |
| .data(layoutNodes) |
| .join("text") |
| .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) |
| .attr("y", d => (d.y1 + d.y0) / 2) |
| .attr("dy", "0.35em") |
| .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") |
| .style("font-size", "16px") |
| .each(function(d) { |
| const text = d3.select(this); |
| const label = labelMap[d.name] || d.name; |
| const lines = label.split(/(?<=\w)\s+(?=\w)/); |
| |
| lines.forEach((line, i) => { |
| text.append("tspan") |
| .attr("x", d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) |
| .attr("dy", i === 0 ? "0.35em" : "1.2em") |
| .text(line); |
| }); |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| const format = d3.format(","); |
| text.append("tspan") |
| .attr("x", d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) |
| .attr("dy", "1.5em") |
| .style("font-size", "14px") |
| .style("fill", "#333") |
| .text(`${format(d.value)}`); |
| |
| |
| }); |
| </script> |
| </body> |
| </html> |
|
|
