google trends chart implemented

src/components/BackgroundChart.svelte

@@ -5,6 +5,7 @@
   import { margin } from '../stores/dimensions';
 
   import CoronaChart from './CoronaChart.svelte';
+  import GoogleTrendsChart from './GoogleTrendsChart.svelte';
 </script>
 
 <g class="background-chart">
@@ -14,6 +15,11 @@
                    margin={$margin}
                    showLegend={!$originalTimeDomain} />
     {/if}
+    {#if (/^gt_/.test(dataset.id))}
+      <GoogleTrendsChart data={dataset.data}
+                         margin={$margin}
+                         showLegend={!$originalTimeDomain} />
+    {/if}
   {/each}
 </g>
 

src/components/CoronaChart.svelte

@@ -25,7 +25,7 @@
 
   $: if (data) {
     yScale = scaleLog()
-      .domain([1, max(data.map((d) => d.cases))])
+      .domain([1, max(data, (d) => d.cases)])
       .range([$panelHeight - margin.bottom, margin.top * 0.7]);
 
     area = (type, data) => d3area()

src/components/GoogleTrendsChart.svelte

@@ -0,0 +1,80 @@
+<script>
+  // chart with GoogleTrends data
+  import { timeScale } from '../stores/scales';
+  import { panelHeight } from '../stores/dimensions';
+  import { fade } from 'svelte/transition';
+  import {
+    scaleLinear,
+    max,
+    area as d3area,
+    format,
+    curveBasis } from 'd3';
+
+  export let data;
+  export let margin = {
+    top: 100,
+    right: 20,
+    bottom: 0,
+    left: 20
+  };
+  export let showLegend = true;
+
+  const commaFormat = format(',');
+
+  let xScale, yScale, area, ticks;
+  let casesPath, deathsPath;
+
+  $: if (data) {
+    yScale = scaleLinear()
+      .domain([0, max(data, (d) => d.value)])
+      .range([$panelHeight - margin.bottom, margin.top * 0.7]);
+
+    area = d3area()
+      .x((d) => $timeScale(d.date))
+      .y0(yScale(0))
+      .y1((d) => yScale(d.value))
+      .curve(curveBasis);
+
+    ticks = yScale.ticks(5).slice(1);
+  }
+</script>
+
+{#if (data)}
+  <g class="google-trends-chart"
+     transition:fade={{duration: 200}}>
+    <g class="area">
+      <path d={area(data)}></path>
+    </g>
+    <!-- {#if (showLegend)}
+      <g class="ticks"
+        transform="translate({$timeScale(data.slice(-1)[0].date) + 5} 0)">
+        {#each ticks as tick}
+          <g class="tick"
+            transform="translate(0 {yScale(tick)})">
+            <rect x="0" y="-12" width="25" height="15"></rect>
+            <text>{commaFormat(tick)}</text>
+          </g>
+        {/each}
+      </g>
+    {/if} -->
+  </g>
+{/if}
+
+<style>
+  path {
+    stroke: none;
+    opacity: 0.2;
+    fill: var(--usa-blue);
+  }
+
+  /* .tick rect {
+    fill: var(--bg);
+    stroke: none;
+  }
+
+  .tick text {
+    font-family: var(--font-02);
+    font-size: 0.6rem;
+    fill: var(--dfrlab-silver);
+  } */
+</style>

src/components/Visualization.svelte

@@ -108,8 +108,6 @@
       }
     ];
 
-    console.log($contextData[1].data)
-
     preloadImages(data);
 
     // apply filters from URL

src/utils/loadGoogleTrendsData.js

@@ -2,7 +2,11 @@ import { googleTrendsApiPath } from '../inputs/dataPaths';
 
 const loadGoogleTrendsData = async (keyword) => {
   const response = await fetch(`${googleTrendsApiPath}${encodeURIComponent(keyword)}`);
-  return(response.json());
+  const data = (await response.json()).map((d) => ({
+    ...d,
+    date: new Date(d.time * 1000)
+  }));
+  return(data);
 };
 
 export default loadGoogleTrendsData;