|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<title>Updated 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; margin: 0; padding: 0; } |
|
|
svg { font: bold 14px sans-serif; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<svg id="sankey"></svg> |
|
|
<button onclick="saveSVG()" style="margin: 10px; padding: 8px 16px;">Download SVG</button> |
|
|
<svg id="sankey"></svg> |
|
|
|
|
|
<script> |
|
|
const data = [ |
|
|
{ source: "Total", target: "Checkpoint", value: 4520 }, |
|
|
{ source: "Total", target: "TextualInversion", value: 1590 }, |
|
|
{ source: "Total", target: "LoRA", value: 30687 }, |
|
|
{ source: "Total", target: "Other", value: 1327 }, |
|
|
{ source: "Total", target: "LOCON", value: 1876 }, |
|
|
{ source: "LoRA", target: "Adapters", value: 30687 }, |
|
|
{ source: "LOCON", target: "Adapters", value: 1876 }, |
|
|
{ source: "TextualInversion", target: "Adapters", value: 1590 }, |
|
|
{ source: "Adapters", target: "has_no_tags", value: 23002 }, |
|
|
{ source: "Adapters", target: "has_tags", value: 11151 }, |
|
|
{ source: "has_tags", target: "has_tags + POI True", value: 2327 }, |
|
|
{ source: "has_tags + POI True", target: "Danbooru", value: 991 }, |
|
|
{ source: "Danbooru", target: "explicit", value: 233 }, |
|
|
{ source: "Danbooru", target: "non-explicit", value: 758 }, |
|
|
{ source: "has_tags + POI True", target: "CLIP Interrogator", value: 772 }, |
|
|
{ source: "CLIP Interrogator", target: "explicit", value: 5 }, |
|
|
{ source: "CLIP Interrogator", target: "non-explicit", value: 767 }, |
|
|
{ source: "has_tags + POI True", target: "unknown", value: 564 }, |
|
|
{ source: "unknown", target: "non-explicit", value: 564 }, |
|
|
{ source: "has_tags", target: "has_tags + POI False", value: 8824 }, |
|
|
{ source: "has_tags + POI False", target: "Danbooru", value: 6839 }, |
|
|
{ source: "Danbooru", target: "explicit", value: 4692 }, |
|
|
{ source: "Danbooru", target: "non-explicit", value: 2147 }, |
|
|
{ source: "has_tags + POI False", target: "CLIP Interrogator", value: 800 }, |
|
|
{ source: "CLIP Interrogator", target: "explicit", value: 37 }, |
|
|
{ source: "CLIP Interrogator", target: "non-explicit", value: 763 }, |
|
|
{ source: "has_tags + POI False", target: "unknown", value: 1185 }, |
|
|
{ source: "unknown", target: "explicit", value: 3 }, |
|
|
{ source: "unknown", target: "non-explicit", value: 1182 }, |
|
|
{ source: "explicit", target: "explicit_keyword_1", value: 558 }, |
|
|
{ source: "explicit", target: "explicit_keyword_2", value: 69 }, |
|
|
{ source: "explicit", target: "explicit_keyword_3", value: 189 } |
|
|
]; |
|
|
|
|
|
const width = 1600; |
|
|
const height = 800; |
|
|
|
|
|
const svg = d3.select("#sankey") |
|
|
.attr("width", width) |
|
|
.attr("height", height); |
|
|
|
|
|
|
|
|
const nodes = Array.from( |
|
|
new Set(data.flatMap(d => [d.source, d.target])), |
|
|
name => ({ name }) |
|
|
); |
|
|
|
|
|
const sankeyData = { |
|
|
nodes, |
|
|
links: data.map(d => Object.assign({}, d)) |
|
|
}; |
|
|
|
|
|
|
|
|
const sankey = d3.sankey() |
|
|
.nodeId(d => d.name) |
|
|
.nodeAlign(d3.sankeyLeft) |
|
|
.nodeWidth(10) |
|
|
.nodePadding(60) |
|
|
.extent([[1, 1], [width - 1, height - 6]]); |
|
|
|
|
|
const { nodes: layoutNodes, links: layoutLinks } = sankey(sankeyData); |
|
|
|
|
|
|
|
|
const color = name => { |
|
|
const map = { |
|
|
"Total": "#C0C0C0", |
|
|
"Adapters": "rosybrown", |
|
|
"Checkpoint": "#C0C0C0", |
|
|
"LoRA": "rosybrown", |
|
|
"LOCON": "rosybrown", |
|
|
"Danbooru": "crimson", |
|
|
"Other": "#C0C0C0", |
|
|
"Textual Training Data": "coral", |
|
|
"No Textual Training Data": "#ccc", |
|
|
"has_tags + POI False": "silver", |
|
|
"has_tags + POI True": "coral", |
|
|
"Real person": "FF7F50", |
|
|
"POI False": "#BC8F8F", |
|
|
"explicit": "maroon", |
|
|
"non-explicit": "#C0C0C0", |
|
|
"has_tags": "coral", |
|
|
"explicit_keyword_1": "#8A2BE2", |
|
|
"explicit_keyword_2": "#8A2BE2", |
|
|
"explicit_keyword_3": "#8A2BE2" |
|
|
}; |
|
|
return map[name] || "#ccc"; |
|
|
}; |
|
|
|
|
|
|
|
|
const labelMap = { |
|
|
"has_tags + POI True": "Real person", |
|
|
"has_tags + POI False": "Not real person", |
|
|
"has_no_tags": "No text training data", |
|
|
"explicit_keyword_1": "Loli", |
|
|
"explicit_keyword_2": "Shota", |
|
|
"explicit_keyword_3": "Rape", |
|
|
"has_tags": "Textual training data", |
|
|
"explicit": "Explicit", |
|
|
"non-explicit": "Not explicit", |
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
const defs = svg.append("defs"); |
|
|
|
|
|
layoutLinks.forEach((d, i) => { |
|
|
const grad = defs.append("linearGradient") |
|
|
.attr("id", d.uid = `link-gradient-${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)); |
|
|
|
|
|
|
|
|
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 + 10 : d.x0 - 10) |
|
|
.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", "22px") |
|
|
.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 + 10 : d.x0 - 10) |
|
|
.attr("dy", i === 0 ? "0.35em" : "1.1em") |
|
|
.text(line); |
|
|
}); |
|
|
|
|
|
const format = d3.format(","); |
|
|
text.append("tspan") |
|
|
.attr("x", d.x0 < width / 2 ? d.x1 + 10 : d.x0 - 10) |
|
|
.attr("dy", "1.5em") |
|
|
.style("font-size", "20px") |
|
|
.style("fill", "#555") |
|
|
.text(`${format(d.value)}`); |
|
|
}); |
|
|
|
|
|
function inlineStyles(svgElement) { |
|
|
const styles = ` |
|
|
text { font-family: sans-serif; fill: black; font-weight: bold; } |
|
|
rect { stroke: none; } |
|
|
path { stroke-opacity: 0.5; } |
|
|
`; |
|
|
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); |
|
|
} |
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
