adds rating distro

the-pudding · Jul 22, 2024 · 9fa6469 · 9fa6469
1 parent 2febc9a
commit 9fa6469
Show file tree

Hide file tree

Showing 8 changed files with 256 additions and 44 deletions.
diff --git a/src/components/Distribution.svelte b/src/components/Distribution.svelte
@@ -8,11 +8,15 @@
     import * as d3 from "d3";
     import { hideTooltip } from "$stores/misc.js";
 
-    import data from "$data/percentDistribution.csv";
+    export let data;
+    export let metric;
+
+    console.log(data, metric)
 
     data.forEach(d => {
         d[yKey] = +d[yKey];
         d[yKey] = +d[yKey];
+        d[countKey] = +d[countKey];
     });
 
     const groupedData = d3.groups(data, d => d.topgroup);
@@ -22,24 +26,30 @@
 	}
 
     function findAllMatch(animal, data) {
-        let match = data.find(item => item.priceBucket == animal);
+        let match = data.find(item => item.bucket == animal);
         if (match) {
             return match.count
         } else {
             return "8419"
         }
 	}
 
-    const allWineData = findMatch("all", groupedData, "allWine");
+    const allWineData = findMatch("all", groupedData);
 
-    const endObj = {topgroup: "end", priceBucket: "end", percent: 0, count: 0}
+    const endObj = {topgroup: "end", bucket: "end", percent: 0, count: 0};
 
     allWineData.pop();
     allWineData.push(endObj);
 
-    const xKey = 'priceBucket';
+    const xKey = 'bucket';
     const yKey = 'percent';
     const countKey = 'count';
+    const xDomainColumn = metric == "price"
+        ? ['value', 'popular', 'premium', 'luxury', 'icon']
+        : ['3 & less', '3.1–3.5', '3.6–4', '4.1–4.5', '4.6 & above'];
+    const xDomainLine = metric == "price"
+        ? ['value', 'popular', 'premium', 'luxury', 'icon', 'end']
+        : ['3 & less', '3.1–3.5', '3.6–4', '4.1–4.5', '4.6 & above', 'end'];
 </script>
 
 <section id="distribution">
@@ -57,28 +67,30 @@
             <p class="desc">Greater than 5% difference</p>
         </div>
     </div>
-    <div class="key">
-        <div>
-            <p class="topline">Value</p>
-            <p class="desc">$9.99 and under</p>
-        </div>
-        <div>
-            <p class="topline">Popular</p>
-            <p class="desc">$10 to $19.99</p>
-        </div>
-        <div>
-            <p class="topline">Premium</p>
-            <p class="desc">$20 to 49.99</p>
-        </div>
-        <div>
-            <p class="topline">Luxury</p>
-            <p class="desc">$50 to $99.99</p>
-        </div>
-        <div>
-            <p class="topline">Icon</p>
-            <p class="desc">$100+</p>
+    {#if metric == "price"}
+        <div class="key">
+            <div>
+                <p class="topline">Value</p>
+                <p class="desc">$9.99 and under</p>
+            </div>
+            <div>
+                <p class="topline">Popular</p>
+                <p class="desc">$10 to $19.99</p>
+            </div>
+            <div>
+                <p class="topline">Premium</p>
+                <p class="desc">$20 to 49.99</p>
+            </div>
+            <div>
+                <p class="topline">Luxury</p>
+                <p class="desc">$50 to $99.99</p>
+            </div>
+            <div>
+                <p class="topline">Icon</p>
+                <p class="desc">$100+</p>
+            </div>
         </div>
-    </div>
+    {/if}
     <div class="tooltip" class:hidden={$hideTooltip}></div>
     {#each groupedData as animal, i}
     {@const animalData = animal[1]}
@@ -93,7 +105,7 @@
                     x={xKey}
                     y={yKey}
                     xScale={d3.scaleBand().paddingInner(0.02).round(true)}
-                    xDomain={['value', 'popular', 'premium', 'luxury', 'icon']}
+                    xDomain={xDomainColumn}
                     yDomain={[0, 100]}
                     data={animalData}
                     >
@@ -121,7 +133,7 @@
                         x={xKey}
                         y={yKey}
                         xScale={d3.scaleBand().paddingInner(0.02).round(true)}
-                        xDomain={['value', 'popular', 'premium', 'luxury', 'icon', 'end']}
+                        xDomain={xDomainLine}
                         yDomain={[0, 100]}
                         data={allWineData}
                         >

diff --git a/src/components/Index.svelte b/src/components/Index.svelte
@@ -1,14 +1,27 @@
 <script>
 	import { getContext } from "svelte";
+	import { catSet } from "$stores/misc.js";
 	import Distribution from "$components/Distribution.svelte";
+	import Select from "$components/helpers/Select.svelte";
+
+	import priceDistributionData from "$data/priceDistribution.csv";
+	import ratingDistributionData from "$data/ratingDistribution.csv";
 	// import WIP from "$components/helpers/WIP.svelte";
 	// import Footer from "$components/Footer.svelte";
 
 	// const copy = getContext("copy");
 	// const data = getContext("data");
+
+	let options = ["price", "rating"];
+
+	$: dataSet = $catSet == "price" ? priceDistributionData : ratingDistributionData;
 </script>
 
-<Distribution />
+<!-- <Distribution data={priceDistributionData} metric={"price"} /> -->
+<Select options={options}/>
+{#key dataSet}
+	<Distribution data={dataSet} metric={$catSet} />
+{/key}
 <!-- <WIP />
 <Demo /> -->
 <!-- <Footer /> -->
diff --git a/src/components/helpers/Select.svelte b/src/components/helpers/Select.svelte
@@ -1,5 +1,5 @@
 <script>
-	import {wineSet, falseWinesList} from "$stores/misc.js";
+	import {catSet, falseWinesList} from "$stores/misc.js";
 	export let options = [];
 	export let label = "";
 	export let disabled = false;
@@ -8,7 +8,7 @@
 
 	function valChange(value) { falseWinesList.set([]) }
 
-	$: wineSet.set(value)
+	$: catSet.set(value)
 	$: valChange(value);
 </script>
 
@@ -26,6 +26,8 @@
 <style>
 	.select {
 		position: relative;
+		width: 180px;
+		margin: 0 auto 2rem auto;
 	}
 
 	label {

diff --git a/src/components/layercake/Column.svelte b/src/components/layercake/Column.svelte
@@ -24,7 +24,8 @@
 	let isHovered = false;
 
 	function findMatch(object, data) {
-		return data.find(item => item.priceBucket === object.priceBucket);
+		let match = data.find(item => item.bucket === object.bucket)
+		return match
 	}
 
 	function colorByCompare(d, i) {
@@ -41,7 +42,7 @@
 		if (tooltip) {
 			tooltip.html(
 				`<p class="animal"><span class="bolded">${d.topgroup}</span></p>
-				<p class="details"><span class="bolded">${Math.round(d.percent)}%</span> of the wines with this animal are <span class="bolded">${d.priceBucket}</span> wines</p>`
+				<p class="details"><span class="bolded">${Math.round(d.percent)}%</span> of the wines with this animal are <span class="bolded">${d.bucket}</span> wines</p>`
 			);
 			tooltip.style("top", `${e.pageY+10}px`).style("left", `${e.pageX+10}px`);
 			d3.selectAll("rect").classed("notHover", true)
@@ -57,13 +58,13 @@
 
 <g>
 	{#each $data as d, i}
-		{#if d.priceBucket !== "all"}
+		{#if d.bucket !== "all"}
 			{@const x = $xScale.bandwidth ? $xGet(d) : $xGet(d)[0]}
 			{@const y = $yGet(d)}
 			{@const width = $xScale.bandwidth ? $xScale.bandwidth() : columnWidth(d)}
 			{@const height = columnHeight(d)}
 			<rect
-				class={d.priceBucket}
+				class={d.bucket}
 				data-id={i}
 				{x}
 				{y}
@@ -87,4 +88,4 @@
 	rect.hover {
 		opacity: 1;
 	}
-</style>
+</style>
diff --git a/src/components/layercake/Line.svelte b/src/components/layercake/Line.svelte
@@ -8,6 +8,8 @@
 
 	export let curve = curveStepAfter;
 
+	// console.log($data)
+
 	$: path = line().x($xGet).y($yGet).curve(curve);
 	$: pathD = path($data);
 </script>

diff --git a/src/data/percentDistribution.csv → src/data/priceDistribution.csv b/src/data/percentDistribution.csv → src/data/priceDistribution.csv
@@ -1,4 +1,10 @@
-topgroup,priceBucket,percent,count
+topgroup,bucket,percent,count
+all,value,1.532248486,129
+all,popular,24.21902839,2039
+all,premium,47.1314883,3968
+all,luxury,17.66243022,1487
+all,icon,9.454804609,796
+all,all,100,8419
 amphibian/reptile,value,0,0
 amphibian/reptile,popular,30,6
 amphibian/reptile,premium,45,9
@@ -172,10 +178,4 @@ wild dog,popular,26.66666667,8
 wild dog,premium,56.66666667,17
 wild dog,luxury,16.66666667,5
 wild dog,icon,0,0
-wild dog,all,100,30
-all,value,1.532248486,129
-all,popular,24.21902839,2039
-all,premium,47.1314883,3968
-all,luxury,17.66243022,1487
-all,icon,9.454804609,796
-all,all,100,8419
+wild dog,all,100,30