Opacity scale

src/lib/components/Timeline.svelte

@@ -1,6 +1,5 @@
 <script>
 	import { scaleUtc, scalePoint, scaleOrdinal, scaleLinear, scaleTime } from 'd3-scale';
-	import { extent } from 'd3-array';
 	import { utcFormat } from 'd3-time-format';
 	import { area, stack, curveNatural } from 'd3-shape';
 	import { max, union, index } from 'd3-array';
@@ -24,9 +23,10 @@
 	let width;
 	let height = 200;
 
-
-
 	$: xScale = scaleTime($timeRangeFilter, [0, width - margins.right - margins.left]);
+	$: opacityScale = scaleLinear()
+		.domain([0, max(cases.map(d => d.attribution_total_score))])
+		.range([0.2, 1])
 	$: ticks = xScale.ticks(5);
 
 	const actorNations = ['Key event', 'China', 'Iran', 'North Korea', 'Russia'];
@@ -76,8 +76,8 @@
 						y1={yScale(nation)}
 						y2={yScale(nation)}
 						style:stroke={colorScale(nation)}
-						stroke-width={2}
-						opacity={0.3}
+						stroke-width={32}
+						opacity={0.1}
 					></line>
 					<text
 						class="country-label"
@@ -114,6 +114,7 @@
 								stroke={'#ffffff'}
 								stroke-width={2}
 								ttContent={`<p class="countryname">${attrCase.Short_Title}</p>`}
+								opacity={opacityScale(attrCase.attribution_total_score)}
 								bind:tooltipContent
 								bind:tooltipX
 								bind:tooltipY

src/lib/utils/scales.js

@@ -1,25 +1,24 @@
-import { timeScale, attributionScoreScale} from '../../stores/scales';
+/*import { timeScale, attributionScoreScale} from '../../stores/scales';
   import {
     usaRed,
     polBlue,
     polPurple,
     polRed } from '$lib/utils/colors';
   import { scaleTime, scaleLinear } from 'd3-scale';
-  import { max } from 'd3-array'
-  //import { getTimeRange } from './misc';
+  import { getTimeRange } from './misc';
   
   // sets all the basic scales
-  export const setScales = (data, width, margin) => {
+  export const setScales = (data, width, margin, maxAttribution) => {
     if (!data) return;
     
     // time scale
-    /*timeScale.set(scaleTime()
+    timeScale.set(scaleTime()
       .domain(getTimeRange(data))
-      .range([margin.left, width - margin.right]));*/
+      .range([margin.left, width - margin.right]));
   
     // attribution score scale
     attributionScoreScale.set(scaleLinear()
-      .domain([-1, 1.1 * max(data, (d) => d.attributionScore)])
-      .range(['#FFFFFF', usaRed]));
-  };
+      .domain([0, maxAttribution])
+      .range([0.2, 1]));
+  };*/
   

src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import copy from '../data/copy.json';
 	import { onMount } from 'svelte';
 	import { csv } from 'd3-fetch';
+    import { max } from 'd3-array';
 	import { base } from '$app/paths';
 	import CaseCard from '$lib/components/CaseCard.svelte';
 	import CaseTable from '$lib/components/CaseTable.svelte';
@@ -10,7 +11,7 @@
     import Controls from '$lib/components/Controls.svelte';
     import AnimatedFilterIcon from '$lib/components/AnimatedFilterIcon.svelte';
     import { splitString, haveOverlap, withinRange, includesTextSearch } from '$lib/utils/misc'
-    import { setScales } from '$lib/utils/scales';
+    //import { setScales } from '$lib/utils/scales';
     import { extent } from 'd3-array';
 
     import {
@@ -33,6 +34,7 @@
 	let cases = [];
     let events = [];
     let metrics = [];
+    let maxAttribution = 0;
 
 	onMount(async function () {
 		const response = await csv(`https://fiat-2024-processed-data.s3.us-west-2.amazonaws.com/Demo_Attribution_Data.csv`);
@@ -51,6 +53,8 @@
             d.show = false
         })
 
+        maxAttribution = max(cases.map(d => d.attribution_total_score))
+
         platformFilter.init(cases, 'platform');
         actorNationFilter.init(cases, 'actor_nation');
         sourceFilter.init(cases, 'source')
@@ -104,7 +108,7 @@
     }
 
     // set the scales
-    $: setScales(cases, width, margin);
+    //$: setScales(cases, width, margin);
 
     let sidebarOpen = false;
 	

src/stores/scales.js

@@ -1,6 +1,6 @@
 import { writable, readable } from 'svelte/store';
 
 export const timeScale = writable();
-export const attributionScoreScale = writable();
+//export const attributionScoreScale = writable();
 
 //export const scaleFactor = readable(window.devicePixelRatio || 1);