|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<script src="https://d3js.org/d3.v7.min.js"></script> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
|
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="header-overlay"> |
|
|
<div class="visualization-container"> |
|
|
<h1>Semantic Network of Textual Training Data</h1> |
|
|
<h2 class="caption">Co-occurence of textual captions (tags) extracted from model adapters downloaded from CivitAI</h2> |
|
|
|
|
|
<div class="nav-buttons"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
<button class="nav-button" onclick="location.href='index.html'">Home</button> |
|
|
<button class="nav-button" onclick="location.href='figure_5.html'">Next: Promotional Tags</button> |
|
|
|
|
|
|
|
|
<div class="theme-toggle"> |
|
|
<label><input type="checkbox" id="modeToggle"> Toggle Light Mode</label> |
|
|
|
|
|
|
|
|
<div class="controls"> |
|
|
<label>Number of tags shown: |
|
|
<input type="range" id="tagSlider" min="0" max="2000" value="100" step="10" /> |
|
|
<output id="tagCount">500</output> |
|
|
</label><br/> |
|
|
|
|
|
<button id="resetBtn">Reset</button> |
|
|
<button id="downloadBtn">Download SVG</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<svg viewBox="0 0 1600 1600" preserveAspectRatio="xMidYMid meet"></svg> |
|
|
|
|
|
<script> |
|
|
const width = 1600, height = 1600; |
|
|
let fullGraph = null; |
|
|
let currentTransform = d3.zoomIdentity; |
|
|
|
|
|
const categoryColors = { |
|
|
visual_characteristics: "#708090", |
|
|
attire_and_body_accessories: "#DC143C", |
|
|
body: "#FF7F50", |
|
|
more: "#BC8F8F", |
|
|
subject: "black", |
|
|
sex: "#8A2BE2", |
|
|
default: "#C0C0C0" |
|
|
}; |
|
|
|
|
|
const categoryLabels = { |
|
|
visual_characteristics: "Image Characteristics", |
|
|
attire_and_body_accessories: "Attire & Accessories", |
|
|
body: "Body & Face", |
|
|
more: "Actions & Probs", |
|
|
subject: "Subjects", |
|
|
sex: "Adult Content", |
|
|
default: "Other" |
|
|
}; |
|
|
|
|
|
const categoryPositions = {}; |
|
|
const categories = Object.keys(categoryColors); |
|
|
categories.forEach((cat, i) => { |
|
|
const angle = (i / categories.length) * 2 * Math.PI; |
|
|
categoryPositions[cat] = { |
|
|
x: width / 2 * Math.cos(angle), |
|
|
y: height / 2 * Math.sin(angle) |
|
|
}; |
|
|
}); |
|
|
|
|
|
const svg = d3.select("svg"); |
|
|
const zoomLayer = svg.append("g") |
|
|
.attr("class", "zoom-layer") |
|
|
.attr("transform", "translate(300, 300) scale(0.45)"); |
|
|
|
|
|
|
|
|
|
|
|
const legendWrapper = svg.append("g") |
|
|
.attr("class", "legend-wrapper") |
|
|
.attr("transform", "translate(10, 400)"); |
|
|
const legendItemHeight = 24; |
|
|
|
|
|
|
|
|
const zoom = d3.zoom() |
|
|
.scaleExtent([0.01, 8]) |
|
|
.on("zoom", (event) => { |
|
|
currentTransform = event.transform; |
|
|
zoomLayer.attr("transform", currentTransform); |
|
|
}); |
|
|
|
|
|
svg.call(zoom); |
|
|
|
|
|
const simulation = d3.forceSimulation() |
|
|
.force("link", d3.forceLink().id(d => d.id).distance(500)) |
|
|
.force("charge", d3.forceManyBody().strength(-185)) |
|
|
.force("center", d3.forceCenter(width / 2, (height / 1.5) - 200)) |
|
|
.force("collide", d3.forceCollide().radius(d => Math.sqrt(d.size) * 0.111)) |
|
|
.force("category", forceCluster(0.1)) |
|
|
.alphaDecay(0.15); |
|
|
|
|
|
function forceCluster(strength = 89.05) { |
|
|
function force(alpha) { |
|
|
for (const d of simulation.nodes()) { |
|
|
const centroid = categoryPositions[d.category] || categoryPositions.default; |
|
|
d.vx += (centroid.x - d.x) * strength * alpha; |
|
|
d.vy += (centroid.y - d.y) * strength * alpha; |
|
|
} |
|
|
} |
|
|
force.initialize = () => {}; |
|
|
return force; |
|
|
} |
|
|
|
|
|
d3.json("json/co_occurrence_network.json").then(graph => { |
|
|
fullGraph = graph; |
|
|
render(+document.getElementById("tagSlider").value); |
|
|
}); |
|
|
|
|
|
function initializeZoom() { |
|
|
const bounds = zoomLayer.node().getBBox(); |
|
|
const contentWidth = bounds.width; |
|
|
const contentHeight = bounds.height; |
|
|
|
|
|
|
|
|
const scale = 0.4 / Math.max( |
|
|
contentWidth / width, |
|
|
contentHeight / height |
|
|
); |
|
|
|
|
|
|
|
|
const translateX = (width - contentWidth * scale) / 3 - bounds.x * scale; |
|
|
const translateY = (height - contentHeight * scale) / 2 - bounds.y * scale; |
|
|
|
|
|
|
|
|
svg.transition() |
|
|
.duration(1000) |
|
|
.call( |
|
|
zoom.transform, |
|
|
d3.zoomIdentity |
|
|
.translate(translateX, translateY) |
|
|
.scale(scale) |
|
|
); |
|
|
} |
|
|
|
|
|
function render(nodeCount) { |
|
|
zoomLayer.selectAll("*").remove(); |
|
|
|
|
|
zoomLayer.append("rect") |
|
|
.attr("width", width) |
|
|
.attr("height", height) |
|
|
.attr("fill", getComputedStyle(document.documentElement).getPropertyValue('--svg-fill') || "#fff"); |
|
|
|
|
|
const topNodes = fullGraph.nodes.sort((a, b) => b.size - a.size).slice(0, nodeCount); |
|
|
const nodeIds = new Set(topNodes.map(d => d.id)); |
|
|
const nodesWithPos = topNodes.map(d => { |
|
|
const centroid = categoryPositions[d.category] || categoryPositions.default; |
|
|
return { ...d, x: centroid.x + Math.random() * 100 - 50, y: centroid.y + Math.random() * 100 - 50 }; |
|
|
}); |
|
|
|
|
|
const nodeLookup = new Map(nodesWithPos.map(n => [n.id, n])); |
|
|
|
|
|
const filteredLinks = fullGraph.links |
|
|
.filter(l => nodeIds.has(l.source) && nodeIds.has(l.target)) |
|
|
.map(l => { |
|
|
const source = nodeLookup.get(l.source); |
|
|
const target = nodeLookup.get(l.target); |
|
|
return { |
|
|
...l, |
|
|
source, |
|
|
target, |
|
|
dominant: source.size >= target.size ? source : target |
|
|
}; |
|
|
}); |
|
|
|
|
|
const linkValueExtent = d3.extent(filteredLinks, d => d.value); |
|
|
const linkStrokeScale = d3.scaleLinear().domain(linkValueExtent).range([0.5, 6]); |
|
|
|
|
|
const link = zoomLayer.append("g").selectAll("line") |
|
|
.data(filteredLinks) |
|
|
.enter().append("line") |
|
|
.attr("stroke", d => categoryColors[d.dominant.category] || categoryColors.default) |
|
|
.attr("stroke-width", d => linkStrokeScale(d.value)) |
|
|
.attr("stroke-opacity", d => Math.min(0.4, d.value / 100)); |
|
|
|
|
|
const node = zoomLayer.append("g").selectAll("circle.main") |
|
|
.data(nodesWithPos) |
|
|
.enter().append("circle") |
|
|
.attr("class", "node main") |
|
|
.attr("r", d => Math.max(1, Math.sqrt(d.size) * 0.04)) |
|
|
.attr("fill", d => categoryColors[d.category] || categoryColors.default) |
|
|
.attr("fill-opacity", d => Math.max(0.2, Math.min(1, d.size / 200))) |
|
|
.call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended)); |
|
|
|
|
|
const labelGroup = zoomLayer.append("g").selectAll("g.label") |
|
|
.data(nodesWithPos) |
|
|
.enter().append("g") |
|
|
.attr("class", "label"); |
|
|
|
|
|
labelGroup.append("text") |
|
|
.attr("text-anchor", "start") |
|
|
.attr("dy", "0.35em") |
|
|
.attr("fill", "black") |
|
|
.attr("fill-opacity", 0.7) |
|
|
.style("font-size", d => `${Math.max(11, Math.sqrt(d.size) * 0.04)}px`) |
|
|
.text(d => d.id); |
|
|
|
|
|
labelGroup.insert("rect", "text") |
|
|
.attr("rx", 4) |
|
|
.attr("ry", 4) |
|
|
.attr("fill", "white") |
|
|
.attr("fill-opacity", 0.7); |
|
|
|
|
|
|
|
|
legendWrapper.selectAll("*").remove(); |
|
|
|
|
|
const legend = legendWrapper.selectAll(".legend") |
|
|
.data(Object.keys(categoryColors)) |
|
|
.enter().append("g") |
|
|
.attr("class", "legend") |
|
|
.attr("transform", (d, i) => `translate(10,${i * legendItemHeight + 10})`); |
|
|
|
|
|
legend.append("rect") |
|
|
.attr("width", 12) |
|
|
.attr("height", 12) |
|
|
.attr("fill", d => categoryColors[d]); |
|
|
|
|
|
legend.append("text") |
|
|
.attr("x", 18) |
|
|
.attr("y", 6) |
|
|
.attr("dy", "0.35em") |
|
|
.style("font-size", "14px") |
|
|
.attr("fill", "black") |
|
|
.text(d => categoryLabels[d] || d); |
|
|
|
|
|
simulation.nodes(nodesWithPos).on("tick", () => { |
|
|
link.attr("x1", d => d.source.x).attr("y1", d => d.source.y) |
|
|
.attr("x2", d => d.target.x).attr("y2", d => d.target.y); |
|
|
|
|
|
node.attr("cx", d => d.x).attr("cy", d => d.y); |
|
|
|
|
|
labelGroup.each(function(d) { |
|
|
const text = d3.select(this).select("text"); |
|
|
const rect = d3.select(this).select("rect"); |
|
|
const bbox = text.node().getBBox(); |
|
|
const padding = 2; |
|
|
const offset = Math.max(2, Math.sqrt(d.size) * 0.045 + padding); |
|
|
|
|
|
d3.select(this).attr("transform", `translate(${d.x + offset},${d.y})`); |
|
|
rect |
|
|
.attr("x", bbox.x - padding) |
|
|
.attr("y", bbox.y - padding) |
|
|
.attr("width", bbox.width + padding * 2) |
|
|
.attr("height", bbox.height + padding * 2); |
|
|
}); |
|
|
}); |
|
|
|
|
|
simulation.force("link").links(filteredLinks); |
|
|
simulation.alpha(1).restart(); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
function dragstarted(event, d) { |
|
|
if (!event.active) simulation.alphaTarget(0.3).restart(); |
|
|
d.fx = d.x; |
|
|
d.fy = d.y; |
|
|
} |
|
|
|
|
|
function dragged(event, d) { |
|
|
d.fx = event.x; |
|
|
d.fy = event.y; |
|
|
} |
|
|
|
|
|
function dragended(event, d) { |
|
|
if (!event.active) simulation.alphaTarget(0); |
|
|
d.fx = null; |
|
|
d.fy = null; |
|
|
} |
|
|
|
|
|
function saveSvg() { |
|
|
const svgNode = document.querySelector("svg"); |
|
|
const serializer = new XMLSerializer(); |
|
|
const source = serializer.serializeToString(svgNode); |
|
|
const blob = new Blob([source], { type: "image/svg+xml;charset=utf-8" }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement("a"); |
|
|
a.href = url; |
|
|
a.download = "graph.svg"; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
} |
|
|
|
|
|
document.getElementById("tagSlider").addEventListener("input", function () { |
|
|
const value = +this.value; |
|
|
document.getElementById("tagCount").textContent = value; |
|
|
render(value); |
|
|
}); |
|
|
|
|
|
document.getElementById("modeToggle").addEventListener("change", function () { |
|
|
document.documentElement.classList.toggle("light-mode"); |
|
|
render(+document.getElementById("tagSlider").value); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
