added figure 8 barchart

public/Figure_8b_barchart.html

@@ -0,0 +1,276 @@
+<!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: Country → 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",
+  "Performer": "magenta",
+  "Singer, Musician": "wheat",
+  "Sports Professional": "gold",
+  "Voice Actor": "lightgreen",
+  "Online Personality": "#4682B4",
+  "Other": "#ccc"
+};
+
+const professionOrder = [
+  "Actor", "Adult Performer", "Singer, Musician", "Model", "Online Personality", "Sports Professional", "Voice Actor", "Other"
+];
+
+const manualOrder = [
+  "United States",
+  "Japan",
+  "United Kingdom",
+  "South Korea",
+  "Russia",
+  "India",
+  "France",
+  "China",
+  "Canada",
+  "Brazil",
+  "Germany",
+  "Italy",
+  "Australia",
+  "Spain",
+  "Ukraine",
+  "Turkey",
+  "Netherlands",
+  "Indonesia",
+  "Poland",
+  "Czech Republic",
+  "Argentina",
+  "Sweden",
+  "Mexico",
+  "Taiwan",
+  "Thailand",
+  "Ireland",
+  "Philippines",
+  "Hong Kong",
+  "Macau",
+  "British Virgin Islands",
+  "Other"
+];
+
+d3.json("json/sunburst_countries_A.json").then(data => {
+  // Transform hierarchical data into flat array
+  const flatData = [];
+
+  data.children.forEach(country => {
+    if (country.children) {
+      country.children.forEach(profession => {
+        flatData.push({
+          country: country.name,
+          profession: profession.name,
+          value: profession.value
+        });
+      });
+    }
+  });
+
+  // Group by country and calculate totals
+  const countryData = d3.rollup(
+    flatData,
+    v => ({
+      total: d3.sum(v, d => d.value),
+      professions: v
+    }),
+    d => d.country
+  );
+
+  // Convert to array and sort by manual order
+  const countries = Array.from(countryData.keys()).sort((a, b) => {
+    const aIndex = manualOrder.indexOf(a);
+    const bIndex = manualOrder.indexOf(b);
+    return (aIndex === -1 ? Infinity : aIndex) - (bIndex === -1 ? Infinity : bIndex);
+  });
+
+  // Set up dimensions - responsive to window size
+  const margin = {top: 40, right: 200, bottom: 150, left: 80};
+  const width = Math.max(800, window.innerWidth - 100) - margin.left - margin.right;
+  const height = 800 - 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})`);
+
+  // Create stacked data
+  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(countryData));
+
+  // Scales - only show top 25 countries
+  const top25Countries = countries.slice(0, 25);
+
+  const x = d3.scaleBand()
+    .domain(top25Countries)
+    .range([0, width])
+    .padding(0.3);
+
+  const y = d3.scaleLinear()
+    .domain([0, d3.max(Array.from(countryData.values()), d => d.total)])
+    .nice()
+    .range([height, 0]);
+
+  // X axis
+  svg.append("g")
+    .attr("class", "axis")
+    .attr("transform", `translate(0,${height})`)
+    .call(d3.axisBottom(x))
+    .selectAll("text")
+    .attr("transform", "rotate(-90)")
+    .style("text-anchor", "end")
+    .style("font-size", "11px")
+    .style("font-weight", "bold")
+    .attr("dx", "-0.5em")
+    .attr("dy", "-0.5em");
+
+  // Y axis
+  svg.append("g")
+    .attr("class", "axis")
+    .call(d3.axisLeft(y));
+
+  // Y axis label
+  svg.append("text")
+    .attr("transform", "rotate(-90)")
+    .attr("y", 0 - margin.left + 20)
+    .attr("x", 0 - (height / 2))
+    .attr("dy", "1em")
+    .style("text-anchor", "middle")
+    .style("font-size", "14px")
+    .style("font-weight", "bold")
+    .text("Count");
+
+  // Draw bars
+  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 profession = series.find(s => s.find(item => item === d))?.key;
+      return `${d.data[0]} - ${profession}: ${d[1] - d[0]}`;
+    });
+
+  // Count total values per profession
+  const professionCounts = {};
+  flatData.forEach(d => {
+    professionCounts[d.profession] = (professionCounts[d.profession] || 0) + d.value;
+  });
+
+  // Legend
+  const legend = svg.append("g")
+    .attr("class", "legend")
+    .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")
+      .style("font-size", "12px")
+      .text(`${prof} (${professionCounts[prof] || 0})`);
+  });
+
+  // Download button functionality
+  document.getElementById("downloadBtn").addEventListener("click", () => {
+    const svgNode = document.querySelector("#chart");
+    const clonedSvg = svgNode.cloneNode(true);
+
+    clonedSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+    // Inline styles
+    const allElements = clonedSvg.querySelectorAll("*");
+    allElements.forEach(el => {
+      const style = window.getComputedStyle(el);
+      el.setAttribute("style", `
+        font: ${style.font};
+        fill: ${style.fill};
+        stroke: ${style.stroke};
+        stroke-width: ${style.strokeWidth};
+      `);
+    });
+
+    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 = "bar_chart.svg";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  });
+});
+</script>
+</body>
+</html>