31:T656,chartBasic = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const format = d3.format(',d') const treemap = data => d3.treemap() .tile(d3.treemapSquarify) .size([width, height]) .padding(1) .round(true) (d3.hierarchy(data) .sum(d => d.value) .sort((a,b) => b.value - a.value)) const c = d3.scaleOrdinal(d3.schemeCategory10) const root = treemap(data) const leaf = svg.selectAll('g') .data(root.leaves()) .join('g') .attr('transform', d => `translate(${d.x0},${d.y0})`) leaf.append('title') .text(d => `${d.ancestors().reverse().map(d => d.data.name).join('/')}\n${format(d.value)}`) leaf.append('rect') .attr('id', d => (d.leafUid = DOM.uid('leaf')).id) .attr('fill', d => { while(d.depth > 1) d = d.parent; return c(d.data.name) }) .attr('fill-opacity', 0.6) .attr('width', d => d.x1 - d.x0) .attr('height', d => d.y1 - d.y0) leaf.append('clipPath') .attr('id', d => (d.clipUid = DOM.uid('clip')).id) .append('use') .attr('xlink:href', d => d.leafUid.href) leaf.append('text') .attr('clip-path', d => d.clipUid) .selectAll('tspan') .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join('tspan') .attr('x', 3) .attr('y', (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr('fill-opacity', (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d) return svg.node() }32:T9f4,chartCascaded = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const format = d3.format(',d') function cascade(root, offset) { const x = new Map const y = new Map return root.eachAfter(d => { if(d.children) { x.set(d, 1 + d3.max(d.children, c => c.x1 === d.x1 - offset ? x.get(c) : NaN)) y.set(d, 1 + d3.max(d.children, c => c.y1 === d.y1 - offset ? y.get(c) : NaN)) } else { x.set(d, 0) y.set(d, 0) } }).eachBefore(d => { d.x1 -= 2 * offset * x.get(d) d.y1 -= 2 * offset * y.get(d) }) } const treemap = data => cascade( d3.treemap() .size([width, height]) .paddingOuter(3) .paddingTop(19) .paddingInner(1) .round(true) (d3.hierarchy(data) .sum(d => d.value) .sort((a,b) => b.value - a.value)), 3 ) const c = d3.scaleSequential([8,0], d3.interpolateMagma) const root = treemap(data) const shadow = DOM.uid('shadow') svg.append('filter') .attr('id', shadow.id) .append('feDropShadow') .attr('flood-opacity', 0.3) .attr('dx', 0) .attr('stdDeviation', 3) const node = svg.selectAll('g') .data(d3.group(root, d => d.height)) .join('g') .attr('filter', shadow) .selectAll('g') .data(d => d[1]) .join('g') .attr('transform', d => `translate(${d.x0},${d.y0})`) node.append('title') .text(d => `${d.ancestors().reverse().map(d => d.data.name).join('/')}\n${format(d.value)}`) node.append('rect') .attr('id', d => (d.nodeUid = DOM.uid('node')).id) .attr('fill', d => c(d.height)) .attr('width', d => d.x1 - d.x0) .attr('height', d => d.y1 - d.y0) node.append('clipPath') .attr('id', d => (d.clipUid = DOM.uid('clip')).id) .append('use') .attr('xlink:href', d => d.nodeUid.href) node.append('text') .attr('clip-path', d => d.clipUid) .selectAll('tspan') .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join('tspan') .attr('fill-opacity', (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d) node.filter(d => d.children).selectAll('tspan') .attr('dx', 3) .attr('y', 13) node.filter(d => !d.children).selectAll('tspan') .attr('x', 3) .attr('y', (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) return svg.node() }33:T816,chartVoronoi = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const format = d3.format(',d') const hierarchy = d3.hierarchy(data) .sum(d => d.value) .sort((a,b) => b.value - a.value) let seed = new Math.seedrandom(0) let voronoiTreemap = d3.voronoiTreemap() .prng(seed) .clip([ [margin.left, margin.top], [margin.left, height - margin.bottom], [width - margin.right, height - margin.bottom], [width - margin.right, margin.top], ]) // sets the clipping polygon) voronoiTreemap(hierarchy) const c = d3.scaleOrdinal(d3.schemeCategory10) let allNodes = hierarchy.descendants() .sort((a,b) => a.depth - b.depth) .map((d,i) => Object.assign({}, d, {id: i})) const voronoi = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`) const labels = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`) const pop_labels = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`) voronoi.selectAll('path') .data(allNodes) .join('path') .attr('d', d => 'M' + d.polygon.join('L') + 'Z') .style('fill', d => d.depth === 1 ? c(d.data.name) : 'none') .attr('stroke', '#F5F5F2') .attr('stroke-width', d => 10 - d.depth * 3.1) .style('fill-opacity', d => d.depth >= 1 ? 1 : 0) .attr('pointer-events', d => d.depth >= 2 ? 'all' : 'none') .append('title') .text(d => `${d.data.name}\n${format(d.value)}`) labels.selectAll('text') .data(allNodes.filter(d => d.value > 6000 && d.depth === 2)) .join('text') .attr('class', d => `label-${d.id}`) .attr('text-anchor', 'middle') .attr('transform', d => `translate(${d.polygon.site.x},${d.polygon.site.y})`) .text(d => d.data.name.toUpperCase()) .style('font-size', d => d.value > 30000 ? 30 : 12) .style('fill', '#F5F5F5') return svg.node() }34:T6ce,chartColorRng = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const format = d3.format(',d') const treemap = data => d3.treemap() .tile(d3.treemapSquarify) .size([width, height]) .padding(1) .round(true) (d3.hierarchy(data) .sum(d => d.value) .sort((a,b) => b.value - a.value)) const c = d3.scaleOrdinal(d3.schemeCategory10) const rng_n = 2 const rng = () => d3.randomIrwinHall(rng_n)() - rng_n/2 const root = treemap(data) const leaf = svg.selectAll('g') .data(root.leaves()) .join('g') .attr('transform', d => `translate(${d.x0},${d.y0})`) leaf.append('title') .text(d => `${d.ancestors().reverse().map(d => d.data.name).join('/')}\n${format(d.value)}`) leaf.append('rect') .attr('id', d => (d.leafUid = DOM.uid('leaf')).id) .attr('fill', d => { while(d.depth > 1) d = d.parent; return chroma(c(d.data.name)).darken(rng()).saturate(rng()) }) .attr('fill-opacity', 0.6) .attr('width', d => d.x1 - d.x0) .attr('height', d => d.y1 - d.y0) leaf.append('clipPath') .attr('id', d => (d.clipUid = DOM.uid('clip')).id) .append('use') .attr('xlink:href', d => d.leafUid.href) leaf.append('text') .attr('clip-path', d => d.clipUid) .selectAll('tspan') .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join('tspan') .attr('x', 3) .attr('y', (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr('fill-opacity', (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d) return svg.node() }35:T1186,chartWater = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) // from https://observablehq.com/@veltman/watercolor const noise = 0.005, blur = 0.8, strokeWidth = 4, deviation = 2, drawMesh = false; const defs = svg.append('defs') const splotch = DOM.uid('splotch') defs.append('filter') .attr('class', 'watercolor') .attr('id', splotch.id) .html( `${ noise ? ` ` : `` }` ) const pencil = DOM.uid("pencil"); defs.append("filter").attr("id", pencil.id) .html(` `) // --- const format = d3.format(',d') const treemap = data => d3.treemap() .tile(d3.treemapSquarify) .size([width, height]) .padding(1) .round(true) (d3.hierarchy(data) .sum(d => d.value) .sort((a,b) => b.value - a.value)) const c = d3.scaleOrdinal(d3.schemeCategory10) const blurScale = d3.scaleLinear() // .domain([0, 2000]) .range([deviation, deviation * 3.5]) .clamp(true) const root = treemap(data) const leaf = svg.selectAll('g') .data(root.leaves()) .join('g') .attr('transform', d => `translate(${d.x0},${d.y0})`) leaf.append('title') .text(d => `${d.ancestors().reverse().map(d => d.data.name).join('/')}\n${format(d.value)}`) leaf.append('g') .attr('filter', splotch) .attr('mix-blend-mode', 'multiply') .append('rect') .attr('id', d => (d.leafUid = DOM.uid('leaf')).id) .attr('fill', d => { while(d.depth > 1) d = d.parent; return c(d.data.name) }) .attr('fill-opacity', 1) .attr('width', d => d.x1 - d.x0) .attr('height', d => d.y1 - d.y0) .attr('filter', (d,i) => 'url(#filter-' + i + ')') .attr('stroke-width', strokeWidth) .attr('stroke', d => { while(d.depth > 1) d = d.parent; return c(d.data.name) }) leaf.append('clipPath') .attr('id', d => (d.clipUid = DOM.uid('clip')).id) .append('use') .attr('xlink:href', d => d.leafUid.href) leaf.append('text') .attr('clip-path', d => d.clipUid) .selectAll('tspan') .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join('tspan') .attr('x', 3) .attr('y', (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr('fill-opacity', (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d) defs.selectAll(".leaf") .data(root.leaves()) .enter() .append("filter") .attr("id", (d,i) => 'filter-' + i) .html( d => ` ` ); if(drawMesh) { const pencil = DOM.uid('pencil') defs.append('filter').attr('id', pencil.id) .html(` `) leaf.append('g') .attr('class', 'mesh') .attr('filter', pencil) .append('rect') .attr('width', d => d.x1 - d.x0) .attr('height', d => d.y1 - d.y0) .attr('fill', 'none') .attr('stroke', '#777') .attr('stroke-width', '2px') .attr('stroke-linejoin', 'round') .attr('opacity', 0.8) } return svg.node() }36:T109f,chartPencilWild = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) 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('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 format = d3.format(',d') const treemap = data => d3.treemap() .tile(d3.treemapSquarify) .size([width, height]) .padding(1) .round(true) (d3.hierarchy(data) .sum(d => d.value) .sort((a,b) => b.value - a.value)) const c = d3.scaleOrdinal(d3.schemeCategory10) const root = treemap(data) const leaf = svg.selectAll('g') .data(root.leaves()) .join('g') .attr('transform', d => `translate(${d.x0},${d.y0})`) leaf.append('title') .text(d => `${d.ancestors().reverse().map(d => d.data.name).join('/')}\n${format(d.value)}`) leaf.append('rect') .attr('id', d => (d.leafUid = DOM.uid('leaf')).id) .attr('fill', d => { while(d.depth > 1) d = d.parent; return c(d.data.name) }) .attr('fill-opacity', 0.6) .attr('width', d => d.x1 - d.x0) .attr('height', d => d.y1 - d.y0) .attr('filter', 'url(#pencilTexture)') leaf.append('clipPath') .attr('id', d => (d.clipUid = DOM.uid('clip')).id) .append('use') .attr('xlink:href', d => d.leafUid.href) leaf.append('text') .attr('clip-path', d => d.clipUid) .selectAll('tspan') .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join('tspan') .attr('x', 3) .attr('y', (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr('fill-opacity', (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d) return svg.node() }37:T110c,chartPattern = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const defs = svg.append('defs') // pencil filter const pencilFilter = defs.append('filter') .attr('id', 'pencilTexturePattern') .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 format = d3.format(',d') const treemap = data => d3.treemap() .tile(d3.treemapSquarify) .size([width, height]) .padding(1) .round(true) (d3.hierarchy(data) .sum(d => d.value) .sort((a,b) => b.value - a.value)) const c = d3.scaleOrdinal(d3.schemeCategory10) const root = treemap(data) // hatching pattern defs .selectAll('pattern') .data(root.leaves()) .join('pattern') .attr('width',4) .attr('height',4) .attr('patternUnits','userSpaceOnUse') .attr('id', (d,i) => 'hatchingPencil-' + i) .append('path') .attr('d',"M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2") .style('stroke', d => { while(d.depth > 1) d = d.parent; return c(d.data.name) }) .style('stroke-width', 1.2) // --- const leaf = svg.selectAll('g') .data(root.leaves()) .join('g') .attr('transform', d => `translate(${d.x0},${d.y0})`) leaf.append('title') .text(d => `${d.ancestors().reverse().map(d => d.data.name).join('/')}\n${format(d.value)}`) leaf.append('rect') .attr('id', d => (d.leafUid = DOM.uid('leaf')).id) .attr('fill', (d,i) => 'url(#hatchingPencil-'+ i +')') .attr('filter', 'url(#pencilTexturePattern)') .attr('fill-opacity', 0.6) .attr('width', d => d.x1 - d.x0) .attr('height', d => d.y1 - d.y0) leaf.append('clipPath') .attr('id', d => (d.clipUid = DOM.uid('clip')).id) .append('use') .attr('xlink:href', d => d.leafUid.href) leaf.append('text') .attr('clip-path', d => d.clipUid) .selectAll('tspan') .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join('tspan') .attr('x', 3) .attr('y', (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr('fill-opacity', (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) .text(d => d) return svg.node() }38:[{"id":"cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","href":"https://static.observableusercontent.com/files/cd7473c8d22df421e1d13814d93aec5294e72dd53726b0fe3f3e3cbf2cc76069f8ccd3a69f0728774c97f5e34941bc5a8f8a0cea8ed1165f7bea9ca00e54cabd","name":"flare-2.json","type":"application/json","lastModified":1615330282656.879,"size":11634}] 2f:{"title":"treemap playground","cells":[{"id":0,"value":"md`# treemap playground`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md `references: \nhttps://www.d3-graph-gallery.com/treemap.html \nhttps://observablehq.com/@d3/treemap \nhttps://observablehq.com/@d3/cascaded-treemap \nhttps://observablehq.com/@d3/zoomable-treemap \nhttps://observablehq.com/@john-guerra/treemap-from-table \nhttps://observablehq.com/@trebor/zoomable-voronoi-treemap \nhttps://observablehq.com/@will-r-chase/voronoi-treemap` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"data = FileAttachment(\"flare-2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"margin = ({left:10, right:10, top:10, bottom:10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"height = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"d3 = require('d3@6', \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\", 'seedrandom@2.4.3/seedrandom.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"chroma = (await import(\"https://unpkg.com/chroma-js\")).default","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}