|
|
<!DOCTYPE html> |
|
|
<meta charset="utf-8"> |
|
|
<style> |
|
|
body { |
|
|
font-family: "Segoe UI", sans-serif; |
|
|
margin: 20px; |
|
|
} |
|
|
|
|
|
svg { |
|
|
font: 12px sans-serif; |
|
|
} |
|
|
|
|
|
.bar { |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.bar:hover { |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.axis text { |
|
|
font-size: 11px; |
|
|
} |
|
|
|
|
|
.legend { |
|
|
font-size: 12px; |
|
|
} |
|
|
|
|
|
.legend rect { |
|
|
stroke-width: 1; |
|
|
stroke: #000; |
|
|
} |
|
|
|
|
|
h2 { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
#downloadBtn { |
|
|
display: block; |
|
|
margin: 0 auto 20px; |
|
|
} |
|
|
</style> |
|
|
<body> |
|
|
<h2>Bar Chart: Gender → Profession</h2> |
|
|
<button id="downloadBtn">Download SVG</button> |
|
|
<svg id="chart"></svg> |
|
|
<script src="https://d3js.org/d3.v6.min.js"></script> |
|
|
<script> |
|
|
|
|
|
|
|
|
|
|
|
const colorMap = { |
|
|
"Adult Performer": "#8A2BE2", |
|
|
"Model": "#DC143C", |
|
|
"Actor": "#FF7F50", |
|
|
"Public Figure": "#20B2AA", |
|
|
"Singer, Musician": "wheat", |
|
|
"Sports Professional": "gold", |
|
|
"Voice Actor": "lightgreen", |
|
|
"Online Personality": "#4682B4", |
|
|
"Other": "#ccc" |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const genderOrder = ["Female", "Male", "Other"]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
d3.json("json/sunburst_gender_A.json").then(data => { |
|
|
|
|
|
const flatData = []; |
|
|
|
|
|
data.children.forEach(gender => { |
|
|
if (gender.children) { |
|
|
gender.children.forEach(prof => { |
|
|
flatData.push({ |
|
|
gender: gender.name, |
|
|
profession: prof.name, |
|
|
value: prof.value |
|
|
}); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const professionCounts = {}; |
|
|
flatData.forEach(d => { |
|
|
professionCounts[d.profession] = (professionCounts[d.profession] || 0) + d.value; |
|
|
}); |
|
|
|
|
|
|
|
|
const professionOrder = Object.entries(professionCounts) |
|
|
.sort((a, b) => { |
|
|
|
|
|
if (a[0] === "Other") return 1; |
|
|
if (b[0] === "Other") return -1; |
|
|
|
|
|
return b[1] - a[1]; |
|
|
}) |
|
|
.map(entry => entry[0]); |
|
|
|
|
|
|
|
|
const genderData = d3.rollup( |
|
|
flatData, |
|
|
v => ({ |
|
|
total: d3.sum(v, d => d.value), |
|
|
professions: v |
|
|
}), |
|
|
d => d.gender |
|
|
); |
|
|
|
|
|
|
|
|
const genders = Array.from(genderData.keys()).sort((a, b) => { |
|
|
const ai = genderOrder.indexOf(a); |
|
|
const bi = genderOrder.indexOf(b); |
|
|
return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const margin = {top: 40, right: 200, bottom: 80, left: 80}; |
|
|
const width = 800 - margin.left - margin.right; |
|
|
const height = 600 - margin.top - margin.bottom; |
|
|
|
|
|
const svg = d3.select("#chart") |
|
|
.attr("width", width + margin.left + margin.right) |
|
|
.attr("height", height + margin.top + margin.bottom) |
|
|
.append("g") |
|
|
.attr("transform", `translate(${margin.left},${margin.top})`); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const stack = d3.stack() |
|
|
.keys(professionOrder) |
|
|
.value((d, key) => { |
|
|
const prof = d[1].professions.find(p => p.profession === key); |
|
|
return prof ? prof.value : 0; |
|
|
}); |
|
|
|
|
|
const series = stack(Array.from(genderData)); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const x = d3.scaleBand() |
|
|
.domain(genders) |
|
|
.range([0, width]) |
|
|
.padding(0.3); |
|
|
|
|
|
const y = d3.scaleLinear() |
|
|
.domain([0, d3.max(Array.from(genderData.values()), d => d.total)]) |
|
|
.nice() |
|
|
.range([height, 0]); |
|
|
|
|
|
svg.append("g") |
|
|
.attr("transform", `translate(0,${height})`) |
|
|
.call(d3.axisBottom(x)) |
|
|
.selectAll("text") |
|
|
.style("text-anchor", "middle") |
|
|
.style("font-weight", "bold") |
|
|
.style("font-size", "14px"); |
|
|
|
|
|
svg.append("g") |
|
|
.call(d3.axisLeft(y)); |
|
|
|
|
|
svg.append("text") |
|
|
.attr("transform", "rotate(-90)") |
|
|
.attr("y", 0 - margin.left + 20) |
|
|
.attr("x", 0 - height / 2) |
|
|
.style("font-weight", "bold") |
|
|
.text("Count"); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
svg.append("g") |
|
|
.selectAll("g") |
|
|
.data(series) |
|
|
.join("g") |
|
|
.attr("fill", d => colorMap[d.key]) |
|
|
.selectAll("rect") |
|
|
.data(d => d) |
|
|
.join("rect") |
|
|
.attr("class", "bar") |
|
|
.attr("x", d => x(d.data[0])) |
|
|
.attr("y", d => y(d[1])) |
|
|
.attr("height", d => y(d[0]) - y(d[1])) |
|
|
.attr("width", x.bandwidth()) |
|
|
.append("title") |
|
|
.text(d => { |
|
|
const profKey = series.find(s => s.includes(d))?.key; |
|
|
return `${d.data[0]} – ${profKey}: ${d[1] - d[0]}`; |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const legend = svg.append("g") |
|
|
.attr("transform", `translate(${width + 20}, 0)`); |
|
|
|
|
|
professionOrder.forEach((prof, i) => { |
|
|
const row = legend.append("g").attr("transform", `translate(0,${i * 22})`); |
|
|
|
|
|
row.append("rect") |
|
|
.attr("width", 18) |
|
|
.attr("height", 18) |
|
|
.attr("fill", colorMap[prof]); |
|
|
|
|
|
row.append("text") |
|
|
.attr("x", 24) |
|
|
.attr("y", 9) |
|
|
.attr("dy", "0.35em") |
|
|
.text(`${prof} (${professionCounts[prof] || 0})`); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.getElementById("downloadBtn").addEventListener("click", () => { |
|
|
const svgNode = document.querySelector("#chart"); |
|
|
const clone = svgNode.cloneNode(true); |
|
|
|
|
|
clone.setAttribute("xmlns", "http://www.w3.org/2000/svg"); |
|
|
|
|
|
const all = clone.querySelectorAll("*"); |
|
|
all.forEach(el => { |
|
|
const style = window.getComputedStyle(el); |
|
|
el.setAttribute("style", `font:${style.font}; fill:${style.fill}; stroke:${style.stroke};`); |
|
|
}); |
|
|
|
|
|
const svgData = new XMLSerializer().serializeToString(clone); |
|
|
const blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement("a"); |
|
|
|
|
|
a.href = url; |
|
|
a.download = "gender_bar_chart.svg"; |
|
|
a.click(); |
|
|
URL.revokeObjectURL(url); |
|
|
}); |
|
|
|
|
|
}); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
