diff --git a/README.md b/README.md
index 4c54ceb..92275f1 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 Built using [Minimal Mistakes](https://github.com/mmistakes/minimal-mistakes) and [Jekyll](https://jekyllrb.com). 
 
-## Documentation for BLASTNet maintainers and contributors
+# Documentation for BLASTNet maintainers and contributors
 
 This repository contains all the code for the blastnet.github.io website. Most of the Minimal Mistakes features and layouts are not used (and will likely never be used) and so they have been removed for a smoother and lighter build experience. Yet, some new features like the data counters have also been added. Therefore, please read this documentation carefully.
 
@@ -76,7 +76,7 @@ gem install jekyll bundler
 
 First, clone the repository:
 ```bash
-git clone https://github.com/ihmegroup/website
+git clone https://github.com/blastnet/blastnet.github.io
 ```
 
 You can also fork the repository and clone that, if you prefer.
@@ -101,22 +101,13 @@ There are some options/flags that this command takes, the most pertinent of whic
 
 ### Important
 
-Make sure to correctly set the `url` and `baseurl` fields in `_config.yml` before building the webpage. The url should be `fxlab.stanford.edu` and baseurl blank, do not delete it.
+Make sure to not touch anything in the `_config.yml` file unless you know what you are doing. This file is used by Jekyll to build everything, so making a mistake here will likely break the entire website.
 
 ---
 
 ## Pushing to production
 
-**Never push to production on Fridays!** (jk)
-
-Once the site has been built, all the relevant files will be in the `_site` folder, ready to be uploaded to the Stanford domain. I also recommend cleaning up the CSS to remove unused classes, which speeds up loading time and reduces filesize, this can be done by running
-
-```bash
-purgecss -c purgecss.config.js
-```
-which will replace the CSS files in the `_site/assets/css/` folder with the purged css files.
-
-If using Github pages, simply run `bundle exec jekyll clean` to remove the build files, then commit changes and push to the `main` branch. I do recommend making major code-breaking or other stylistic changes on a development branch or fork, before making a pull request to the main branch.
+The site is built and hosted on Github pages, so it suffices to simply run `bundle exec jekyll clean` to remove the build files, then commit changes and push to the `master` branch. Please try to make major code-breaking or other stylistic changes on a development branch or fork, before making a pull request to the master branch.
 
 ---
 
@@ -154,9 +145,16 @@ description: Rayleigh-Bénard Convection DNS
 header:
   teaser: /assets/img/ico_roshan2024.png
   image: /assets/img/roshan2024.png
+categories:
+- nonreacting
+- channel
+- pipe
+- turbulent
+- threeD
+- numerical
 ---
 ```
-For each new dataset, count the number of cases and update the excerpt. Then, update the title and description as per normal. Header teaser corresponds to the icon displayed in the gallery (this keyword needs to be set or the gallery will not display correctly) and header image corresponds to the banner for the specific dataset; either set the keyword or include the banner as an image on the page using `![image](./assets/img/roshan2024.png)`. Additionally, for banner images that have a square-ish or vertical aspect ratio, it is possible to put the banner image in the sidebar like:
+For each new dataset, count the number of cases and update the excerpt. Add in relevant filter categories under the `categories` keyword as shown above. Then, update the title and description as per normal. Header teaser corresponds to the icon displayed in the gallery (this keyword needs to be set or the gallery will not display correctly) and header image corresponds to the banner for the specific dataset; either set the keyword or include the banner as an image on the page using, for example, `![image](./assets/img/roshan2024.png)`. Additionally, for banner images that have a square-ish or vertical aspect ratio, it is possible to put the banner image in the sidebar like:
 ```html
 <div class="sidebar__right" style="text-align: center; top: 160px;">
     <img src="./assets/img/gauding2022.png" alt="Image 1">
@@ -177,10 +175,7 @@ Once the new dataset is pushed to the repository, the website should automatical
 
 Adding new pages (for example, maybe new FlameAI) or editing the existing ones is simple - all the pages are rendered by markdown files located in `_pages` (except for the homepage, which is in the root folder and called `index.md`). General pages use the `single` layout; the dataset page uses the `datasets` custom layout and the homepage uses the `splash` layout, which has been significantly modified from the Minimal Mistakes file. ~~Yes, I know hardcoding is bad practice; no, I don't care.~~ The layout should be specified in the preamble using the `layout:` keyword. To add a new page or external link to the navigation menu, go to `_data/navigation.yml` and add a new entry under `main`. 
 
-## To-do list
-- Clean up the unused Minimal Mistakes code
-- Design a better color scheme
-- Better manipulation of the Kaggle API so that we can update more frequently
-- Update the Python script to only update the JSON if there are actual updates (perhaps add the ability to read the JSON file and match the values) --> this can reduce the number of updates to the Gist and reduce clutter
-- Think about whether we want to do a manual size calculation at every update or just cache the size permanently. Pros of cache: Much lower load, size shouldn't change by a lot anyway. Cons of cache: Less accurate; each subdataset has different number of downloads so the homepage total counter will also be inaccurate; does not capture versioning.
+## Filters
+
+The datasets summary page contains a list of filters which are generated from the list in `_data/filters.yml`. Filter category keywords from each of the dataset pages should correspond to these. To add more filters or filter groups, modify `_data/filters.yml`.
 
diff --git a/_data/filters.yml b/_data/filters.yml
new file mode 100644
index 0000000..de94264
--- /dev/null
+++ b/_data/filters.yml
@@ -0,0 +1,40 @@
+- title: "Flow Type"
+  group: "Reynolds"
+  items:
+    - { name: "Laminar", filter: ".laminar" }
+    - { name: "Turbulent", filter: ".turbulent" }
+
+- title: "Combustion"
+  group: "Combustion"
+  items:
+    - { name: "Reacting", filter: ".reacting" }
+    - { name: "Non-reacting", filter: ".nonreacting" }
+
+- title: "Dimensionality"
+  group: "Dimensionality"
+  items:
+    - { name: "2D", filter: ".twoD" }
+    - { name: "3D", filter: ".threeD" }
+
+- title: "Flow Configuration"
+  group: "FlowType"
+  items:
+    - { name: "HIT", filter: ".hit" }
+    - { name: "Pipe", filter: ".pipe" }
+    - { name: "Channel", filter: ".channel" }
+    - { name: "Jet", filter: ".jet" }
+    - { name: "Environmental", filter: ".environmental" }
+
+- title: ""
+  group: "ML"
+  comb: true
+  exclusive: false
+  items: 
+    - { name: "Benchmark Datasets", filter: ".benchmark" }
+
+- title: ""
+  group: "DataType"
+  items:
+    - { name: "Numerical", filter: ".numerical" }
+    - { name: "Experimental", filter: ".experimental" }
+
diff --git a/_datasets/brouzet2021.md b/_datasets/brouzet2021.md
index 7649d26..9f132db 100644
--- a/_datasets/brouzet2021.md
+++ b/_datasets/brouzet2021.md
@@ -5,7 +5,12 @@ title: Reacting Jet Flows
 description: Turbulent Round Jet Premixed COFFEE CH4-air Premixed Flame DNS
 header:
   teaser: /assets/img/ico_brouzet2021.png
-categories: reacting
+categories:
+  - reacting
+  - turbulent
+  - threeD
+  - jet
+  - numerical
 ---
 
 <div class="sidebar__right" style="top:200px; text-align: center;">
diff --git a/_datasets/chung2022.md b/_datasets/chung2022.md
index 91a6cb4..fcca40b 100644
--- a/_datasets/chung2022.md
+++ b/_datasets/chung2022.md
@@ -5,7 +5,12 @@ excerpt: (1 case)
 header:
   teaser: /assets/img/ico_chung2022.png
 description: Compressible Inert CH4-O2 Homogeneous Isotropic Turbulence DNS
-categories: nonreacting
+categories: 
+- nonreacting
+- numerical
+- threeD
+- turbulent
+- hit
 ---
 
 ![image](./assets/img/chung2022.png)
diff --git a/_datasets/chung2024.md b/_datasets/chung2024.md
index e87d7ac..9a6b71e 100644
--- a/_datasets/chung2024.md
+++ b/_datasets/chung2024.md
@@ -5,7 +5,16 @@ excerpt:
 header:
   teaser: /assets/img/ico_chung2022.png
 description: Collection of BLASTNet Simulations
-categories: nonreacting
+categories: 
+- numerical
+- nonreacting
+- turbulent
+- threeD
+- hit
+- pipe
+- channel
+- jet
+- benchmark
 ---
 
 ![image](./assets/img/diversity.png)
diff --git a/_datasets/coulon.md b/_datasets/coulon.md
index 9844790..0e96e68 100644
--- a/_datasets/coulon.md
+++ b/_datasets/coulon.md
@@ -5,7 +5,12 @@ description: NH3-H2-Air Premixed Flame DNS
 excerpt: (1 case)
 header:
   teaser: /assets/img/ico_coulon2023.png
-categories: reacting
+categories: 
+- reacting
+- turbulent
+- threeD
+- jet
+- numerical
 ---
 
 <div class="sidebar__right" style="top: 130px; text-align: center;">
diff --git a/_datasets/gauding2022.md b/_datasets/gauding2022.md
index 2bf8b67..f9b5848 100644
--- a/_datasets/gauding2022.md
+++ b/_datasets/gauding2022.md
@@ -5,7 +5,12 @@ title: Forced HIT
 description: Passive Scalar HIT DNS
 header:
   teaser: /assets/img/ico_gauding2022.png
-categories: nonreacting
+categories: 
+- nonreacting
+- threeD
+- hit
+- numerical
+- turbulent
 ---
 
 <div class="sidebar__right" style="text-align: center; top: 160px;">
diff --git a/_datasets/guo2022.md b/_datasets/guo2022.md
index 1cad97b..60d5905 100644
--- a/_datasets/guo2022.md
+++ b/_datasets/guo2022.md
@@ -4,7 +4,12 @@ title: Non-Reacting Channel Flow
 excerpt: (6 cases)
 header:
   teaser: /assets/img/ico_guo2022.png
-categories: nonreacting
+categories:
+- nonreacting
+- channel
+- turbulent
+- numerical
+- threeD
 description: Transcritical Channel Flow N2 Turbulence DNS
 ---
 
diff --git a/_datasets/ho2024.md b/_datasets/ho2024.md
index 6fffdd0..68fadac 100644
--- a/_datasets/ho2024.md
+++ b/_datasets/ho2024.md
@@ -5,7 +5,12 @@ title: H2/CH4 Turbulent Jet Flows
 description: H2/CH4 Fuel Mixtures, Turbulent Round Jet Premixed Flame DNS
 header:
   teaser: /assets/img/ho2024_ico.png
-categories: reacting
+categories: 
+- reacting
+- jet
+- turbulent
+- threeD
+- numerical
 ---
 
 <div class="sidebar__right" style="top:200px; text-align: center;">
diff --git a/_datasets/jiang2021.md b/_datasets/jiang2021.md
index 31b0da7..d8910c5 100644
--- a/_datasets/jiang2021.md
+++ b/_datasets/jiang2021.md
@@ -5,7 +5,12 @@ excerpt: (1 case)
 header:
   teaser: /assets/img/ico_jiang2021.png
 description: Premixed Flame-wall Interaction CH4-Air DNS
-categories: reacting
+categories: 
+- reacting
+- channel
+- threeD
+- numerical
+- turbulent
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/jung2021.md b/_datasets/jung2021.md
index 8bbbed7..59217ec 100644
--- a/_datasets/jung2021.md
+++ b/_datasets/jung2021.md
@@ -5,7 +5,12 @@ excerpt: (1 case)
 header:
   teaser: /assets/img/ico_jung2021.png
 description: Slot Burner Diluted Partially-Premixed H2-air Lifted Flame DNS
-categories: reacting
+categories: 
+- numerical
+- reacting
+- jet
+- turbulent
+- threeD
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/pkyeung2025.md b/_datasets/pkyeung2025.md
index 30c18aa..cdf75a0 100644
--- a/_datasets/pkyeung2025.md
+++ b/_datasets/pkyeung2025.md
@@ -5,7 +5,12 @@ title: Forced HIT
 description: Forced Homogeneous Isotropic Turbulence DNS with 3 Passive Scalars
 header:
   teaser: /assets/img/ico_pkyeung2025.png
-categories: nonreacting
+categories: 
+- numerical
+- nonreacting
+- hit
+- threeD
+- turbulent
 ---
 <div style="text-align: center;">
     <img src="./assets/img/pkyeung2025.png" alt="Image 1" style="max-width: 100%;">
@@ -114,4 +119,4 @@ scalars — at a single instant in time. The three scalars are each subjected to
 https://meetings.aps.org/Meeting/DFD24/Session/R37.00003, 2024.  
 [2] R. S. Rogallo. Numerical experiments in homogeneous turbulence. NASA TM 81315, NASA Ames Research Center, Moffett Field, CA., 1981.  
 [3] D. A. Donzis and P. K. Yeung. Resolution effects and scaling in numerical simulations of passive
-scalar mixing in turbulence. Physica D, 239:1278–1287, 2010. 
\ No newline at end of file
+scalar mixing in turbulence. Physica D, 239:1278–1287, 2010. 
diff --git a/_datasets/poludnenko.md b/_datasets/poludnenko.md
index 411d921..38f19c2 100644
--- a/_datasets/poludnenko.md
+++ b/_datasets/poludnenko.md
@@ -5,7 +5,12 @@ excerpt: (1 case)
 description: CH4-Air Flame Interaction With Forced HIT DNS
 header:
   teaser: /assets/img/ico_poludnenko.png
-categories: reacting
+categories: 
+- reacting
+- hit
+- threeD
+- turbulent
+- numerical
 ---
 
 ![image](./assets/img/poludnenko.png)
diff --git a/_datasets/quentin2024.md b/_datasets/quentin2024.md
index 706a66e..738691a 100644
--- a/_datasets/quentin2024.md
+++ b/_datasets/quentin2024.md
@@ -6,7 +6,12 @@ description: Premixed Flame H2-Air DNS in Slot Burner
 header:
   teaser: /assets/img/ico_quentin2024.png
 #   image: /assets/img/quentin2024.png
-categories: reacting
+categories: 
+- reacting
+- jet
+- threeD
+- turbulent
+- numerical
 ---
 <div style="text-align: center;">
     <img src="./assets/img/quentin2024.png" alt="Image 1" style="max-width: 100%;">
diff --git a/_datasets/roshan2024.md b/_datasets/roshan2024.md
index 6df452d..3964707 100644
--- a/_datasets/roshan2024.md
+++ b/_datasets/roshan2024.md
@@ -6,7 +6,13 @@ description: Rayleigh-Bénard Convection DNS
 header:
   teaser: /assets/img/ico_roshan2024.png
   image: /assets/img/roshan2024.png
-categories: nonreacting
+categories: 
+- nonreacting
+- channel
+- pipe
+- turbulent 
+- threeD
+- numerical
 ---
 
 <!--
diff --git a/_datasets/savard.md b/_datasets/savard.md
index be81e45..59be684 100644
--- a/_datasets/savard.md
+++ b/_datasets/savard.md
@@ -5,7 +5,11 @@ excerpt: (22 cases)
 header:
   teaser: /assets/img/ico_savard2019.png
 description: Vitiated H2-air Freely Propagating Flame DNS
-categories: reacting
+categories: 
+- reacting
+- threeD
+- turbulent
+- numerical
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/shantanu.md b/_datasets/shantanu.md
index 9157d7e..f5aada6 100644
--- a/_datasets/shantanu.md
+++ b/_datasets/shantanu.md
@@ -5,7 +5,12 @@ title: Canonical Decaying HIT
 description: Decaying homogeneous isotropic turbulence DNS
 header:
   teaser: /assets/img/ico_shantanu2022.png
-categories: nonreacting
+categories: 
+- numerical
+- nonreacting
+- hit
+- turbulent
+- threeD
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/sharma2024.md b/_datasets/sharma2024.md
index 4ebb895..72cb220 100644
--- a/_datasets/sharma2024.md
+++ b/_datasets/sharma2024.md
@@ -5,7 +5,12 @@ title: Lifted hydrogen jet flame
 description: Circular Burner Diluted Partially-Premixed H2-air Lifted Flame in 2D configuration
 header:
   teaser: /assets/img/ico_sharma2024.png
-categories: reacting
+categories: 
+- reacting
+- jet
+- twoD
+- laminar
+- numerical 
 ---
 
 <div style="text-align: center;">
diff --git a/_datasets/wang2024.md b/_datasets/wang2024.md
index 6d928e9..71ca703 100644
--- a/_datasets/wang2024.md
+++ b/_datasets/wang2024.md
@@ -6,7 +6,13 @@ description: LES of an ensemble of wildfire spread
 header:
   image: /assets/img/wang2024.png
   teaser: /assets/img/ico_wang2024.png
-categories: reacting
+categories: 
+- reacting
+- environmental
+- threeD
+- turbulent
+- numerical
+- benchmark
 ---
 
 <!--
diff --git a/_includes/archive-single.html b/_includes/archive-single.html
index b8e9aec..672b9ac 100644
--- a/_includes/archive-single.html
+++ b/_includes/archive-single.html
@@ -10,7 +10,7 @@
   {% assign title = post.title %}
 {% endif %}
 
-<div class="{% if post.categories %}{{ post.categories }}{% endif %} {{ include.type | default: 'list' }}__item">
+<div class="{% if post.categories %}{% for category in post.categories %}{{ category }} {% endfor %}{% endif %} {{ include.type | default: 'list' }}__item">
   <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork"{% if post.locale %} lang="{{ post.locale }}"{% endif %}>
     {% if include.type == "grid" and teaser %}
       <div class="archive__item-teaser">
diff --git a/_includes/datasets_filters.html b/_includes/datasets_filters.html
index df18bf5..54f8f72 100644
--- a/_includes/datasets_filters.html
+++ b/_includes/datasets_filters.html
@@ -1,53 +1,52 @@
-<div class="filter-group filter-categories">
-  <a href="#"class="datasets_all"  data-filter="*">
-    <h3>All</h3>
-    <img src="/assets/img/blastnet_banner.png"/>
-  </a>
-  <a href="#" data-filter=".reacting">
-    <h3>Reacting</h3>
-    <img src="/assets/img/filter_reacting.jpeg"/>
-  </a>
-  <a href="#" data-filter=".nonreacting">
-    <h3>Non-reacting</h3>
-    <img src="/assets/img/filter_nonreacting.png"/>
-  </a>
-  <a href="#" data-filter=".experimental">
-    <h3>Experimental</h3>
-    <img src="/assets/img/filter_experimental.png"/>
-  </a>
-  <h2>BLASTNet Simulation Dataset</h2>
+<aside class="sidebar__left sticky">
+  <nav class="filters">
+    <header>
+      <h4 class="nav__title">
+        <i class="fas fa-file-alt"></i>
+        Filter Datasets
+      </h4>
+    </header>
+    <ul class="filters__menu">
+      <li class="filter-group">
+        <a href="#" data-filter="" class="show-all is-checked">Show All</a>
+      </li>
+      {% for filter in site.data.filters %}
+        {% assign exclusive = filter.exclusive | default: true %}
+        {% assign comb = filter.comb | default: false %}
+        <li class="filter-group filter-categories
+          {% if exclusive %}excl{% endif %}
+          {% if comb %} comb{% endif %}"
+          {% if filter.group != "" %} data-filter-group="{{ filter.group }}"{% endif %}>
+
+          {% if filter.title != "" %}
+            <a href="#" data-filter='' class="is-checked">{{ filter.title }}</a>
+
+            {% if filter.items and filter.items.size > 0 %}
+              <ul>
+                {% for item in filter.items %}
+                  <li><a href="#" data-filter="{{ item.filter }}">{{ item.name }}</a></li>
+                {% endfor %}
+              </ul>
+            {% endif %}
+          {% else %}
+            {% if filter.items and filter.items.size > 0 %}
+              {% for item in filter.items %}
+              <a href="#" data-filter="{{ item.filter }}">{{ item.name }}</a>
+              {% endfor %}
+            {% endif %}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+</aside>
+
+<div>
+  <!--<h3><a href="/visualize">Visualize statistics here</a></h3>-->
+  <h2>BLASTNet Datasets</h2>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
-
-<script>
-document.addEventListener('DOMContentLoaded',function(){
-    var content = document.querySelector('.entries-grid');
-    var iso = new Isotope(content,{
-        itemSelector:'.grid__item',
-        layoutMode:'fitRows'
-    });
-    imagesLoaded(content).on('progress',function(){
-        iso.layout();
-    });
-    document.querySelectorAll('.filter-group a').forEach(function(element){
-        element.addEventListener('click',function(e){
-            var filter_class;
-            //var filter_class = element.getAttribute("data-filter");
-            if (element.classList.contains('is-checked'))
-                filter_class = '*';
-            else {
-                filter_class = element.getAttribute('data-filter');
-                document.querySelectorAll('.is-checked').forEach(el => el.classList.remove('is-checked'));
-            }
-	    iso.arrange({
-                filter: filter_class
-            });
-            element.classList.toggle('is-checked');
-            e.preventDefault();
-        });
-    });
-});
-</script>
+<script src="/assets/js/dataset_filters.js"></script>
 
diff --git a/_layouts/datasets.html b/_layouts/datasets.html
index 79a2f0f..2be3b0c 100644
--- a/_layouts/datasets.html
+++ b/_layouts/datasets.html
@@ -1,14 +1,28 @@
 ---
-layout: archive
+layout: default
 ---
 
-<p>{{ page.excerpt }}</p>
+{% if page.url != "/" and site.breadcrumbs %}
+  {% unless paginator %}
+    {% include breadcrumbs.html %}
+  {% endunless %}
+{% endif %}
 
-{% include datasets_filters.html %}
+<div id="main" role="main">
+  {% include sidebar.html %}
 
-{% assign entries_layout = page.entries_layout | default: 'list' %}
-<div class="entries-{{ entries_layout }}">
-  {% include documents-collection.html collection=page.collection sort_by=page.sort_by sort_order=page.sort_order type=entries_layout %}
-</div>
+  <div class="archive archive__left page__content">
+    {% unless page.header.overlay_color or page.header.overlay_image %}
+      <h1 id="page-title" class="archive__title page__title"{% if page.locale %} lang="{{ page.locale }}"{% endif %}>{{ page.title }}</h1>
+    {% endunless %}
+    <p class="archive__excerpt">{{ page.excerpt }}</p>
+
+    {% include datasets_filters.html %}
 
-{{ content }}
+    {% assign entries_layout = page.entries_layout | default: 'list' %}
+    <div class="entries-{{ entries_layout }}">
+      {% include documents-collection.html collection=page.collection sort_by=page.sort_by sort_order=page.sort_order type=entries_layout %}
+    </div>
+    {{ content }}
+  </div>
+</div>
diff --git a/_pages/datasets.md b/_pages/datasets.md
index df741c6..012b11f 100644
--- a/_pages/datasets.md
+++ b/_pages/datasets.md
@@ -4,20 +4,8 @@ layout: datasets
 permalink: /datasets
 collection: datasets
 entries_layout: grid
-classes: wide
 excerpt: "High-fidelity reacting and non-reacting compressible turbulent flow simulation data."
 ---
 
-## BLASTNet Momentum128 3D SR Dataset
-
-<div style="text-align: center;">
-    <img src="./assets/img/diversity.png" alt="Image 1" style="max-width: 100%;">
-</div>
-
-The BLASTNet Momentum128 3D SR Dataset is extracted from BLASTNet Simulation Dataset 2.0 to mitigate constraints in memory and grid properties:
-1. This is done by selecting to 2000 sub-volumes (of size 128<sup>3</sup>) of density and velocity fields from uniform-grid regions that act as labels.
-2. We perform 8, 16 and 32x Favre-filtering to create the features.
-3. Bash script for downloading via the [Kaggle API](./tutorial.html) is provided [here](./assets/bash/mom_download.sh).
-4. You can also access the Kaggle repo [here](https://www.kaggle.com/datasets/waitongchung/blastnet-momentum-3d-sr-dataset).
-
+<hr>
 **All datasets provided on BLASTNet are licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International ([CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/))**
diff --git a/_pages/visualize.html b/_pages/visualize.html
new file mode 100644
index 0000000..0938e73
--- /dev/null
+++ b/_pages/visualize.html
@@ -0,0 +1,24 @@
+---
+layout: single
+permalink: /visualize
+title: "Data visualization"
+excerpt: "Mean and variance of key turbulence statistics"
+---
+
+<aside class="sidebar__right">
+<form id="datasetForm" class="toc">
+  <header>
+    <h4 class="nav__title">
+      <i class="fas fa-file-alt"></i>
+      Select Datasets
+    </h4>
+  </header>
+</form>
+</aside>
+
+<div id="chartContainer">
+  <canvas id="scatterChart" width="600" height="400"></canvas>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="/assets/js/dataset_visualization.js"></script>
diff --git a/_sass/stylesheets/_archive.scss b/_sass/stylesheets/_archive.scss
index 05cf0fe..95abd77 100644
--- a/_sass/stylesheets/_archive.scss
+++ b/_sass/stylesheets/_archive.scss
@@ -18,6 +18,28 @@
   }
 }
 
+// Additional class to flush sidebar to left
+.archive__left {
+  padding-inline-end: initial;
+
+  @include breakpoint($large) {
+    float: inline-start;
+    padding-inline-start: $right-sidebar-width-narrow;
+
+    p.archive__excerpt, h1.archive__title {
+      margin-left: -1 * $right-sidebar-width-narrow;
+    }
+  }
+
+  @include breakpoint($x-large) {
+    padding-inline-start: $right-sidebar-width;
+
+    p.archive__excerpt, h1.archive__title {
+      margin-left: -1 * $right-sidebar-width;
+    }
+  }
+}
+
 .archive__item {
   position: relative;
 
@@ -148,7 +170,7 @@
    Grid view
    ========================================================================== */
 
-.archive {
+.archive:not(.archive__left) {
   .grid__wrapper {
     /* extend grid elements to the right */
 
@@ -162,6 +184,17 @@
   }
 }
 
+.archive__left {
+  .grid__wrapper {
+    @include breakpoint($large) {
+      margin-inline-start: -1 * $right-sidebar-width-narrow;
+    }
+    @include breakpoint($x-large) {
+      margin-inline-start: -1 * $right-sidebar-width;
+    }
+  }
+}
+
 .grid__item {
   //margin-bottom: 1em;
 
@@ -431,7 +464,7 @@
    ========================================================================== */
 
 .wide {
-  .archive {
+  .archive:not(.archive__left) {
     @include breakpoint($large) {
       padding-inline-end: 0;
     }
@@ -440,6 +473,15 @@
       padding-inline-end: 0;
     }
   }
+
+  .archive__left {
+    @include breakpoint($large) {
+      padding-inline-start:0;
+    }
+    @include breakpoint($x-large) {
+      padding-inline-start:0;
+    }
+  }
 }
 
 /* Place inside a single layout */
diff --git a/_sass/stylesheets/_blastnet.scss b/_sass/stylesheets/_blastnet.scss
index c21f9f1..86a6637 100644
--- a/_sass/stylesheets/_blastnet.scss
+++ b/_sass/stylesheets/_blastnet.scss
@@ -226,51 +226,88 @@ $base0f: #d33682 !default;
 
 /*-- isotope --*/
 
-.filter-group {
-  text-align:center;
+.filter-group a {
+  line-height:1.5;
 
-  h2 {
-    text-align:left;
+  &::before {
+    content:"";
+    display:none;
+    width:10px;
+    height:10px;
+    margin-right:0.5em;
+    background:$primary-color;
+    border-radius:100%;
   }
-}
 
-.filter-group a {
-  text-decoration:none;
-
-  &.is-checked:not(.datasets_all) {
-    opacity:0.5;
+  &.is-checked::before {
+    display:inline-block;
   }
 }
 
-.filter-group a {
-  width:24%;
-  height:100px;
-  position:relative;
-  display:inline-block;
+/* visualization form */
+#datasetForm {
+  margin-top:0px;
+  padding:0px;
 
-  img {
+  label {
     display:block;
-    width:100%;
-    height:100%;
-    position:absolute;
-    object-fit:cover;
-    top:0;
-    left:0;
-    border-radius:20px;
+    padding:0.25rem 0.75rem;
+    color: $dark-gray;
+    font-weight:bold;
+    font-size:0.6875rem;
+    line-height:1.5;
+    border-bottom:1px solid $border-color;
+    transition:background-color 0.4s ease-in-out;
+    cursor:pointer;
+
+    &:hover {
+      text-decoration:underline;
+    }
+
+    .marker-symbol {
+      display:none;
+      width:12px;
+      height:12px;
+      margin-right:0.5em;
+      vertical-align:middle;
+
+      &.circle {
+        border-radius:100%;
+      }
+
+      &.rectRounded {
+        border-radius:3px;
+      }
+
+      &.triangle {
+        width:0;
+	height:0;
+	border-left:6px solid transparent;
+	border-right:6px solid transparent;
+	border-bottom:12px solid;
+	background:none;
+      }
+
+      &.star, &.cross {
+        font-size:12px;
+      }
+
+      &.star::before {
+        content: '★';
+      }
+
+      &.cross::before {
+        content: '✚';
+      }
+    }
   }
 
-  h3 {
-    position:absolute;
-    left:0;
-    right:0;
-    top:0;
-    bottom:0;
-    z-index:1;
-    text-shadow:1px 1px 4px rgba(0,0,0,0.5);
-    height:1.5rem;
-    margin:auto;
-    text-align:center;
-    color:white;
-    text-decoration:none;
+  input[type="checkbox"]{
+    display:none;
+
+    &:checked + label .marker-symbol {
+      display:inline-block!important;
+    }
   }
 }
+
diff --git a/_sass/stylesheets/_navigation.scss b/_sass/stylesheets/_navigation.scss
index 0c32e1a..63f3011 100644
--- a/_sass/stylesheets/_navigation.scss
+++ b/_sass/stylesheets/_navigation.scss
@@ -530,11 +530,11 @@
 /*
      Table of contents navigation
      ========================================================================== */
-.sticky .toc {
+.sticky .toc, .sticky .filters {
   margin-top:1em;
 }
 
-.toc {
+.toc, .filters {
   font-family: $sans-serif-narrow;
   color: $gray;
   background-color: $background-color;
@@ -552,12 +552,12 @@
   }
 
   // Scrollspy marks toc items as .active when they are in focus
-  .active a {
+  .active a, > ul > li > a {
     @include yiq-contrasted($active-color);
   }
 }
 
-.toc__menu {
+.toc__menu, .filters__menu {
   margin: 0;
   padding: 0;
   width: 100%;
diff --git a/_sass/stylesheets/_sidebar.scss b/_sass/stylesheets/_sidebar.scss
index 56d9258..a6b571f 100644
--- a/_sass/stylesheets/_sidebar.scss
+++ b/_sass/stylesheets/_sidebar.scss
@@ -75,6 +75,45 @@
   }
 }
 
+.sidebar__left {
+  margin-bottom: 1em;
+
+  + h1, + h2, + h3, + h4, + h5, + h6 {
+    margin-top:0;
+  }
+
+  @include breakpoint($large) {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: $right-sidebar-width-narrow;
+    margin-inline-start: -1 * $right-sidebar-width-narrow;
+    padding-inline-end: 1em;
+    z-index:10;
+
+    &.sticky {
+      @include clearfix();
+      position: -webkit-sticky;
+      position: sticky;
+      // top: 2em;
+      top: $masthead-height;
+      float: inline-start;
+
+      .toc, .filters {
+        .toc__menu, .filters__menu {
+	  overflow-y: auto;
+	  max-height: calc(100vh - 7em);
+	}
+      }
+    }
+  }
+
+  @include breakpoint($x-large) {
+    width: $right-sidebar-width;
+    margin-inline-start: -1 * $right-sidebar-width;
+  }
+}
+
 .sidebar__right {
   margin-bottom: 1em;
 
@@ -126,6 +165,18 @@
   }
 }
 
+.splash .sidebar__left {
+  @include breakpoint($large) {
+    position: relative;
+    float: inline-start;
+    margin-inline-start: 0;
+  }
+
+  @include breakpoint($x-large) {
+    margin-inline-start: 0;
+  }
+}
+
 /*
    Author profile and links
    ========================================================================== */
@@ -356,3 +407,21 @@
     margin-inline-end: initial;
   }
 }
+
+.wide .sidebar__left {
+  margin-bottom:1em;
+
+  @include breakpoint($large) {
+    position: initial;
+    top: initial;
+    inset-inline-start: initial;
+    width: initial;
+    margin-inline-start: initial;
+    padding-inline-start: initial;
+    z-index: initial;
+
+    &.sticky {
+      float: none;
+    }
+  }
+}
diff --git a/assets/example_statistics.json b/assets/example_statistics.json
new file mode 100644
index 0000000..42ef7ef
--- /dev/null
+++ b/assets/example_statistics.json
@@ -0,0 +1,254 @@
+{
+    "savard": {
+        "stat1": [
+            0.9991540475439931,
+            61.586857858765455,
+            61.72074550725999,
+            72.32404246910791,
+            56.26429728021609,
+            91.71555234100236,
+            53.02591178463951,
+            30.8491640411228,
+            31.3810458594462,
+            62.94634799706904
+        ],
+        "stat2": [
+            27.61625280054242,
+            6.948202947269088,
+            70.56386674744999,
+            46.78057818127262,
+            83.33324224205248,
+            32.62689015123074,
+            61.88257624815743,
+            34.068564230569756,
+            88.46882740246409,
+            43.59496236281657
+        ]
+    },
+    "sharma2024": {
+        "stat1": [
+            20.688955796668562,
+            36.32572231319489,
+            23.748281014065277,
+            74.65627467543938,
+            23.230469419590506,
+            29.228686039593686,
+            88.90086876006927
+        ],
+        "stat2": [
+            35.18912545882974,
+            51.41789300801955,
+            25.81815987388917,
+            93.93200541663008,
+            88.74713075619631,
+            93.79937145976909,
+            46.529888557696985
+        ]
+    },
+    "chung2022": {
+        "stat1": [
+            0.49458915838497264
+        ],
+        "stat2": [
+            42.027201362359655
+        ]
+    },
+    "jiang2021": {
+        "stat1": [
+            96.48151243774127,
+            96.75429835938851,
+            29.75327278957599
+        ],
+        "stat2": [
+            94.27083994082749,
+            95.7250933733062,
+            74.80311077635324
+        ]
+    },
+    "shantanu": {
+        "stat1": [
+            82.95713949921127,
+            88.48223526917182,
+            90.7405569166286,
+            8.284921106540066,
+            84.49146258615117,
+            97.86161883649964,
+            98.29997631002142,
+            15.67075410984482,
+            41.61075657663871,
+            83.97489270587495
+        ],
+        "stat2": [
+            14.525725525562672,
+            48.76524202423712,
+            82.69011074639482,
+            16.162040672479204,
+            80.7876463620556,
+            1.2273525640447258,
+            67.53746046673388,
+            35.892889571477816,
+            95.77532586338131,
+            56.27573895722438
+        ]
+    },
+    "wang2024": {
+        "stat1": [
+            76.0828854394958,
+            50.7119912005355
+        ],
+        "stat2": [
+            5.704149680146564,
+            15.534088527642819
+        ]
+    },
+    "gauding2022": {
+        "stat1": [
+            90.1474463853956,
+            20.686778216112913,
+            59.063473117939914,
+            70.73161684749118,
+            32.191682204194585,
+            27.307429559823483,
+            48.86858164579536,
+            90.78131821432854,
+            46.88483193524811,
+            87.79045174455766
+        ],
+        "stat2": [
+            11.64771112763442,
+            45.45290820544046,
+            84.7784553316726,
+            37.09511988487806,
+            75.24856240710194,
+            8.31733844625785,
+            19.203661736492748,
+            45.05320654919812,
+            89.51939526101782,
+            80.35970208221545
+        ]
+    },
+    "poludnenko": {
+        "stat1": [
+            25.400086840235847,
+            91.6578203704328,
+            89.57862767448712,
+            52.81479390307759,
+            51.166165270547225,
+            4.320682793221486,
+            26.080861880128857,
+            1.9655973822491735,
+            68.86968937728099
+        ],
+        "stat2": [
+            31.603231362970863,
+            70.877458336863,
+            53.71275117117824,
+            15.33483705730162,
+            69.88172178907297,
+            74.07788450892279,
+            41.49362530086861,
+            40.17810343850482,
+            8.089927723916524
+        ]
+    },
+    "quentin2024": {
+        "stat1": [
+            61.34554495710437,
+            64.4903621088854
+        ],
+        "stat2": [
+            75.3205747840441,
+            6.5163759171910085
+        ]
+    },
+    "guo2022": {
+        "stat1": [
+            5.815097686926441,
+            14.573364901785125,
+            78.2720380007215,
+            45.33156312716956,
+            50.27524624412087
+        ],
+        "stat2": [
+            62.89706564407053,
+            4.185034746756411,
+            70.98680486956538,
+            43.343639214056125,
+            83.15201271632321
+        ]
+    },
+    "roshan2024": {
+        "stat1": [
+            90.8275187184673
+        ],
+        "stat2": [
+            41.16075835445683
+        ]
+    },
+    "ho2024": {
+        "stat1": [
+            35.71698190587935,
+            64.4833574174482,
+            67.3399825085049,
+            23.712931904393365
+        ],
+        "stat2": [
+            41.086672796068626,
+            90.61965685158881,
+            27.433008127524474,
+            50.56033401399657
+        ]
+    },
+    "coulon": {
+        "stat1": [
+            29.069970797451184,
+            40.87648066778436,
+            4.041891838677603,
+            80.84037661854579,
+            82.82597507974987,
+            91.17913012966736,
+            3.8926597704275423,
+            60.624591499519795,
+            42.41000634039141,
+            1.8858639619028117
+        ],
+        "stat2": [
+            17.0504794161878,
+            98.22637506731832,
+            30.165713245589043,
+            17.065333559033334,
+            36.78850716305886,
+            52.390130294586626,
+            76.57649120687252,
+            6.812966174221968,
+            41.23760402572375,
+            44.306839429813024
+        ]
+    },
+    "jung2021": {
+        "stat1": [
+            72.04543448028394,
+            92.22025091691671,
+            95.38790693108727,
+            27.74778701799533
+        ],
+        "stat2": [
+            29.078162797137608,
+            60.68417215950688,
+            87.51865198020063,
+            75.55497876304341
+        ]
+    },
+    "brouzet2021": {
+        "stat1": [
+            40.62375991138101,
+            44.414450447564036,
+            50.58240531100827
+        ],
+        "stat2": [
+            67.22003793082997,
+            35.19288150360455,
+            30.90823108708053
+        ]
+    }
+}
\ No newline at end of file
diff --git a/assets/js/dataset_filters.js b/assets/js/dataset_filters.js
new file mode 100644
index 0000000..2dbbdcf
--- /dev/null
+++ b/assets/js/dataset_filters.js
@@ -0,0 +1,169 @@
+var grid;
+document.addEventListener('DOMContentLoaded',function(){
+  var container = document.querySelector('.entries-grid');
+  var filters = {};
+
+  grid = new Isotope(container, {
+    itemSelector: '.grid__item',
+    layoutMode: 'fitRows'
+  });
+
+  window.addEventListener('resize', function(){
+    grid.layout();
+  });
+
+  imagesLoaded(container).on('progress',function(){
+    grid.layout();
+  });
+
+  var activeClass = "is-checked",
+      comboClass = "comb",
+      exclClass = "excl",
+      resetClass = "show-all";
+
+  var defaults = document.querySelectorAll("a." + activeClass + '[data-filter=""]');
+  
+  document.querySelectorAll(".filter-group a").forEach(function(element) {
+    element.addEventListener("click", function(e) {
+      var thisElement = this;
+      var comboFilter,
+        filterAttr = "data-filter";
+      if (resetClass && !thisElement.classList.contains(resetClass)) {
+        var filterValue = thisElement.getAttribute(filterAttr);
+        var optionSet = thisElement.closest(".filter-group");
+        var group = optionSet.getAttribute("data-filter-group");
+        var filterGroup = filters[group];
+        if (!filterGroup) {
+          filterGroup = filters[group] = [];
+        }
+        var selectAll = optionSet.querySelectorAll("a[" + filterAttr + '=""]');
+        document.querySelectorAll("." + resetClass).forEach(function(element) {
+          element.classList.remove(activeClass);
+        });
+        comboFiltering(
+          thisElement,
+          filters,
+          filterAttr,
+          filterValue,
+          optionSet,
+          group,
+          selectAll,
+          activeClass,
+          comboClass,
+          exclClass
+        );
+        comboFilter = getComboFilter(filters);
+        if (!comboFilter.length) document.querySelector("a." + resetClass).classList.add(activeClass);
+        thisElement.classList.toggle(activeClass);
+      } else {
+        filters = {};
+        comboFilter = "";
+        document.querySelectorAll(".filter-group a").forEach(function(element) {
+          element.classList.remove(activeClass);
+        });
+        thisElement.classList.add(activeClass);
+        defaults.forEach(function(element) {
+          element.classList.add(activeClass);
+        });
+      }
+      grid.arrange({filter: comboFilter});
+      e.preventDefault();
+    });
+  });
+  grid.arrange(); 
+});
+
+function comboFiltering(
+  element,
+  filters,
+  filterAttr,
+  filterValue,
+  optionSet,
+  group,
+  selectAll,
+  activeClass,
+  comboClass,
+  exclClass
+) {
+  if (!optionSet.classList.contains(exclClass)) {
+    if (!element.classList.contains(activeClass) && filterValue.length) {
+      filters[group].push(filterValue);
+      selectAll.forEach(function(element) {
+        element.classList.remove(activeClass);
+      });
+    } else if (filterValue.length) {
+      if (optionSet.classList.contains(comboClass)) {
+        filters[group][0] = filters[group][0].replace(filterValue, "");
+        if (!filters[group][0].length)
+          filters[group].splice(0, 1);
+      } else {
+        var curIndex = filters[group].indexOf(filterValue);
+        if (curIndex > -1) filters[group].splice(curIndex, 1);
+      }
+      if (!optionSet.querySelectorAll("a." + activeClass + ":not(["+filterAttr+"=''])").length)
+        selectAll.forEach(function(element) {
+          element.classList.add(activeClass);
+        });
+    } else {
+      optionSet.querySelectorAll("a." + activeClass).forEach(function(element) {
+        element.classList.remove(activeClass);
+      });
+      filters[group] = [];
+    }
+    if (optionSet.classList.contains(comboClass) && filters[group].length)
+      filters[group] = [filters[group].join("")];
+  } else {
+    if (!element.classList.contains(activeClass) && filterValue.length) {
+      optionSet.querySelectorAll("a." + activeClass).forEach(function(filterLink) {
+        var removeFilter = filterLink.getAttribute(filterAttr);
+        var removeIndex = filters[group].indexOf(removeFilter);
+        filters[group].splice(removeIndex, 1);
+      });
+      filters[group].push(filterValue);
+      optionSet.querySelectorAll("a." + activeClass).forEach(function(element) {
+        element.classList.remove(activeClass);
+      });
+    } else if (filterValue.length) {
+      var curIndex = filters[group].indexOf(filterValue);
+      if (curIndex > -1) filters[group].splice(curIndex, 1);
+      //if (!optionSet.querySelectorAll("a." + activeClass + ":not(["+filterAttr+"=''])").length)
+      if (!filters[group].length)
+        selectAll.forEach(function(element) {
+          element.classList.add(activeClass);
+        });
+    } else {
+      optionSet.querySelectorAll("a." + activeClass).forEach(function(element) {
+        element.classList.remove(activeClass);
+      });
+      filters[group] = [];
+    }
+  }
+}
+
+function getComboFilter(filters) {
+  var i = 0;
+  var comboFilters = [];
+
+  for (var prop in filters) {
+    var filterGroup = filters[prop];
+    if (!filterGroup.length) {
+      continue;
+    }
+    if (i === 0) {
+      comboFilters = filterGroup.slice(0);
+    } else {
+      var filterSelectors = [];
+      var groupCombo = comboFilters.slice(0);
+      for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
+        for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
+          filterSelectors.push(groupCombo[j] + filterGroup[k]);
+        }
+      }
+      comboFilters = filterSelectors;
+    }
+    i++;
+  }
+
+  var comboFilter = comboFilters.join(", ");
+  return comboFilter;
+}
diff --git a/assets/js/dataset_visualization.js b/assets/js/dataset_visualization.js
new file mode 100644
index 0000000..3dfa8cb
--- /dev/null
+++ b/assets/js/dataset_visualization.js
@@ -0,0 +1,127 @@
+// Fetch the data from the JSON file
+fetch('/assets/example_statistics.json')
+  .then(response => response.json())  // Parse the JSON response
+  .then(dataJSON => {
+    // stanford accent colors
+    const colorList = [
+      "#175e54", // paloalto
+      "#279989", // paloverde
+      "#8f993e", // olive
+      "#6fa287", // bay
+      "#4298b5", // sky
+      "#007c92", // lagunita
+      "#f9a44a", // poppy
+      "#e04f39", // spirited
+      "#fedd5c", // illuminating
+      "#620059", // plum
+      "#651c32", // brick
+      "#5d4b3c", // archway
+      "#7f7776", // stone
+      "#dad7cb"  // fog
+    ];
+
+    // https://www.chartjs.org/docs/latest/configuration/elements.html#types
+    const markerSymbols = ['circle', 'triangle', 'square', 'rectRounded', 'star','cross'];
+
+    // Permute various combo of symbol/color and store in a map
+    const colorMap = {};
+    const datasetKeys = Object.keys(dataJSON);
+    datasetKeys.forEach((key, index) => {
+      const color = colorList[index % colorList.length];
+      const symbol = markerSymbols[Math.floor(index / colorList.length) % markerSymbols.length];
+      colorMap[key] = {color,symbol};
+    });
+
+    // Dynamic css for marker symbol
+    const classToProp = {
+      'circle': 'backgroundColor',
+      'triangle': 'borderBottomColor',
+      'square': 'backgroundColor',
+      'rectRounded': 'backgroundColor',
+      'star': 'color',
+      'cross': 'color'
+    };
+
+    // Generate checkboxes dynamically
+    const form = document.getElementById('datasetForm');
+    datasetKeys.forEach(key => {
+      const checkbox = document.createElement('input');
+      checkbox.type = 'checkbox';
+      checkbox.name = 'datasets';
+      checkbox.value = key;
+      checkbox.id = key;
+      checkbox.checked = false;
+      checkbox.addEventListener('change', updateChart);
+      form.appendChild(checkbox);
+
+      const label = document.createElement('label');
+      label.setAttribute('for',key);
+
+      const labelMarker = document.createElement('span');
+      labelMarker.className = `marker-symbol ${colorMap[key].symbol}`;
+      labelMarker.style[classToProp[colorMap[key].symbol]] = colorMap[key].color;
+      label.appendChild(labelMarker);
+      label.appendChild(document.createTextNode(` ${key}`));
+      form.appendChild(label);
+    });
+
+    // Initialize Chart.js
+    Chart.defaults.font.size = 20;
+    const ctx = document.getElementById('scatterChart').getContext('2d');
+    const scatterChart = new Chart(ctx, {
+      type: 'scatter',
+      data: { datasets: [] },
+      options: {
+        scales: {
+          x: { type: 'linear', title: { display: true, text: 'Variance' } },
+          y: { type: 'linear', title: { display: true, text: 'Mean' } }
+        },
+	layout: {
+	  padding: 20
+	},
+        plugins: {
+          legend: {
+            //position: 'right',
+	    //align: 'left'
+            display: false
+	  },
+          tooltip: {
+            callbacks: {
+              label: function(context) {
+                return `Variance: ${context.parsed.x}, Mean: ${context.parsed.y}`;
+              }
+            }
+          }
+        }
+      }
+    });
+
+    // Update chart based on selected checkboxes
+    function updateChart() {
+      const selected = Array.from(document.querySelectorAll('input[name="datasets"]:checked'))
+                            .map(cb => cb.value);
+
+      scatterChart.data.datasets = selected.map(key => {
+        const { stat1, stat2 } = dataJSON[key];
+        const minLen = Math.min(stat1.length, stat2.length);
+        const points = Array.from({ length: minLen }, (_, i) => ({ x: stat1[i], y: stat2[i] }));
+        return {
+          label: key,
+          data: points,
+          backgroundColor: colorMap[key].color,
+	  borderColor: colorMap[key].color,
+          pointStyle: colorMap[key].symbol,
+          pointRadius: 6
+        };
+      });
+
+      scatterChart.update();
+    }
+
+    // Initial chart render
+    updateChart();
+  })
+  .catch(error => {
+    console.error('Error loading JSON:', error);
+  });
+