29:null 2a:["$","title",null,{"children":"Modal | Diego Portillo's Workspace | Observable"}] 2f:T55a,chart = { const elem = DOM.element('div'); elem.id = "chart-container"; let divModalOverlay = html``; elem.appendChild(divModalOverlay); divModalOverlay.classList.toggle("closed"); let divModal = html``; divModal.classList.toggle("closed"); elem.appendChild(divModal); d3.select(divModal).select("#close-button") .on("click", () => { d3.select("#my-modal").node().classList.toggle("closed"); d3.select("#my-modal-overlay").node().classList.toggle("closed"); //d3.select("#my-modal").node().classList.remove("fadeIn"); //d3.select("#my-modal").node().classList.add("fadeOut"); //d3.select("#my-modal-overlay").node().classList.remove("fadeIn"); //d3.select("#my-modal-overlay").node().classList.add("fadeOut"); d3.event.stopPropagation(); }); createChart(elem); return elem; }30:T7c2,function createChart(parent) { const root = pack(data); const leaves = root.leaves().filter(d => d.depth && d.value); const svg = d3 .select(parent) .append("svg") //.style("width", width) //.style("height", height) .style("background", "#fff") .style("font", "10px sans-serif") .attr("text-anchor", "middle") .attr("viewBox", [0, 0, width, height]) .attr("preserveAspectRatio", "xMinYMin meet"); svg.append("g") .selectAll("circle") .data(leaves) .enter().append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r) .attr("fill", d => color(d.data.name)) .style("cursor", "pointer") .on("click", (d) => { d3.select("#my-modal").node().classList.toggle("closed"); d3.select("#my-modal-overlay").node().classList.toggle("closed"); //d3.select("#my-modal").node().classList.toggle("fadeIn"); //d3.select("#my-modal-overlay").node().classList.toggle("fadeIn"); d3.select("#my-modal").select("h1").text(d.data.name); d3.select("#my-modal").select("p").text(format(d.data.count)); d3.event.stopPropagation(); }); svg.append("g") .attr("pointer-events", "none") .selectAll("text") .data(leaves) .enter().append("text") .attr("transform", d => { const {lines, radius} = fit(d.data.name, isNaN(d.data.count) ? undefined : format(d.data.count)); d.lines = lines; if (!isNaN(d.data.count)) d.lines[d.lines.length - 1].count = true; return `translate(${d.x},${d.y})`; }) .selectAll("tspan") .data(d => d.lines) .enter().append("tspan") .attr("x", 0) .attr("y", (d, i, data) => (i - data.length / 2 + 0.8) * 11) .text(d => d.text) .filter(d => d.value) .attr("font-weight", 300) .attr("fill-opacity", 0.5); return svg.node(); //return autosize(svg.node()); }31:T44a,function fit(text, value) { let line; let lineWidth0 = Infinity; const lineHeight = 12; const targetWidth = Math.sqrt(measureWidth(text.trim()) * lineHeight); const words = text.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/ if (!words[words.length - 1]) words.pop(); if (!words[0]) words.shift(); const lines = []; for (let i = 0, n = words.length; i < n; ++i) { let lineText1 = (line ? line.text + " " : "") + words[i]; let lineWidth1 = measureWidth(lineText1); if ((lineWidth0 + lineWidth1) * 0.4 < targetWidth) { line.width = lineWidth0 = lineWidth1; line.text = lineText1; } else { lineWidth0 = measureWidth(words[i]); line = {width: lineWidth0, text: words[i]}; lines.push(line); } } if (value !== undefined) lines.push({width: measureWidth(value), text: value}); let radius = 0; for (let i = 0, n = lines.length; i < n; ++i) { const dy = (Math.abs(i - n / 2 + 0.5) + 0.5) * lineHeight; const dx = lines[i].width / 2; radius = Math.max(radius, Math.sqrt(dx ** 2 + dy ** 2)); } return {lines, radius}; }32:T823,myCSSStyle = html`

Modal Example