locsec/interference2020
1
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Merge branch 'master' into dev

Просмотр исходного кода
Этот коммит содержится в:
higsch 2020-12-11 09:03:36 +01:00
родитель 115837f3e4 81926cb28d
Коммит bd695b43d5
4 изменённых файлов: 4 добавлений и 5 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
public/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",

1
public/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';

2
public/build/bundle.js.map
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

4
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"