From ccbd22d93630c9120d7676ef372e8512283638bb Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 2 Mar 2019 17:27:10 -0500
Subject: [PATCH] tidy up some examples

---
 site/content/examples/bar-chart/App.svelte          |  9 ++-------
 .../examples/binding-media-elements/App.svelte      |  3 +--
 site/content/examples/line-chart/App.svelte         |  7 -------
 .../content/examples/scatterplot/Scatterplot.svelte | 13 ++++++-------
 site/content/examples/svg-clock/App.svelte          | 13 +++++--------
 5 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/site/content/examples/bar-chart/App.svelte b/site/content/examples/bar-chart/App.svelte
index 82af1834a8..a4b01f97dd 100644
--- a/site/content/examples/bar-chart/App.svelte
+++ b/site/content/examples/bar-chart/App.svelte
@@ -9,9 +9,6 @@
 
 	let width = 500;
 	let height = 200;
-	let barWidth;
-	let xScale;
-	let yScale;
 
 	function formatMobile(tick) {
 		return "'" + tick % 100;
@@ -25,10 +22,8 @@
 		.domain([0, Math.max.apply(null, yTicks)])
 		.range([height - padding.bottom, padding.top]);
 
-	$: {
-		const innerWidth = width - (padding.left + padding.right);
-		barWidth = innerWidth / xTicks.length;
-	}
+	$: innerWidth = width - (padding.left + padding.right);
+	$: barWidth = innerWidth / xTicks.length;
 </script>
 
 <style>
diff --git a/site/content/examples/binding-media-elements/App.svelte b/site/content/examples/binding-media-elements/App.svelte
index ef25a3dd0d..fdfb4573d4 100644
--- a/site/content/examples/binding-media-elements/App.svelte
+++ b/site/content/examples/binding-media-elements/App.svelte
@@ -2,8 +2,7 @@
 	let paused = true;
 	let t = 0;
 	let d;
-
-	let icon, bg;
+	let bg;
 
 	$: icon = `https://icon.now.sh/${paused ? 'play' : 'pause'}_circle_filled`;
 
diff --git a/site/content/examples/line-chart/App.svelte b/site/content/examples/line-chart/App.svelte
index efa933b5f5..497213ee0a 100644
--- a/site/content/examples/line-chart/App.svelte
+++ b/site/content/examples/line-chart/App.svelte
@@ -11,13 +11,6 @@
 	let width = 500;
 	let height = 200;
 
-	let xScale;
-	let yScale;
-	let minX;
-	let maxX;
-	let path;
-	let area;
-
 	$: xScale = scaleLinear()
 		.domain([minX, maxX])
 		.range([padding.left, width - padding.right]);
diff --git a/site/content/examples/scatterplot/Scatterplot.svelte b/site/content/examples/scatterplot/Scatterplot.svelte
index b1ee52a149..f7a46899fa 100644
--- a/site/content/examples/scatterplot/Scatterplot.svelte
+++ b/site/content/examples/scatterplot/Scatterplot.svelte
@@ -4,31 +4,30 @@
 
 	export let points;
 
+	let svg;
+	let width = 500;
+	let height = 200;
+
 	const padding = { top: 20, right: 40, bottom: 40, left: 25 };
 
-	let xScale;
 	$: xScale = scaleLinear()
 		.domain([0, 20])
 		.range([padding.left, width - padding.right]);
-	let yScale;
+
 	$: yScale = scaleLinear()
 		.domain([0, 12])
 		.range([height - padding.bottom, padding.top]);
 
-	let width = 500;
-	let height = 200;
-	let xTicks;
 	$: xTicks = width > 180 ?
 		[0, 4, 8, 12, 16, 20] :
 		[0, 10, 20];
-	let yTicks;
+
 	$: yTicks = height > 180 ?
 		[0, 2, 4, 6, 8, 10, 12] :
 		[0, 4, 8, 12];
 
 	onMount(resize);
 
-	let svg;
 	function resize() {
 		({ width, height } = svg.getBoundingClientRect());
 	}
diff --git a/site/content/examples/svg-clock/App.svelte b/site/content/examples/svg-clock/App.svelte
index 19b56d7335..b83da1c203 100644
--- a/site/content/examples/svg-clock/App.svelte
+++ b/site/content/examples/svg-clock/App.svelte
@@ -2,15 +2,12 @@
 	import { onMount } from 'svelte';
 
 	let time = new Date();
-	let hours, minutes, seconds;
 
-	$: {
-		// this block runs reactively, whenever
-		// `time` changes
-		hours = time.getHours();
-		minutes = time.getMinutes();
-		seconds = time.getSeconds();
-	}
+	// these automatically update when `time`
+	// changes, because of the `$:` prefix
+	$: hours = time.getHours();
+	$: minutes = time.getMinutes();
+	$: seconds = time.getSeconds();
 
 	onMount(() => {
 		const interval = setInterval(() => {