From a9c3d9543725c239dcf1365cb3f3c8482b29c9fd Mon Sep 17 00:00:00 2001
From: Jan Diehm <jadiehm@gmail.com>
Date: Mon, 23 Sep 2024 17:17:28 -0500
Subject: [PATCH] adds scatter plots

---
 package-lock.json                           |   6 +
 package.json                                |   1 +
 src/components/Distribution.svelte          |   3 -
 src/components/Index.svelte                 |  87 ++++++------
 src/components/Scatter.svelte               | 147 ++++++++++++++++++++
 src/components/layercake/AxisX.svg.svelte   |   9 +-
 src/components/layercake/AxisY.svg.svelte   |   3 +-
 src/components/layercake/Line.svelte        |   3 +-
 src/components/layercake/Scatter.svg.svelte |  30 +++-
 src/styles/reset.css                        |   6 +-
 10 files changed, 241 insertions(+), 54 deletions(-)
 create mode 100644 src/components/Scatter.svelte

diff --git a/package-lock.json b/package-lock.json
index 0b8f0f5c..17c29268 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@leveluptuts/svelte-fit": "^1.0.3",
 				"axios": "^1.6.7",
+				"d3-regression": "^1.3.10",
 				"fs": "^0.0.1-security",
 				"image-download": "^2.1.0",
 				"image-downloader": "^4.3.0",
@@ -1524,6 +1525,11 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/d3-regression": {
+			"version": "1.3.10",
+			"resolved": "https://registry.npmjs.org/d3-regression/-/d3-regression-1.3.10.tgz",
+			"integrity": "sha512-PF8GWEL70cHHWpx2jUQXc68r1pyPHIA+St16muk/XRokETzlegj5LriNKg7o4LR0TySug4nHYPJNNRz/W+/Niw=="
+		},
 		"node_modules/d3-scale": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
diff --git a/package.json b/package.json
index cad7507b..9e26f9ec 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
 	"dependencies": {
 		"@leveluptuts/svelte-fit": "^1.0.3",
 		"axios": "^1.6.7",
+		"d3-regression": "^1.3.10",
 		"fs": "^0.0.1-security",
 		"image-download": "^2.1.0",
 		"image-downloader": "^4.3.0",
diff --git a/src/components/Distribution.svelte b/src/components/Distribution.svelte
index d0e33a06..3ada30cb 100644
--- a/src/components/Distribution.svelte
+++ b/src/components/Distribution.svelte
@@ -12,8 +12,6 @@
 
     export let data;
 
-    $: console.log({data})
-
     data.forEach(d => {
         d[yKey] = +d[yKey];
         d[yKey] = +d[yKey];
@@ -34,7 +32,6 @@
 
     const allWineData = findMatch("all", groupedData)
     const onlyAnimalWineData = findMatch("animal wine", groupedData)
-    console.log(onlyAnimalWineData)
     const lineData = allWineData;
 
     const endObj = {animalGroup: "end", category: "end", bucket: "end", percent: 0, count: 0};
diff --git a/src/components/Index.svelte b/src/components/Index.svelte
index 5b43ff9f..c3925764 100644
--- a/src/components/Index.svelte
+++ b/src/components/Index.svelte
@@ -2,56 +2,61 @@
 	import { getContext } from "svelte";
 	import { animalSelect, metricSelect } from "$stores/misc.js";
 	import Intro from "$components/Intro.svelte";
-	// import PhotoTest from "$components/PhotoTest.svelte";
-	// import Distribution from "$components/Distribution.svelte";
-	// import Select from "$components/helpers/Select.svelte";
+	import PhotoTest from "$components/PhotoTest.svelte";
+	import Distribution from "$components/Distribution.svelte";
+	import Scatter from "$components/Scatter.svelte";
+	import Select from "$components/helpers/Select.svelte";
 
-	// import wineData_summary from "$data/wineData_summary.csv";
-	// import wineData_catSummary from "$data/wineData_catSummary.csv";
-	// import wineData_birdSummary from "$data/wineData_birdSummary.csv";
-	// import WIP from "$components/helpers/WIP.svelte";
-	// import Footer from "$components/Footer.svelte";
+	import allWineData from "$data/wineData.csv"
+	import wineData_summary from "$data/wineData_summary.csv";
+	import wineData_catSummary from "$data/wineData_catSummary.csv";
+	import wineData_birdSummary from "$data/wineData_birdSummary.csv";
+	import WIP from "$components/helpers/WIP.svelte";
+	import Footer from "$components/Footer.svelte";
 
-	// const copy = getContext("copy");
-	// const data = getContext("data");
+	const copy = getContext("copy");
+	const data = getContext("data");
 
-	// let optionsMetric = ["price", "rating"];
-	// let optionsAnimal = ["all", "cats", "birds"];
+	let optionsMetric = ["price", "rating"];
+	let optionsAnimal = ["all", "cats", "birds"];
 
-	// function setData($animalSelect, $metricSelect) {
-	// 	if ($animalSelect == "birds") {
-	// 		if ($metricSelect == "price") { 
-	// 			return wineData_birdSummary.filter((d) => d.category == "price");
-	// 		} else if ($metricSelect == "rating") {
-	// 			return wineData_birdSummary.filter((d) => d.category == "rating");
-	// 		}
-	// 	} else if ($animalSelect == "cats") {
-	// 		if ($metricSelect == "price") { 
-	// 			return wineData_catSummary.filter((d) => d.category == "price");
-	// 		} else if ($metricSelect == "rating") {
-	// 			return wineData_catSummary.filter((d) => d.category == "rating");
-	// 		}
-	// 	} else {
-	// 		if ($metricSelect == "price") { 
-	// 			return wineData_summary.filter((d) => d.category == "price");
-	// 		} else if ($metricSelect == "rating") {
-	// 			return wineData_summary.filter((d) => d.category == "rating");
-	// 		}
-	// 	}
-	// }
+	function setData($animalSelect, $metricSelect) {
+		if ($animalSelect == "birds") {
+			if ($metricSelect == "price") { 
+				return wineData_birdSummary.filter((d) => d.category == "price");
+			} else if ($metricSelect == "rating") {
+				return wineData_birdSummary.filter((d) => d.category == "rating");
+			}
+		} else if ($animalSelect == "cats") {
+			if ($metricSelect == "price") { 
+				return wineData_catSummary.filter((d) => d.category == "price");
+			} else if ($metricSelect == "rating") {
+				return wineData_catSummary.filter((d) => d.category == "rating");
+			}
+		} else {
+			if ($metricSelect == "price") { 
+				return wineData_summary.filter((d) => d.category == "price");
+			} else if ($metricSelect == "rating") {
+				return wineData_summary.filter((d) => d.category == "rating");
+			}
+		}
+	}
 
-	// $: dataSet = setData($animalSelect, $metricSelect)
+	$: dataSet = setData($animalSelect, $metricSelect)
 
 	// $: dataSet = $animalSelect == "all"
 	// 	? wineData_summary 
 	// 	: $animalSelect == "cats"
 	// 	? wineData_catSummary
 	// 	: wineData_birdSummary;
-
-	// $: console.log(dataSet)
 </script>
 
-<!-- <div class="selects">
+{#if dataSet.length > 0}
+	{#key dataSet}
+		<Scatter data={allWineData} />
+	{/key}
+{/if}
+<div class="selects">
 	<Select options={optionsAnimal} id={"id-animalSelect"}/>
 	<Select options={optionsMetric} id={"id-metricSelect"}/>
 </div>
@@ -61,11 +66,11 @@
 	{/key}
 {/if}
 
-<PhotoTest /> -->
-<!-- <WIP />
-<Demo /> -->
+<PhotoTest />
+<WIP />
+<!-- <Demo /> -->
 <!-- <Footer /> -->
-<Intro />
+<!-- <Intro /> -->
 
 <style>
 	.selects {
diff --git a/src/components/Scatter.svelte b/src/components/Scatter.svelte
new file mode 100644
index 00000000..ff2f5438
--- /dev/null
+++ b/src/components/Scatter.svelte
@@ -0,0 +1,147 @@
+<script>
+    import { onMount } from "svelte";
+    import { LayerCake, Svg, Html } from 'layercake';
+    import ScatterSvg from "$components/layercake/Scatter.svg.svelte";
+
+    import AxisX from "$components/layercake/AxisX.svg.svelte";
+    import AxisY from "$components/layercake/AxisY.svg.svelte";
+    import * as d3 from "d3";
+    import * as d3Regression from 'd3-regression';
+    import { tweened } from 'svelte/motion';
+	import * as eases from 'svelte/easing';
+
+    export let data;
+
+    const topgroups = ["amphibian/reptile", "bat", "bear", "bird", "camelus", "cat", "cattle",
+        "deer-like", "dog", "elephant", "fish", "hippo", "horse", "human", "insect",
+        "marine invertebrate", "marsupial", "monkey", "mustelid-like", "mythical", "none",
+        "rabbit", "ram-like", "rhino", "rodent-like", "suid", "whale/shark/dolphin"  
+    ];
+
+    function filterData(animal) {
+        let filteredData = animal !== "cat"
+            ? data.filter(d => d.topgroup.includes(animal))
+            : data.filter(d => d.topgroup.includes(animal) && !d.topgroup.includes("cattle"));
+
+        return filteredData;
+    }
+
+    const curve = d3.curveLinear;
+    const yKey = 'price';
+    const xKey = 'rating';
+    const xKeyReg = d => +d.rating;
+    const yKeyReg = d => +d.price;
+
+    data.forEach(d => {
+        d[xKey] = +d[xKey];
+        d[yKey] = +d[yKey];
+    });
+
+    const r = 4;
+    const padding = 10;
+    const color = '#d0c8a8';
+
+    const tweenOptions = {
+		duration: 300,
+		easing: eases.cubicInOut
+	};
+
+    const xDomain = tweened(undefined, tweenOptions);
+	const yDomain = tweened(undefined, tweenOptions);
+
+    yDomain.set([0,500]);
+    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
+
+    function calcSlope(data) {
+        let deltaX = data[1].x - data[0].x;
+        let deltaY = data[1].y - data[0].y;
+        let slope = deltaY / deltaX;
+
+        return slope
+    }
+</script>
+
+<section id="scatter">
+        {#each topgroups as animal, i}
+            {@const animalData = filterData(animal)}
+            {@const trendLine = regression(animalData)}
+            {@const trendLineData = [
+                { x: trendLine[0][0], y: trendLine[0][1] },
+                { x: trendLine[1][0], y: trendLine[1][1] }
+              ]}
+            {@const slope = calcSlope(trendLineData)}
+            <div class="chart-wrapper">
+                <h3>{animal}</h3>
+                <p class="tot-count">{animalData.length} wines</p>
+                <p class="tot-count">{Math.round(slope)} slope</p>
+                <div class="chart-container" id="scatterplot" style="pointer-events:none">
+                        <LayerCake
+                            padding={{ top: 10, right: 5, bottom: 20, left: 5 }}
+                            x={xKey}
+                            y={yKey}
+                            xPadding={[padding, padding]}
+                            yPadding={[padding, padding]}
+                            data={[animalData, trendLineData]}
+                            xDomain={$xDomain}
+                            yDomain={$yDomain}
+                        >
+                            <Svg>
+                                <AxisX 
+                                    gridlines={true} 
+                                />
+                                <AxisY 
+                                    gridlines={true} 
+                                    ticks={5} />
+                                <ScatterSvg {r} fill={color} />
+                            </Svg>
+                        </LayerCake>
+                </div>
+            </div>
+        {/each}
+</section>
+
+<style>
+    #scatter {
+        width: 100%;
+        height: auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 5rem;
+    }
+
+    .chart-wrapper {
+        width: 100%;
+        max-width: 250px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        margin: 2rem;
+    }
+    h3 {
+        font-family: var(--sans);
+        font-size: var(--14px);
+        font-weight: 700;
+        text-align: center;
+        margin: 0;
+    }
+
+    .tot-count {
+        font-family: var(--sans);
+        font-size: var(--14px);
+        text-align: center;
+        margin: 0 0;
+        font-size: 0.8rem;
+    }
+
+    .chart-container {
+        width: 100%;
+        height: 250px;
+        overflow: hidden;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/layercake/AxisX.svg.svelte b/src/components/layercake/AxisX.svg.svelte
index 1a459db4..948972c6 100644
--- a/src/components/layercake/AxisX.svg.svelte
+++ b/src/components/layercake/AxisX.svg.svelte
@@ -45,14 +45,14 @@
 			transform="translate({tickCheck(tick, i, $width)},{$yRange[0]})"
 		>
 			{#if gridlines !== false}
-				<line class="gridline" y1={$height * -1} y2="0" x1="0" x2="0" />
+				<line class="gridline" y1="{$height * -1}" y2="0" x1="0" x2="0" />
 			{/if}
 			{#if tickMarks === true}
 				<line class="tick-mark" y1={0} y2={6} x1={0} x2={0} />
 			{/if}
-			<!-- <text x={0} y={yTick} dx="" dy="" text-anchor={textAnchor(i)}
+			<text x={0} y={yTick} dx="" dy="" text-anchor={textAnchor(i)}
 				>{formatTick(tick)}</text
-			> -->
+			>
 		</g>
 	{/each}
 	{#if baseline === true}
@@ -75,11 +75,12 @@
 	line,
 	.tick line {
 		stroke: var(--color-gray-300);
-		stroke-dasharray: 2;
+		stroke-dasharray: 2px 2px;
 	}
 
 	.tick text {
 		fill: var(--color-gray-600);
+		font-family: var(--sans);
 	}
 
 	.tick .tick-mark,
diff --git a/src/components/layercake/AxisY.svg.svelte b/src/components/layercake/AxisY.svg.svelte
index 1fc6c6bc..41f02035 100644
--- a/src/components/layercake/AxisY.svg.svelte
+++ b/src/components/layercake/AxisY.svg.svelte
@@ -54,10 +54,11 @@
 		stroke: var(--color-gray-300);
 	}
 	.tick .gridline {
-		stroke-dasharray: 4px 4px;
+		stroke-dasharray: 2px 2px;
 	}
 
 	.tick text {
 		fill: var(--color-gray-600);
+		font-family: var(--sans);
 	}
 </style>
diff --git a/src/components/layercake/Line.svelte b/src/components/layercake/Line.svelte
index 965cb22b..e537a146 100644
--- a/src/components/layercake/Line.svelte
+++ b/src/components/layercake/Line.svelte
@@ -2,13 +2,12 @@
 	import { getContext } from "svelte";
 	import { line, curveLinear, curveStepAfter } from "d3";
 
-	const { data, xGet, yGet } = getContext("LayerCake");
+	const { data, xGet, yGet, xScale, } = getContext("LayerCake");
 
 	export let stroke = "#000000";
 
 	export let curve = curveStepAfter;
 
-
 	$: path = line().x($xGet).y($yGet).curve(curve);
 	$: pathD = path($data);
 </script>
diff --git a/src/components/layercake/Scatter.svg.svelte b/src/components/layercake/Scatter.svg.svelte
index a443950d..cd2fe6f5 100644
--- a/src/components/layercake/Scatter.svg.svelte
+++ b/src/components/layercake/Scatter.svg.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { getContext } from "svelte";
+	import * as d3 from "d3";
 
 	const { data, xGet, yGet, xScale, yScale } = getContext("LayerCake");
 
@@ -7,12 +8,39 @@
 	export let fill = "#ccc";
 	export let stroke = "#000";
 	export let strokeWidth = 0;
+
+	const priceAVG = d3.mean($data[0], d => d.price);
+	const ratingAVG = d3.mean($data[0], d => d.rating);
+
+	console.log({priceAVG})
 </script>
 
 <g>
-	{#each $data as d}
+	{#each $data[0] as d}
 		{@const cx = $xGet(d)}
 		{@const cy = $yGet(d)}
 		<circle {cx} {cy} {r} {fill} {stroke} stroke-width={strokeWidth} />
 	{/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="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)} />
+</g>
+
+<style>
+	circle {
+		opacity: 0.75;
+		stroke-width: 1;
+		stroke: white;
+	}
+	.regression {
+		stroke-width: 2;
+		stroke: #c35e34;
+	}
+
+	.priceAVG, .ratingAVG {
+		stroke-width: 1;
+		stroke: #000000;
+	}
+</style>
diff --git a/src/styles/reset.css b/src/styles/reset.css
index 04767f6b..9e7ab866 100644
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -1,7 +1,9 @@
 
 body {
-	background-color: var(--wine-black, #181A1F);
-	color: var(--wine-tan, #CFCABF);
+	/* background-color: var(--wine-black, #181A1F); */
+	background-color: white;
+	/* color: var(--wine-tan, #CFCABF); */
+	color: black;
 	line-height: 1.4;
 	font-family: var(--font-body, serif);
 	font-feature-settings: 'kern' 1, 'onum' 0, 'liga' 0, 'tnum' 1;