custom_chart = { let svg = d3 .create("svg") .attr("width", width) .attr("height", 1000) .style("border", "1px solid black"); const g = svg .append("g") .attr("transform", `translate(${width/2},${1000/2})`); function partition(data_array) { const root = d3.hierarchy(data_array) .sum(d => d.value) .sort((a, b) => b.value - a.value); return d3.partition() .size([2 * Math.PI, root.height + 1]) (root); } const tooltip = d3.select("body") .append('div') .attr('class', "tooltip") .attr('id', 'NovelTooltip') .style('position', 'absolute'); const radius = width/8 var categorycolor = d3.scaleOrdinal(d3.schemeCategory10); const color = { Positive:'#93C572', Negative:'#E97451', Neutral:'lightblue', TRUE:'orange', FALSE:'steelblue'} var arc = d3.arc() .startAngle(d => d.x0) .endAngle(d => d.x1) .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005)) .padRadius(radius * 1.5) .innerRadius(d => d.y0 * radius) .outerRadius(d => Math.max(d.y0 * radius, d.y1 * radius - 1)) var root = partition(novelData(data)); root.each(d => d.current = d); var path = g.append("g") .selectAll("path") .data(root.descendants().slice(1)) .join("path") .attr("fill", (d,i) => { if(d.depth === 1) return 'white' else { return color[d.data.name]; } }) .attr('stroke-width', '1px') .attr('stroke', function (d){ if (d.depth === 1) return 'black'; }) .attr("fill-opacity", d => arcVisible(d.current) ? (d.children ? 0.8 : 0.8) : 0) .attr("pointer-events", d => arcVisible(d.current) ? "auto" : "none") .attr("d", d => arc(d.current)) .on('mouseover', function(event, d){ d3.select(this) .attr('stroke-width', '1px') .attr('stroke', 'black') let value = 0; if(d.depth !== 3) value = d.data.length; else value = d.data.value tooltip .style("opacity", 2) .style("left", event.pageX + 20 + "px") .style("top", event.pageY + "px") .html(`

${d.data.name}

Value: ${value}

`); }) .on('mouseout', function(event, d){ d3.select(this) .attr('stroke-width', '1px') .attr('stroke', function (d){ if (d.depth === 1) return 'black'; }) tooltip .style("opacity", 0) .style("left", 0) .style("top", 0) .html(``); }); path.filter(d => d.children) .style("cursor", "pointer") .on("click", clicked); var label = g.append("g") .attr("pointer-events", "none") .attr("text-anchor", "middle") .style("user-select", "none") .selectAll("text") .data(root.descendants().slice(1)) .join("text") .attr("dy", "0.35em") .attr("fill-opacity", d => + labelVisible(d.current)) .attr("transform", d => labelTransform(d.current)) .text(function (d) { if(d.data.name === 'TRUE') return 'TRUE'; else if (d.data.name === 'FALSE') return 'FALSE'; else return d.data.name; }); var parent = g.append("circle") .datum(root) .attr("r", radius) .attr("fill", "#dbd5c9") .attr("pointer-events", "all") .on("click", clicked); function clicked(event, p) { parent.datum(p.parent || root); root.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - p.x0) / (p.x1 - p.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - p.depth), y1: Math.max(0, d.y1 - p.depth) }); const t = g.transition().duration(750); path.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .filter(function(d) { return + this.getAttribute("fill-opacity") || arcVisible(d.target); }) .attr("fill-opacity", d => arcVisible(d.target) ? (d.children ? 0.9 : 0.8) : 0) .attr("pointer-events", d => arcVisible(d.target) ? "auto" : "none") .attrTween("d", d => () => arc(d.current)); label.filter(function(d) { return + this.getAttribute("fill-opacity") || labelVisible(d.target); }).transition(t) .attr("fill-opacity", d => +labelVisible(d.target)) .attrTween("transform", d => () => labelTransform(d.current)); } function arcVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && d.x1 > d.x0; } function labelVisible(d) { return d.y1 <= 3 && d.y0 >= 1 && (d.y1 - d.y0) * (d.x1 - d.x0) > 0.03; } function labelTransform(d) { const x = (d.x0 + d.x1) / 2 * 180 / Math.PI; const y = (d.y0 + d.y1) / 2 * radius; return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`; } return svg.node(); }