diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..27d270e
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,40 @@
+name: Deploy
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./sankey_dashboard
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        env:
+          NODE_ENV: production
+        run: npm run build
+      - name: Commit the build dir
+        run: |
+          cd build
+          git init
+          git add -A
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git commit -m 'deploy' -a || true
+      - name: Push changes to gh-pages
+        uses: ad-m/github-push-action@master
+        with:
+          branch: gh-pages
+          directory: build
+          force: true
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
diff --git a/sankey_dashboard/package-lock.json b/sankey_dashboard/package-lock.json
index f977251..1f6929d 100644
--- a/sankey_dashboard/package-lock.json
+++ b/sankey_dashboard/package-lock.json
@@ -10,7 +10,7 @@
 			"dependencies": {
 				"@sveltejs/adapter-static": "^3.0.6",
 				"papaparse": "^5.4.1",
-				"plotly": "^1.0.6"
+				"plotly.js-dist-min": "^2.35.2"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^3.0.0",
@@ -952,25 +952,6 @@
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
-		"node_modules/minimist": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/mkdirp": {
-			"version": "0.5.6",
-			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-			"dependencies": {
-				"minimist": "^1.2.6"
-			},
-			"bin": {
-				"mkdirp": "bin/cmd.js"
-			}
-		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -1019,13 +1000,11 @@
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
 			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
 		},
-		"node_modules/plotly": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/plotly/-/plotly-1.0.6.tgz",
-			"integrity": "sha512-9DoPWfLJWxqXg6omu1Oj7qkvyOce0Nv+X+2SOoI9lG9mbvA7S/qGVHypwrGMV3r53ruW1Fl1A9a7ZIPt22FrpA==",
-			"dependencies": {
-				"mkdirp": "~0.5.0"
-			}
+		"node_modules/plotly.js-dist-min": {
+			"version": "2.35.2",
+			"resolved": "https://registry.npmjs.org/plotly.js-dist-min/-/plotly.js-dist-min-2.35.2.tgz",
+			"integrity": "sha512-oWDTf2kYOmTtEw3epeeSBdfH/H3OSktF0suST9oI6fIgKfbyd4MT7TPh8+CVzdHYllYon24Q0HI1hZjOnLqk6g==",
+			"license": "MIT"
 		},
 		"node_modules/postcss": {
 			"version": "8.4.49",
diff --git a/sankey_dashboard/package.json b/sankey_dashboard/package.json
index 6193302..27ae881 100644
--- a/sankey_dashboard/package.json
+++ b/sankey_dashboard/package.json
@@ -21,6 +21,6 @@
 	"dependencies": {
 		"@sveltejs/adapter-static": "^3.0.6",
 		"papaparse": "^5.4.1",
-		"plotly": "^1.0.6"
+		"plotly.js-dist-min": "^2.35.2"
 	}
 }
diff --git a/sankey_dashboard/src/app.html b/sankey_dashboard/src/app.html
index 59d2ffe..3d3a243 100644
--- a/sankey_dashboard/src/app.html
+++ b/sankey_dashboard/src/app.html
@@ -5,7 +5,7 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
-
+		<script src="https://cdn.plot.ly/plotly-2.35.2.min.js" charset="utf-8"></script>
 
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/sankey_dashboard/src/routes/+layout.svelte b/sankey_dashboard/src/routes/+layout.svelte
index 7711c19..db37b1f 100644
--- a/sankey_dashboard/src/routes/+layout.svelte
+++ b/sankey_dashboard/src/routes/+layout.svelte
@@ -1,20 +1,27 @@
 
 
 <script>
-const nav_items = ["home", "about"] ;
-
+    // this variable will be important if deploying to a non-root url,
+    // such as with github pages when you don't have a custom domain;
+    // defined in `svelte.config.js`
+	import { base } from '$app/paths';
+    const nav_items = ["home", "about"] ;
 </script>
 
-<style>
-
-</style>
-
-<div> 
+<div id="navbar"> 
 
-{#each nav_items as item}
-<a href="/{item}"> {item}</a>
-{/each}
+    {#each nav_items as item}
+        <a href="{base}/{item === "home" ? '' : item}">{item}</a>
+    {/each}
 
 </div>
 
-<slot></slot>
\ No newline at end of file
+<slot/>
+
+<style>
+    #navbar {
+        display: flex;
+        flex-direction: row;
+        gap: 2rem;
+    }
+</style>
diff --git a/sankey_dashboard/src/routes/+page.svelte b/sankey_dashboard/src/routes/+page.svelte
index 1c81065..9df612a 100644
--- a/sankey_dashboard/src/routes/+page.svelte
+++ b/sankey_dashboard/src/routes/+page.svelte
@@ -1,162 +1,189 @@
+<script>
+    import Papa from 'papaparse';
+    import { onMount } from 'svelte';
+	import { base } from '$app/paths';
 
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
-
-
-        
-        <div id="sankeyDiagram" style="width:100%;max-width:1200px;height:800px;"></div>
-        <script>
-            import { onMount } from 'svelte'
-            import Papa from 'papaparse'
-            import Plotly from 'plotly'
-
-            onMount(() => {
-
-            // Function to load CSV file
-            function loadCSV(file, callback) {
-                fetch(file)
-                    .then(response => {
-                        if (!response.ok) throw new Error("Network response was not ok");
-                        return response.text();
-                    })
-                    .then(data => {
-                        callback(Papa.parse(data, { header: true }).data);
-                    })
-                    .catch(error => console.error("Error loading CSV file:", error));
-            }
-    
-            // Generate Sankey frames by year and scenario
-            function generateSankeyFrames(data, selectedScenario) {
-                const filteredData = data.filter(row => row.scenario === selectedScenario);
-                const years = [...new Set(filteredData.map(row => row.year))];
-                const labels = new Set();
-                const frames = [];
-    
-                filteredData.forEach(row => {
-                    labels.add(row.source);
-                    labels.add(row.target);
-                });
-    
-                years.forEach(year => {
-                    const yearData = filteredData.filter(row => row.year === year);
-                    const sources = [];
-                    const targets = [];
-                    const values = [];
-                    const linkColors = [];
-                    const nodeColors = Array.from({ length: labels.size });
-    
-                    yearData.forEach(row => {
-                        sources.push([...labels].indexOf(row.source));
-                        targets.push([...labels].indexOf(row.target));
-                        values.push(parseFloat(row.value));
-                        linkColors.push(row.link_color);
-                        nodeColors[[...labels].indexOf(row.source)] = row.source_color;
-                        nodeColors[[...labels].indexOf(row.target)] = row.target_color;
-                    });
-    
-                    frames.push({
-                        name: year,
-                        data: [{
-                            type: "sankey",
-                            orientation: "h",
-                            node: {
-                                pad: 15,
-                                thickness: 20,
-                                line: { color: "black", width: 0.5 },
-                                label: [...labels],
-                                color: nodeColors
-                            },
-                            link: {
-                                source: sources,
-                                target: targets,
-                                value: values,
-                                color: linkColors
-                            }
-                        }]
-                    });
-                });
-    
-                return { frames, labels: [...labels] };
-            }
-    
-            // Initialize Sankey animation
-            function initializeSankey(data, selectedScenario) {
-                const { frames, labels } = generateSankeyFrames(data, selectedScenario);
-                const initialFrame = frames[0];
-    
-                const layout = {
-                    title: "Water Sankey Diagram by Year",
-                    font: { size: 12 },
-                    sliders: [{
-                        steps: frames.map(frame => ({
-                            method: "animate",
-                            label: frame.name,
-                            args: [[frame.name], { mode: "immediate", frame: { duration: 1000, redraw: true }, transition: { duration: 500 } }]
-                        })),
-                        active: 0,
-                        currentvalue: {
-                            prefix: "Year: ",
-                            font: { size: 16, color: "#666" }
-                        },
-                        pad: { t: 30 }
-                    }],
-                    updatemenus: [{
-                        type: "buttons",
-                        showactive: false,
-                        buttons: [
-                            {
-                                label: "Play",
-                                method: "animate",
-                                args: [null, { frame: { duration: 1000, redraw: true }, fromcurrent: true, mode: "immediate", transition: { duration: 500 } }]
-                            },
-                            {
-                                label: "Pause",
-                                method: "animate",
-                                args: [[null], { mode: "immediate", frame: { duration: 0, redraw: false }, transition: { duration: 0 } }]
-                            }
-                        ]
-                    }]
-                };
-    
-                Plotly.newPlot("sankeyDiagram", initialFrame.data, layout)
-                    .then(() => {
-                        Plotly.addFrames("sankeyDiagram", frames);
-                    });
-            }
-    
-            // Populate scenario dropdown
-            function populateScenarioDropdown(data) {
-                const scenarios = ['rcp45cooler_ssp3', 'rcp45cooler_ssp5', 
-                                    'rcp45hotter_ssp3', 'rcp45hotter_ssp5', 
-                                    'rcp85cooler_ssp3', 'rcp85cooler_ssp5', 
-                                    'rcp85hotter_ssp3', 'rcp85hotter_ssp5', 
-                                     ];
-                const dropdown = document.getElementById("scenarioDropdown");
-    
-                scenarios.forEach(scenario => {
-                    const option = document.createElement("option");
-                    option.value = scenario;
-                    option.textContent = scenario;
-                    dropdown.appendChild(option);
-                });
-    
-                dropdown.addEventListener("change", () => {
-                    initializeSankey(data, dropdown.value);
-                });
-    
-                // Initialize with the first scenario
-                if (scenarios.length > 0) {
-                    dropdown.value = scenarios[4];
-                    initializeSankey(data, scenarios[4]);
-                }
-            }
-    
-            // Load CSV and initialize Sankey diagram
-            document.addEventListener("DOMContentLoaded", () => {
-                loadCSV("/data.csv", data => {
-                    populateScenarioDropdown(data);
-                });
+    // the plotly javascript library appears to have some serious bugs when loaded
+    // into a module context, so i moved the load back into <head> in app.html;
+    // also just 'plotly' was a different library... :\
+    // import Plotly from 'plotly.js-dist-min';
+
+    // the dropdown is now built in a svelte-like way; see below
+    const scenarios = [
+        'rcp45cooler_ssp3', 'rcp45cooler_ssp5', 
+        'rcp45hotter_ssp3', 'rcp45hotter_ssp5', 
+        'rcp85cooler_ssp3', 'rcp85cooler_ssp5', 
+        'rcp85hotter_ssp3', 'rcp85hotter_ssp5', 
+    ];
+    let selectedScenario = scenarios[4];
+
+    // data is now fetched in a svelte-like way; see below
+    let data;
+
+    // Generate Sankey frames by year and scenario
+    // this is the same as you had it
+    function generateSankeyFrames(data, selectedScenario) {
+        const filteredData = data.filter(row => row.scenario === selectedScenario);
+        const years = [...new Set(filteredData.map(row => row.year))];
+        const labels = new Set();
+        const frames = [];
+
+        filteredData.forEach(row => {
+            labels.add(row.source);
+            labels.add(row.target);
+        });
+
+        years.forEach(year => {
+            const yearData = filteredData.filter(row => row.year === year);
+            const sources = [];
+            const targets = [];
+            const values = [];
+            const linkColors = [];
+            const nodeColors = Array.from({ length: labels.size });
+
+            yearData.forEach(row => {
+                sources.push([...labels].indexOf(row.source));
+                targets.push([...labels].indexOf(row.target));
+                values.push(parseFloat(row.value));
+                linkColors.push(row.link_color);
+                nodeColors[[...labels].indexOf(row.source)] = row.source_color;
+                nodeColors[[...labels].indexOf(row.target)] = row.target_color;
+            });
+
+            frames.push({
+                name: year,
+                data: [{
+                    type: "sankey",
+                    orientation: "h",
+                    node: {
+                        pad: 15,
+                        thickness: 20,
+                        line: { color: "black", width: 0.5 },
+                        label: [...labels],
+                        color: nodeColors
+                    },
+                    link: {
+                        source: sources,
+                        target: targets,
+                        value: values,
+                        color: linkColors
+                    }
+                }]
+            });
+        });
+
+        return { frames, labels: [...labels] };
+    }
+
+    // Initialize Sankey animation
+    // this is the same as you had it
+    function initializeSankey(data, selectedScenario) {
+        const { frames, labels } = generateSankeyFrames(data, selectedScenario);
+        const initialFrame = frames[0];
+
+        const layout = {
+            title: "Water Sankey Diagram by Year",
+            font: { size: 12 },
+            sliders: [{
+                steps: frames.map(frame => ({
+                    method: "animate",
+                    label: frame.name,
+                    args: [[frame.name], { mode: "immediate", frame: { duration: 1000, redraw: true }, transition: { duration: 500 } }]
+                })),
+                active: 0,
+                currentvalue: {
+                    prefix: "Year: ",
+                    font: { size: 16, color: "#666" }
+                },
+                pad: { t: 30 }
+            }],
+            updatemenus: [{
+                type: "buttons",
+                showactive: false,
+                buttons: [
+                    {
+                        label: "Play",
+                        method: "animate",
+                        args: [null, { frame: { duration: 1000, redraw: true }, fromcurrent: true, mode: "immediate", transition: { duration: 500 } }]
+                    },
+                    {
+                        label: "Pause",
+                        method: "animate",
+                        args: [[null], { mode: "immediate", frame: { duration: 0, redraw: false }, transition: { duration: 0 } }]
+                    }
+                ]
+            }]
+        };
+
+        Plotly.newPlot("sankeyDiagram", initialFrame.data, layout)
+            .then(() => {
+                Plotly.addFrames("sankeyDiagram", frames);
             });
-        })
-        </script>
+    }
+
+    // when the page loads into a user's browser (onMount),
+    // fetch the data and store in the the `data` variable defined above
+    onMount(() => {
+        fetch(`${base}/data.csv`).then(response => {
+            if (!response.ok) throw new Error("Network response was not ok");
+            return response.text();
+        }).then(
+            d => Papa.parse(d, { header: true }).data
+        ).then(d => {
+            // this is the modele scoped `data` variable defined above
+            data = d;
+        }).catch(
+            error => console.error("Error loading CSV file:", error)
+        );
+    });
+
+    // this is how to make a "reactive" construct in svelte, using the $: syntax
+    // the code here will run anytime the referenced, in-scope variables change
+    // (in this case, `data` and `selectedScenario`), but the "if" construct means
+    // we only run initializeSankey if both `data` and `selectedScenario` are "truthy",
+    // meaning they have any non-false, non-zero, non-empty string value;
+    // there are many other ways to use "$:" too
+    $: if (data && selectedScenario) {
+        initializeSankey(data, selectedScenario);
+    }
+
+</script>
+
+<!-- Svelte will always rerender the html when variables change reactively -->
+<div id="sankeyWrapper">
+
+    <!-- the `bind:value` svelte construct causes `selectedScenario` to always reflect the selected value -->
+    <select
+        id="scenarioSelector"
+        bind:value={selectedScenario}
+    >
+        {#each scenarios as s}
+            <option value={s}>{s}</option>
+        {/each}
+    </select>
+
+    <!-- the Plotly looks for this id; this is non-svelte-like but we can do it anyway -->
+    <div id="sankeyDiagram"></div>
+
+</div>
 
+<style>
+    #sankeyWrapper {
+        width: 100vw;
+        height: 100vh;
+        overflow-x: hidden;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: start;
+    }
+    #sankeyDiagram {
+        width: 100%;
+        max-width: 1200px;
+        height: 800px;
+    }
+    #scenarioSelector {
+        width: 256px;
+    }
+</style>
\ No newline at end of file
diff --git a/sankey_dashboard/static/.nojekyll b/sankey_dashboard/static/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/sankey_dashboard/svelte.config.js b/sankey_dashboard/svelte.config.js
index f85c905..51d05dd 100644
--- a/sankey_dashboard/svelte.config.js
+++ b/sankey_dashboard/svelte.config.js
@@ -11,7 +11,10 @@ export default {
 			fallback: undefined,
 			precompress: false,
 			strict: true
-		})
+		}),
+		paths: {
+            base: process.env.NODE_ENV === 'production' ? '/im3_sankey_dashboard' : '',
+        },
 	}
 };