2c:null 2d:["$","title",null,{"children":"violin plot playground | Sascha Siegmund | Observable"}] 32:T773,chartKde = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const x = d3.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'none') .style('fill', '#69b3a2') .attr('d', area) return svg.node() }33:T776,chartStepCurve = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const x = d3.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.2; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveStep) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'none') .style('fill', '#69b3a2') .attr('d', area) return svg.node() }34:Ta38,chartGradient = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) // color gradient const colorScale = chroma.scale(['#ff6138', '#096286'].map(color => chroma(color).saturate(2))).mode('lch') const colors = [ {color: colorScale(0)}, {color: colorScale(0.2)}, {color: colorScale(1)}, ] svg.append('defs') .append('linearGradient') .attr('id', 'linearGradient') .attr('gradientUnits', 'userSpaceOnUse') .attr('x1', 500).attr('x2', 0) .attr('y1', 1000).attr('y2', 0) .selectAll('stop') .data(colors).join('stop') .attr('offset', (d,i) => `${Math.floor(i * 100 / (colors.length - 1))}%`) .attr('stop-color', d => d.color) .attr('stop-opactity', d => d.opacity > -1 ? d.opacity : 1) // --- const x = d3.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'none') .style('fill', 'url(#linearGradient)') .attr('d', area) return svg.node() }35:T1341,chartKdePencil = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) // color gradient const colorScale = chroma.scale(['#ff6138', '#096286'].map(color => chroma(color).saturate(2))).mode('lch') const colors = [ {color: colorScale(0)}, {color: colorScale(0.2)}, {color: colorScale(1)}, ] svg.append('defs') .append('linearGradient') .attr('id', 'linearGradient') .attr('gradientUnits', 'userSpaceOnUse') .attr('x1', 500).attr('x2', 0) .attr('y1', 1000).attr('y2', 0) .selectAll('stop') .data(colors).join('stop') .attr('offset', (d,i) => `${Math.floor(i * 100 / (colors.length - 1))}%`) .attr('stop-color', d => d.color) .attr('stop-opactity', d => d.opacity > -1 ? d.opacity : 1) // --- const defs = svg.append('defs') // pencil filter const pencilFilter = defs.append('filter') .attr('id', 'pencilTextureClean') .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 x = d3.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'none') .style('fill', 'url(#linearGradient)') .attr('d', area) .attr('filter', 'url(#pencilTextureClean)') return svg.node() }36:T13cb,chartKdeWatercolor = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) // color gradient const colorScale = chroma.scale(['#ff6138', '#096286'].map(color => chroma(color).saturate(2))).mode('lch') const colors = [ {color: colorScale(0)}, {color: colorScale(0.2)}, {color: colorScale(1)}, ] svg.append('defs') .append('linearGradient') .attr('id', 'linearGradient') .attr('gradientUnits', 'userSpaceOnUse') .attr('x1', 500).attr('x2', 0) .attr('y1', 1000).attr('y2', 0) .selectAll('stop') .data(colors).join('stop') .attr('offset', (d,i) => `${Math.floor(i * 100 / (colors.length - 1))}%`) .attr('stop-color', d => d.color) .attr('stop-opactity', d => d.opacity > -1 ? d.opacity : 1) // --- const defs = svg.append('defs') // pencil filter const pencilFilter = defs.append('filter') .attr('id', 'pencilTexture2') .attr('width','5000%') .attr('height','5000%') .attr('x','-2000%') .attr('y','-2000%') .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', .02) .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', 20) .attr('in', 'SourceTextured') .attr('in2', 'f1') .attr('result', 'f4') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .05) .attr('numOctaves', 5) .attr('seed', '10') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 20) .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') // --- const x = d3.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'none') .style('fill', 'url(#linearGradient)') .attr('d', area) .attr('filter', 'url(#pencilTexture2)') return svg.node() }37:Tcd0,chartKdeGooey = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) // color gradient const colorScale = chroma.scale(['#ff6138', '#096286'].map(color => chroma(color).saturate(2))).mode('lch') const colors = [ {color: colorScale(0)}, {color: colorScale(0.2)}, {color: colorScale(1)}, ] svg.append('defs') .append('linearGradient') .attr('id', 'linearGradient') .attr('gradientUnits', 'userSpaceOnUse') .attr('x1', 500).attr('x2', 0) .attr('y1', 1000).attr('y2', 0) .selectAll('stop') .data(colors).join('stop') .attr('offset', (d,i) => `${Math.floor(i * 100 / (colors.length - 1))}%`) .attr('stop-color', d => d.color) .attr('stop-opactity', d => d.opacity > -1 ? d.opacity : 1) // --- // gooey effect see https://www.visualcinnamon.com/2015/05/gooey-effect const defs = svg.append('defs') const filter = defs.append('filter').attr('id', 'gooey2') filter.append('feGaussianBlur') .attr('in', 'SourceGraphic') .attr('stdDeviation', '12') // 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.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .style('filter', 'url(#gooey2)') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'none') .style('fill', 'url(#linearGradient)') .attr('d', area) return svg.node() }38:Taec,chartCircles = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) // color gradient const colorScale = chroma.scale(['#ff6138', '#096286'].map(color => chroma(color).saturate(2))).mode('lch') const colors = [ {color: colorScale(0)}, {color: colorScale(0.2)}, {color: colorScale(1)}, ] svg.append('defs') .append('linearGradient') .attr('id', 'linearGradient') .attr('gradientUnits', 'userSpaceOnUse') .attr('x1', 500).attr('x2', 0) .attr('y1', 1000).attr('y2', 0) .selectAll('stop') .data(colors).join('stop') .attr('offset', (d,i) => `${Math.floor(i * 100 / (colors.length - 1))}%`) .attr('stop-color', d => d.color) .attr('stop-opactity', d => d.opacity > -1 ? d.opacity : 1) // --- const x = d3.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1]) + Math.cos(Math.PI * 2 * Math.random()) * Math.random() * 5) .x1(d => xNum(d[1]) + Math.cos(Math.PI * 2 * Math.random()) * Math.random() * 5) .y(d => y(d[0]) + Math.sin(Math.PI * 2 * Math.random()) * Math.random() * 5) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'none') .style('fill', 'url(#linearGradient)') .attr('d', area) return svg.node() }39:Tce7,chartTexture = { 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') // texture filter based on jpg, see https://observablehq.com/@leslie-s/5-svg-elements-to-make-svg-charts-feel-more-handcrafted const blendFilter = defs.append('filter') .attr('id','screenBlendFilter') .attr('width','100%') .attr('height','100%') .attr('x',0) .attr('y',0) .attr('filterUnits','objectBoundingBox'); blendFilter.append('feFlood') .attr('result','floodFill') .attr('x',0) .attr('y',0) .attr('width','100%') .attr('height','100%') // .attr('flood-color','#333') .attr('flood-color','#1863A8') .attr('flood-opacity',1); blendFilter.append('feBlend') .attr('in','SourceGraphic') .attr('in2','floodFill') .attr('mode','lighten'); defs.append('pattern') .attr('width','100%') .attr('height','100%') .attr('x',-70) .attr('y',0) .attr('patternUnits','userSpaceOnUse') .attr('id', 'drawing-texture') .append('image') // stock img from https://texturefabrik.com/2014/07/14/11-photocopy-textures-vol-3/ .attr('href', await FileAttachment("texturefabrik_photocopies_vol-3_01.jpg").url()) .attr('preserveAspectRatio', 'xMidYMid slice') .attr('filter','url(#screenBlendFilter)') .attr('viewBox','0 0 1000 1000') .attr('opacity',1) .attr('x',0) .attr('y',0) .attr('width','100%') .attr('height','100%') // --- const x = d3.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'none') .style('fill', 'url(#drawing-texture)') .attr('d', area) return svg.node() }3a:T11d0,chartPatternPencil = { 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') // hatching pattern (gradient) defs.append('pattern') .attr('width',4) .attr('height',4) .attr('patternUnits','userSpaceOnUse') .attr('id', 'hatchingPencil') .append('path') .attr('d',"M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2") .style('stroke', 'orange') .style('stroke-width', 1) // --- // 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 x = d3.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .attr('filter', 'url(#pencilTexturePattern)') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'none') .style('fill', 'url(#hatchingPencil)') .attr('d', area) return svg.node() }3b:Tfb2,chartBeeswarm = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const x = d3.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const c = d3.scaleSequential() .interpolator(d3.interpolateInferno) .domain(d3.extent(data, d => d.Sepal_Length)) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) // violins function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'lightgrey') .style('stroke-width', 2) .style('fill', 'none') .attr('d', area) // beeswarms const radius = 5.5; const padding = 1.5; const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({y: y(d.value), data: d})).sort((a, b) => a.y - b.y); 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.y < b.y - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x = 0, b.y)){ let a = head; b.x = Infinity; do { let x1 = a.x + Math.sqrt(radius2 - (a.y - b.y)**2); // let x2 = a.x - Math.sqrt(radius2 - (a.y - b.y)**2); if(Math.abs(x1) < Math.abs(b.x) && !intersects(x1, b.y)) b.x = x1; // if(Math.abs(x2) < Math.abs(b.x) && !intersects(x2, b.y)) b.x = x2; 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 beeswarm = data.map(d => ({name: d.Species, value: d.Sepal_Length})) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0]) + x.bandwidth()/2}, 0)`) .selectAll('circle') .data(d => dodge(beeswarm.filter(n => n.name == d[0]), radius * 2 + padding)) .join('circle') .attr('cy', d => d.y) .attr('cx', d => d.x) .attr('r', radius) .attr('fill', d => c(d.data.value)) return svg.node() }3c:T124a,chartBeeswarmGooey = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) // 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', '5') // 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.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const c = d3.scaleSequential() .interpolator(d3.interpolateInferno) .domain(d3.extent(data, d => d.Sepal_Length)) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) // violins function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'lightgrey') .style('stroke-width', 2) .style('fill', 'none') .attr('d', area) // beeswarms const radius = 5.5; const padding = 1.5; const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({y: y(d.value), data: d})).sort((a, b) => a.y - b.y); 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.y < b.y - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x = 0, b.y)){ let a = head; b.x = Infinity; do { let x1 = a.x + Math.sqrt(radius2 - (a.y - b.y)**2); // let x2 = a.x - Math.sqrt(radius2 - (a.y - b.y)**2); if(Math.abs(x1) < Math.abs(b.x) && !intersects(x1, b.y)) b.x = x1; // if(Math.abs(x2) < Math.abs(b.x) && !intersects(x2, b.y)) b.x = x2; 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 beeswarm = data.map(d => ({name: d.Species, value: d.Sepal_Length})) svg.append('g') .style('filter', 'url(#gooey)') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0]) + x.bandwidth()/2}, 0)`) .selectAll('circle') .data(d => dodge(beeswarm.filter(n => n.name == d[0]), radius * 2 + padding)) .join('circle') .attr('cy', d => d.y) .attr('cx', d => d.x) .attr('r', radius) .attr('fill', d => c(d.data.value)) return svg.node() }3d:T193c,chartPencil = { 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','5000%') .attr('height','5000%') .attr('x','-2000%') .attr('y','-2000%') .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', .02) .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', 20) .attr('in', 'SourceTextured') .attr('in2', 'f1') .attr('result', 'f4') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .05) .attr('numOctaves', 5) .attr('seed', '10') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 20) .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') // --- const x = d3.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const c = d3.scaleSequential() .interpolator(d3.interpolateInferno) .domain(d3.extent(data, d => d.Sepal_Length)) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) // violins function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'lightgrey') .style('stroke-width', 2) .style('fill', 'none') .attr('d', area) // beeswarms const radius = 5.5; const padding = 1.5; const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({y: y(d.value), data: d})).sort((a, b) => a.y - b.y); 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.y < b.y - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x = 0, b.y)){ let a = head; b.x = Infinity; do { let x1 = a.x + Math.sqrt(radius2 - (a.y - b.y)**2); // let x2 = a.x - Math.sqrt(radius2 - (a.y - b.y)**2); if(Math.abs(x1) < Math.abs(b.x) && !intersects(x1, b.y)) b.x = x1; // if(Math.abs(x2) < Math.abs(b.x) && !intersects(x2, b.y)) b.x = x2; 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 beeswarm = data.map(d => ({name: d.Species, value: d.Sepal_Length})) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0]) + x.bandwidth()/2}, 0)`) .selectAll('circle') .data(d => dodge(beeswarm.filter(n => n.name == d[0]), radius * 2 + padding)) .join('circle') .attr('cy', d => d.y) .attr('cx', d => d.x) .attr('r', radius) .attr('fill', d => c(d.data.value)) .attr('filter', 'url(#pencilTexture)') return svg.node() }3e:T1216,chartBeeswarmGlow = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) // 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', '10') .attr('result', 'coloredBlur') const feMerge = filter.append('feMerge') feMerge.append('feMergeNode').attr('in', 'coloredBlur') feMerge.append('feMergeNode').attr('in', 'SourceGraphic') // --- const x = d3.scaleBand() .domain(_.uniq(data.map(d => d.Species))) .range([margin.left, width - margin.right]) .padding(0.05) const y = d3.scaleLinear() .domain(d3.extent(data, d => d.Sepal_Length)).nice() .range([height - margin.bottom, margin.top]) const c = d3.scaleSequential() .interpolator(d3.interpolateInferno) .domain(d3.extent(data, d => d.Sepal_Length)) const xAxis = g => g .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) const yAxis = g => g .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .call(g => g.select('.domain').remove()) // violins function kde(kernel, thds) { return V => thds.map(t => [t, d3.mean(V, d => kernel(t - d))]) } function epanechnikov(bandwidth) { return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0; } const bandwidth = 0.3; const thds = y.ticks(40) const density = kde(epanechnikov(bandwidth), thds) const violins = d3.rollup(data, v => density(v.map(g => g.Sepal_Length)), d => d.Species) var allNum = []; [...violins.values()].forEach((d,i) => allNum = allNum.concat([...violins.values()][i].map(d => d[1]))) const xNum = d3.scaleLinear() .domain([-d3.max(allNum), d3.max(allNum)]) .range([0, x.bandwidth()]) const area = d3.area() .x0(d => xNum(-d[1])) .x1(d => xNum(d[1])) .y(d => y(d[0])) .curve(d3.curveNatural) svg.append('g') .call(xAxis) svg.append('g') .call(yAxis) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0])}, 0)`) .append('path') .datum(d => d[1]) .style('stroke', 'lightgrey') .style('stroke-width', 2) .style('fill', 'none') .attr('d', area) // beeswarms const radius = 5.5; const padding = 1.5; const dodge = (data, radius) => { const radius2 = radius ** 2; const circles = data.map(d => ({y: y(d.value), data: d})).sort((a, b) => a.y - b.y); 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.y < b.y - radius2) head = head.next; //Choose the minimum non-intersecting tangent if(intersects(b.x = 0, b.y)){ let a = head; b.x = Infinity; do { let x1 = a.x + Math.sqrt(radius2 - (a.y - b.y)**2); // let x2 = a.x - Math.sqrt(radius2 - (a.y - b.y)**2); if(Math.abs(x1) < Math.abs(b.x) && !intersects(x1, b.y)) b.x = x1; // if(Math.abs(x2) < Math.abs(b.x) && !intersects(x2, b.y)) b.x = x2; 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 beeswarm = data.map(d => ({name: d.Species, value: d.Sepal_Length})) svg.append('g') .selectAll('g') .data([...violins]) .join('g') .attr('transform', d => `translate(${x(d[0]) + x.bandwidth()/2}, 0)`) .selectAll('circle') .data(d => dodge(beeswarm.filter(n => n.name == d[0]), radius * 2 + padding)) .join('circle') .attr('cy', d => d.y) .attr('cx', d => d.x) .attr('r', radius) .attr('fill', d => c(d.data.value)) .style('filter', 'url(#glow)') return svg.node() }3f:[{"id":"bd7f2d935516b53006060b50aea0df59581a72659af1da8c64c5796b6c2537b37f0a256c5aeac9f61fbebdf9b28a806c8fd944643af2ee788ceae1418ed1cd26","href":"https://static.observableusercontent.com/files/bd7f2d935516b53006060b50aea0df59581a72659af1da8c64c5796b6c2537b37f0a256c5aeac9f61fbebdf9b28a806c8fd944643af2ee788ceae1418ed1cd26","name":"texturefabrik_photocopies_vol-3_01.jpg","type":"image/jpeg","lastModified":1606060166236.286,"size":2036516}] 30:{"id":"80fbda1947ada47f","slug":"violin-plot-playground","title":"violin plot playground","thumbnail":"8740d2cc495c7a03062419fec5731eac60a98ea05802ea02eb411ab1aa748561","access_level":"public","create_time":"$D2020-11-14T23:00:33.221Z","update_time":"$D2024-11-28T18:55:24.312Z","view_time":null,"first_public_time":"$D2020-11-22T15:58:27.726Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"bc002cf305008bcd","login":"ssiegmund","name":"Sascha Siegmund","avatar_url":"https://avatars-next.observableusercontent.com/5a45ae371c30c037498e6662f34fe1463a4a35a14b5b511f42f25fe648219dcb","tier":"starter_2024"},"version":851,"publish_version":null,"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":7,"collection":{"id":"54dbead08078c4bf","slug":"learn","title":"playgrounds","owner":{"id":"bc002cf305008bcd","login":"ssiegmund","name":"Sascha Siegmund"}},"type":"notebook","body":{"titling":"auto","title":"violin plot playground","cells":[{"id":0,"value":"md`# violin plot 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://www.d3-graph-gallery.com/violin.html (using kernel density estimation)\nhttps://observablehq.com/@d3/kernel-density-estimation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"data.filter(d => d.Species == 'setosa').map(d => d.Sepal_Length)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"_.uniq(data.map(d => d.Species))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"data[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"data = Object.assign(csv)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"csv = d3.csv(await 'https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv', d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"margin = ({left: 40, bottom: 40, right: 20, top: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"chroma = (await import(\"https://unpkg.com/chroma-js\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 31:"$30:body"