31:Tbf4,

Net Popularity Index vs Sentiment Scores

Below is the visualisation where we map the derived data "Net Popularity Index" against the calculated sentiment scores.
The purpose of this visualisation is to find the correlation between sentiment analysis results and the general viewing trend of people.
Hovering over the below graph gives the exact values of the particular score and their comparison.
Net Popularity Index is calculated as follows:
1. The net popularity of a specific video will be the subtraction of "Number of Likes" and "Number of Dislikes"
2. The net popularity index of a specific video will be the division of "Net Popularity" and "Number of Views"
3. Further more the values are normalised on a scale of 0 to 1 to make it comparable to the sentiment score
Important inference like the following ones can be concluded from this visualization:
1. The general trend between sentiment score and Net Popularity index appears to be linear, as expected.
2. More positive the sentiment, more the net popularity index of the category.
3. The News and Politics section which appears to have the least sentiment score, appears to be the least favorite among the viewers,
  this can be interpreted as Politics videos dividing the viewers as number of Likes and Dislikes are almost equal.
4. Comedy appears to be the most popular and liked category of the lot. This conclusion is expected as well, because who doesn't like laughing?
5. Science & Technology, and Travel videos which are generally positive in sentiment aren't as popular as expected.
6. If the video uploaded did not trend within 10 days of publishing, the chances of trending are slim to none.
7. The number of Education videos uploaded on weekends is very less compared to weekdays.
8. People & Blog videos are evenly spread out during the week.

32: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(); }33:T8a6,

Category wise feature visualization

In the below dashboard, the pie chart denotes the video distribution by different categories.
If you hover on the pie chart, you can see the category and number of videos below change in real time.
Clicking on a category shows the different properties specific to that category in the following three charts.
1. The number of Likes vs Dislikes over the period of time.
2. Number of videos released on each day of the week.
3. No of days taken for the videos to trend.
Important inference like the following ones can be concluded from this visualization:
1. Most of the music videos are published on Fridays and most of them trend in 2-3 days utilizing the weekend.
2. Most of the News & Politics videos are published on Mondays indicating the start of a working week.
3. Novermber of 2020 indicates the most number of disliked for political videos in general, indicating the possible divide
because of the Presidential Elections.
4. November and December has seen the most number of video uploads from Comedy, indicating the overall sentiment
taking into the account the holiday season.
5. If the video uploaded did not trend in 10 days of publishing, the chances of trending are slim to none.
6. The number of Education videos uploaded on weekend is very less compared to weekdays.
6. People & Blog videos are evenly spread out during the week.

34: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(); }35: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(); }36:T703,

Sentiment Category Distribution for top-n categories based on popularity

Clicking on a category shows the sentiment category distribution for it, based on popularity.
Popularity is calculated as follows:
Popularity is set to "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 center circle to revert to the previous visualization.
We can answer the correlation between video popularity with the sentiment score with this visualization.
Also, this visualization gives us an overview of the distribution of sentiment categories for the top-n categories in the dataset.

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

37:T18e2,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(); }38:T888,

Average Sentiment Scores Trend (per day)

The chart displays the sentiment scores across all categories for each day mapped to a scale that might help understand
the variations througout the period for which the data has been collected.
The visualization attempts to answer our domain question - "Is negative sentiment increasing over time, or are there
noticeable patterns on how a video trends with respect to the sentiment for a given year?"
Except for few months such as January and February 2022, April, June, and July 2021, the general sentiment of the trending
videos are generally positive.
Unusual spike in negative sentiment in the aforementioned months can be explained by Capitol Hill incident (January 2022),
COVID pandemic peak (Delta phase of COVID from April 2021 - June 2021).
The original design was to link the calendar chart to a multi-series line chart showing the sentiment score trend for each category.
A brushable interaction was planned to achieve this visualization (yet to be completed).

Hover your mouse over the calendar chart to see more information: date along with the corresponding average sentiment score

39: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(); }3a: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; }3b: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}}); }3c:[] 2f:{"title":"Trending YouTube Videos Visualizations","cells":[{"id":231,"value":"# Trending YouTube Videos Visualizations","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"\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":15,"value":"# Design 1","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":87,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"# Design 2","pinned":false,"hidden":false,"mode":"md"},{"id":314,"value":"## PIE CHART 1: Categories","pinned":false,"hidden":false,"mode":"md"},{"id":542,"value":"$33","pinned":false,"hidden":false,"mode":"html"},{"id":196,"value":"textPieChart1 + textPieChart2","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"## BAR CHART 1: Likes vs Dislikes for different categories","pinned":false,"hidden":false,"mode":"md"},{"id":214,"value":"$35","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":218,"value":"## BAR CHART 2: No of Videos vs Publishing date","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: 500,\n color: \"#3288bd\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"## BAR CHART 3: No of Days to Trend (Category-wise)","pinned":false,"hidden":false,"mode":"md"},{"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: 500,\n color: \"rgb(108,99,255)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"# Design 3","pinned":false,"hidden":false,"mode":"md"},{"id":349,"value":"$36","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":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"# Design 4","pinned":false,"hidden":false,"mode":"md"},{"id":482,"value":"$38","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":"$39","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":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"#### Design 4 - Code","pinned":false,"hidden":false,"mode":"md"},{"id":422,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"import {Legend1} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}