style-text.html

<svg id="sankey" width="800" height="300"></svg>

<script type="module">
  import { sankey } from "../dist/sankey.js";
  import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

  const data = await fetch("sales.json").then((r) => r.json());
  const graph = sankey("#sankey", { data, categories: ["channel", "city", "product"], d3 });
  graph.nodes.attr("fill", d3.scaleOrdinal(d3.schemeCategory10));
  graph.links.attr("fill", "rgba(0,0,0,0.2)");

  // Text labels on top of the boxes are large, white, and uppercase
  graph.texts
    .attr("font-size", "20px")
    .attr("fill", "white")
    .text((d) => d.key.toUpperCase());

  // Category labels on the left are bold and large
  graph.labels.attr("font-weight", "bold").attr("font-size", "20px");
</script>