with exponential regression

the-pudding · Sep 24, 2024 · 9a562ce · 9a562ce
1 parent 4d59d12
commit 9a562ce
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 12 deletions.
diff --git a/src/components/Scatter.svelte b/src/components/Scatter.svelte
@@ -27,11 +27,11 @@
 
         let filteredData;
         if ($animalSelect == "birds") {
-           filteredData = data.filter(d => d.subgroup.includes(animal))
+           filteredData = data.filter(d => d.subgroup.includes(animal) && d.price <= 150)
         } else if ($animalSelect == "cats") {
-            filteredData = data.filter(d => d.finalAnimal.includes(animal))
+            filteredData = data.filter(d => d.finalAnimal.includes(animal) && d.price <= 150)
         } else {
-            filteredData = data.filter(d => d.topgroup.includes(animal))
+            filteredData = data.filter(d => d.topgroup.includes(animal) && d.price <= 150)
         }
         return filteredData;
     }
@@ -59,13 +59,18 @@
     const xDomain = tweened(undefined, tweenOptions);
 	const yDomain = tweened(undefined, tweenOptions);
 
-    yDomain.set([0,500]);
+    yDomain.set([0,150]);
     xDomain.set([2,5]);
 
     // Regression Line
-    const regression = d3Regression.regressionLinear()
-        .x(d => xKeyReg(d)) // Define the x accessor
-        .y(d => yKeyReg(d)); // Define the y accessor
+
+    // const regression = d3Regression.regressionExp()
+    //     .x(d => xKeyReg(d)) // Define the x accessor
+    //     .y(d => yKeyReg(d)); // Define the y accessor
+
+    const regression = d3Regression.regressionExp()
+        .x(d => d.x)  // Accessor for x value
+        .y(d => d.y); // Accessor for y value
 
     function calcSlope(data) {
         let deltaX = data[1].x - data[0].x;
@@ -79,7 +84,11 @@
 <section id="scatter">
         {#each topgroups as animal, i}
             {@const animalData = filterData(animal)}
-            {@const trendLine = regression(animalData)}
+            {@const points = animalData.map(d => ({
+                x: +d.rating,  // Convert price to a number
+                y: +d.price  // Convert rating to a number
+            }))}
+            {@const trendLine = regression(points)}
             {@const trendLineData = [
                 { x: trendLine[0][0], y: trendLine[0][1] },
                 { x: trendLine[1][0], y: trendLine[1][1] }
@@ -96,7 +105,7 @@
                             y={yKey}
                             xPadding={[padding, padding]}
                             yPadding={[padding, padding]}
-                            data={[animalData, trendLineData]}
+                            data={[animalData, trendLine]}
                             xDomain={$xDomain}
                             yDomain={$yDomain}
                         >

diff --git a/src/components/layercake/Scatter.svg.svelte b/src/components/layercake/Scatter.svg.svelte
@@ -9,8 +9,23 @@
 	export let stroke = "#000";
 	export let strokeWidth = 0;
 
+	const regressionLine = $data[1];
+
 	const priceAVG = d3.mean($data[0], d => d.price);
 	const ratingAVG = d3.mean($data[0], d => d.rating);
+	
+
+	console.log($xScale.domain(), $yScale.domain())
+	console.log($xScale.range(), $yScale.range())
+	// console.log($data[1])
+	// console.log($xScale(regressionLine[0][0]), $yScale(regressionLine[0][1]));
+	
+	const path = d3.line()
+		.x(d => $xScale(d[0]))
+		.y(d => $yScale(d[1]))
+		(regressionLine);
+
+		console.log('Generated path:', path);
 </script>
 
 <g>
@@ -21,9 +36,10 @@
 	{/each}
 </g>
 <g class="lines">
-	<line class="priceAVG" x1={0} y1={$yScale(d3.mean($data[0], d => d.price))} x2={500} y2={$yScale(d3.mean($data[0], d => d.price))} />
-	<line class="ratingAVG" x1={$xScale(d3.mean($data[0], d => d.rating))} y1={0} x2={$xScale(d3.mean($data[0], d => d.rating))} y2={500} />
+	<line class="priceAVG" x1={0} y1={$yScale(d3.mean($data[0], d => d.price))} x2={250} y2={$yScale(d3.mean($data[0], d => d.price))} />
+	<line class="ratingAVG" x1={$xScale(d3.mean($data[0], d => d.rating))} y1={0} x2={$xScale(d3.mean($data[0], d => d.rating))} y2={220} />
 	<line class="regression" x1={$xScale($data[1][0].x)} y1={$yScale($data[1][0].y)} x2={$xScale($data[1][1].x)} y2={$yScale($data[1][1].y)} />
+	<path class="expRegression" d={path} />
 </g>
 
 <style>
@@ -32,9 +48,10 @@
 		stroke-width: 1;
 		stroke: white;
 	}
-	.regression {
+	.regression, .expRegression {
 		stroke-width: 2;
 		stroke: #c35e34;
+		fill: none;
 	}
 
 	.priceAVG, .ratingAVG {