From f9c1e43b4b1b1bf0a21c53e1a9856d82252275b2 Mon Sep 17 00:00:00 2001
From: jdromero88
Date: Tue, 24 Mar 2026 17:50:13 -0400
Subject: [PATCH 01/42] Horizontal timeline with image and text
---
.../SatImageSnapshot.ce.svelte | 304 ++++++++++++++++++
src/lib/satellite-image-snapshot/api/data.js | 37 +++
2 files changed, 341 insertions(+)
create mode 100644 src/lib/satellite-image-snapshot/SatImageSnapshot.ce.svelte
create mode 100644 src/lib/satellite-image-snapshot/api/data.js
diff --git a/src/lib/satellite-image-snapshot/SatImageSnapshot.ce.svelte b/src/lib/satellite-image-snapshot/SatImageSnapshot.ce.svelte
new file mode 100644
index 0000000..dbcc817
--- /dev/null
+++ b/src/lib/satellite-image-snapshot/SatImageSnapshot.ce.svelte
@@ -0,0 +1,304 @@
+
+
+
+
+{#if selectedItem}
+
+
+
+
+
+
+
+
+
+
+
+ {#each positionedItems as item, index}
+ -
+
+
+ {/each}
+
+
+
+
+
+
+
+
{selectedItem.title}
+
{selectedItem.dateText}
+
{selectedItem.description}
+
+
+{/if}
+
+
diff --git a/src/lib/satellite-image-snapshot/api/data.js b/src/lib/satellite-image-snapshot/api/data.js
new file mode 100644
index 0000000..c360009
--- /dev/null
+++ b/src/lib/satellite-image-snapshot/api/data.js
@@ -0,0 +1,37 @@
+import { csv } from "d3-fetch"
+
+function formatDateText(dateString) {
+ const date = new Date(`${dateString}T00:00:00`)
+ return new Intl.DateTimeFormat("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ }).format(date)
+}
+
+export async function getData(URL) {
+ if (!URL) throw new Error("Missing data URL")
+
+ const res = await csv(URL)
+
+ const data = res
+ .map((row, index) => {
+ const dateString = (row.date || "").trim()
+ const timestamp = new Date(`${dateString}T00:00:00`).getTime()
+
+ return {
+ id: row.id ? Number(row.id) : index,
+ title: row.title?.trim() || "",
+ description: row.description?.trim() || "",
+ date: dateString,
+ timestamp,
+ dateText: formatDateText(dateString),
+ imageLink: row.image?.trim() || "",
+ imageAlt: row.image_alt?.trim() || "",
+ }
+ })
+ .filter((item) => item.date && !Number.isNaN(item.timestamp))
+ .sort((a, b) => a.timestamp - b.timestamp)
+
+ return data
+}
From 1dc1231868eb06f635e0d3d799e72287e880d704 Mon Sep 17 00:00:00 2001
From: jdromero88
Date: Wed, 25 Mar 2026 12:13:33 -0400
Subject: [PATCH 02/42] fix image size, align image and content, center
timeline-track
---
index.html | 9 ++++++--
.../SatImageSnapshot.ce.svelte | 22 ++++++++++++++-----
2 files changed, 23 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
index 11987fd..7292266 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,7 @@
}
csis-audio-brief {
+ margin-top: 400px;
margin-bottom: 20px;
}
@@ -40,6 +41,11 @@ Test page
ends up on the page.
+
+
+
+
+
Test page