31:T5db,chartBasic = { const tree = data => { const root = d3.hierarchy(data) root.dx = 10 root.dy = width / (root.height + 1) return d3.tree().nodeSize([root.dx, root.dy])(root) } const root = tree(data) let x0 = Infinity; let x1 = -x0 root.each(d => { if(d.x > x1) x1 = d.x if(d.x < x0) x0 = d.x }) const svg = d3.create('svg') .attr('height', x1 - x0 + root.dx * 2) .attr('width', width) const g = svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('transform', `translate(${root.dy / 3},${root.dx - x0})`) const link = g.append('g') .attr('fill', 'none') .attr('stroke', '#555') .attr('stroke-opacity', 0.4) .attr('stroke-width', 1.5) .selectAll('path') .data(root.links()) .join('path') .attr('d', d3.linkHorizontal() .x(d => d.y) .y(d => d.x)) const node = g.append('g') .attr('stroke-linejoin', 'round') .attr('stroke-width', 3) .selectAll('g') .data(root.descendants()) .join('g') .attr('transform', d => `translate(${d.y},${d.x})`) node.append('circle') .attr('fill', d => d.children ? '#555' : '#999') .attr('r', 2.5) node.append('text') .attr('dy', '0.31em') .attr('x', d => d.children ? -6 : 6) .attr('text-anchor', d => d.children ? 'end' : 'start') .text(d => d.data.name) .clone(true).lower() .attr('stroke', 'white') return svg.node() }32:T6df,chartCircle = { const svg = d3.create('svg') const rootData = d3.hierarchy(data) .sort((a,b) => d3.ascending(a.data.name, b.data.name)) const radius = width / 2 const tree = d3.tree() .size([2 * Math.PI, radius]) .separation((a,b) => (a.parent == b.parent ? 1 : 2) / a.depth) const root = tree(rootData) svg.append('g') .attr('fill', 'none') .attr('stroke', '#555') .attr('stroke-opacity', 0.4) .attr('stroke-width', 1.5) .selectAll('path') .data(root.links()) .join('path') .attr('d', d3.linkRadial() .angle(d => d.x) .radius(d => d.y)) svg.append('g') .selectAll('circle') .data(root.descendants()) .join('circle') .attr('transform', d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`) .attr('fill', d => d.children ? '#555' : '#999') .attr('r', 2.5) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('stroke-linejoin', 'round') .attr('stroke-width', 3) .selectAll('text') .data(root.descendants()) .join('text') .attr('transform', d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0})`) .attr('dy', '0.31em') .attr('x', d => d.x < Math.PI === !d.children ? 6 : -6) .attr('text-anchor', d => d.x < Math.PI === !d.children ? 'start' : 'end') .text(d => d.data.name) .clone(true).lower() .attr('stroke', 'white') function autoBox() { document.body.appendChild(this) const {x, y, width, height} = this.getBBox() document.body.removeChild(this) return [x, y, width, height] } return svg.attr('viewBox', autoBox).node() }33:T8f2,chartColor = { const svg = d3.create('svg') const rootData = d3.hierarchy(data) .sort((a,b) => d3.ascending(a.data.name, b.data.name)) const radius = width / 2 const tree = d3.tree() .size([2 * Math.PI, radius]) .separation((a,b) => (a.parent == b.parent ? 1 : 2) / a.depth) const root = tree(rootData) const color = d3.scaleOrdinal() .domain(data.children.map(d => d.name)) .range(d3.schemeCategory10) function setColor(d) { var name = d.data.name; d.color = color.domain().indexOf(name) >= 0 ? color(name) : d.parent ? d.parent.color : null; if (d.children) d.children.forEach(setColor); } setColor(root) svg.append('g') .attr('fill', 'none') .attr('stroke', '#555') .attr('stroke-opacity', 0.4) .attr('stroke-width', 2) .attr('stroke-dasharray', '1 2.4') .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .selectAll('path') .data(root.links()) .join('path') .attr('d', d3.linkRadial() .angle(d => d.x) .radius(d => d.y)) .attr("stroke", d => d.children ? 'currentColor' : d.target.color) svg.append('g') .selectAll('circle') .data(root.descendants()) .join('circle') .attr('transform', d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`) .attr('fill', d => d.children ? '#555' : '#999') .attr('r', 2.5) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('stroke-linejoin', 'round') .attr('stroke-width', 3) .selectAll('text') .data(root.descendants()) .join('text') .attr('transform', d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0})`) .attr('dy', '0.31em') .attr('x', d => d.x < Math.PI === !d.children ? 6 : -6) .attr('text-anchor', d => d.x < Math.PI === !d.children ? 'start' : 'end') .text(d => d.data.name) .clone(true).lower() .attr('stroke', 'white') function autoBox() { document.body.appendChild(this) const {x, y, width, height} = this.getBBox() document.body.removeChild(this) return [x, y, width, height] } return svg.attr('viewBox', autoBox).node() }34:T958,chartGlow = { const svg = d3.create('svg') // glow effect see https://www.visualcinnamon.com/2016/06/glow-filter-d3-visualization const defs = svg.append('defs') const filter = defs.append('filter') .attr('id', 'glow') filter.append('feGaussianBlur') .attr('stdDeviation', '1.2') .attr('result', 'coloredBlur') const feMerge = filter.append('feMerge') feMerge.append('feMergeNode').attr('in', 'coloredBlur') feMerge.append('feMergeNode').attr('in', 'SourceGraphic') // --- const rootData = d3.hierarchy(data) .sort((a,b) => d3.ascending(a.data.name, b.data.name)) const radius = width / 2 const tree = d3.tree() .size([2 * Math.PI, radius]) .separation((a,b) => (a.parent == b.parent ? 1 : 2) / a.depth) const root = tree(rootData) const color = d3.scaleOrdinal() .domain(data.children.map(d => d.name)) .range(d3.schemeCategory10) function setColor(d) { var name = d.data.name; d.color = color.domain().indexOf(name) >= 0 ? color(name) : d.parent ? d.parent.color : null; if (d.children) d.children.forEach(setColor); } setColor(root) svg.append('g') .attr('fill', 'none') .attr('stroke', '#555') .attr('stroke-opacity', 0.4) .attr('stroke-width', 1.5) .selectAll('path') .data(root.links()) .join('path') .attr('d', d3.linkRadial() .angle(d => d.x) .radius(d => d.y)) .attr("stroke", d => d.children ? 'currentColor' : d.target.color) .attr('filter', 'url(#glow)') svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('stroke-linejoin', 'round') .attr('stroke-width', 3) .selectAll('text') .data(root.descendants()) .join('text') .attr('transform', d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0})`) .attr('dy', '0.31em') .attr('x', d => d.x < Math.PI === !d.children ? 6 : -6) .attr('text-anchor', d => d.x < Math.PI === !d.children ? 'start' : 'end') .text(d => d.data.name) .clone(true).lower() .attr('stroke', 'white') function autoBox() { document.body.appendChild(this) const {x, y, width, height} = this.getBBox() document.body.removeChild(this) return [x, y, width, height] } return svg.attr('viewBox', autoBox).node() }35:T12c6,chartWild = { const svg = d3.create('svg') const defs = svg.append('defs') // pencil filter const pencilFilter = defs.append('filter') .attr('id', 'pencilTextureWild') .attr('width','140%') .attr('height','140%') .attr('x','-20%') .attr('y','-20%') .attr('filterUnits','objectBoundingBox') pencilFilter.append('feGaussianBlur') // glow of original line .attr('stdDeviation', '1.1') .attr('result', 'coloredBlur') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', 2) .attr('numOctaves', 5) .attr('stitchTiles', 'stitch') .attr('result', 't1') pencilFilter.append('feColorMatrix') .attr('type','matrix') .attr('values','0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.4 1.3') .attr('result','t2') pencilFilter.append('feComposite') .attr('operator','in') .attr('in','SourceGraphic') .attr('in2','t2') .attr('result','SourceTextured') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .01) .attr('numOctaves', 5) .attr('seed', '1') .attr('result', 'f1') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 30) .attr('in', 'SourceTextured') .attr('in2', 'f1') .attr('result', 'f4') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .01) .attr('numOctaves', 5) .attr('seed', '10') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 30) .attr('in', 'SourceTextured') .attr('in2', 'f2') .attr('result', 'f5') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .1) .attr('numOctaves', 5) .attr('seed', '100') .attr('result', 'f3') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 20) .attr('in', 'SourceTextured') .attr('in2', 'f3') .attr('result', 'f6') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'f5') .attr('in2', 'f4') .attr('result', 'out1') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'out1') .attr('in2', 'f6') .attr('result', 'out2') // --- // glow effect merge const feMerge = pencilFilter.append('feMerge') feMerge.append('feMergeNode').attr('in', 'coloredBlur') feMerge.append('feMergeNode').attr('in', 'out2') // --- const rootData = d3.hierarchy(data) .sort((a,b) => d3.ascending(a.data.name, b.data.name)) const radius = width / 2 const tree = d3.tree() .size([2 * Math.PI, radius]) .separation((a,b) => (a.parent == b.parent ? 1 : 2) / a.depth) const root = tree(rootData) const color = d3.scaleOrdinal() .domain(data.children.map(d => d.name)) .range(d3.schemeCategory10) function setColor(d) { var name = d.data.name; d.color = color.domain().indexOf(name) >= 0 ? color(name) : d.parent ? d.parent.color : null; if (d.children) d.children.forEach(setColor); } setColor(root) svg.append('g') .attr('fill', 'none') .attr('stroke', '#555') .attr('stroke-opacity', 0.4) .attr('stroke-width', 1.5) .selectAll('path') .data(root.links()) .join('path') .attr('d', d3.linkRadial() .angle(d => d.x) .radius(d => d.y)) .attr("stroke", d => d.children ? 'currentColor' : d.target.color) .attr('filter', 'url(#pencilTextureWild)') svg.append('g') .selectAll('circle') .data(root.descendants()) .join('circle') .attr('transform', d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`) .attr('fill', d => d.children ? '#555' : '#999') .attr('r', 2.5) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('stroke-linejoin', 'round') .attr('stroke-width', 3) .selectAll('text') .data(root.descendants()) .join('text') .attr('transform', d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0})`) .attr('dy', '0.31em') .attr('x', d => d.x < Math.PI === !d.children ? 6 : -6) .attr('text-anchor', d => d.x < Math.PI === !d.children ? 'start' : 'end') .text(d => d.data.name) .clone(true).lower() .attr('stroke', 'white') function autoBox() { document.body.appendChild(this) const {x, y, width, height} = this.getBBox() document.body.removeChild(this) return [x, y, width, height] } return svg.attr('viewBox', autoBox).node() }36:T1177,chartWater = { const svg = d3.create('svg') const defs = svg.append('defs') // pencil filter const pencilFilter = defs.append('filter') .attr('id', 'pencilTexture') .attr('width','140%') .attr('height','140%') .attr('x','-20%') .attr('y','-20%') .attr('filterUnits','objectBoundingBox') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', 2) .attr('numOctaves', 5) .attr('stitchTiles', 'stitch') .attr('result', 't1') pencilFilter.append('feColorMatrix') .attr('type','matrix') .attr('values','0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5') .attr('result','t2') pencilFilter.append('feComposite') .attr('operator','in') .attr('in','SourceGraphic') .attr('in2','t2') .attr('result','SourceTextured') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '1') .attr('result', 'f1') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 5) .attr('in', 'SourceTextured') .attr('in2', 'f1') .attr('result', 'f4') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '10') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 5) .attr('in', 'SourceTextured') .attr('in2', 'f2') .attr('result', 'f5') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '100') .attr('result', 'f3') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 3) .attr('in', 'SourceTextured') .attr('in2', 'f3') .attr('result', 'f6') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'f5') .attr('in2', 'f4') .attr('result', 'out1') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'out1') .attr('in2', 'f6') .attr('result', 'out2') // --- const rootData = d3.hierarchy(data) .sort((a,b) => d3.ascending(a.data.name, b.data.name)) const radius = width / 2 const tree = d3.tree() .size([2 * Math.PI, radius]) .separation((a,b) => (a.parent == b.parent ? 1 : 2) / a.depth) const root = tree(rootData) const color = d3.scaleOrdinal() .domain(data.children.map(d => d.name)) .range(d3.schemeCategory10) function setColor(d) { var name = d.data.name; d.color = color.domain().indexOf(name) >= 0 ? color(name) : d.parent ? d.parent.color : null; if (d.children) d.children.forEach(setColor); } setColor(root) svg.append('g') .attr('fill', 'none') .attr('stroke', '#555') .attr('stroke-opacity', 0.4) .attr('stroke-width', 1.5) .selectAll('path') .data(root.links()) .join('path') .attr('d', d3.linkRadial() .angle(d => d.x) .radius(d => d.y)) .attr("stroke", d => d.children ? 'currentColor' : d.target.color) .attr('filter', 'url(#pencilTexture)') svg.append('g') .selectAll('circle') .data(root.descendants()) .join('circle') .attr('transform', d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`) .attr('fill', d => d.children ? '#555' : '#999') .attr('r', 2.5) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('stroke-linejoin', 'round') .attr('stroke-width', 3) .selectAll('text') .data(root.descendants()) .join('text') .attr('transform', d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0})`) .attr('dy', '0.31em') .attr('x', d => d.x < Math.PI === !d.children ? 6 : -6) .attr('text-anchor', d => d.x < Math.PI === !d.children ? 'start' : 'end') .text(d => d.data.name) .clone(true).lower() .attr('stroke', 'white') function autoBox() { document.body.appendChild(this) const {x, y, width, height} = this.getBBox() document.body.removeChild(this) return [x, y, width, height] } return svg.attr('viewBox', autoBox).node() }37:[{"id":"cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","href":"https://static.observableusercontent.com/files/cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","name":"flare-2.json","type":"application/json","lastModified":1617290592096.243,"size":11634}] 2f:{"title":"dendogram / tree playground","cells":[{"id":0,"value":"md`# dendogram / tree playground`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`references: \nhttps://www.d3-graph-gallery.com/dendrogram.html \nhttps://observablehq.com/@observablehq/electoral-college-decision-tree \nhttps://observablehq.com/@d3/tidy-tree \nhttps://observablehq.com/@d3/radial-tidy-tree \nhttps://bl.ocks.org/mbostock/e9ba78a2c1070980d1b530800ce7fa2b dendogram vs tidy tree`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"data = FileAttachment(\"flare-2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"margin = ({left:10, right:10, top:10, bottom:10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"height = Math.min(width, 500)","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}