2c:null 2d:["$","title",null,{"children":"beeswarm playground | Sascha Siegmund | Observable"}] 32:T80a,chartBasic = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12); // config const radius = 3; const padding = 1.5; // --- const x = d3.scaleLinear() .domain(d3.extent(data, d => d.value)) .range([margin.left, width - margin.right]) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) svg.append('g') .call(xAxis) const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d.value), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; //Returns true if cricle (x,y) intersects with any circle in the queue function intersects(x,y) { let a = head; while(a) { if (radius2 - epsilon > (a.x - x)**2 + (a.y - y)**2){ return true; } a = a.next; } return false; } //Place each circle sequentially for(const b of circles) { //Remove circles from the queue that can't intersect the new circle b while(head && head.x < b.x - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x, b.y = 0)){ let a = head; b.y = Infinity; do { let y = a.y + Math.sqrt(radius2 - (a.x - b.x)**2); if(y < b.y && !intersects(b.x, y)) b.y = y; a = a.next; }while(a); } //Add b to queue b.next = null; if(head === null) head = tail = b; else tail = tail.next = b; } return circles; } svg.append('g') .selectAll('circles') .data(dodge(data, radius * 2 + padding)) .join('circle') .attr('cx', d => d.x) .attr('cy', d => height - margin.bottom - radius - padding - d.y) .attr('r', radius) .append('title') .text(d => d.data.name); return svg.node(); }33:T986,chartMirrored = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12); // config const radius = 3; const padding = 1.5; // --- const x = d3.scaleLinear() .domain(d3.extent(data, d => d.value)) .range([margin.left, width - margin.right]) const c = d3.scaleSequential() // see https://observablehq.com/@d3/sequential-scales?collection=@d3/d3-scale-chromatic .domain(d3.extent(data, d => d.value)) .interpolator(d3.interpolateCool) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) svg.append('g') .call(xAxis) const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d.value), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; //Returns true if cricle (x,y) intersects with any circle in the queue function intersects(x,y) { let a = head; while(a) { if (radius2 - epsilon > (a.x - x)**2 + (a.y - y)**2){ return true; } a = a.next; } return false; } //Place each circle sequentially for(const b of circles) { //Remove circles from the queue that can't intersect the new circle b while(head && head.x < b.x - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x, b.y = 0)){ let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x)**2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x)**2); if(Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if(Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; }while(a); } //Add b to queue b.next = null; if(head === null) head = tail = b; else tail = tail.next = b; } return circles; } svg.append('g') .selectAll('circles') .data(dodge(data, radius * 2 + padding)) .join('circle') .attr('cx', d => d.x) .attr('cy', d => height/2 + d.y) .attr('r', radius) .attr('fill', d => c(d.data.value)) .append('title') .text(d => d.data.name); return svg.node(); }34:Ta6f,chartTriangle = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12); // config const radius = 3; const padding = 1.5; // --- const x = d3.scaleLinear() .domain(d3.extent(data, d => d.value)) .range([margin.left, width - margin.right]) const c = d3.scaleSequential() // see https://observablehq.com/@d3/sequential-scales?collection=@d3/d3-scale-chromatic .domain(d3.extent(data, d => d.value)) .interpolator(d3.interpolateCool) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) svg.append('g') .call(xAxis) const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d.value), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; //Returns true if cricle (x,y) intersects with any circle in the queue function intersects(x,y) { let a = head; while(a) { if (radius2 - epsilon > (a.x - x)**2 + (a.y - y)**2){ return true; } a = a.next; } return false; } //Place each circle sequentially for(const b of circles) { //Remove circles from the queue that can't intersect the new circle b while(head && head.x < b.x - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x, b.y = 0)){ let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x)**2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x)**2); if(Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if(Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; }while(a); } //Add b to queue b.next = null; if(head === null) head = tail = b; else tail = tail.next = b; } return circles; } const dodgeCircles = dodge(data, radius * 2 + padding); const o = d3.scaleDiverging() .domain([d3.min(dodgeCircles, d => d.y) ,0 , d3.max(dodgeCircles, d => d.y)]) .range([0 , 90, 180]) svg.append('g') .selectAll('path') .data(dodgeCircles) .join('path') .attr('d', d3.symbol().type(d3.symbolTriangle).size(25)) .attr('transform', d => `translate(${d.x}, ${height/2 + d.y}) rotate(${o(d.y)})`) .attr('fill', d => c(d.data.value)) .append('title') .text(d => d.data.name); return svg.node(); }35:Ta92,chartHexagon = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12); // config const radius = 3.2; const padding = 1.5; // --- svg.append('defs') .append('path') .attr('id', 'hexagonShape') .attr('d', 'M3.4641016151377544 0L6.928203230275509 2L6.928203230275509 6L3.4641016151377544 8L0 6L0 2Z') .attr('transform', 'translate(-3,-4)') const x = d3.scaleLinear() .domain(d3.extent(data, d => d.value)) .range([margin.left, width - margin.right]) const c = d3.scaleSequential() // see https://observablehq.com/@d3/sequential-scales?collection=@d3/d3-scale-chromatic .domain(d3.extent(data, d => d.value)) .interpolator(d3.interpolateCool) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) svg.append('g') .call(xAxis) const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d.value), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; //Returns true if cricle (x,y) intersects with any circle in the queue function intersects(x,y) { let a = head; while(a) { if (radius2 - epsilon > (a.x - x)**2 + (a.y - y)**2){ return true; } a = a.next; } return false; } //Place each circle sequentially for(const b of circles) { //Remove circles from the queue that can't intersect the new circle b while(head && head.x < b.x - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x, b.y = 0)){ let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x)**2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x)**2); if(Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if(Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; }while(a); } //Add b to queue b.next = null; if(head === null) head = tail = b; else tail = tail.next = b; } return circles; } svg.append('g') .selectAll('use') .data(dodge(data, radius * 2 + padding)) .join('use') .attr('href', '#hexagonShape') .attr('transform', d => `translate(${d.x}, ${height/2 + d.y}) rotate(${d3.randomInt(1,8)()*45})`) .attr('fill', d => c(d.data.value)) .append('title') .text(d => d.data.name); return svg.node(); }36:Tcc0,chartShadow = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12); // config const radius = 3; const padding = 1.5; // --- // shadow effect from https://observablehq.com/@nbremer/drop-shadow-svg-filter const defs = svg.append('defs') const filter = defs.append('filter').attr('id', 'shadow') .attr('width','5000%') .attr('height','5000%') .attr('x','-2000%') .attr('y','-2000%') filter.append('feColorMatrix') .attr('type', 'matrix') .attr('values', `0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1 0`) filter.append('feGaussianBlur') .attr('stdDeviation', '2') .attr('result', 'coloredBlur') const feMerge = filter.append('feMerge') feMerge.append('feMergeNode').attr('in', 'coloredBlur') feMerge.append('feMergeNode').attr('in', 'SourceGraphic') // --- const x = d3.scaleLinear() .domain(d3.extent(data, d => d.value)) .range([margin.left, width - margin.right]) const c = d3.scaleSequential() // see https://observablehq.com/@d3/sequential-scales?collection=@d3/d3-scale-chromatic .domain(d3.extent(data, d => d.value)) .interpolator(d3.interpolateCool) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) svg.append('g') .call(xAxis) const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d.value), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; //Returns true if cricle (x,y) intersects with any circle in the queue function intersects(x,y) { let a = head; while(a) { if (radius2 - epsilon > (a.x - x)**2 + (a.y - y)**2){ return true; } a = a.next; } return false; } //Place each circle sequentially for(const b of circles) { //Remove circles from the queue that can't intersect the new circle b while(head && head.x < b.x - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x, b.y = 0)){ let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x)**2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x)**2); if(Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if(Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; }while(a); } //Add b to queue b.next = null; if(head === null) head = tail = b; else tail = tail.next = b; } return circles; } svg.append('g') .selectAll('circles') .data(dodge(data, radius * 2 + padding)) .join('circle') .attr('cx', d => d.x) .attr('cy', d => height/2 + d.y) .attr('r', radius) .style('fill', 'white') // .style('stroke', 'black') .style('stroke-width', 0.25) .style('filter', 'url(#shadow)') .style('stroke', d => c(d.data.value)) .append('title') .text(d => d.data.name); return svg.node(); }37:Tc22,chartGooey = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12); // config const radius = 4; // 3 or 4 const padding = 1.5; // --- // gooey effect see https://www.visualcinnamon.com/2015/05/gooey-effect const defs = svg.append('defs') const filter = defs.append('filter').attr('id', 'gooey') filter.append('feGaussianBlur') .attr('in', 'SourceGraphic') .attr('stdDeviation', '4.2') // 2.2 or 4.2 .attr('result', 'blur') filter.append('feColorMatrix') .attr('in', 'blur') .attr('mode', 'matrix') .attr('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7') .attr('result', 'gooey') filter.append('feComposite') .attr('in', 'SourceGraphic') .attr('in2', 'gooey') .attr('operator', 'atop') // --- const x = d3.scaleLinear() .domain(d3.extent(data, d => d.value)) .range([margin.left, width - margin.right]) const c = d3.scaleSequential() // see https://observablehq.com/@d3/sequential-scales?collection=@d3/d3-scale-chromatic .domain(d3.extent(data, d => d.value)) .interpolator(d3.interpolateCool) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) svg.append('g') .call(xAxis) const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d.value), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; //Returns true if cricle (x,y) intersects with any circle in the queue function intersects(x,y) { let a = head; while(a) { if (radius2 - epsilon > (a.x - x)**2 + (a.y - y)**2){ return true; } a = a.next; } return false; } //Place each circle sequentially for(const b of circles) { //Remove circles from the queue that can't intersect the new circle b while(head && head.x < b.x - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x, b.y = 0)){ let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x)**2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x)**2); if(Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if(Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; }while(a); } //Add b to queue b.next = null; if(head === null) head = tail = b; else tail = tail.next = b; } return circles; } svg.append('g') .style('filter', 'url(#gooey)') .selectAll('circles') .data(dodge(data, radius * 2 + padding)) .join('circle') .attr('cx', d => d.x) .attr('cy', d => height/2 + d.y) .attr('r', radius) .attr('fill', d => c(d.data.value)) .append('title') .text(d => d.data.name); return svg.node(); }38:T1284,chartPencil = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12); // config const radius = 3; const padding = 1.5; // --- 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.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', .05) .attr('numOctaves', 5) .attr('seed', '1') .attr('result', 'f1') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 35) .attr('in', 'SourceTextured') .attr('in2', 'f1') .attr('result', 'f4') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .15) .attr('numOctaves', 5) .attr('seed', '10') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 8) .attr('in', 'SourceTextured') .attr('in2', 'f2') .attr('result', 'f5') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .33) .attr('numOctaves', 5) .attr('seed', '100') .attr('result', 'f3') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 10) .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 x = d3.scaleLinear() .domain(d3.extent(data, d => d.value)) .range([margin.left, width - margin.right]) const c = d3.scaleSequential() // see https://observablehq.com/@d3/sequential-scales?collection=@d3/d3-scale-chromatic .domain(d3.extent(data, d => d.value)) .interpolator(d3.interpolateCool) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) svg.append('g') .call(xAxis) const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d.value), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; //Returns true if cricle (x,y) intersects with any circle in the queue function intersects(x,y) { let a = head; while(a) { if (radius2 - epsilon > (a.x - x)**2 + (a.y - y)**2){ return true; } a = a.next; } return false; } //Place each circle sequentially for(const b of circles) { //Remove circles from the queue that can't intersect the new circle b while(head && head.x < b.x - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x, b.y = 0)){ let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x)**2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x)**2); if(Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if(Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; }while(a); } //Add b to queue b.next = null; if(head === null) head = tail = b; else tail = tail.next = b; } return circles; } svg.append('g') .attr('filter', 'url(#pencilTexture)') .selectAll('circles') .data(dodge(data, radius * 2 + padding)) .join('circle') .attr('cx', d => d.x) .attr('cy', d => height/2 + d.y) .attr('r', radius) .attr('fill', d => c(d.data.value)) .append('title') .text(d => d.data.name); return svg.node(); }39:Tc61,chartSphere = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12); // config const radius = 3; const padding = 1.5; // --- const c = d3.scaleSequential() // see https://observablehq.com/@d3/sequential-scales?collection=@d3/d3-scale-chromatic .domain(d3.extent(data, d => d.value)) .interpolator(d3.interpolateCool) // radial gradient / sphere, see https://www.visualcinnamon.com/2016/05/data-based-svg-gradient-d3 const sphereGradients = svg.append('defs') .selectAll('radialGradient') .data(data) .join('radialGradient') .attr('id', d => 'gradient-' + d.value) .attr('cx', '35%') .attr('cy', '35%') .attr('r', '60%') sphereGradients.append('stop') .attr('offset', '0%') .attr('stop-color', d => d3.rgb(c(d.value)).brighter(1) ) sphereGradients.append('stop') .attr('offset', '50%') .attr('stop-color', d => d3.rgb(c(d.value)) ) sphereGradients.append('stop') .attr('offset', '100%') .attr('stop-color', d => d3.rgb(c(d.value)).darker(1.75) ) // --- const x = d3.scaleLinear() .domain(d3.extent(data, d => d.value)) .range([margin.left, width - margin.right]) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) svg.append('g') .call(xAxis) const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d.value), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; //Returns true if cricle (x,y) intersects with any circle in the queue function intersects(x,y) { let a = head; while(a) { if (radius2 - epsilon > (a.x - x)**2 + (a.y - y)**2){ return true; } a = a.next; } return false; } //Place each circle sequentially for(const b of circles) { //Remove circles from the queue that can't intersect the new circle b while(head && head.x < b.x - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x, b.y = 0)){ let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x)**2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x)**2); if(Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if(Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; }while(a); } //Add b to queue b.next = null; if(head === null) head = tail = b; else tail = tail.next = b; } return circles; } svg.append('g') .selectAll('circles') .data(dodge(data, radius * 2 + padding)) .join('circle') .attr('cx', d => d.x) .attr('cy', d => height/2 + d.y) .attr('r', radius) .attr('fill', d => 'url(#gradient-'+ d.data.value +')') .append('title') .text(d => d.data.name); return svg.node(); }3a:Tbe2,chartGlow = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12); // config const radius = 3; const padding = 1.5; // --- // 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') .attr('width','5000%') .attr('height','5000%') .attr('x','-2000%') .attr('y','-2000%') 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 x = d3.scaleLinear() .domain(d3.extent(data, d => d.value)) .range([margin.left, width - margin.right]) const c = d3.scaleSequential() // see https://observablehq.com/@d3/sequential-scales?collection=@d3/d3-scale-chromatic .domain(d3.extent(data, d => d.value)) .interpolator(d3.interpolateCool) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) svg.append('g') .call(xAxis) const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d.value), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; //Returns true if cricle (x,y) intersects with any circle in the queue function intersects(x,y) { let a = head; while(a) { if (radius2 - epsilon > (a.x - x)**2 + (a.y - y)**2){ return true; } a = a.next; } return false; } //Place each circle sequentially for(const b of circles) { //Remove circles from the queue that can't intersect the new circle b while(head && head.x < b.x - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x, b.y = 0)){ let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x)**2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x)**2); if(Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if(Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; }while(a); } //Add b to queue b.next = null; if(head === null) head = tail = b; else tail = tail.next = b; } return circles; } svg.append('g') .selectAll('circles') .data(dodge(data, radius * 2 + padding)) .join('circle') .attr('cx', d => d.x) .attr('cy', d => height/2 + d.y) .attr('r', radius) .style('fill', d => c(d.data.value)) .style('filter', 'url(#glow)') .append('title') .text(d => d.data.name); return svg.node(); }3b:Tbe4,chartGlow2 = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12); // config const radius = 3; const padding = 1.5; // --- // 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', 'glow2') .attr('width','5000%') .attr('height','5000%') .attr('x','-2000%') .attr('y','-2000%') filter.append('feGaussianBlur') .attr('stdDeviation', '12') .attr('result', 'coloredBlur') const feMerge = filter.append('feMerge') feMerge.append('feMergeNode').attr('in', 'coloredBlur') feMerge.append('feMergeNode').attr('in', 'SourceGraphic') // --- const x = d3.scaleLinear() .domain(d3.extent(data, d => d.value)) .range([margin.left, width - margin.right]) const c = d3.scaleSequential() // see https://observablehq.com/@d3/sequential-scales?collection=@d3/d3-scale-chromatic .domain(d3.extent(data, d => d.value)) .interpolator(d3.interpolateCool) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) svg.append('g') .call(xAxis) const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d.value), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; //Returns true if cricle (x,y) intersects with any circle in the queue function intersects(x,y) { let a = head; while(a) { if (radius2 - epsilon > (a.x - x)**2 + (a.y - y)**2){ return true; } a = a.next; } return false; } //Place each circle sequentially for(const b of circles) { //Remove circles from the queue that can't intersect the new circle b while(head && head.x < b.x - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x, b.y = 0)){ let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x)**2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x)**2); if(Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if(Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; }while(a); } //Add b to queue b.next = null; if(head === null) head = tail = b; else tail = tail.next = b; } return circles; } svg.append('g') .selectAll('circles') .data(dodge(data, radius * 2 + padding)) .join('circle') .attr('cx', d => d.x) .attr('cy', d => height/2 + d.y) .attr('r', radius) .style('fill', d => c(d.data.value)) .style('filter', 'url(#glow2)') .append('title') .text(d => d.data.name); return svg.node(); }3c:T633, dodgeData = { // const dodge = (data, radius) => { const x = d3.scaleLinear() // remove .domain(d3.extent(data, d => d.value)) // remove .range([margin.left, width - margin.right]) // remove const radius2 = 7.5 ** 2; // const radius2 = radius ** 2; const circles = data.map(d => ({x: x(d.value), data: d})).sort((a, b) => a.x - b.x); const epsilon = 1e-3; let head = null, tail = null; //Returns true if cricle (x,y) intersects with any circle in the queue function intersects(x,y) { let a = head; while(a) { if (radius2 - epsilon > (a.x - x)**2 + (a.y - y)**2){ return true; } a = a.next; } return false; } //Place each circle sequentially for(const b of circles) { //Remove circles from the queue that can't intersect the new circle b while(head && head.x < b.x - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x, b.y = 0)){ let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x)**2); let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x)**2); if(Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if(Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; }while(a); } //Add b to queue b.next = null; if(head === null) head = tail = b; else tail = tail.next = b; } return circles; }3d:T85c,hatchPath = "M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z"; // from https://observablehq.com/@didoesdigital/17-june-2020-d3-bar-chart-with-textured-line3e:[{"id":"9d5cca51d590a0f61a8b5147475a3cbeb721a00a60e2b8afbf89da9b1a236f159b26ea8f1b22a9b28d5cf0f545b96f1ebfdd4d483650628772f0c326ededb481","href":"https://static.observableusercontent.com/files/9d5cca51d590a0f61a8b5147475a3cbeb721a00a60e2b8afbf89da9b1a236f159b26ea8f1b22a9b28d5cf0f545b96f1ebfdd4d483650628772f0c326ededb481","name":"cars-2.csv","type":"text/csv","lastModified":1601155151588.619,"size":20140}] 30:{"id":"2d62fa5368b7b1b2","slug":"beeswarm-playground","title":"beeswarm playground","thumbnail":"180a7ccfc31a8f2470cd703b6eb38a966dd585ab5167c55c2df8ddef3ca1342c","access_level":"public","create_time":"$D2020-09-26T20:52:28.138Z","update_time":"$D2021-02-05T16:34:03.489Z","view_time":null,"first_public_time":"$D2020-10-03T15:46:03.511Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"bc002cf305008bcd","login":"ssiegmund","name":"Sascha Siegmund","avatar_url":"https://avatars-next.observableusercontent.com/5a45ae371c30c037498e6662f34fe1463a4a35a14b5b511f42f25fe648219dcb","tier":"starter_2024"},"version":648,"publish_version":648,"role":null,"authored":false,"authors":[{"type":"individual","id":"bc548c62f8872cf2","login":"ssiegmund","name":"Sascha Siegmund","avatar_url":"https://avatars-next.observableusercontent.com/5a45ae371c30c037498e6662f34fe1463a4a35a14b5b511f42f25fe648219dcb","tier":null}],"members":[{"type":"individual","id":"bc548c62f8872cf2","login":"ssiegmund","name":"Sascha Siegmund","avatar_url":"https://avatars-next.observableusercontent.com/5a45ae371c30c037498e6662f34fe1463a4a35a14b5b511f42f25fe648219dcb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"54dbead08078c4bf","slug":"learn","title":"playgrounds","owner":{"id":"bc002cf305008bcd","login":"ssiegmund","name":"Sascha Siegmund"}},"type":"notebook","body":{"titling":"auto","title":"beeswarm playground","cells":[{"id":0,"value":"md`# beeswarm playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`references: \nhttps://observablehq.com/@d3/beeswarm \nhttps://observablehq.com/@d3/beeswarm-ii`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"data[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"data = d3.csvParse(await FileAttachment(\"cars-2.csv\").text(), ({Name: name, Weight_in_lbs: value}) => ({name, value: +value}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"margin = ({top:20, bottom:20, left:20, right:20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 31:"$30:body"