Start and end date on cards

src/lib/components/CaseCard.svelte

@@ -77,7 +77,19 @@
 	<div class="card-content">
 		<div class="content">
 			{#if expanded}
-				<p>{utcFormat('%B %-d, %Y')(new Date(cardData.attribution_date))}</p>
+				<p class="is-siz-7 is-italic">Date of attribution: {utcFormat('%B %-d, %Y')(new Date(cardData.attribution_date))}</p>
+				<p class="is-siz-7 is-italic">
+					{#if cardData.start_date && !cardData.end_date}
+						Start: {utcFormat('%B %-d, %Y')(new Date(cardData.start_date))}
+					{/if}
+					{#if cardData.start_date && cardData.end_date}
+						Duration: from {utcFormat('%B %-d, %Y')(new Date(cardData.start_date))} to {utcFormat('%B %-d, %Y')(new Date(cardData.end_date))}
+					{/if}
+					{#if !cardData.start_date && cardData.end_date}
+						End: {utcFormat('%B %-d, %Y')(new Date(cardData.end_date))}
+					{/if}
+				</p>
+				
 				<p><a href={cardData.attribution_url_x} target="_blank">{cardData.source}</a></p>
 			{/if}
 			<p>{cardData.short_description}</p>

src/lib/components/Legend.svelte

@@ -20,11 +20,12 @@
 
 <svg {width} height={height}>
     <g transform={`translate(${margins.left},${0})`}>
+        <a href="#break-out-scale">
     <text
         x={72}
         y={12}
         text-anchor={'middle'}
-    >Breakout Scale</text>
+    >Breakout Scale</text></a>
     {#each radiusScale.domain() as rad,i}
         <circle
             cx={12 - radiusScale(rad) + i*30}

src/routes/+page.svelte

@@ -73,6 +73,8 @@
 
 			d.show = false;
 		});
+		console.log(cases.map(d => d.start_date))
+		console.log(cases.map(d => d.end_date))
 
 		maxAttribution = max(cases.map((d) => d.attribution_score));