29:null 2a:["$","title",null,{"children":"Song Lyrics Analysis | Di Wu | Observable"}] 2f:T10ab,function cloud(genre, w=650, h=400, rangeLow=5, rangeHigh=100) { const marginTop = 0; // top margin, in pixels const marginRight = 0; // right margin, in pixels const marginBottom = 0; // bottom margin, in pixels const marginLeft = 0; // left margin, in pixels const width = w; // outer width, in pixels const height = h; // outer height, in pixels const maxWords = 500; // maximum number of words to extract from the text const fontFamily = "sans-serif"; // font family // const fontScale = 50; // base font size const padding = 0; // amount of padding between the words (in pixels) const rotate = 0; // a constant or function to rotate the words const frequency = genre === "all" ? words_frequency(): words_freq_by_genre(genre) // ------ if (frequency.length > 0){ if (is_TF_IDF.length == 1){ var max_frequency = frequency[0].TF_IDF; var min_frequency = frequency[frequency.length-1].TF_IDF; // var fontScale = 65 / Math.pow(max_frequency, 1/1.5); var fontScale = 1; } else{ var max_frequency = frequency[0].frequency var min_frequency = frequency[frequency.length-1].frequency; var fontScale = 100 / Math.sqrt(max_frequency); } } const f_rescale = d3.scalePow() .domain([min_frequency, max_frequency]) .range([rangeLow, rangeHigh]); // Filter data base off selection //const data = words_frequency.filter() if (is_TF_IDF.length == 1) var data = frequency.map(d => ({text: d.word, size: parseInt(f_rescale(d.TF_IDF)), frequency:d.TF_IDF, genre:d.genre})); // var data = words_frequency.map(d => ({text: d.word, size: Math.pow(d.TF_IDF, 1/1.5), frequency:d.TF_IDF, genre:d.genre})); else var data = frequency.map(d => ({text: d.word, size:Math.sqrt(d.frequency), frequency:d.frequency, genre:d.genre})); // const data = words_frequency.slice(0, 200).map(d => ({text: d.word, size: d.frequency/50, frequency:d.frequency})); // return data // End filter if (genre === 'r&b') { genre = 'rnb'; } const svg = d3.create("svg") .attr("id", `#cloud_${genre}`) .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("font-family", fontFamily) .attr("text-anchor", "middle") .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const g = svg.append("g").attr("transform", `translate(${marginLeft},${marginTop})`); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("background-color", "white") .style("padding", "5px") .style("border-radius", "5px") .style("box-shadow", "0 0 5px rgba(0, 0, 0, 0.1)") .style("pointer-events", "none"); const cloud = d3Cloud() .size([width - marginLeft - marginRight, height - marginTop - marginBottom]) .words(data) .padding(padding) .rotate(rotate) .font(fontFamily) .fontSize(d => d.size * fontScale) // .random(function(d) { return 1; }) // So the word cloud is consistent at every refresh .on("word", ({size, x, y, rotate, text, frequency, genre}) => { g.append("text") .attr("font-size", size) .attr("transform", `translate(${x},${y}) rotate(${rotate})`) // .attr("fill", "steelblue") .attr("fill", d => color(genre)) .text(text) // -------- Hover -------- .on("mouseover", (event) => { tooltip.transition() .duration(200) .style("opacity", 1); // Add the word itself to the tooltip as the title tooltip.html( "" + text + "
Mostly appeared in: " + genre+ "
Frequency: " + frequency) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px") .style("font-size", "12px"); }) .on("mouseout", () => { tooltip.transition() .duration(500) .style("opacity", 0); }); // ^^^^^^^^ Hover ^^^^^^^^ }); cloud.start(); invalidation && invalidation.then(() => cloud.stop()); return svg.node(); }30:T47f,function bubble_plot_add(width, height, data, filter, opacity, choice, x_selection, y_selection) { if (choice && filter != "All") data = data.filter(item => item.genre == filter); // mutable exist_dot = 0; const plot = Plot.plot({ width: width, height: height, grid: true, marks: [ Plot.dot(data, { x: x_selection, y: y_selection, r: "popularity", fill: d => { if (filter == "All" || filter == d.genre) return dotColor(d.genre); else return null; }, stroke: d => { if (selected_artists.includes(d.artist)) { // mutable exist_dot = 1; return highlightColor(d.genre); } else if (selected_songs.includes(d.track_name)) { // mutable exist_dot = 1; return highlightColor(d.genre); } else return "none"; }, strokeWidth: 3, fillOpacity: opacity, title: (d) => `${d.track_name}\nby ${d.artist}\n${d.release_date.toISOString().substr(0, 7)}\nGenre: ${d.genre}\nPopularity: ${d.popularity}\n` }) ], }) return plot }31:T462,function bubble_plot(width, height, data, filter, opacity, choice) { if (choice && filter != "All") data = data.filter(item => item.genre == filter); // mutable exist_dot = 0; const plot = Plot.plot({ width: width, height: height, grid: true, marks: [ Plot.dot(data, { x: "release_date", y: "words_num", r: "popularity", fill: d => { if (filter == "All" || filter == d.genre) return dotColor(d.genre); else return null; }, stroke: d => { if (selected_artists.includes(d.artist)) { // mutable exist_dot = 1; return highlightColor(d.genre); } else if (selected_songs.includes(d.track_name)) { // mutable exist_dot = 1; return highlightColor(d.genre); } else return "none"; }, strokeWidth: 3, fillOpacity: opacity, title: (d) => `${d.track_name}\nby ${d.artist}\n${d.release_date.toISOString().substr(0, 7)}\nGenre: ${d.genre}\nPopularity: ${d.popularity}` }) ], }) return plot }32:Tcf4,addTooltips = (chart, styles) => { const stroke_styles = { stroke: "blue", "stroke-width": 3 }; const fill_styles = { fill: "blue", opacity: 0.5 }; const stroke_select = { stroke:"yellow", "stroke-width": 3 }; // Workaround if it's in a figure const type = d3.select(chart).node().tagName; let wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); // Workaround if there's a legend.... const svgs = d3.select(chart).selectAll("svg"); if (svgs.size() > 1) wrapper = d3.select([...svgs].pop()); wrapper.style("overflow", "visible"); // to avoid clipping at the edges // Set pointer events to visibleStroke if the fill is none (e.g., if its a line) wrapper.selectAll("path").each(function (data, index, nodes) { // For line charts, set the pointer events to be visible stroke if ( d3.select(this).attr("fill") === null || d3.select(this).attr("fill") === "none" ) { d3.select(this).style("pointer-events", "visibleStroke"); if (styles === undefined) styles = stroke_styles; } }); if (styles === undefined) styles = fill_styles; const tip = wrapper .selectAll(".hover") .data([1]) .join("g") .attr("class", "hover") .style("pointer-events", "none") .style("text-anchor", "start"); // Add a unique id to the chart for styling const id = id_generator(); // Add the event listeners d3.select(chart).classed(id, true); // using a class selector so that it doesn't overwrite the ID wrapper.selectAll("title").each(function () { // Get the text out of the title, set it as an attribute on the parent, and remove it const title = d3.select(this); // title element that we want to remove const parent = d3.select(this.parentNode); // visual mark on the screen const t = title.text(); if (t) { parent.attr("__title", t).classed("has-title", true); title.remove(); } // Mouse events parent .on("pointerenter pointermove", function (event) { const text = d3.select(this).attr("__title"); const pointer = d3.pointer(event, wrapper.node()); if (text) tip.call(hover, pointer, text.split("\n")); else tip.selectAll("*").remove(); // Raise it d3.select(this).raise(); // Keep within the parent horizontally const tipSize = tip.node().getBBox(); if (pointer[0] + tipSize.x < 0) tip.attr( "transform", `translate(${tipSize.width}, ${pointer[1] + 7})` ); else if (pointer[0] + tipSize.width > wrapper.attr("width")) tip.attr( "transform", `translate(${wrapper.attr("width") - tipSize.width}, ${ pointer[1] + 7 })` ); }) .on("pointerout", function (event) { tip.selectAll("*").remove(); // Lower it! d3.select(this).lower(); }); }); // Remove the tip if you tap on the wrapper (for mobile) wrapper.on("touchstart", () => tip.selectAll("*").remove()); // Define the styles chart.appendChild(html`