2c:null 2d:["$","title",null,{"children":"LGBTQ Movies from Different Languages | Deepali Kank | Observable"}] 32:T1dc8,chart = { // Define the chart dimensions const width = 400; const height = 400; // Create the SVG container const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "background-color: black;"); // Extract unique original languages const originalLanguages = [...new Set(data.map((d) => d.original_language))]; // Define LGBTQ+ theme colors const lgbtqColors = [ "#FF0000", // Red "#FF8D00", // Orange "#FFEE00", // Yellow "#008E00", // Green "#004DFF", // Blue "#750087" // Purple ]; // Create a color scale for languages using LGBTQ+ colors const languageColorScale = d3 .scaleOrdinal(lgbtqColors) .domain(originalLanguages); const popularityScale = d3 .scaleLinear() .domain(d3.extent(data, (d) => d.popularity)) .range([4, 7]); // Create gradients for each language const defs = svg.append("defs"); originalLanguages.forEach((lang) => { const gradient = defs .append("radialGradient") .attr("id", `gradient-${lang}`); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", languageColorScale(lang)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", d3.color(languageColorScale(lang)).darker(3)); }); // Create the pack layout const pack = (data) => d3 .pack() .size([width - 2, height - 2]) .padding(3)(d3.hierarchy({ children: data }).sum((d) => d.popularity)); // Improved function to fit text into circle function fitTextIntoCircle(selection, getCircleDiameter) { selection.each(function (d) { const text = d3.select(this); const words = d.data.title.split(/\s+/); const circleDiameter = getCircleDiameter(d); const lineHeight = 1.5; // ems const maxLines = Math.floor(circleDiameter / (8 * lineHeight)); let lines = []; let line = []; text.text(null).attr("dy", "0.35em"); for (let word of words) { let testLine = [...line, word].join(" "); let testTspan = text.append("tspan").attr("x", 0).text(testLine); if ( testTspan.node().getComputedTextLength() > circleDiameter * 0.8 || lines.length >= maxLines - 1 ) { if (line.length === 0) { // If a single word is too long, truncate it testTspan.text(word.slice(0, 8) + "..."); lines.push(word.slice(0, 8) + "..."); break; } lines.push(line.join(" ")); line = [word]; if (lines.length >= maxLines) { lines[lines.length - 1] += "..."; break; } } else { line.push(word); } testTspan.remove(); } if (line.length > 0 && lines.length < maxLines) { lines.push(line.join(" ")); } // Center the text vertically const startY = (-(lines.length - 1) * lineHeight) / 2; lines.forEach((lineText, i) => { text .append("tspan") .attr("x", 0) .attr("y", startY + i * lineHeight + "em") .text(lineText); }); }); } // Function to update the chart based on selected language function updateChart(selectedLanguage) { const filteredData = selectedLanguage === "All" ? data : data.filter((d) => d.original_language === selectedLanguage); const root = pack(filteredData); const node = svg .selectAll("g.node") .data(root.leaves(), (d) => d.data.title) .join( (enter) => enter .append("g") .attr("class", "node") .attr("transform", (d) => `translate(${d.x + 1},${d.y + 1})`) .call((enter) => { enter .append("circle") .attr("r", 0) .attr( "fill", (d) => `url(#gradient-${d.data.original_language})` ) .attr("opacity", (d) => popularityScale(d.data.popularity)) .attr("stroke", "#000") .attr("stroke-width", 0.5); enter .append("text") .attr("opacity", 0) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("pointer-events", "none"); }), (update) => update, (exit) => exit .call((exit) => exit.select("circle").transition().duration(750).attr("r", 0) ) .transition() .duration(750) .remove() ); node .transition() .duration(750) .attr("transform", (d) => `translate(${d.x + 1},${d.y + 1})`); node .select("circle") .transition() .duration(750) .attr("r", (d) => d.r) .attr("opacity", (d) => popularityScale(d.data.popularity)); node .select("text") .text((d) => (d.r > 20 ? d.data.title : "")) .attr("opacity", (d) => (d.r > 20 ? 1 : 0)) .style("font-size", (d) => `${Math.min(d.r / 5, 12)}px`) .style("fill", "white") .style("font-family", "Roboto Condensed") .call((selection) => fitTextIntoCircle(selection, (d) => d.r * 2)); // Transition for text node .select("text") .transition() .duration(750) .attr("opacity", (d) => (d.r > 20 ? 1 : 0)); // Apply event listeners to all circles node .select("circle") .on("mouseover", showTooltip) .on("mousemove", moveTooltip) .on("mouseout", hideTooltip); } // Tooltip functions function showTooltip(event, d) { d3.select(this).attr("stroke-width", 2); tooltip .style("opacity", 1) .html( `Title: ${d.data.title}
Original Language: ${ d.data.original_language }
Popularity: ${d.data.popularity.toFixed(2)}` ) .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY - 10}px`); } function moveTooltip(event) { tooltip .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY - 10}px`); } function hideTooltip() { d3.select(this).attr("stroke-width", 0.5); tooltip.style("opacity", 0); } // Create language filter dropdown const filterContainer = d3.create("div"); filterContainer .append("label") .attr("for", "language-select") .text("Select Original Language: ") .style("fill", "white"); const select = filterContainer .append("select") .attr("id", "language-select") .on("change", function () { updateChart(this.value); }); select.append("option").attr("value", "All").text("All"); select .selectAll("option.language") .data(originalLanguages) .join("option") .attr("value", (d) => d) .text((d) => d); // Create tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("background-color", "rgba(0, 0, 0, 0.8)") .style("color", "white") .style("border", "solid") .style("border-width", "1px") .style("border-radius", "5px") .style("padding", "10px") .style("pointer-events", "none") .style("transition", "opacity 0.3s"); // Initial chart render updateChart("All"); // Return the combined filter and chart return d3 .create("div") .call((div) => div.append(() => filterContainer.node())) .call((div) => div.append(() => svg.node())) .node(); }33:[{"id":"5009d81c1d6898132f6c3531c7b289e2b03151bf7418e131449cd741dfb40c0dcaa43cb09448ad4c676425b38c859973461200d001cbba8b88ea6ff9eee65267","href":"https://static.observableusercontent.com/files/5009d81c1d6898132f6c3531c7b289e2b03151bf7418e131449cd741dfb40c0dcaa43cb09448ad4c676425b38c859973461200d001cbba8b88ea6ff9eee65267","name":"lgbtq_movies.csv","type":"text/csv","lastModified":1719121765366.447,"size":2765072}] 30:{"id":"61101825e0e9fc54","slug":null,"title":"LGBTQ Movies from Different Languages","thumbnail":"e5a8fb613b14c93c5952905d1a41f55c4013178bc7afef1d78296c10df30aa82","access_level":"public","create_time":"$D2024-06-23T05:48:43.965Z","update_time":"$D2024-06-24T04:46:00.877Z","view_time":null,"first_public_time":"$D2024-06-23T13:59:57.928Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024"},"version":120,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null}],"members":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null,"role":"editor"},{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"LGBTQ Movies from Different Languages","cells":[{"id":0,"value":" \n\n

LGBTQ Movies from Different Languages

Highlighting the Popularity of Global LGBTQ Films

\n\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = await FileAttachment(\"lgbtq_movies.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data","database":"$undefined"},{"id":42,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"