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() }

Purpose-built for displays of data