Offline mobilization

src/lib/components/Bubble.svelte

@@ -4,6 +4,8 @@
   export let r;
   export let fill;
   export let opacity;
+  export let stroke;
+  export let strokeWidth;
   export let ttContent;
   export let tooltipContent;
   export let tooltipX;
@@ -27,14 +29,11 @@
   {r}
   {fill}
   {opacity}
+  {stroke}
+  stroke-width={strokeWidth}
+  stroke-opacity={1}
   on:mouseover={handleMouseOver}
   on:focus={handleMouseOver}
   on:mouseout={handleMouseOut}
   on:blur={handleMouseOut}
 />
-
-<style>
-  circle {
-    stroke: white;
-  }
-</style>

src/lib/components/Timeline.svelte

@@ -47,6 +47,11 @@
 		[6, 8, 10, 11, 12, 13]
 	)
 
+	//TODO: sort bubbles
+	$: if(cases && radiusScale){
+		cases = cases.sort((a,b) => radiusScale(a.breakout_scale) < radiusScale(b.breakout_scale))
+	}
+
 	$: displayCountryMetrics = $actorNationFilter.filter(d => d.selected).map(d => d.name)
 	$: filteredMetrics = metrics.filter(d => displayCountryMetrics.includes(d.country))
 
@@ -103,13 +108,24 @@
 				{#each cases as attrCase}
 					{#if attrCase.show}
 						<a href={'#case-' + attrCase.attribution_id} transition:fade>
+							{#if attrCase.offline_mobilization == 'Offline Mobilization'}
+								<circle
+									cx={xScale(new Date(attrCase.attribution_date))}
+									cy={actorNations.includes(attrCase.actor_nation[0]) ? yScale(attrCase.actor_nation[0]) : yScale('Other')}
+									r={radiusScale(attrCase.breakout_scale) + 2}
+									fill={'none'}
+									stroke={'#555555'}
+									stroke-width={1.5}
+									opacity={1}
+								></circle>
+							{/if}
 							<Bubble
 								cx={xScale(new Date(attrCase.attribution_date))}
 								cy={actorNations.includes(attrCase.actor_nation[0]) ? yScale(attrCase.actor_nation[0]) : yScale('Other')}
 								r={radiusScale(attrCase.breakout_scale)}
 								fill={actorNations.includes(attrCase.actor_nation[0]) ? colorScale(attrCase.actor_nation[0]) : colorScale('Other')}
 								stroke={'#ffffff'}
-								stroke-width={2}
+								strokeWidth={1.5}
 								ttContent={`<p class="countryname">${attrCase.short_title}</p>`}
 								opacity={opacityScale(attrCase.attribution_score)}
 								bind:tooltipContent

src/routes/+page.svelte

@@ -67,6 +67,8 @@
 			d.show = false;
 		});
 
+        //console.log(cases.map(d => d.offline_mobilization))
+
 		maxAttribution = max(cases.map((d) => d.attribution_score));
 
 		platformFilter.init(cases, 'platform');