30:T5830,class NetworkChart { constructor() { const attrs = { id: 'ID' + Math.floor(Math.random() * 1000000), svgWidth: 175, svgHeight: 175, marginTop: 5, marginBottom: 5, marginRight: 5, marginLeft: 5, container: 'body', defaultTextFill: '#2C3E50', defaultFont: 'Helvetica', duration: 500, initialDuration: 500, slowDuration: 2000, firstRender: true, initialLinkColor: '#555', normalCircleRadius: 33, rootCircleRadius: 50, isTree: false, transitionEase: d3.easeBack, dropShadowId: 'drop-shadow-id', onNodeMouseEnter: d => d, onNodeMouseLeave: d => d, data: null }; this.getState = () => attrs; this.setState = d => Object.assign(attrs, d); Object.keys(attrs).forEach(key => { if (!this[key]) { //@ts-ignore this[key] = function(_) { var string = `attrs['${key}'] = _`; if (!arguments.length) { return eval(`attrs['${key}'];`); } eval(string); return this; }; } }); this.initializeEnterExitUpdatePattern(); } setAutoBox({ svg }) { const node = svg.node(); const { x, y, width, height } = node.getBBox(); const result = [x, y, width, height]; svg.attr('viewBox', result); } initializeEnterExitUpdatePattern() { d3.selection.prototype.patternify = function(params) { var container = this; var selector = params.selector; var elementTag = params.tag; var data = params.data || [selector]; // Pattern in action var selection = container.selectAll('.' + selector).data(data, (d, i) => { if (typeof d === 'object') { if (d.id) { return d.id; } } return i; }); selection.exit().remove(); selection = selection .enter() .append(elementTag) .merge(selection); selection.attr('class', selector); return selection; }; } // ================== RENDERING =================== render() { const state = this.getState(); this.setDynamicContainer(state); this.calculateProperties(state); this.createTree(state); this.computeNodeAndLinkData(state); this.drawSvgAndWrappers(state); this.createShadowsAndGradients(); this.drawLinks(state); this.drawNodes(state); this.setAutoBox(state); this.setState({ firstRender: false }); return this; } setDynamicContainer() { const attrs = this.getState(); //Drawing containers var container = d3.select(attrs.container); var containerRect = container.node().getBoundingClientRect(); //if (containerRect.width > 0) attrs.svgWidth = containerRect.width; this.setState({ container }); } calculateProperties() { const attrs = this.getState(); //Calculated properties var calc = { id: null, chartTopMargin: null, chartLeftMargin: null, chartWidth: null, chartHeight: null }; calc.id = 'ID' + Math.floor(Math.random() * 1000000); // id for event handlings calc.chartLeftMargin = attrs.marginLeft; calc.chartTopMargin = attrs.marginTop; calc.chartWidth = attrs.svgWidth - attrs.marginRight - calc.chartLeftMargin; calc.chartHeight = attrs.svgHeight - attrs.marginBottom - calc.chartTopMargin; calc.radius = calc.chartWidth / 2; calc.centerX = calc.chartWidth / 2; calc.centerY = calc.chartHeight / 2; if (attrs.svgWidth < 850) { this.setState({ normalCircleRadius: 26 }); this.setState({ rootCircleRadius: 40 }); } this.setState({ calc }); } // Retrieve links and nodes computeNodeAndLinkData({ root }) { const nodesData = root.descendants(); const linksData = root.links(); this.setState({ nodesData, linksData }); } createId() { return ( Date.now().toString(36) + Math.random() .toString(36) .substr(2) ); } // Create shadows for lines and gradient for hover lines createShadowsAndGradients() { const { svg, dropShadowId } = this.getState(); // Initialize shadow properties const color = '#66FCF1'; const opacity = 0.2; const filterX = -30; const filterY = -30; const filterWidth = 400; const filterHeight = 400; const feOffsetDx = 0; const feOffsetDy = 0; const feOffsetX = -100; const feOffsetY = -100; const feGaussianBlurStdDeviation = 10.1; // Add Gradients var defs = svg.patternify({ tag: 'defs', selector: 'defs-element' }); // Add Shadows var filter = defs .patternify({ tag: 'filter', selector: 'shadow-filter-element' }) .attr('id', dropShadowId) .attr('y', `${filterY}%`) .attr('x', `${filterX}%`) .attr('height', `${filterHeight}%`) .attr('width', `${filterWidth}%`); filter .patternify({ tag: 'feGaussianBlur', selector: 'feGaussianBlur-element' }) .attr('in', 'SourceAlpha') .attr('stdDeviation', feGaussianBlurStdDeviation) .attr('result', 'blur'); filter .patternify({ tag: 'feOffset', selector: 'feOffset-element' }) .attr('in', 'blur') .attr('result', 'offsetBlur') .attr('dx', feOffsetDx) .attr('dy', feOffsetDy) .attr('x', feOffsetX) .attr('y', feOffsetY); filter .patternify({ tag: 'feFlood', selector: 'feFlood-element' }) .attr('in', 'offsetBlur') .attr('flood-color', color) .attr('flood-opacity', opacity) .attr('result', 'offsetColor'); filter .patternify({ tag: 'feComposite', selector: 'feComposite-element' }) .attr('in', 'offsetColor') .attr('in2', 'offsetBlur') .attr('operator', 'in') .attr('result', 'offsetBlur'); var feMerge = filter.patternify({ tag: 'feMerge', selector: 'feMerge-element' }); feMerge .patternify({ tag: 'feMergeNode', selector: 'feMergeNode-blur' }) .attr('in', 'offsetBlur'); feMerge .patternify({ tag: 'feMergeNode', selector: 'feMergeNode-graphic' }) .attr('in', 'SourceGraphic'); } createTree() { const { data, isTree, calc: { radius } } = this.getState(); let tree = d3.cluster().size([2 * Math.PI, radius - 100]); if (isTree) { tree = d3 .tree() .size([2 * Math.PI, radius - 100]) .separation((a, b) => (a.parent == b.parent ? 1 : 3) / a.depth); } const root = tree( d3.hierarchy(data).sort((a, b) => d3.ascending(a.data.name, b.data.name)) ); this.setState({ tree, root }); } data(data, initialDepth = 1) { const h = d3 .hierarchy(data) .each(d => (d.data.id = d.data.id || this.createId())) .sum(d => { // if (d.children) return 0; return 1; }); h.each(d => { //console.log('d.data.name: ',d.data.name); if (d.data.name) { if (d.data.name.length > 30) { d.data._name = `(${d.value - 1})
` + d.data.name; } else { d.data._name = d.data.name + `
(${d.value - 1})`; } if (d.value - 1 == 0) { d.data._name = d.data.name; } } if (d.data.title) { d.data._name = d.data.title; } }); h.each(d => { if (d.depth >= initialDepth) { d.data._children = d.data.children; d.data.children = null; } }); this.setState({ data }); return this; } drawNodes({ dropShadowId, firstRender, transitionEase, duration, chart, tip, root, nodesWrapper, nodesData, source, rootCircleRadius, normalCircleRadius, svgWidth }) { const that = this; // Create node wrappers selection const nodes = nodesWrapper .selectAll('.node-wrapper') .data(nodesData, d => d.data.id || d.data.name); // Get enter selection const nodeEnter = nodes .enter() .append('g') .attr('class', 'node-wrapper') //.attr('opacity', 0) // .attr( // "transform", // d => ` // rotate(${(d.x * 180) / Math.PI - 90}) // translate(${d.y},0) // ` // ) .on('mouseenter.tip', function(event, d) { const element = d3.select(this).select('circle'); if ((d.data.name || d.data.title).length > 27) { tip.show(event, d, element.node()); } }) .on('mouseleave.tip', tip.hide) .on('mouseenter.raise', function(d) { d3.select(this).raise(); }) .on('mouseenter', (event, d) => this.handleNodeMouseEnter({ event, d, state: this.getState() }) ) .on('mouseleave', (event, d) => this.handleNodeMouseLeave({ event, d, state: this.getState() }) ) .on('click', (event, d) => { this.handleNodeClick({ event, d, state: this.getState() }); }); if (firstRender) { nodeEnter.attr( "transform", d => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) ` ); } nodeEnter.each(function(gd) { d3.select(this) .append('circle') .attr('class', 'node-circle') .attr("fill", "black") .attr('r', d => { if (d.depth == 0) return rootCircleRadius; if (d.data.children || d.data._children) return normalCircleRadius; return 10; }); }); // Merge and get update selection var nodeUpdate = nodeEnter.merge(nodes); nodeUpdate.each(function(gd) { //console.log('gd:',gd); d3.select(this) .patternify({ tag: 'foreignObject', selector: 'text-fo', data: d => [gd] }) .attr('width', d => Math.max((normalCircleRadius - 1) * 2, 0)) .attr('height', d => Math.max(31 * 2, 0)) .attr('pointer-events', 'none') .attr('x', d => { if (svgWidth < 850) { if (d.data.children || d.data._children) return -normalCircleRadius; if (d.x >= Math.PI) return -(normalCircleRadius - 2) * 2 - 17; return 16; } if (d.data.children || d.data._children) return -normalCircleRadius + 1; if (d.x >= Math.PI) return -(normalCircleRadius - 2) * 2 - 15; return 16; }) .attr('y', d => { if (svgWidth < 850) { return -normalCircleRadius; } return -(normalCircleRadius - 3) + 2; }) .patternify({ tag: 'xhtml:div', selector: 'node-text-div', data: d => [d].map(d => { let _textAlign = d.x >= Math.PI ? 'end' : 'start'; if (d.data.children || d.data._children) { _textAlign = 'middle'; } return Object.assign(d, { _textAlign }); }) }) .style('color', d => d.data.textFill) .style('font-size', 9 + 'px') .style('text-align', 'center') .style('line-height', 1.2) .html( d => `

${that.limit( d.data._name || '', d.data.children || d.data._children ? svgWidth < 850 ? 30 : 40 : 20 )}

` ); }); nodeUpdate .select('foreignObject') .attr('transform', d => ` rotate(${(-d.x * 180) / Math.PI + 90})`); nodeUpdate.selectAll('.node-circle').style('filter', null); // Transition to the proper position for the node nodeUpdate .transition() .duration(duration) .ease(transitionEase) .attr('opacity', 1) .attr( "transform", d => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) ` ) .on('end', d => { nodeUpdate .selectAll('.node-circle') .style('filter', `url(#drop-shadow-id)`); }); // Remove any exiting nodes var nodeExit = nodes .exit() .transition() .duration(0) .ease(transitionEase) .attr('opacity', 0) .attr( "transform", d => ` rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) ` ) .remove() .selectAll('circle') .attr('r', 0); this.setState({ svgNodeGroups: chart.selectAll('.node-wrapper') }); } drawLinks({ initialLinkColor, transitionEase, duration, chart, root, linksWrapper, linksData, source }) { // Link paths selection const links = linksWrapper .selectAll('path.link') .data(linksData, d => d.target.data.id); // Get and draw enter selection var linkEnter = links .enter() .append('path') .attr('class', 'link') //.attr('opacity', 0); .attr("d", d => d3 .linkRadial() .angle(d => d.x) .radius(d => d.y)({ source: d.source, target: d.source }) ); // Get and draw update selection const linkUpdate = linkEnter .merge(links) .attr("fill", "none") .attr("stroke", initialLinkColor) .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .classed('svg-links', true) .attr('pointer-events', 'none'); // Transition back to the parent element position linkUpdate .transition() .duration(duration) .ease(transitionEase) .attr('opacity', 1) .attr("d", d => d3 .linkRadial() .angle(d => d.x) .radius(d => d.y)(d) ); // Remove any exiting links var linkExit = links .exit() .transition() .ease(transitionEase) .duration(0) // .attr('opacity', 0) .attr("d", d => d3 .linkRadial() .angle(d => d.x) .radius(d => d.y)(d) ) .remove(); this.setState({ svgLinks: linkUpdate }); } drawSvgAndWrappers() { const { container, svgHeight, defaultFont, svgWidth, calc } = this.getState(); const { centerX, centerY } = calc; // Draw SVG const svg = container .patternify({ tag: 'svg', selector: 'svg-chart-container' }) .style('overflow', 'visible') .attr('preserveAspectRatio', 'xMidYMid meet') // .attr('height', svgHeight) // .attr('width', svgWidth) .attr('font-family', defaultFont); svg .patternify({ tag: 'rect', selector: 'boundary-rect' }) .attr('width', svgWidth) .attr('height', svgHeight) .attr('fill', 'none'); /* Initialize tooltip */ const tip = d3 .tip() .offset([-80, 0]) .attr('class', 'd3-tip') .html((EVENT, d) => d.data.name || d.data.title); /* Invoke the tip in the context of your visualization */ svg.call(tip); //Add container g element var innerWrap = svg .patternify({ tag: 'g', selector: 'inner-wrapper' }) .attr( 'transform', 'translate(' + calc.chartLeftMargin + ',' + calc.chartTopMargin + ')' ); //Add container g element var chart = innerWrap .patternify({ tag: 'g', selector: 'chart' }) .attr('transform', 'translate(' + centerX + ',' + centerY + ')'); // Draw link and node wrappers const linksWrapper = chart.patternify({ tag: 'g', selector: 'links-wrapper' }); const nodesWrapper = chart.patternify({ tag: 'g', selector: 'nodes-wrapper' }); this.setState({ chart, svg, linksWrapper, nodesWrapper, tip }); } handleNodeClick({ event, d, state: { svgCircles, svgLinks, tip, root } }) { //console.log(d); tip.hide(); d.eachAfter(ch => { if (d.data.children && ch.data.children && d != ch) { ch.data._children = ch.data.children; ch.data.children = null; } }); if (d.data.children) { d.data._children = d.data.children; d.data.children = null; } else { d.data.children = d.data._children; d.data._children = null; this.limitMaximumVisibleNodes({ max: 40, node: d, root: root }); if (d.data.data.Level === "Link" && d.data.data.cUrl.length > 0){ //console.log('d.data.Level:', d.data.Level) window.open( d.data.data.cUrl, '_blank' // <- This is what makes it open in a new window. ); } } this.setState({ source: d }); this.updateTree(this.getState()); } handleNodeMouseEnter({ event, d: nodeData, state: { svgNodeGroups, svgLinks, onNodeMouseEnter } }) { onNodeMouseEnter(nodeData); let highlight = []; let ancestors = nodeData.ancestors(); let descendants = nodeData.descendants(); if (nodeData.depth == 0) { highlight = ancestors; } else { highlight = ancestors.concat(descendants); } svgLinks .filter(d => highlight.includes(d.target)) .raise() .attr('stroke', '#1493C8') .classed('active', true) .attr('stroke-width', 5); svgNodeGroups .filter(d => highlight.includes(d)) .classed('active', true) .raise() .attr('cursor', d => d.data.children || d.data._children ? 'pointer' : Math.round(Math.random()) ? 'no-drop' : 'copy' ) .select('circle') .attr('fill', '#1493C8') .transition() .duration(500) .ease(d3.easeElastic) .attr('r', function(d) { if (d == nodeData) return +d3.select(this).attr('r') + 5; return d3.select(this).attr('r'); }); const template = { fill: 'white', stroke: '#2E2C2C' }; const nodes = ancestors.map(d => Object.assign({}, template, { text: d.data.name || d.data.title, node: d }) ); } handleNodeMouseLeave({ event, d, state: { initialLinkColor, svgNodeGroups, svgLinks, normalCircleRadius, rootCircleRadius, onNodeMouseLeave } }) { onNodeMouseLeave(d); svgLinks .classed('active', false) .attr('stroke', initialLinkColor) .attr('stroke-width', 1.5); svgNodeGroups .classed('active', false) .attr('cursor', 'auto') .select('circle') .attr('fill', 'black') .transition() .ease(d3.easeElastic) .duration(500) .attr('r', d => { if (d.depth == 0) return rootCircleRadius; if (d.data.children || d.data._children) return normalCircleRadius; return 10; }); } limit(string, number) { var points = ''; var diff = 0; if (number < string.length) { points = '...'; diff = 3; } string = string.slice(0, number - diff); return string + points; } limitMaximumVisibleNodes({ max, node, root }) { let { slowDuration } = this.getState(); const descendants = root.descendants(); let currentNodeCount = descendants.length + (node.data.children || []).length; if (currentNodeCount >= max) { const ancestors = node.ancestors(); root.eachAfter(ch => { if (ch.data.children && !ancestors.includes(ch)) { ch.data._children = ch.data.children; ch.data.children = null; } }); this.setState({ duration: slowDuration }); } } updateData(data) { const attrs = this.getChartState(); return this; } // Update tree chart updateTree() { const state = this.getState(); // Compute new nodes and links data this.createTree(state); this.computeNodeAndLinkData(state); this.drawNodes(state); this.drawLinks(state); this.setState({ duration: state.initialDuration }); } open(hierarchicalNode) { const state = this.getState(); hierarchicalNode.ancestors().forEach(parent => { if (parent.data._children && parent != hierarchicalNode) { parent.data.children = parent.data._children; parent.data._children = null; } }); // Compute new nodes and links data this.createTree(state); const node = state.root .descendants() .filter(d => d.data == hierarchicalNode.data)[0]; this.limitMaximumVisibleNodes({ max: 40, node: node, root: state.root }); this.setState({ source: state.root }); this.updateTree(this.getState()); const nodeNew = state.root .descendants() .filter(d => d.data == hierarchicalNode.data)[0]; this.handleNodeMouseLeave({ event: null, d: nodeNew, state: this.getState() }); this.handleNodeMouseEnter({ event: null, d: nodeNew, state: this.getState() }); } loopOver(root, callback) { if (root.children) { root.children.forEach(d => { this.loopOver(d, callback); }); } if (root._children) { root._children.forEach(d => { this.loopOver(d, callback); }); } callback(root); } }31:T65f,baseData={ // Returns let pc_root=[]; let pc_tab=[]; let pc_group=[]; let pc_link=[]; rawData.map((row, i)=>{ //Clear arrays if (i==0) { pc_root.length=0; pc_tab.length=0; pc_group.length=0; pc_link.length=0; } const r ={Level: "Root", pId: undefined, cId: "Root", pName: undefined, cName: "Root", name: "Root", title:"Root", Active: "1"} //root const t ={Level: "Tab", pId: "Root", cId: row.TabKey, pName: "Root", cName: row.Tab, name: row.Tab, title: row.Tab, Active: row.Active}; //tab const g ={Level: "Group", pId: row.TabKey, cId: row.GroupKey, pName: row.Tab, cName: row.Group, name: row.Group, title: row.Group, Active: row.Active}; //group const l ={Level: "Link", pId: row.GroupKey, cId: row.LinkKey, pName: row.Group, cName: row.Link, name: row.Link, title: row.Link, cUrl: row.Url, Active: row.Active}; //link //Root const r_found = pc_root.find(el => { if (el.cId == r.cId) return true; return false;}) if (!r_found) { pc_root.push(r); //console.log('found'); } //console.log(s.cId); //Tab const t_found = pc_tab.find(el => { if (el.cId == t.cId) return true; return false;}) if (!t_found) { pc_tab.push(t); //console.log('found'); } //Group const g_found = pc_group.find(el => { if (el.cId == g.cId) return true; return false;}) if (!g_found) { pc_group.push(g); //console.log('found'); } //Link const l_found = pc_link.find(el => { if (el.cId == l.cId) return true; return false;}) if (!l_found) { pc_link.push(l); //console.log('found'); } }); let flatData = [...pc_root, ...pc_tab, ...pc_group, ...pc_link]; return flatData; }32:T695,searchData = { //find data let foundData = []; function addFound(foundData, row) { let addRow = false; if (!foundData.find(r => (r.cId == row.cId && row.Level !== 'Root'))) if (activeDataOnly ){ //console.log('foundData:', foundData); //console.log('row.Active:', row.Active); //console.log('row:', row); if (row.Active == '1') addRow = true; else null; } else addRow = true; console.log( 'addRow: ', addRow); return addRow; } baseData.map(row => { if ( typeof searchText == "string" && searchText.length > 0 && row.name.toUpperCase().includes(searchText.toUpperCase()) ) { if (addFound(foundData, row)) foundData.push(row); //console.log('addedFound row: ',foundData); } }); //console.log('foundData: ',foundData); // Add parent data let parentData = []; foundData.forEach(child => { let cId = child.cId; let pId = child.pId; let searchObject = baseData.find(parent => (parent.cId == pId && parent.Level !== 'Root')) while (searchObject !== undefined){ if (parentData.find(r => (r.cId == searchObject.cId)) == undefined) parentData.push(searchObject); pId = searchObject.pId; searchObject = baseData.find(parent => parent.cId == pId && parent.Level !== 'Root') //console.log(searchObject); }}); //Add Root to result parentData.push(baseData.find(root => ( root.Level == 'Root'))); return foundData.concat(parentData); };33:[{"id":"cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","href":"https://static.observableusercontent.com/files/cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","name":"flare-2.json","type":"application/json","lastModified":1664195413444.21,"size":11634}] 2e:{"title":"Links","cells":[{"id":1003,"value":"# Links","pinned":false,"hidden":false,"mode":"md"},{"id":948,"value":"viewof searchText = Inputs.text({\n label: \"Search\",\n placeholder: \"Term\",\n //datalist: .map(d => d.State)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"chartContainer = {\n NetworkChart;\n return html`\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"chart = new NetworkChart()\n .container(chartContainer)\n .svgWidth(900)\n .svgHeight(900)\n .data(data)\n .render() \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"LINK =\"https://docs.google.com/spreadsheets/d/e/2PACX-1vS-WMdDjr9hcAJrhiiJlpCybwNUKqWwbWVd125xH6z-Eamzp_DuQllP9dtKcbhXR2SD3rElX3dSoNdm/pub?gid=0&single=true&output=csv\";\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"margin = ({top: 20, right: 60, bottom: 20, left: 120})","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"width = (850 - margin.right - margin.left)","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"height = 460 ;","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"rawData = await d3.csv(LINK);","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"data= {\n let workData = null;\n if (typeof searchText == 'string' && searchText.length > 0)\n workData = searchData;\n else \n workData = baseData;\n const tree = d3\n .stratify()\n .id(d => d.cId)\n .parentId(d => d.pId)(workData);\n \n tree.descendants().forEach((d, i) => {\n d.id = i;\n d._children = d.children;\n d.name = d.data.name;\n if (d.data.Level && d.data.Level === \"Link\") d.url = d.data.cUrl;\n });\n \n return tree;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"activeDataOnly = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"f = searchData.filter(d => d.cId == 'Tab-1-Knowledge')","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"dataOLD= await FileAttachment(\"flare-2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"collapsedCSS`.d3-tip {\n font-family: Arial, Helvetica, sans-serif;\n line-height: 1.4;\n padding: 20px;\n pointer-events: none !important;\n color: #203d5d;\n box-shadow: 0 4px 20px 4px rgba(0, 20, 60, .1), 0 4px 80px -8px rgba(0, 20, 60, .2);\n background-color: #fff;\n border-radius: 4px;\n}\n\n/* Creates a small triangle extender for the tooltip */\n.d3-tip:after {\n box-sizing: border-box;\n display: inline;\n font-size: 10px;\n width: 100%;\n line-height: 1;\n color: #fff;\n position: absolute;\n pointer-events: none;\n}\n\n/* Northward tooltips */\n.d3-tip.n:after {\n content: \"▼\";\n margin: -1px 0 0 0;\n top: 100%;\n left: 0;\n text-align: center;\n}\n\n/* Eastward tooltips */\n.d3-tip.e:after {\n content: \"◀\";\n margin: -4px 0 0 0;\n top: 50%;\n left: -8px;\n}\n\n/* Southward tooltips */\n.d3-tip.s:after {\n content: \"▲\";\n margin: 0 0 1px 0;\n top: -8px;\n left: 0;\n text-align: center;\n}\n\n/* Westward tooltips */\n.d3-tip.w:after {\n content: \"▶\";\n margin: -4px 0 0 -1px;\n top: 50%;\n left: 100%;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {load} from '@bumbeishvili/utils'","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"d3 = require('d3@v6','d3-v6-tip')","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"import { css, collapsedCSS } from \"@bumbeishvili/utils\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}