colored source links according to general polarization

src/components/SourceLink.svelte

@@ -6,11 +6,13 @@
   import { growDuration, bloomDuration, jitterFactor } from '../transitions/constants';
   import { curvyDoubleLine } from '../utils/paths';
   import { createTweenedPos } from '../transitions/tween';
+  import { usaBlue } from '../utils/colors';
 
   export let source;
   export let selected = 'unselected';
   export let hovered = 'unselected';
   export let extraFaint = false;
+  export let showPolarizationColor = false;
 
   const tweenedPos = createTweenedPos();
 
@@ -45,6 +47,7 @@
                              $tweenedPos.fy + source.rSmiTot - 5,
                              source.shift,
                              $mapHeight / 15)}
+          stroke={showPolarizationColor ? source.polarizationColor : usaBlue}
           stroke-width={$minDim / 200}
           in:draw|local={{duration: growDuration, delay: source.id * jitterFactor, easing: linear}}
           out:draw|local={{duration: growDuration, delay: bloomDuration + source.id * jitterFactor, easing: linear}}></path>
@@ -53,7 +56,6 @@
 
 <style>
   path {
-    stroke: var(--usa-blue);
     fill: none;
   }
 

src/components/Sources.svelte

@@ -6,7 +6,7 @@
   import { sortConsistently } from '../utils/misc';
   import { hovered as eHovered, selected as eSelected } from '../stores/eventSelections';
   import { hovered as cHovered } from '../stores/centroidSelections';
-  import { disinformantNationFilter, selectAllFilters, unselectAllFilters } from '../stores/filters';
+  import { disinformantNationFilter, selectAllFilters, unselectAllFilters, highlightPolarization } from '../stores/filters';
 
   import SourceLink from './SourceLink.svelte';
   import Centroid from './Centroid.svelte';
@@ -105,7 +105,8 @@
                             : ($eHovered
                                 ? 'background'
                                 : 'unselected')}
-                extraFaint={source.outOfTimeRange} />
+                extraFaint={source.outOfTimeRange}
+                showPolarizationColor={$highlightPolarization} />
   {/each}
   {#each centroids as [country, centroid]}
     <Centroid {centroid}

src/components/Visualization.svelte

@@ -22,7 +22,8 @@
     smiTotalYScale,
     smiTotalRScale,
     smiShareRScale,
-    attributionScoreScale } from '../stores/scales';
+    attributionScoreScale,
+    polarizationScale } from '../stores/scales';
   import {
     disinformantNationFilter,
     platformFilter,
@@ -57,7 +58,7 @@
     forceCenter,
     forceCollide,
     timeFormat } from 'd3';
-  import { sortConsistently } from '../utils/misc';
+  import { sortConsistently, averagePolarization } from '../utils/misc';
   import { parseUrl } from '../utils/share';
 
   import ToTop from './ToTop.svelte';
@@ -163,7 +164,8 @@
       rSmiTwShare: $smiShareRScale(d.smiTwitterShare),
       rSmiReShare: $smiShareRScale(d.smiRedditShare),
       fy: d.smiPending ? Math.min($smiTotalYScale.range()[0], $smiTotalYScale.range()[0] - 2 * $smiTotalRScale.range()[0] + (Math.random() - 0.5) * 20) : $smiTotalYScale(d.smiTotal),
-      outOfTimeRange: $timeScale(d.attributionDate) < $timeScale.range()[0] || $timeScale(d.attributionDate) > $timeScale.range()[1]
+      outOfTimeRange: $timeScale(d.attributionDate) < $timeScale.range()[0] || $timeScale(d.attributionDate) > $timeScale.range()[1],
+      polarizationColor: $polarizationScale(averagePolarization(d.polarization.general))
     }))
     .sort((a, b) => sortConsistently(a, b, 'rSmiTot', 'id'));
 

src/inputs/polarization.js

@@ -1,22 +1,27 @@
 export const categories = [
   {
     id: 'l',
-    name: 'left'
+    name: 'left',
+    weight: -2
   },
   {
     id: 'll',
-    name: 'leanleft'
+    name: 'leanleft',
+    weight: -1
   },
   {
     id: 'c',
-    name: 'center'
+    name: 'center',
+    weight: 0
   },
   {
     id: 'lr',
-    name: 'leanright'
+    name: 'leanright',
+    weight: 1
   },
   {
     id: 'r',
-    name: 'right'
+    name: 'right',
+    weight: 2
   },
 ];

src/stores/scales.js

@@ -8,4 +8,6 @@ export const attributionScoreScale = writable();
 
 export const centroidScale = writable();
 
+export const polarizationScale = writable();
+
 export const scaleFactor = readable(window.devicePixelRatio || 1);

src/utils/colors.js

@@ -1,4 +1,11 @@
 export const bg = '#F9F8F8';
+export const usaBlue = '#3c3b6e';
 export const usaRed = '#b22234';
 export const usaLightRed = '#b22234';
 export const usaLightLightRed = '#dbb6b6';
+
+export const polBlue = '#2e64a0';
+export const polLightBlue = '#61a3de';
+export const polPurple = '#96659e';
+export const polLightRed = '#a15552';
+export const polRed = '#ca0800';

src/utils/misc.js

@@ -1,6 +1,7 @@
 import { uniq } from 'lodash';
 import { mean, min, max } from 'd3';
 import { images } from '../inputs/dataPaths';
+import { categories } from '../inputs/polarization';
 
 // extract attribution date range from data
 export const getTimeRange = (data) => {
@@ -124,3 +125,16 @@ export const scrollTo = (targetId, collapsibleId) => {
   return(false);
 };
 window.scrollsmooth = scrollTo;
+
+// calculate average polarization using weights
+export const averagePolarization = (polarization) => {
+  const weightedEngagement = Object.keys(polarization).map((id) => {
+    const weight = categories.find((c) => c.id === id).weight;
+    return(weight * polarization[id]);
+  })
+  .reduce((acc, cur) => acc + cur);
+
+  const totalEngagement = Object.keys(polarization).map((id) => polarization[id]).reduce((acc, cur) => acc + cur);
+
+  return(weightedEngagement / totalEngagement);
+};

src/utils/scales.js

@@ -4,8 +4,15 @@ import {
   smiTotalRScale,
   smiShareRScale,
   attributionScoreScale,
-  centroidScale } from '../stores/scales';
-import { usaRed } from '../utils/colors';
+  centroidScale,
+  polarizationScale } from '../stores/scales';
+import {
+  usaRed,
+  polBlue,
+  polLightBlue,
+  polPurple,
+  polLightRed,
+  polRed } from '../utils/colors';
 import {
   scaleTime,
   scaleLinear,
@@ -50,4 +57,9 @@ export const setScales = (data, width, minDim, maxDim, panelHeight, margin) => {
   centroidScale.set(scaleSqrt()
     .domain([0, max(casesPerCountry)])
     .range([maxDim * 0.0005, maxDim * 0.01]));
+
+  // polarization scale
+  polarizationScale.set(scaleLinear()
+    .domain([-2, 0, 2])
+    .range([polBlue, polPurple, polRed]));
 };