chart = { const sw = 0.3; const so = 1; const cols = 20; const offSet = 0; const off = 38; const strokeWidth = 2; // const ray = 55; const ray = 55 + 22; // const ray2 = 100; const ray2 = 100 + 22; // const ray3 = 22; const ray3 = 22 + 22 - 10; const offnumber = 22; const offAngle = (Math.PI / 180) * 1.3; const fontname = "Cormorant SC"; // const fontname = "IM Fell English SC"; GFontToDataURI( "https://fonts.googleapis.com/css2?family=Cormorant SC&display=swap" ) .then((cssRules) => { let fontRules = cssRules.join("\n"); d3.select("svg") .append("defs") .append("style") .attr("type", "text/css") .text(fontRules); console.log("Added Font"); }) .catch((reason) => console.log(reason)); // const magic = (d) => (d.data.subcat != "" ? d.data.subcat : d.data.cat); const magic = (d) => (d.data.cat != "" ? d.data.cat : d.data.cat); // const myColor = d3.scaleOrdinal(d3.schemeSpectral[7]); // const myColor = d3.scaleOrdinal(d3.schemeSet1); // const myColor = d3.scaleOrdinal( // d3.quantize(d3.interpolateHcl("#60c96e", "#4d4193"), 10) // ); // const myColor = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, cols)); const colorFunc = myColor(5, 1, 9, 0.7); function darken(color, k = 1) { const { l, c, h } = d3.lch(color); return d3.lch(l - 30 * k, c, h); } function lighten(color, k = 1) { const { l, c, h } = d3.lch(color); return d3.lch(l + 30 * k, c, h); } const root = tree( rootWithIngoing.sort((a, b) => d3.ascending(a.data.subcat, b.data.subcat)) ); const svg = d3.create("svg"); // .attr("viewBox", [-width / 2, -width / 2, width, width]); const ringCat = { cx: 0, cy: 0, r: 275 - 5, innerR: 20 - 5, padAngle: 0, color: colorFunc, strokeWidth: 0.5, bold: false, data: dataSubCat2Level2, // data: myData((Math.PI / 360) * 3).slice(2), fontSize: 10, fontName: fontname }; svg.append("g").html(ringObjHTML(ringCat)); const ringCat2Level = { cx: 0, cy: 0, r: 250, innerR: 45 - 5 - 5, padAngle: 0, color: colorFunc, strokeWidth: 0.5, bold: false, data: dataSubCat2Level, fontSize: 20, fontName: fontname }; svg.append("g").html(ringObjHTML(ringCat2Level)); const ringSubCat = { cx: 0, cy: 0, r: 250, innerR: 20 - 5, padAngle: 0, color: colorFunc, strokeWidth: 0.5, bold: false, data: dataSubCat, fontSize: 8, fontName: fontname }; svg.append("g").html(ringObjHTML(ringSubCat)); const node = svg .append("g") .attr("font-family", fontname) .attr("font-size", 9.2) .selectAll("g") .data(root.leaves()) .join("g") .attr( "transform", (d) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)` ) .append("text") .attr("dy", "0.31em") .attr("x", (d) => (d.x < Math.PI ? 6 : -6 - offnumber)) .attr("text-anchor", (d) => (d.x < Math.PI ? "start" : "start")) .attr("transform", (d) => (d.x >= Math.PI ? "rotate(180)" : null)) .style("fill", (d) => colorFunc(magic(d))) .text((d) => { if (d.x < Math.PI - offSet) { if (typeof d.data.num !== "undefined") { if (d.data.num.length <= 4) { var str = d.data.num; var nameOnly = str.substring(0, str.length - 1); var numOnly = str.substring(str.length - 1, str.length); d.data.num = nameOnly + "\xa0\xa0" + numOnly; } return d.data.num; } else return d.data.content; } else { if (typeof d.data.num !== "undefined") { if (d.data.num.length <= 4) { var str = d.data.num; var nameOnly = str.substring(0, str.length - 1); var numOnly = str.substring(str.length - 1, str.length); d.data.num = nameOnly + "\xa0\xa0" + numOnly; } return d.data.num; } else return d.data.content; } }) // .clone(true) // .lower() // .attr("stroke", "white") .clone(true) // .attr("stroke-width", 0) // .attr("transform", (d) => `translate(${ray3},0)`) // .attr("transform", `translate(${ray3},0)`) // .attr("dy", "0.31em") .attr("text-anchor", (d) => (d.x < Math.PI ? "start" : "end")) .attr("transform", (d) => (d.x >= Math.PI ? "rotate(180)" : null)) .attr("x", (d) => d.x < Math.PI - offSet === !d.children ? off + ray3 : -off - ray3 ) .style("fill", (d) => colorFunc(magic(d))) .text((d) => { // return d.data.content + " (" + magic(d).slice(1) + ")"; return d.data.content; }); // CONNECTIONS // const line = d3 .lineRadial() .curve(d3.curveBundle.beta(0.85)) .radius((d) => d.y) .angle((d) => d.x); const link = svg .append("g") // .attr("stroke", "red") .attr("fill", "none") .attr("stroke-width", sw) .attr("stroke-opacity", so) .selectAll("path") .data(root.leaves().flatMap((leaf) => leaf.outgoing)) .join("path") .style("mix-blend-mode", "multiply") .style("opacity", so) .attr("d", ([i, o]) => line(i.path(o))) .attr("stroke", (d) => lighten(colorFunc(magic(d[1])))) .each(function (d) { d.path = this; }); // svg // .append("g") // .attr("fill", "none") // .selectAll("path") // .data( // d3.transpose( // root // .leaves() // .filter((rule) => rule.outgoing) // .flatMap((leaf) => leaf.outgoing.map(path)) // .map((path) => Array.from(path.split(k))) // ) // ) // .join("path") // .style("mix-blend-mode", "darken") // .attr("stroke", (d, i) => color(d3.easeQuad(i / ((1 << k) - 1)))) // // .attr("stroke", (d, i) => { // // // const magic = d.data.subcat != "" ? d.data.subcat : d.data.cat; // // color(d3.easeQuad(i / (1 << k))); // // }) // // .attr("stroke", (d, i) => color(i - 1)) // .attr("d", (d) => d.join("")); return svg.attr("viewBox", autoBox).node(); }