2f:Tbfd,30:T86f,chartClustered = { const svg = d3.select(DOM.svg(width, height)); svg.append('text') .attr('class', 'title') .text(titleText) .attr('y', 15) .attr('x', width/3) .attr('font-size', titleSize); var bars = svg.append("g") .selectAll("g") .data(dataNew.dat); bars .join("g") .attr("transform", d => `translate(${x0(d[groupKey])},0)`) .selectAll("rect") .data(d => keys.map(key => ({key, value: d[key]}))) .join("rect") .attr("x", d => x1(d.key)) .attr("y", d => d.value ? y(d.value) : margin.top) .attr("width", x1.bandwidth()) .attr("height", d => d.value ? y(0) - y(d.value) : height - margin.bottom - margin.top) .attr("fill", d => d.value ? color(d.key) : 'transparent') .on("mouseenter", function(d) { svg.append("text").attr("class", "tool") .attr("x", x0(d.path[1].__data__[groupKey]) + x1(d.path[0].__data__.key)) // .attr("y", y(d.path[0].__data__.value)-25) .attr("y", margin.top - 50) .style("display", null) // .style("fill", color(d.path[0].__data__.key)) .style("fill", 'black') .text("Catergory: " + d.path[0].__data__.key.charAt(0).toUpperCase() + d.path[0].__data__.key.slice(1)) .attr('font-size', tooltipSize) svg.append("text").attr("class", "tool1") .attr("x", x0(d.path[1].__data__[groupKey]) + x1(d.path[0].__data__.key)) // .attr("y", y(d.path[0].__data__.value)-10) .attr("y", margin.top - 35) .style("display", null) // .style("fill", color(d.path[0].__data__.key)) .style("fill", 'black') .text("Score: " + Number(d.path[0].__data__.value).toFixed(2)) .attr('font-size', tooltipSize) }) .on("mouseout", function(d) { svg.selectAll("text.tool").style("display", "none") svg.selectAll("text.tool1").style("display", "none") }); svg.append("g") .attr("class", "x-axis") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(legend); svg.node().scrollBy(5, 0); return svg.node(); }31:T8af, 32:T640,pie1 = { const svg = d3_v5 .create('svg') .attr('width', width) .attr('height', 400); const chart = svg .append('g') .attr('transform', `translate(${radius},${radius})`); const text = svg .append('text') .attr("id", 'toptext') .attr("x", width - 450) .attr("y", 550) .attr("dx", "-.8em") .attr("dy", ".15em") .attr("font-family", "sans-serif") //.text(textPieChart1 + textPieChart2); chart .selectAll(null) .data(pieData) .enter() .append('path') .attr('d', arc) .attr('fill', d => colorSeq(d.index)) .attr('stroke', 'grey') .style('stroke-width', '1px') .on('mouseover', onMouseOver) .on('mouseout', onMouseOut) .on('click', (event , r) => { mutable desiredCategory = event.data.key; //mutable desiredCategory = hoverCategory; }); const legend = svg .append('g') .attr('transform', `translate(${radius * 2 + 20},0)`); legend .selectAll(null) .data(pieData) .enter() .append('rect') .attr('y', d => labelHeight * d.index * 1) .attr('width', labelHeight) .attr('height', labelHeight) .attr('fill', d => colorSeq(d.index)) .attr('stroke', 'grey') .style('stroke-width', '1px'); legend .selectAll(null) .data(pieData) .enter() .append('text') .text(d => d.data.key) .attr('x', labelHeight * 1.1) .attr('y', d => labelHeight * d.index * 1 + labelHeight) .style('font-family', 'sans-serif') .style('font-size', `${10}px`); // .style('font-size', `${labelHeight}px`); return svg.node(); }33:T8de,chart1 = { const svg = d3_v5.select(DOM.svg(width, height )); svg.append('text') .attr('class', 'title') .text(titleText_D2) .attr('y', 15) .attr('x', width/3) .attr('font-size', titleSize); var bars = svg.append("g") .selectAll("g") .data(dataDesign2.dat); bars .join("g") .attr("transform", d => `translate(${x0_D2(d[groupKey_D2])},0)`) .selectAll("rect") .data(d => keys_D2.map(key => ({key, value: d[key]}))) .join("rect") .attr("x", d => x1_D2(d.key)) .attr("y", d => d.value ? y_D2(d.value) : margin.top) .attr("width", x1_D2.bandwidth()) .attr("height", d => d.value ? y_D2(0) - y_D2(d.value) : height - margin.bottom - margin.top) .attr("fill", d => d.value ? color_D2(d.key) : 'transparent') // .on("mouseenter", function(d) { // svg.append("text").attr("class", "tool") // .attr("x", x0(d.path[1].__data__[groupKey]) + x1(d.path[0].__data__.key)) // // .attr("y", y(d.path[0].__data__.value)-25) // .attr("y", margin.top - 50) // .style("display", null) // // .style("fill", color(d.path[0].__data__.key)) // .style("fill", 'black') // .text("Catergory: " + d.path[0].__data__.key.charAt(0).toUpperCase() + d.path[0].__data__.key.slice(1)) // .attr('font-size', tooltipSize) // svg.append("text").attr("class", "tool1") // .attr("x", x0(d.path[1].__data__[groupKey]) + x1(d.path[0].__data__.key)) // // .attr("y", y(d.path[0].__data__.value)-10) // .attr("y", margin.top - 35) // .style("display", null) // // .style("fill", color(d.path[0].__data__.key)) // .style("fill", 'black') // .text("Score: " + Number(d.path[0].__data__.value).toFixed(2)) // .attr('font-size', tooltipSize) // }) // .on("mouseout", function(d) { // svg.selectAll("text.tool").style("display", "none") // svg.selectAll("text.tool1").style("display", "none") // }); svg.append("g") .attr("class", "x-axis") .call(xAxis_D2); svg.append("g") .call(yAxis_D2); svg.append("g") .call(legend_D2); svg.node().scrollBy(5, 0); return svg.node(); }34:T70c, 35:T18e1,custom_chart = { let svg = d3 .create("svg") .attr("width", width) .attr("height", 700) .style("border", "1px solid black"); const g = svg .append("g") .attr("transform", `translate(${width/2},${700/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/10 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(); }36:T89a, -->37:Tbf6,function BarChart(data, { x = (d, i) => i, // given d in data, returns the (ordinal) x-value y = d => d, // given d in data, returns the (quantitative) y-value title, // given d in data, returns the title text marginTop = 20, // the top margin, in pixels marginRight = 0, // the right margin, in pixels marginBottom = 30, // the bottom margin, in pixels marginLeft = 40, // the left margin, in pixels width = 640, // the outer width of the chart, in pixels height = 400, // the outer height of the chart, in pixels xDomain, // an array of (ordinal) x-values xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // y-scale type yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] xPadding = 0.1, // amount of x-range to reserve to separate bars yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis color = "currentColor" // bar fill color } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); // Compute default domains, and unique the x-domain. if (xDomain === undefined) xDomain = X; if (yDomain === undefined) yDomain = [0, d3.max(Y)]; xDomain = new d3.InternSet(xDomain); // Omit any data not present in the x-domain. const I = d3.range(X.length).filter(i => xDomain.has(X[i])); // Construct scales, axes, and formats. const xScale = d3.scaleBand(xDomain, xRange).padding(xPadding); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); // Compute titles. if (title === undefined) { const formatValue = yScale.tickFormat(100, yFormat); title = i => `${X[i]}\n${formatValue(Y[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const bar = svg.append("g") .attr("fill", color) .selectAll("rect") .data(I) .join("rect") .attr("x", i => xScale(X[i])) .attr("y", i => yScale(Y[i])) .attr("height", i => yScale(0) - yScale(Y[i])) .attr("width", xScale.bandwidth()); if (title) bar.append("title") .text(title); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); return svg.node(); }38:T5c4,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,filter) let data = { name: 'data', children: sliceData } return data; }39:T1053,function Calendar(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value title, // given d in data, returns the title text width = 928, // width of the chart, in pixels cellSize = 17, // width and height of an individual day, in pixels weekday = "monday", // either: weekday, sunday, or monday formatDay = i => "SMTWTFS"[i], // given a day number in [0, 6], the day-of-week label formatMonth = "%b", // format specifier string for months (above the chart) yFormat, // format specifier string for values (in the title) colors = d3.interpolatePiYG } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const I = d3.range(X.length); const countDay = weekday === "sunday" ? i => i : i => (i + 6) % 7; const timeWeek = weekday === "sunday" ? d3.utcSunday : d3.utcMonday; const weekDays = weekday === "weekday" ? 5 : 7; const height = cellSize * (weekDays + 2); // Compute a color scale. This assumes a diverging color scheme where the pivot // is zero, and we want symmetric difference around zero. const max = d3.quantile(Y, 0.9975, Math.abs); const color = d3.scaleSequential([-max, +max], colors).unknown("none"); // Construct formats. formatMonth = d3.utcFormat(formatMonth); // Compute titles. if (title === undefined) { const formatDate = d3.utcFormat("%B %-d, %Y"); const formatValue = color.tickFormat(100, yFormat); title = i => `${formatDate(X[i])}\n${formatValue(Y[i])}`; } else if (title !== null) { const T = d3.map(data, title); title = i => T[i]; } // Group the index by year, in reverse input order. (Assuming that the input is // chronological, this will show years in reverse chronological order.) const years = d3.groups(I, i => X[i].getUTCFullYear()).reverse(); function pathMonth(t) { const d = Math.max(0, Math.min(weekDays, countDay(t.getUTCDay()))); const w = timeWeek.count(d3.utcYear(t), t); return `${d === 0 ? `M${w * cellSize},0` : d === weekDays ? `M${(w + 1) * cellSize},0` : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${weekDays * cellSize}`; } const svg = d3.create("svg") .attr("width", width) .attr("height", height * years.length) .attr("viewBox", [0, 0, width, height * years.length]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10); const year = svg.selectAll("g") .data(years) .join("g") .attr("transform", (d, i) => `translate(40.5,${height * i + cellSize * 1.5})`); year.append("text") .attr("x", -5) .attr("y", -5) .attr("font-weight", "bold") .attr("text-anchor", "end") .text(([key]) => key); year.append("g") .attr("text-anchor", "end") .selectAll("text") .data(weekday === "weekday" ? d3.range(1, 6) : d3.range(7)) .join("text") .attr("x", -5) .attr("y", i => (countDay(i) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); const cell = year.append("g") .selectAll("rect") .data(weekday === "weekday" ? ([, I]) => I.filter(i => ![0, 6].includes(X[i].getUTCDay())) : ([, I]) => I) .join("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x", i => timeWeek.count(d3.utcYear(X[i]), X[i]) * cellSize + 0.5) .attr("y", i => countDay(X[i].getUTCDay()) * cellSize + 0.5) .attr("fill", i => color(Y[i])); if (title) cell.append("title") .text(title); const month = year.append("g") .selectAll("g") .data(([, I]) => d3.utcMonths(d3.utcMonth(X[I[0]]), X[I[I.length - 1]])) .join("g"); month.filter((d, i) => i).append("path") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("d", pathMonth); month.append("text") .attr("x", d => timeWeek.count(d3.utcYear(d), timeWeek.ceil(d)) * cellSize + 2) .attr("y", -5) .text(formatMonth); return Object.assign(svg.node(), {scales: {color}}); }3a:[] 2d:{"title":"Table 6 - D3 Visualizations","cells":[{"id":231,"value":"# Table 6 - D3 Visualizations","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"### Google Doc link:\nhttps://docs.google.com/document/d/1_ZIO4pQtSosJjzlg7lPf0nLL7SeKNSCyzvZtjsCvhts/edit\n\n### Dataset \nDownload the .csv file from this Google Drive link\n\nhttps://drive.google.com/file/d/1Wl5EkJOUrZGluVk_wjn1itU-sNQuS7LF/view?usp=share_link","pinned":false,"hidden":false,"mode":"md"},{"id":674,"value":"Note: To run the Observable notebook, download the .csv file from the Google Drive link and upload it to the notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"### Data Preprocessing","pinned":false,"hidden":false,"mode":"md"},{"id":676,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":48,"value":"viewof csvfile = Inputs.file({label: \"Upload the .csv file\", accept: \".csv\", required: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"data= csvfile.csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":557,"value":"$2f","pinned":false,"hidden":false,"mode":"html"},{"id":87,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"textPieChart1 + textPieChart2","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"## PIE CHART 1: Categories","pinned":false,"hidden":false,"mode":"md"},{"id":542,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":194,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"#### *Note that YouTube disabled the dislike count from December 2021","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"chart3 = BarChart(dataBarChart2, {\n x: d => d.day,\n y: d => d.no_of_videos,\n xDomain: dataBarChart2.day, // sort by descending frequency\n yLabel: \"↑ No of Videos vs Publishing Data for category: \" + desiredCategory,\n width: 500,\n height: 300,\n color: \"#3288bd\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"chart4 = BarChart(dataBarChart3, {\n x: d => d.date_range_to_trend,\n y: d => d.no_of_videos,\n xDomain: dataBarChart2.date_range_to_trend, // sort by descending frequency\n yLabel: \"↑ No of Days to Trend for category: \" + desiredCategory,\n width: 500,\n height: 300,\n color: \"rgb(108,99,255)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"$34","pinned":false,"hidden":false,"mode":"html"},{"id":577,"value":"html`You have chosen to view top ${filter} categories. Please move the slider to change the number of categories. Ideally, choosing 5 is recommended`","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"viewof filter = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"$36","pinned":false,"hidden":false,"mode":"html"},{"id":418,"value":"key = Legend(chart.scales.color, {title: \"Sentiment Scores\", marginLeft: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"chart = Calendar(data, {\n x: d => d.trending_date,\n y: d => d.Sentiment_Scores,\n width\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"#### Design 1 - Code","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"data_title = data.filter(i=>i.view_count != 0).map(i => {const viewdata = {\n categories: i.category,\n net_popularity_per_view: (i.likes - i.dislikes)/i.view_count,\n sentiment_scores:i[\"Sentiment_Scores\"]\n }\n \n return viewdata})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"columnsToSum=Object.keys(data_title[0]).slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"columnsToSum2= Object.keys(data_view[0]).slice(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"view_sentiment_array = Array.from((d3.rollup(data_title,\n v => Object.fromEntries(columnsToSum.map(col => [col, d3.mean(v, d => d[col])])),\n d => d.categories)), ([categories, counts]) => {\n const result={}\n result.category = categories;\n result.net_popularity_per_view = (counts.net_popularity_per_view - 0.012014798319959788) / 0.06709932458\n result.sentiment_scores = counts.sentiment_scores\n return result;\n}).sort((a, b) => d3.ascending(a.category, b.category))","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"data_view= data.map(i => {const viewdata = {\n video:i.video_id,\n category:i.category,\n published_week:String(i.publishedAt).split(\" \")[0],\n published_month:String(i.publishedAt).split(\" \")[1]+\"-\"+String(i.publishedAt).split(\" \")[3],\n views:i.view_count,\n likes:i.likes,\n dislikes:i.dislikes\n \n }\n \n return viewdata})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":" month_year_array = Array.from((d3.rollup(data_view,\n v => Object.fromEntries(columnsToSum2.map(col => [col, d3.sum(v, d => d[col])])),\n d => d.category,d => d.published_month)), ([categories, counts]) => {\n const result={}\n result.category = categories;\n result.week= Array.from(counts, ([month_year, metrics]) => ({ month_year, likes:metrics.likes, dislikes:metrics.dislikes}));\n // result.week = Array.from(counts.values());\n // result.week.day= Array.from(counts.keys());\n return result;\n}).sort((a, b) => d3.ascending(a.category, b.category))","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"week_array = Array.from((d3.rollup(data_view,\n v => v.length,\n d => d.category,d => d.published_week)), ([categories, counts]) => {\n const result={}\n result.category = categories;\n result.week= Array.from(counts, ([day, no_of_videos]) => ({ day, no_of_videos})).sort((a, b) => d3.ascending(a.day, b.day));\n // result.week = Array.from(counts.values());\n // result.week.day= Array.from(counts.keys());\n return result;\n}).sort((a, b) => d3.ascending(a.category, b.category))","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"days_to_trend= (data.filter(i=>(i.days_to_trend>=0 && i.days_to_trend<=1)).map(i=> ({date_range:\"0-1\",video_id:i.video_id,category:i.category}))).concat(data.filter(i=>(i.days_to_trend>=2 && i.days_to_trend<=3)).map(i=> ({date_range:\"2-3\",video_id:i.video_id,category:i.category}))).concat(data.filter(i=>(i.days_to_trend>=4 && i.days_to_trend<=5)).map(i=> ({date_range:\"4-5\",video_id:i.video_id,category:i.category}))).concat(data.filter(i=>(i.days_to_trend>=6 && i.days_to_trend<=7)).map(i=> ({date_range:\"6-7\",video_id:i.video_id,category:i.category}))).concat(data.filter(i=>(i.days_to_trend>=8 && i.days_to_trend<=9)).map(i=> ({date_range:\"8-9\",video_id:i.video_id,category:i.category}))).concat(data.filter(i=>(i.days_to_trend>=10 && i.days_to_trend<=11)).map(i=> ({date_range:\"10-11\",video_id:i.video_id,category:i.category}))).concat(data.filter(i=>(i.days_to_trend>=12)).map(i=> ({date_range:\">=12\",video_id:i.video_id,category:i.category})))","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"days_to_trend_array= Array.from((d3.rollup(days_to_trend,\n v => v.length,\n d => d.category,d => d.date_range)), ([categories, counts]) => {\n const result={}\n result.category = categories;\n result.week= Array.from(counts, ([date_range_to_trend, no_of_videos]) => ({ date_range_to_trend, no_of_videos}));\n // result.week = Array.from(counts.values());\n // result.week.day= Array.from(counts.keys());\n return result;\n}).sort((a, b) => d3.ascending(a.category, b.category))","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"import {howto, altplot} from \"@d3/example-components\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"// import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"import {howto, altplot} from \"@d3/example-components\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"function zoom(svg) {\n const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]];\n\n svg.call(d3.zoom()\n .scaleExtent([1, 8])\n .translateExtent(extent)\n .extent(extent)\n .on(\"zoom\", zoomed));\n\n function zoomed(event) {\n x0.range([margin.left, width - margin.right].map(d => event.transform.applyX(d)));\n svg.selectAll(\"rect\").data(data.dat)\n .attr(\"x\", d => x0(d[groupKey])).attr(\"width\", x0.bandwidth())\n // .attr(\"transform\", d => `translate(${x0(d[groupKey])},0)`)\n .data(d => keys.map(key => ({key, value: d[key]}))).selectAll(\"rect\")\n .attr(\"x\", d => x1(d.key)).attr(\"width\", x1.bandwidth());\n svg.selectAll(\".x-axis\").call(xAxis);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"wrap = (text) => {\n const width=50\n text.each(function() {\n var text = d3.select(this),\n words = text.text().split(/\\s+/).reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.1, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")),\n tspan = text.text(null).append(\"tspan\").attr(\"x\", 0).attr(\"y\", y).attr(\"dy\", dy + \"em\");\n while (words.length >0) {\n word=words.pop()\n line.push(word);\n tspan.text(line.join(\" \"));\n // if (tspan.node().getComputedTextLength() > width) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text.append(\"tspan\").attr(\"x\", 0).attr(\"y\", y-10).attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\").text(word);\n // }\n }\n });\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"legend = svg => {\n const g = svg\n .attr(\"transform\", `translate(${width-legendDistanceFromRight},${margin.top})`)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", legendTextSize)\n .selectAll(\"g\")\n .data(color.domain().slice().reverse())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 20})`);\n\n g.append(\"rect\")\n .attr(\"x\", -19)\n .attr(\"width\", 19)\n .attr(\"height\", 19)\n .attr(\"fill\", color);\n\n g.append(\"text\")\n .attr(\"x\", -24)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"x0 = d3.scaleBand()\n .domain(dataNew.dat.map(d => d[groupKey]))\n .rangeRound([margin.left, width - margin.right])\n .paddingInner(0.15)","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"x1 = d3.scaleBand()\n .domain(keys)\n .rangeRound([0, x0.bandwidth()])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(dataNew.dat, d => d3.max(keys, key => d[key]))]).nice()\n .rangeRound([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"legendDistanceFromRight = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"color = d3_v5.scaleOrdinal(d3_v5.quantize(colorType, keys.length))","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"colorType = d3.interpolate(\"rgb(10, 100, 220)\", \"red\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x0).tickSizeOuter(0))\n .attr(\"font-size\", xAxisFontSize)\n .selectAll(\"text\").call(wrap, x0.bandwidth())\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", -10)\n .attr(\"y\", -20)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(dataNew.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"groupKey = dataNew.columns[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"margin = ({top: 90, right: 120, bottom: 50, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"xAxisFontSize = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"titleSize = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"legendTextSize = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"tooltipSize = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"titleText = \"Net Popularity Index vs Sentiment Score\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"yAxisText = \"Score\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"height = 450","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"keys = Object.keys(view_sentiment_array[0]).slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"dataNew = (\n {\n \"dat\": view_sentiment_array,\n \"columns\": [\"category\", \"net_popularity_per_view\", \"sentiment_scores\"],\n \"y\": yAxisText\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"#### Design 2 - Code","pinned":false,"hidden":false,"mode":"md"},{"id":477,"value":"color_D2 = d3_v5.scaleOrdinal(d3_v5.quantize(colorType_D2, keys_D2.length))","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"colorType_D2 = d3.interpolate(\"rgb(148, 220, 121)\", \"red\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"x0_D2 = d3.scaleBand()\n .domain(dataDesign2.dat.map(d => d[groupKey_D2]))\n .rangeRound([margin.left, width - margin.right])\n .paddingInner(0.15)","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"x1_D2 = d3.scaleBand()\n .domain(keys_D2)\n .rangeRound([0, x0_D2.bandwidth()])\n .padding(0.05)","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"y_D2 = d3.scaleLinear()\n .domain([0, d3.max(dataDesign2.dat, d => d3.max(keys_D2, key => d[key]))]).nice()\n .rangeRound([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"yAxis_D2 = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y_D2).ticks(null, \"s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", -10)\n .attr(\"y\", -20)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(dataDesign2.y_D2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"xAxis_D2 = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x0_D2).tickSizeOuter(0))\n .attr(\"font-size\", xAxisFontSize)\n .selectAll(\"text\").call(wrap, x0_D2.bandwidth())\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"groupKey_D2 = dataDesign2.columns[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"keys_D2 = Object.keys(dataModified[0]).slice(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"yAxisText_D2 = \"Score\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":282,"value":"function zoom_D2(svg) {\n const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]];\n\n svg.call(d3.zoom()\n .scaleExtent([1, 8])\n .translateExtent(extent)\n .extent(extent)\n .on(\"zoom\", zoomed));\n\n function zoomed(event) {\n x0_D2.range([margin.left, width - margin.right].map(d => event.transform.applyX(d)));\n svg.selectAll(\"rect\").data(data.dat)\n .attr(\"x\", d => x0_D2(d[groupKey_D2])).attr(\"width\", x0_D2.bandwidth())\n // .attr(\"transform\", d => `translate(${x0(d[groupKey])},0)`)\n .data(d => keys_D2.map(key => ({key, value: d[key]}))).selectAll(\"rect\")\n .attr(\"x\", d => x1_D2(d.key)).attr(\"width\", x1_D2.bandwidth());\n svg.selectAll(\".x-axis\").call(xAxis_D2);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"viewsTotalByCategory = d3.rollup(\n data,\n v => v.length, //Aggregate by the sum of amount\n d => d.category, // group first by name\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"r1=Array.from(viewsTotalByCategory, ([categories, counts]) => {\n \n \n // result.week = Array.from(counts.values());\n // result.week.day= Array.from(counts.keys());\n return categories;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"r2=Array.from(viewsTotalByCategory, ([categories, counts]) => {\n \n \n // result.week = Array.from(counts.values());\n // result.week.day= Array.from(counts.keys());\n return counts;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"viewCountByCategories={const result = {};\nfor (let index = 0; index < r1.length; ++index) {\n result[r1[index]] = r2[index];\n}\n return result\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"mutable desiredCategory=\"Music\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"arc = d3\n .arc()\n .innerRadius(0)\n .outerRadius(radius)","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"colorSeq = d3_v5\n .scaleSequential()\n .domain([0, pieData.length])\n .interpolator(d3_v5.interpolateRainbow)","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"pieData = pie(d3_v5.entries(viewCountByCategories))","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"d3_v5 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"d4 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"pie = d3.pie().value(d => d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"labelHeight = 18","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"// radius = Math.min(width, height) / 2\nradius = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"dataDesign2 = (\n {\n \"dat\": dataModified,\n \"columns\": [\"month_year\", \"likes\", \"dislikes\"],\n \"y\": yAxisText\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"map1={const map = {\n 'Mon': 2,'Tue': 3,'Wed': 4,'Thu': 5,'Fri': 6,'Sat': 7,\n 'Sun': 1\n};\n return map}","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"dataBarChart4 = (week_array.filter(i=>i.category == desiredCategory).map(i=>i.week))[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"desiredCategory","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"dataBarChart2= dataBarChart4.sort((a, b) => {\n return map1[a.day] - map1[b.day];\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"import {howto, altplot} from \"@d3/example-components\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"dataBarChart3 = (days_to_trend_array.filter(i=>i.category == desiredCategory).map(i=>i.week))[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"mutable hoverCategory = \"Gaming\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"textPieChart1 = \"Category:\" + hoverCategory","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"textPieChart2 = \"; No of Videos: \" + viewCountByCategories[hoverCategory];","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"mutable colorTemp = \"\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"onMouseOut = function(d, i) {\n d3_v5.select(this).attr('style', 'fill: colorTemp')\n d3_v5.select(this).style(\"cursor\", \"default\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"onMouseOver = function(d, i) {\n mutable colorTemp = colorSeq(d.index);\n d3.select(this).attr('style', 'fill: pink;');\n mutable hoverCategory = d.data.key \n d3_v5.select(this).style(\"cursor\", \"pointer\");\n // d3.select(\"#toptext\").text(`Category: ${i.category}`);\n // d3.select(\"#toptext\").text(`No Of Videos: ${viewCountByCategories[hoverCategory]}`);\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"legend_D2 = svg => {\n const g = svg\n .attr(\"transform\", `translate(${width-legendDistanceFromRight},${margin.top})`)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", legendTextSize)\n .selectAll(\"g\")\n .data(color_D2.domain().slice().reverse())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${i * 20})`);\n\n g.append(\"rect\")\n .attr(\"x\", -19)\n .attr(\"width\", 19)\n .attr(\"height\", 19)\n .attr(\"fill\", color_D2);\n\n g.append(\"text\")\n .attr(\"x\", -24)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"titleText_D2 = \"Likes vs Dislikes over a period of Time for Category: \" + desiredCategory","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"dataModified = (month_year_array.filter(i=>i.category == desiredCategory).map(i=>i.week))[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"#### Design 3 - Code","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"#### Design 4 - Code","pinned":false,"hidden":false,"mode":"md"},{"id":422,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"import {Legend1} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}