Polish up time series chart

Author: James Goldie

docs/examples/time-series/TimeSeriesChart.svelte

@@ -1,32 +1,20 @@
 <script>
-  // import { fly } from "svelte/transition";
+  import { blur } from "svelte/transition"
   import { extent } from "d3-array"
-  import { scaleLinear } from "d3-scale"
-  import { scaleSequential } from "d3-scale"
+  import { scaleLinear, scaleSequential } from "d3-scale"
   import { interpolateYlGnBu, interpolateYlOrRd, select, axisLeft, axisBottom, format, tickFormat, formatLocale } from "d3"
-  import { regressionLinear } from "d3-regression"
-  // , 
-  // should ba array of objects with:
-  // x
-  // y
-  // colour
-  // tooltip text maybe?
+
+  // should be an array of objects with:
+  // year
+  // value
   export let data = []
+  export let valueSuffix = "°C"
   export let colourScheme = "cool" // or warm
   $: console.log(colourScheme)
   $: colourRamp = (colourScheme == "cool") ?
     interpolateYlGnBu :
     interpolateYlOrRd
 
-  // calculate trend line from data
-  const regress = regressionLinear()
-    .x(d => d.date)
-    .y(d => d.value)
-    .domain(extent(data.map(d => d.date)))
-
-  $: trendLine = regress(data)
-
-  
   // dimensions bound to size of container
   let height = 500
   let width = 300
@@ -51,7 +39,7 @@
 
   // temperature formatter (for x-axis)
   const tempFormat = formatLocale({
-    currency: ["", "°C"]
+    currency: ["", valueSuffix]
   });
 
   // axes
@@ -89,13 +77,16 @@
   <svg width={width} height={height}>
 
     <g>
-      {#each data as { year, value }}
+      {#each data as { year, value } (year) }
       <!-- points go here-->
       <circle
         cx="{xScale(year)}px"
         cy="{yScale(value)}px"
         r="5"
-        fill="{colourScale(value)}">
+        fill="{colourScale(value)}"
+        in:blur={{ duration: 500 }}
+        out:blur={{ duration: 500 }}
+        >
       </circle>
       {/each}
     </g>

docs/examples/time-series/index.qmd

@@ -16,22 +16,23 @@ sverto:
 
 Let's do something more useful: a time series of temperature extremes.
 
-In Quarto, we'll download the data for two cities (Melbourne and Brisbane), letting the user choose which to display. We'll also let them choose a month and the extreme to display.
+In Quarto, we'll download the data for two cities (Melbourne and Brisbane), letting the user choose which to display. We'll also create controls using [Observable Inputs](https://observablehq.com/documentation/inputs/overview) to let them choose a month and the extreme to display.
 
-:::{.callout-tip  appearance="simple"}
+:::{.callout-info appearance="simple" title="What is this data?" collapse="true"}
 In climate parlance, the highest temperature of the day is called the "daily maximum temperature", or `tmax` for short. The coldest temperature of the day is called "daily minimum temperature", or `tmin` for short.
 
 I'm just calling them "daytime temperature" and "nighttime temperature" here — although the lowest temperature can technically happen during the day, it's usually at night!
 :::
 
 Once the data has been appropriately filtered and calculated, we'll pass it to our Svelte chart.
 
-The chart is fairly agnostic in the sense that it could be used with other time series datasets too, rather than being tailored specifically to this one. It expects a prop called `data`, which is an array of objects that each have a numerical `year` and a `value`.
+The chart expects a prop called `data`, which is an array of objects that each have a numerical `year` and a `value`.
 
-:::{.callout-note collapse="true" appearance="simple"}
-We could generalise this chart further if we wanted: we could have it expect columns called `x` and `y`, and perhaps allow full date objects as the x values.
-:::
+:::{.callout-tip appearance="simple" collapse="true" title="Can I use this chart with other data?"}
+You can! This chart can plot any series of data, although it expects a numerical x value called `year` (it doesn't handle full dates) and a numerical y value called `value`.
 
+The y-axis has a suffix that is set to `"°C"` by default, but you could change this to `°F`, `kph` or something else if you had some other kind of data!
+:::
 
 :::{.panel-input}
 
@@ -60,8 +61,6 @@ viewof selectedVariable = Inputs.select(
 )
 ```
 
-Let's also let users select a month and whether to look at the hottest, coldest or average temperature:
-
 ```{ojs}
 //| label: controls-season-metric
 viewof selectedSeason = Inputs.select(
@@ -99,7 +98,7 @@ viewof selectedMetric = Inputs.select(
 
 :::
 
-Now let's use [Arquero](https://github.com/uwdata/arquero) to download and filter the selected data.
+Now we'll use [Arquero](https://github.com/uwdata/arquero) to download and filter the selected data.
 
 
 ```{ojs}
@@ -137,17 +136,12 @@ finalData = allMetrics
   .rename(aq.names("year", "value"))
 ```
 
-And so we have our data! Here it is as a table, so we can see what we're sending to Svelte:
+Now that the data's processed, we're ready to make the chart:
 
-:::{.callout-note title="Table of values" collapse="true"  appearance="simple"}
-```{ojs}
-//| label: data-table
-Inputs.table(finalData)
-```
+:::{.callout-tip appearance="simple"}
+Try changing from Daytime to Nighttime!
 :::
 
-But, more importantly, here it is as an animated chart:
-
 ```{ojs}
 //| label: import-chart
 timeSeriesChart = new TimeSeriesChart.default({
@@ -162,6 +156,7 @@ And there we go! And now to send our data to it:
 
 ```{ojs}
 //| label: update-chart-data
+//| output: false
 timeSeriesChart.data = finalData.objects()
 ```
 
@@ -170,5 +165,36 @@ This chart also takes an additional prop: `colourScheme` can be either `cool` or
 
 ```{ojs}
 //| label: update-chart-colours
+//| output: false
 timeSeriesChart.colourScheme = selectedVariable == "tmax" ? "warm" : "cool"
 ```
+
+:::{.callout-tip appearance="simple"}
+Use `//| output: false` when you update props so that they aren't displayed underneath the cell.
+:::
+
+# Building the chart
+
+Here's the code in the Svelte file:
+
+:::{.callout-note appearance="simple" collapse="true" title="BarChart.svelte"}
+```{.html}
+{{< include TimeSeriesChart.svelte >}}
+```
+:::
+
+This chart has a few differences from the [simpler barchart example](../barchart):
+
+1. We make the chart responsive to changes in window size by wrapping the `<svg>` in a `<main`> and using `bind:clientHeight` and `bind:clientWidth` to track the space available to the chart
+2. Since this is designed for more data, we use axes instead of labelling each datum. We use [`d3-axis`](https://d3js.org/d3-axis) for this. Instead of directly drawing the SVG elements of the axis, we create a placeholder and then use D3's functions to create the content, making them reactive to changes in data or window size with `$:`
+3. Instead of passing in colour directly, we let the user in Quarto choose a colour scheme (`"warm"` or `"cool"`). In this example, the colour scheme is connected to the Daytime or Nighttime option.
+
+And here's the processed data as a table, so we can see what we're sending to Svelte. Note the two columns, `year` and `value`:
+
+:::{.callout-note title="Table of values" collapse="true"  appearance="simple"}
+```{ojs}
+//| label: data-table
+Inputs.table(finalData)
+```
+:::
+

docs/package-lock.json

@@ -16,7 +16,6 @@
     "svelte": "^3.0.0"
   },
   "dependencies": {
-    "d3": "^7.9.0",
-    "d3-regression": "^1.3.10"
+    "d3": "^7.9.0"
   }
 }