removed today dot

public/build/bundle.css.map

@@ -63,7 +63,7 @@
     "<script>\n  // setting up all events\n  import Event from './Event.svelte';\n  import { hovered, selected } from '../stores/eventSelections';\n\n  export let timePoints = [];\n\n  function handleEventMouseover(event) {\n    $hovered = event.detail;\n  }\n\n  function handleEventClick(event) {\n    const obj = event.detail;\n    if ($selected.map((d) => d.id).includes(obj.id)) {\n      selected.remove(obj);\n    } else {\n      selected.add(obj);\n    }\n  }\n</script>\n\n<g class=\"events\">\n  {#each timePoints as timePoint (timePoint.id)}\n    <Event {timePoint}\n           selected={$selected && $selected.map((d) => d.id).includes(timePoint.id)}\n           hovered={$hovered && $hovered.id === timePoint.id}\n           on:click={handleEventClick}\n           on:mouseover={handleEventMouseover} />\n  {/each}\n</g>\n\n<style>\n  .events {\n    width: 100%;\n    height: 50%;\n    overflow: hidden;\n  }\n</style>\n",
     "<script>\n  // chart with GoogleTrends data\n  import { timeScale } from '../stores/scales';\n  import { panelHeight } from '../stores/dimensions';\n  import { fade } from 'svelte/transition';\n  import {\n    scaleLinear,\n    max,\n    area as d3area,\n    format,\n    curveBasis } from 'd3';\n\n  export let data;\n  export let margin = {\n    top: 100,\n    right: 20,\n    bottom: 0,\n    left: 20\n  };\n  // export let showLegend = true;\n\n  const commaFormat = format(',');\n\n  let xScale, yScale, area, ticks;\n  let casesPath, deathsPath;\n\n  $: if (data) {\n    yScale = scaleLinear()\n      .domain([0, max(data, (d) => d.value)])\n      .range([$panelHeight - margin.bottom, margin.top * 0.7]);\n\n    area = d3area()\n      .x((d) => $timeScale(d.date))\n      .y0(yScale(0))\n      .y1((d) => yScale(d.value))\n      .curve(curveBasis);\n\n    ticks = yScale.ticks(5).slice(1);\n  }\n</script>\n\n{#if (data)}\n  <g class=\"google-trends-chart\"\n     transition:fade={{duration: 200}}>\n    <g class=\"area\">\n      <path d={area(data)}></path>\n    </g>\n    <!-- {#if (showLegend)}\n      <g class=\"ticks\"\n        transform=\"translate({$timeScale(data.slice(-1)[0].date) + 5} 0)\">\n        {#each ticks as tick}\n          <g class=\"tick\"\n            transform=\"translate(0 {yScale(tick)})\">\n            <rect x=\"0\" y=\"-12\" width=\"25\" height=\"15\"></rect>\n            <text>{commaFormat(tick)}</text>\n          </g>\n        {/each}\n      </g>\n    {/if} -->\n  </g>\n{/if}\n\n<style>\n  path {\n    stroke: none;\n    opacity: 0.3;\n    fill: var(--usa-blue);\n  }\n\n  /* .tick rect {\n    fill: var(--bg);\n    stroke: none;\n  }\n\n  .tick text {\n    font-family: var(--font-02);\n    font-size: 0.6rem;\n    fill: var(--dfrlab-silver);\n  } */\n</style>\n",
     "<script>\n  // info shown on the timeline, e.g. for jumps to table view\n  import { fade } from 'svelte/transition';\n\n  export let selectedItems = [];\n  export let x = 0;\n  export let y = 0;\n\n  let showCounter = 0;\n\n  $: show = selectedItems.length >= 2;\n  $: if (show) showCounter += 1;\n</script>\n\n{#if (show && showCounter <= 2)}\n  <div class=\"info\"\n       style=\"left: {x}px; top: {y}px;\"\n       transition:fade>\n    <div class=\"info-icon\">i</div>\n    <p>Compare your selection in the <span class=\"pseudolink\" on:click|self={() => document.querySelector('#table').scrollIntoView({behavior: 'smooth'})}>dataset view</span>.</p>  \n  </div>\n{/if}\n\n<style>\n  .info {\n    display: flex;\n    align-items: center;\n    position: absolute;\n    z-index: 20000;\n  }\n\n  .info-icon {\n    width: 1.2rem;\n    height: 1.2rem;\n    font-family: var(--font-02);\n    font-size: 0.8rem;\n    font-weight: bold;\n    color: var(--usa-blue);\n    text-align: center;\n    border: 2px solid var(--usa-blue);\n    border-radius: 50%;\n  }\n\n  p {\n    margin-left: 0.4rem;\n    font-family: var(--font-02);\n    font-size: 0.8rem;\n    color: var(--text-black);\n  }\n</style>\n",
-    "<script>\n  // collection of viz labels\n  import { timeScale, smiTotalYScale } from '../stores/scales';\n  import { margin } from '../stores/dimensions';\n  import { timeFormat, format } from 'd3';\n  import { panelHeight } from '../stores/dimensions';\n\n  const lineLength = 70;\n  const offset = 5;\n\n  const commaFormat = format(',');\n  const tf = timeFormat('%b %d, %Y');\n\n  let yScaleText, mapScaleText, timeScaleText;\n</script>\n\n<g class=\"labels disable-select\">\n  <g class=\"time-scale\"\n     transform=\"translate(0 {$smiTotalYScale.range()[0]})\">\n    {#each $timeScale.ticks(3) as tick}\n      <g class=\"tick\"\n         transform=\"translate({$timeScale(tick)} 20)\">\n        <circle cx=\"0\" cy=\"-20\" r=\"5\" />\n        <text class=\"bg\">{tf(tick).replace('Jan 01, ', '')}</text>\n        <text>{tf(tick).replace('Jan 01, ', '')}</text>\n      </g>\n    {/each}\n    <g class=\"today\" transform=\"translate({$timeScale(new Date())} 20)\">\n      <circle cx=\"0\"\n              cy=\"-20\"\n              r=\"5\"></circle>\n      <text class=\"bg\">Today</text>\n      <text>Today</text>\n    </g>\n    <g class=\"time-scale-label\" transform=\"translate({15 + $timeScale.range()[0] - $margin.left / 1.5} -15)\">\n      <path d=\"M0 0l{lineLength} 0\"></path>\n      <text class=\"bg\"\n            dx={lineLength + offset}\n            dy=\"4\">Attribution Date</text>\n      <text bind:this={timeScaleText}\n            dx={lineLength + offset}\n            dy=\"4\">Attribution Date</text>\n      <path d=\"M{timeScaleText ? timeScaleText.getComputedTextLength() + lineLength + 2 * offset: 0} 0l{lineLength} 0\"\n            marker-end=\"url(#arrow)\"></path>\n    </g>\n  </g>\n  <g class=\"y-scale-ticks\"\n     transform=\"translate({15 + $timeScale.range()[0] - $margin.left / 1.5} 0)\">\n    {#each $smiTotalYScale.ticks(5).slice(1) as tick}\n      <g class=\"tick\"\n          transform=\"translate(0 {$smiTotalYScale(tick)})\">\n        <text>{commaFormat(tick)}</text>\n      </g>\n    {/each}\n  </g>\n  <g class=\"y-scale\"\n     transform=\"translate({$timeScale.range()[0] - $margin.left / 1.5} {0.95 * $smiTotalYScale.range()[0]})\">\n    <path d=\"M0 0l0 {-lineLength}\"></path>\n    <text bind:this={yScaleText}\n          transform=\"rotate(270)\"\n          dx={lineLength + offset}\n          dy=\"4\">Attribution Impact</text>\n    <path d=\"M0 {yScaleText ? -yScaleText.getComputedTextLength() - lineLength - 2 * offset: 0}l0 {-lineLength}\"\n          marker-end=\"url(#arrow)\"></path>\n  </g>\n  <g class=\"map-scale\"\n     transform=\"translate({$timeScale.range()[0] - $margin.left / 1.5} {1.05 * $panelHeight})\">\n    <path d=\"M0 0l0 {lineLength}\"></path>\n    <text bind:this={mapScaleText}\n          transform=\"rotate(270)\"\n          dx={mapScaleText ? -mapScaleText.getComputedTextLength() - lineLength - offset: 0}\n          dy=\"4\">Disinformant Nations</text>\n    <path d=\"M0 {mapScaleText ? mapScaleText.getComputedTextLength() + lineLength + 2 * offset: 0}l0 {lineLength}\"></path>\n  </g>\n</g>\n\n<style>\n  .time-scale text {\n    fill: var(--text-darkgray);\n    font-family: var(--font-02);\n    font-size: 0.7rem;\n    text-anchor: middle;\n  }\n\n  .time-scale-label text {\n    text-anchor: start;\n  }\n\n  .time-scale text.bg {\n    stroke: var(--bg);\n    stroke-width: 0.1rem;\n    stroke-opacity: 0.8;\n    fill: var(--bg);\n  }\n\n  .time-scale circle {\n    stroke: none;\n    fill: var(--dfrlab-gray);\n  }\n\n  .y-scale-ticks text, .y-scale text, .map-scale text {\n    fill: var(--text-darkgray);\n    font-family: var(--font-02);\n    font-size: 0.7rem;\n  }\n\n  .y-scale-ticks text {\n    font-size: 0.6rem;\n  }\n\n  .time-scale path, .y-scale path, .map-scale path {\n    stroke: var(--text-darkgray);\n    stroke-width: 0.1rem;\n  }\n</style>\n",
+    "<script>\n  // collection of viz labels\n  import { timeScale, smiTotalYScale } from '../stores/scales';\n  import { margin } from '../stores/dimensions';\n  import { timeFormat, format } from 'd3';\n  import { panelHeight } from '../stores/dimensions';\n\n  const lineLength = 70;\n  const offset = 5;\n\n  const commaFormat = format(',');\n  const tf = timeFormat('%b %d, %Y');\n\n  let yScaleText, mapScaleText, timeScaleText;\n</script>\n\n<g class=\"labels disable-select\">\n  <g class=\"time-scale\"\n     transform=\"translate(0 {$smiTotalYScale.range()[0]})\">\n    {#each $timeScale.ticks(3) as tick}\n      <g class=\"tick\"\n         transform=\"translate({$timeScale(tick)} 20)\">\n        <circle cx=\"0\" cy=\"-20\" r=\"5\" />\n        <text class=\"bg\">{tf(tick).replace('Jan 01, ', '')}</text>\n        <text>{tf(tick).replace('Jan 01, ', '')}</text>\n      </g>\n    {/each}\n    <!-- <g class=\"today\" transform=\"translate({$timeScale(new Date())} 20)\">\n      <circle cx=\"0\"\n              cy=\"-20\"\n              r=\"5\"></circle>\n      <text class=\"bg\">Today</text>\n      <text>Today</text>\n    </g> -->\n    <g class=\"time-scale-label\" transform=\"translate({15 + $timeScale.range()[0] - $margin.left / 1.5} -15)\">\n      <path d=\"M0 0l{lineLength} 0\"></path>\n      <text class=\"bg\"\n            dx={lineLength + offset}\n            dy=\"4\">Attribution Date</text>\n      <text bind:this={timeScaleText}\n            dx={lineLength + offset}\n            dy=\"4\">Attribution Date</text>\n      <path d=\"M{timeScaleText ? timeScaleText.getComputedTextLength() + lineLength + 2 * offset: 0} 0l{lineLength} 0\"\n            marker-end=\"url(#arrow)\"></path>\n    </g>\n  </g>\n  <g class=\"y-scale-ticks\"\n     transform=\"translate({15 + $timeScale.range()[0] - $margin.left / 1.5} 0)\">\n    {#each $smiTotalYScale.ticks(5).slice(1) as tick}\n      <g class=\"tick\"\n          transform=\"translate(0 {$smiTotalYScale(tick)})\">\n        <text>{commaFormat(tick)}</text>\n      </g>\n    {/each}\n  </g>\n  <g class=\"y-scale\"\n     transform=\"translate({$timeScale.range()[0] - $margin.left / 1.5} {0.95 * $smiTotalYScale.range()[0]})\">\n    <path d=\"M0 0l0 {-lineLength}\"></path>\n    <text bind:this={yScaleText}\n          transform=\"rotate(270)\"\n          dx={lineLength + offset}\n          dy=\"4\">Attribution Impact</text>\n    <path d=\"M0 {yScaleText ? -yScaleText.getComputedTextLength() - lineLength - 2 * offset: 0}l0 {-lineLength}\"\n          marker-end=\"url(#arrow)\"></path>\n  </g>\n  <g class=\"map-scale\"\n     transform=\"translate({$timeScale.range()[0] - $margin.left / 1.5} {1.05 * $panelHeight})\">\n    <path d=\"M0 0l0 {lineLength}\"></path>\n    <text bind:this={mapScaleText}\n          transform=\"rotate(270)\"\n          dx={mapScaleText ? -mapScaleText.getComputedTextLength() - lineLength - offset: 0}\n          dy=\"4\">Disinformant Nations</text>\n    <path d=\"M0 {mapScaleText ? mapScaleText.getComputedTextLength() + lineLength + 2 * offset: 0}l0 {lineLength}\"></path>\n  </g>\n</g>\n\n<style>\n  .time-scale text {\n    fill: var(--text-darkgray);\n    font-family: var(--font-02);\n    font-size: 0.7rem;\n    text-anchor: middle;\n  }\n\n  .time-scale-label text {\n    text-anchor: start;\n  }\n\n  .time-scale text.bg {\n    stroke: var(--bg);\n    stroke-width: 0.1rem;\n    stroke-opacity: 0.8;\n    fill: var(--bg);\n  }\n\n  .time-scale circle {\n    stroke: none;\n    fill: var(--dfrlab-gray);\n  }\n\n  .y-scale-ticks text, .y-scale text, .map-scale text {\n    fill: var(--text-darkgray);\n    font-family: var(--font-02);\n    font-size: 0.7rem;\n  }\n\n  .y-scale-ticks text {\n    font-size: 0.6rem;\n  }\n\n  .time-scale path, .y-scale path, .map-scale path {\n    stroke: var(--text-darkgray);\n    stroke-width: 0.1rem;\n  }\n</style>\n",
     "<script>\n  // additional legend on SVG, currently holding an extra attribution impact legend\n  import {\n    timeScale,\n    smiTotalYScale,\n    smiTotalRScale } from '../stores/scales';\n  import { margin } from '../stores/dimensions';\n  import { format } from 'd3';\n\n  const commaFormat = format(',');\n  const rTicks = [500000, 100000, 0];\n</script>\n\n<g class=\"legend\"\n   transform=\"translate({20 + $timeScale.range()[0] - $margin.left / 1.5 + $smiTotalRScale(rTicks[0])} {$smiTotalYScale.range()[1] - 20})\">\n  <text transform=\"translate({-$smiTotalRScale(rTicks[0]) - 20} {$smiTotalRScale(rTicks.slice(-1)[0])}) rotate(270)\"\n        dy=\"4\">\n    Attribution Impact\n  </text>\n  <g class=\"total-r-scale\" transform=\"translate(0 {-4.5 * $smiTotalRScale(rTicks.slice(-1)[0])})\">\n    {#each rTicks as tick, i}\n      <line x1=\"0\"\n            y1={$smiTotalRScale(rTicks[0]) - 2 * $smiTotalRScale(tick)}\n            x2={$smiTotalRScale(rTicks[0]) + 15}\n            y2={$smiTotalRScale(rTicks[0]) - 2 * $smiTotalRScale(tick)}></line>\n      <text class=\"tick\"\n            transform=\"translate({$smiTotalRScale(rTicks[0]) + 18} {$smiTotalRScale(rTicks[0]) - 2 * $smiTotalRScale(tick)})\">\n        {commaFormat(tick)}\n      </text>\n      <circle cx=\"0\"\n              cy={$smiTotalRScale(rTicks[0]) - $smiTotalRScale(tick)}\n              r={$smiTotalRScale(tick)}></circle>\n    {/each}\n  </g>\n  <g class=\"smi-pending\">\n    <line x1=\"0\"\n          y1={-$smiTotalRScale(rTicks.slice(-1)[0])}\n          x2={$smiTotalRScale(rTicks[0]) + 15}\n          y2={-$smiTotalRScale(rTicks.slice(-1)[0])}></line>\n    <text class=\"tick\"\n          transform=\"translate({$smiTotalRScale(rTicks[0]) + 18} {-$smiTotalRScale(rTicks.slice(-1)[0])})\">\n      pending\n    </text>\n    <circle cx=\"0\"\n            cy=\"0\"\n            r={$smiTotalRScale(rTicks.slice(-1)[0])}></circle>\n  </g>\n</g>\n\n<style>\n  line {\n    fill: none;\n    stroke: var(--text-darkgray);\n    stroke-width: 0.05rem;\n    stroke-dasharray: 4px 3px;\n  }\n\n  text {\n    fill: var(--text-darkgray);\n    font-family: var(--font-02);\n    font-size: 0.7rem;\n  }\n\n  text.tick {\n    font-size: 0.6rem;\n  }\n\n  .total-r-scale circle {\n    fill: none;\n    stroke: var(--usa-lightred);\n    stroke-width: 0.1rem;\n  }\n\n  .smi-pending circle {\n    fill: none;\n    stroke: var(--usa-lightblue);\n    stroke-width: 0.18rem;\n    stroke-linecap: round;\n    stroke-dasharray: 3px 5px;\n  }\n</style>\n",
     "<script>\n  // loading banner\n</script>\n\n<div class=\"loading-info\">\n  <p>Loading and visualizing...</p>\n</div>\n\n<style>\n  .loading-info {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    font-family: var(--font-02);\n  }\n\n  p {\n    color: var(--usa-blue);\n    font-size: 1rem;\n  }\n</style>\n",
     "<script>\n  // a score bar used on case tooltips\n  export let value = 0;\n  export let minValue = 0;\n  export let maxValue = 1;\n\n  $: relState = (value - minValue) / (maxValue - minValue);\n</script>\n\n<div class=\"score-bar\">\n  <span class=\"inner-score-bar\"\n       style=\"width: {relState * 100}%;\"></span>\n</div>\n\n<style>\n  .score-bar {\n    width: 100%;\n    max-width: 70px;\n    min-height: 10px;\n    border: 1px solid var(--text-darkgray);\n    border-radius: 3px;\n    position: relative;\n  }\n\n  .inner-score-bar {\n    height: 100%;\n    background-color: var(--text-darkgray);\n    border: none;\n    position: absolute;\n  }\n</style>\n",

src/components/Labels.svelte

@@ -25,13 +25,13 @@
         <text>{tf(tick).replace('Jan 01, ', '')}</text>
       </g>
     {/each}
-    <g class="today" transform="translate({$timeScale(new Date())} 20)">
+    <!-- <g class="today" transform="translate({$timeScale(new Date())} 20)">
       <circle cx="0"
               cy="-20"
               r="5"></circle>
       <text class="bg">Today</text>
       <text>Today</text>
-    </g>
+    </g> -->
     <g class="time-scale-label" transform="translate({15 + $timeScale.range()[0] - $margin.left / 1.5} -15)">
       <path d="M0 0l{lineLength} 0"></path>
       <text class="bg"