Merge branch 'master' into dev

build/bundle.css.map

@@ -69,7 +69,7 @@
     "<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  import { format } from 'd3';\n\n  import PolarizationStrip from './PolarizationStrip.svelte';\n\n  export let value = 0;\n  export let polarization;\n  export let label = '';\n\n  const commaFormat = format(',');\n\n  let valueWidth = 0;\n</script>\n\n<li>\n  <div class=\"smi-score {label.toLowerCase()}\"\n        bind:clientWidth={valueWidth}>\n    {commaFormat(value)}\n  </div>\n  <span class=\"smi-label\">\n    {label}\n  </span>\n  {#if ((polarization.fulfills10Articles || polarization.fulfills25Percent) && value > 0)}\n    <PolarizationStrip polarization={polarization[label.toLowerCase()]}\n                       smi={value}\n                       valueWidth={valueWidth} />\n  {/if}\n</li>\n\n<style>\n  li {\n    margin: 0.2rem 0.3rem 0.2rem 0;\n    font-size: 0.8rem;\n    min-width: 30%;\n  }\n\n  .smi-score {\n    display: inline-block;\n    padding: 0 0.2rem;\n    border: none;\n    border-radius: 3px;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), \n                0 2px 4px rgba(0, 0, 0, 0.07);\n  }\n\n  .smi-label {\n    display: inline-block;\n    padding: 0 0.1rem;\n    border: none;\n    border-radius: 3px;\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  import { categories } from '../inputs/polarization';\n</script>\n\n<div class=\"pol-legend\">\n  <p>Polarization:</p>\n  <ul>\n    {#each categories as category (category)}\n      <li>\n        <div class=\"pol-legend-field pol-{category.id}\"></div>\n        <p>{category.name}</p>\n      </li>\n    {/each}\n  </ul>\n</div>\n\n<style>\n  .pol-legend {\n    display: flex;\n    align-items: center;\n    font-family: var(--font-02);\n    color: var(--dfrlab-gray);\n  }\n\n  .pol-legend p {\n    margin-right: 0.7rem;\n    font-size: 0.7rem;\n  }\n\n  .pol-legend ul {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    list-style-type: none;\n  }\n\n  .pol-legend ul li {\n    display: flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  .pol-legend ul li p {\n    font-size: 0.6rem;\n  }\n\n  .pol-legend-field {\n    width: 0.5rem;\n    height: 0.5rem;\n    margin-right: 0.2rem;\n  }\n</style>\n",

build/bundle.js

@@ -1,4 +1,3 @@
-
 (function(l, r) { if (l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (window.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(window.document);
 var app = (function () {
 	'use strict';