2b:null 2c:["$","title",null,{"children":"Simple Bootstrap Modal | stefandee | Observable"}] 31:T54a,chart = { //initCSS(); const elem = DOM.element('div'); elem.id = "chart-container"; // create the visualisation first createChart(elem); // uncomment this if you want to play around the popup triggered from another bootstrap entity /*let button = html``; elem.appendChild(button);*/ // setup the modal let divModal = html``; elem.appendChild(divModal); return elem; }32:T79d,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", "100%") .style("height", "auto") .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) => { // handler to update modal data (title and content) $('#exampleModalCenter').on('show.bs.modal', function(e) { // update the modal header $(e.currentTarget).find('#exampleModalLongTitle').text(d.data.name); // update the modal content $(e.currentTarget).find('p').text(d.data.count); }); $('#exampleModalCenter').modal('show'); }); 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()); }33: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}; }34:[] 2f:{"id":"4311aff4cc7b40ad","slug":"bootstrap-modal","title":"Simple Bootstrap Modal","thumbnail":"d08b539d407fd2c5a58ab555812fb30dc1b00fddb1027e47f891ce94f9eba7b3","access_level":"public","create_time":"$D2020-05-25T15:37:44.100Z","update_time":"$D2020-05-25T17:04:10.401Z","view_time":null,"first_public_time":"$D2020-05-25T16:40:24.449Z","fork":{"id":"6aaaefa5c3e309ae","slug":"modal","title":"Modal","owner":{"id":"c1c387e974c51c52","login":"stefandee","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"c1c387e974c51c52","login":"stefandee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/edd8954a86c61988095dc9138d33674067d55974e1e0f6eee98a265b7eee9417","tier":"starter_2024"},"version":345,"publish_version":345,"role":null,"authored":false,"authors":[{"type":"individual","id":"0265278b6feb34ae","login":"stefandee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/edd8954a86c61988095dc9138d33674067d55974e1e0f6eee98a265b7eee9417","tier":null}],"members":[{"type":"individual","id":"0265278b6feb34ae","login":"stefandee","name":"","avatar_url":"https://avatars-next.observableusercontent.com/edd8954a86c61988095dc9138d33674067d55974e1e0f6eee98a265b7eee9417","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Simple Bootstrap Modal","cells":[{"id":0,"value":"md`# Simple Bootstrap Modal\n\nTap a bubble to bring up a modal/popup. Shows how to pass data from the chart to the modal using \"show.bs.modal\" event.\n\nBootstrap boilerplate code from https://observablehq.com/@aaronkyle/bootstrap-boilerplate\n\nModal setup from https://getbootstrap.com/docs/4.0/components/modal\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"function autosize(svg) {\n document.body.appendChild(svg);\n const box = svg.getBBox();\n document.body.removeChild(svg);\n svg.setAttribute(\"viewBox\", `${box.x - 1} ${box.y - 1} ${box.width + 2} ${box.height + 2}`);\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"measureWidth = {\n const context = document.createElement(\"canvas\").getContext(\"2d\");\n return text => context.measureText(text).width;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"color = d3.scaleOrdinal(data.map(d => d.group), d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"pack = data => {\n let alt = d3.median(data, d => d.value);\n if (!alt) alt = 1;\n return d3.pack()\n .size([width, height])\n .padding(3)\n (d3.hierarchy({children: data})\n .sum(d => isNaN(d.count) ? alt : d.count));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"diameter = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = [{name:\"Drama\", count:1046790}, {name: \"Comedy\", count:1039358}, {name:\"Documentary\", count:461880}, {name:\"News\", count:308136}, {name:\"Talk-Show\", count:270578},{name:\"Action\", count:226334}, {name:\"Animation\", count:197342}, {name:\"Reality-TV\", count:189739}, {name:\"Crime\", count:175272}, {name:\"Family\", count:150621}, {name:\"Short\", count:138255}, {name:\"Adventure\", count:121216}, {name:\"Game-Show\", count:119912}, {name:\"Music\", count:102488}, {name:\"Adult\", count:90157}, {name:\"Biography\", count:59307}, {name:\"Sport\", count:58999}, {name:\"Romance\", count:52776}, {name:\"Horror\", count:50800}, {name:\"Fantasy\", count:22614}, {name:\"Sci-Fi\", count:22026}, {name:\"Thriller\", count:19706}, {name:\"Mystery\", count:18274}, {name:\"History\", count:16108}, {name:\"Western\", count:12535}, {name:\"Musical\", count:12240}, {name:\"War\", count:1992}, {name:\"Film-Noir\", count:36}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"html`css `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"$$ = require('jquery').then(jquery => {\n window.jquery = jquery;\n return require('popper@1.0.1/index.js').catch(() => jquery);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"bootstrap = require('bootstrap@4.4.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"