27:null 28:["$","title",null,{"children":"Interactive Doughnut Chart - Sample | Table 6 | Observable"}] 2d:T5bf,

Sentiment Category Distribution for top-5 categories based on popularity

Clicking on a category shows the sentiment category distribution for it based on popularity.
Popularity is calculated as follows:
The popularity will be "TRUE" when the number of views, count of likes + dislikes, and number of comments of a category is greater than the median number of views, count of likes + dislikes, and number of comments
First level is the category level, second level is sentiment category level, third level is the popularity level (True/False).
Click the centre circle to revert to the previous visualization.

Hover your mouse over the pie chart to see more information.

2e:T18e5,custom_chart = { let svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("border", "1px solid black"); const g = svg .append("g") .attr("transform", `translate(${width/2},${height/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:'lightgreen', Negative:'red', 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(); }2f:T5bf,function novelData(filterData){ let dataset = {} let mf = [] let finalData = [] let Categorygroup = Array.from(d3.group(filterData, d=>d.category)); let l1=0; Categorygroup.forEach(function(d) { d.forEach(k => { dataset[d[0]]= Array.from(d3.group(k, k=>k.Sentiment_Category)); }) let name = d[0]; finalData.push( { children: [], name: name, length:0 } ) let objIndex = 0; dataset[d[0]].forEach(k => { mf= Array.from(d3.rollup(k[1], k=>k.length, k=>k.popularity)); objIndex = finalData.findIndex((obj => obj.name === name)); if(k[0] !== 'none') { finalData[objIndex].children.push( { children: [], length: k[1].length, name: k[0] } ) l1 += k[1].length mf.forEach(dx => { let objIndex2 = finalData[objIndex].children.findIndex((obj => obj.name === k[0])); finalData[objIndex].children[objIndex2].children.push( { name: dx[0], value: dx[1] } ) }) } }) finalData[objIndex].length = l1; l1 = 0; }) let sliceData = finalData.sort((a,b) => {return b.length - a.length}).slice(0,5) let data = { name: 'data', children: sliceData } return data; }30:[] 2b:{"id":"8c83e1c7844f17eb","slug":null,"title":"Interactive Doughnut Chart - Sample","thumbnail":"b2f1bf4071113a19d39eb43113971e2046274486c21d6bf8d132987e1b3629ee","access_level":"public","create_time":"$D2022-11-02T14:08:42.270Z","update_time":"$D2022-11-03T19:06:21.070Z","view_time":null,"first_public_time":"$D2022-11-02T14:08:42.270Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"47826cacbf7f04f2","login":"table6","name":"Table 6","avatar_url":"https://avatars-next.observableusercontent.com/4c46cdacbb67737a31a719889bbc13481066af17c516414ebf5f433b1bed643e","tier":"starter_2024"},"version":134,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a320f2aa4c6d460","login":"gkaushik","name":"Kaushik Ganesan","avatar_url":"https://avatars-next.observableusercontent.com/80fcae3eeaf910463939e5efb825fe95ee25f3390af23b29fbe3477525d9beee","tier":null}],"members":[{"type":"individual","id":"4a320f2aa4c6d460","login":"gkaushik","name":"Kaushik Ganesan","avatar_url":"https://avatars-next.observableusercontent.com/80fcae3eeaf910463939e5efb825fe95ee25f3390af23b29fbe3477525d9beee","tier":null,"role":"editor"},{"type":"team","id":"47826cacbf7f04f2","login":"table6","name":"Table 6","avatar_url":"https://avatars-next.observableusercontent.com/4c46cdacbb67737a31a719889bbc13481066af17c516414ebf5f433b1bed643e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Interactive Doughnut Chart - Sample","cells":[{"id":0,"value":"# Interactive Doughnut Chart - Sample","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"

Click Choose File and select the Trending Youtube Videos Dataset from your local system

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof csvfile = Inputs.file({label: \"CSV file\", accept: \".csv\", required: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$2d","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"csvfile","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = csvfile.csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"data[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"margin = ({ top: 40, right: 110, bottom: 30, left: 20 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"width = 1152","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"