style(blog): adjust margin and font size of headings

F-UJI visualisation: replace gif by video and add thumbnail.

content/blog/2022-02-18-Glue-Viz-for-Heterogeneous-Data/index.mdx

@@ -5,8 +5,11 @@ description: An open-sourced Python library with graphical user interace. Built
 date: 2022-02-18
 category: [Articles]
 tag: [Heterogeneous, Python]
+thumbnail: thumb.png
 ---
 
+import earthquakeMp4 from "./earthquake.mp4";
+
 _This is an event blog for the [GlueViz workshop](https://n8cir.org.uk/events/glueviz/) hosted by the N8 Centre of Excellence in Computationally Intensive Research (N8 CIR). You can access the training materials from [here](https://n8cir.org.uk/events/event-resource/glueviz/)._
 
 ## Heterogeneous data
@@ -21,8 +24,11 @@ Definition of _heterogeneous_ by the speaker **[Jonathan H Pickering](https://ep
 
 The creation of GlueViz dates back to 2012 with additional features added overtime. The data viewer tool is built on top of the [Matplotlib](https://matplotlib.org/) visualisation library and enables you to visualise the data using Histogram, Image, Scatter plots, Dendrogram, and Table. In the most recent version `v1.2` you will find a new data viewer which is called `3D Scatter` that can generate some very interesting three-dimensional plots. However, I'm slightly disappointed about the number of plots that Glueviz provided. Nevertheless, if you want to run something programmatically then Glueviz does have some flexibility as it has an integrated Python IPython terminal so you could extend Glueviz further and write custom scripts, and create your own data viewer!
 
-![3D scatter plot of earthquake locations](images/earthquake.gif)  
-_Image 0. 3D scatter plot of earthquake locations_
+<video controls>
+  <source src={earthquakeMp4} type="video/mp4" />
+</video>{" "}
+
+_Video 1: 3D scatter plot of earthquake locations_
 
 We have talked about heterogeneous data, but GlueViz is also quite useful in exploring just a single dataset. If we were writing Python scripts for some simple data exploration, we would need to import some packages, read and perhaps transform the data file, then call the target method to draw a chart. In the GlueViz software, most stages of this process can be simplified through a graphical user interface and you can drag and drop the dataset to create charts supported by the software (although it is quite limited at this time).
 
@@ -46,7 +52,7 @@ The plot on the top right is a 2D image with three subsets, and the plot on the
 
 ### Data Linking
 
-Sometimes we would like to link two different datasets together and we can do this by using the `link data` button in Glueviz to _glue_ the same attribute or attributes that describe the same quantity. In this way, selections will also be propagated between datasets.
+Sometimes we would like to link two different datasets together and we can do this by using the `Link data` button in Glueviz to _glue_ the same attribute or attributes that describe the same quantity. In this way, selections will also be propagated between datasets.
 
 ![Link data in Glueviz](images/link-data.png)  
 _Image 3. Link data in Glueviz_

gatsby-config.js

@@ -450,6 +450,15 @@ module.exports = {
         ]
       }
     },
+    {
+      resolve: "gatsby-plugin-webpack-bundle-analyser-v2",
+      options: {
+        devMode: false,
+        openAnalyzer: false,
+        analyzerMode: "static",
+        reportFilename: "webpack-report.html"
+      }
+    },
     `gatsby-plugin-sitemap`,
     `gatsby-plugin-meta-redirect` // make sure to put last in the array
   ]

src/components/style/blogPostStyle.jsx

@@ -172,71 +172,50 @@ export const A = (props) => {
 
 export const H1 = styled.h1`
   display: block;
-  font-size: 2em;
-  margin-top: 3rem;
-  margin-bottom: 0.67em;
-  margin-left: 0;
-  margin-right: 0;
-  font-weight: 700;
+  font-size: 2.5rem;
+  margin: 3rem 0 1rem 0;
+  font-weight: 800;
   line-height: 2rem;
 `;
 
 export const H2 = styled.h2`
   display: block;
-  font-size: 1.45em;
-  margin-top: 2.5rem;
-  margin-bottom: 0.83em;
-  margin-left: 0;
-  margin-right: 0;
-  font-weight: 600;
+  font-size: 2.2rem;
+  margin: 2rem 0 1rem 0;
+  font-weight: 700;
 `;
 
 export const H3 = styled.h3`
   display: block;
-  font-size: 1.3em;
-  margin-top: 2rem;
-  margin-bottom: 1em;
-  margin-left: 0;
-  margin-right: 0;
+  font-size: 1.9rem;
+  margin: 1.5rem 0 1rem 0;
   font-weight: 600;
 `;
 
 export const H4 = styled.h4`
   display: block;
-  font-size: 1em;
-  margin-top: 1.75rem;
-  margin-bottom: 1.33em;
-  margin-left: 0;
-  margin-right: 0;
-  font-weight: 500;
+  font-size: 1.7rem;
+  margin: 1.5rem 0 1rem 0;
+  font-weight: 600;
 `;
 
 export const H5 = styled.h5`
   display: block;
-  font-size: 0.83em;
-  margin-top: 1.5em;
-  margin-bottom: 1.67em;
-  margin-left: 0;
-  margin-right: 0;
+  font-size: 1.5rem;
+  margin: 1.5rem 0 1rem 0;
   font-weight: 500;
 `;
 
 export const H6 = styled.h6`
   display: block;
-  font-size: 0.67em;
-  margin-top: 1.5em;
-  margin-bottom: 2.33em;
-  margin-left: 0;
-  margin-right: 0;
+  font-size: 1.3rem;
+  margin: 1.5rem 0 1rem 0;
   font-weight: 500;
 `;
 
 export const P = styled.p`
   display: block;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  margin-left: 0;
-  margin-right: 0;
+  margin: 1.5rem 0;
   word-wrap: break-word;
   white-space: normal;
   line-height: 2rem;

tests/websitePaths.json

@@ -50,12 +50,12 @@
   "/visualisation",
   "/docs/03/09/2021/LearningPath-Statistical-Modelling-3",
   "/docs/21/07/2021/Contribute-visualisation",
-  "/docs/18/03/2021/LearningPath-Statistical-Modeling",
   "/docs/18/03/2021/LearningPath-Statistical-Modeling-1",
   "/docs/18/03/2021/LearningPath-Statistical-Modeling-2",
+  "/docs/18/03/2021/LearningPath-Statistical-Modeling",
+  "/docs/18/03/2021/LearningPath-Statistical-Modeling-2-non-random-sampling",
   "/docs/18/03/2021/LearningPath-Statistical-Modeling-2-more-random-sampling",
   "/docs/18/03/2021/LearningPath-Statistical-Modeling-2-optional",
-  "/docs/18/03/2021/LearningPath-Statistical-Modeling-2-non-random-sampling",
   "/docs/01/03/2021/Hosting-Shiny-Apps",
   "/docs/05/07/2020/LearningPath-Workflow",
   "/docs/04/07/2020/LearningPath-Lab",