Merge pull request #29 from NGO-Algorithm-Audit/feature/violin-tweaks

Feature/violin tweaks

Author: devhelpr

src/components/graphs/ViolinChart.tsx

@@ -10,7 +10,7 @@ interface ViolinChartProps {
 }
 
 const margin = { top: 30, right: 50, bottom: 60, left: 80 };
-const height = 380 - margin.top - margin.bottom;
+const height = 580 - margin.top - margin.bottom;
 
 const ViolinChart = ({
     categoricalColumn,
@@ -87,7 +87,7 @@ const ViolinChart = ({
                 ...realData.map(d => +d[numericColumn]),
                 ...syntheticData.map(d => +d[numericColumn]),
             ]) || 0;
-        const paddedMaxValue = maxValue + (maxValue - minValue) * 0.1;
+        const paddedMaxValue = maxValue + (maxValue - minValue) * 0.25;
 
         const yScale = d3
             .scaleLinear()
@@ -101,17 +101,51 @@ const ViolinChart = ({
 
             // Function to create violin path
             const createViolin = (values: number[], side: 'left' | 'right') => {
-                // Create kernel density estimation
+                // Skip if no values
+                if (values.length === 0) return null;
+
+                // Calculate Scott's rule for bandwidth
+                const std = Math.sqrt(d3.variance(values) || 0);
+                const bw = Math.pow(4 / (3 * values.length), 1 / 5) * std;
+
+                // Extend the range by 2 bandwidths on each side (cut=2)
+                const minValue = d3.min(values) || 0;
+                const maxValue = d3.max(values) || 0;
+                const extension = 2 * bw;
+                const densityPoints = d3.range(
+                    minValue - extension,
+                    maxValue + extension,
+                    (maxValue - minValue + 2 * extension) / 100
+                );
+
+                // Create kernel density estimation with Gaussian kernel
                 const kde = kernelDensityEstimator(
-                    kernelEpanechnikov(0.2),
-                    yScale.ticks(50)
+                    v => kernelGaussian(v, bw),
+                    densityPoints
                 );
                 const density: [number, number][] = kde(values);
-                const maxDensity = d3.max(density, d => d[1]) || 0;
+
+                // Scale the density values
+                // const maxDensity = d3.max(density, d => d[1]) || 0;
+                // const normalizedDensity = density.map(
+                //     d =>
+                //         [d[0], (d[1] / maxDensity) * bandwidth] as [
+                //             number,
+                //             number,
+                //         ]
+                // );
+                const totalArea = d3.sum(density, d => d[1]);
+                const normalizedDensity = density.map(
+                    d =>
+                        [d[0], (d[1] / totalArea) * bandwidth] as [
+                            number,
+                            number,
+                        ]
+                );
 
                 const widthScale = d3
                     .scaleLinear()
-                    .domain([0, maxDensity])
+                    .domain([0, d3.max(normalizedDensity, d => d[1]) || 0])
                     .range([0, bandwidth]);
 
                 const area = d3
@@ -125,9 +159,9 @@ const ViolinChart = ({
                         return side === 'left' ? 0 : width;
                     })
                     .y(d => yScale(d[0]))
-                    .curve(d3.curveBasis);
+                    .curve(d3.curveLinear);
 
-                return area(density);
+                return area(normalizedDensity);
             };
 
             // Kernel functions
@@ -140,12 +174,11 @@ const ViolinChart = ({
                 };
             }
 
-            function kernelEpanechnikov(k: number) {
-                return function (v: number) {
-                    return Math.abs((v /= k)) <= 1
-                        ? (0.75 * (1 - v * v)) / k
-                        : 0;
-                };
+            function kernelGaussian(v: number, bandwidth: number) {
+                return (
+                    Math.exp(-0.5 * Math.pow(v / bandwidth, 2)) /
+                    (bandwidth * Math.sqrt(2 * Math.PI))
+                );
             }
 
             // Calculate center position for the violin plot
@@ -179,31 +212,37 @@ const ViolinChart = ({
                         .attr('y2', yScale(q))
                         .attr('transform', `translate(${centerPos}, 0)`)
                         .style('stroke', color)
-                        .style('stroke-width', 1)
+                        .style('stroke-width', 2)
                         .style('stroke-dasharray', '3,3');
                 });
             };
 
             // Draw real data violin (left side)
             if (real.length > 0) {
-                svg.append('path')
-                    .attr('d', createViolin(real, 'left'))
-                    .attr('transform', `translate(${centerPos}, 0)`)
-                    .style('fill', 'steelblue')
-                    .style('opacity', 0.5);
+                const path = createViolin(real, 'left');
+                if (path) {
+                    svg.append('path')
+                        .attr('d', path)
+                        .attr('transform', `translate(${centerPos}, 0)`)
+                        .style('fill', 'steelblue')
+                        .style('opacity', 0.5);
 
-                drawQuartileLines(real, 'left', 'steelblue');
+                    drawQuartileLines(real, 'left', 'steelblue');
+                }
             }
 
             // Draw synthetic data violin (right side)
             if (synthetic.length > 0) {
-                svg.append('path')
-                    .attr('d', createViolin(synthetic, 'right'))
-                    .attr('transform', `translate(${centerPos}, 0)`)
-                    .style('fill', 'orange')
-                    .style('opacity', 0.5);
+                const path = createViolin(synthetic, 'right');
+                if (path) {
+                    svg.append('path')
+                        .attr('d', path)
+                        .attr('transform', `translate(${centerPos}, 0)`)
+                        .style('fill', 'orange')
+                        .style('opacity', 0.5);
 
-                drawQuartileLines(synthetic, 'right', 'orange');
+                    drawQuartileLines(synthetic, 'right', 'orange');
+                }
             }
         });
 

src/routes/SyntheticData.tsx

@@ -115,7 +115,7 @@ export default function SyntheticDataGeneration() {
             onRun({
                 isDemo: true,
                 sdgMethod: 'cart',
-                samples: 1000,
+                samples: 5000,
             });
         }
     }, [initialised, data]);