Fix: accessibility issues

Visualisation text and background colours.
Title for buttons.
Add border for focus state of buttons.

content/visualisation/2021-06-02-Green-Industrial-Revolution/index.mdx

@@ -3,25 +3,47 @@ type: visualisation
 author: ["Yu Liang Weng"]
 title: "University of Sheffield researchers to help bring Green Industrial Revolution"
 thumbnail: thumbnail.png
-description: Researchers from the University of Sheffield Energy Institute are set to work with the Drax power station to generate hydrogen and sustainable aviation fuels from biomass gasification and carbon capture as part of a £20m UKRI-funded project. 
+description: Researchers from the University of Sheffield Energy Institute are set to work with the Drax power station to generate hydrogen and sustainable aviation fuels from biomass gasification and carbon capture as part of a £20m UKRI-funded project.
 category: ["Energy Institute"]
 tag: ["Drax power station", "IDRIC"]
 date: "2021-06-02"
 template:
 featured: false
 pngImagePath: Green-Industrial-Revolution.png
 svgImagePath: Green-Industrial-Revolution.svg
+svgExternalImagePath: https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg
 ---
 
 import Bg from "./nuclear-power-station.jpg"
 
 <VisDiv>
-  <div 
+  <div
     id="visualisation"
-    style={{backgroundImage: `linear-gradient(45deg, rgba(100,100,100,.7) 5%, rgba(30,30,60,.85) 96%), url(${Bg})`, maxWidth: '550px', maxHeight: '550px', minHeight: '550px', width: '100%', borderRadius: '20px', backgroundSize: 'cover'}}
+    style={{
+      backgroundImage: `linear-gradient(45deg, rgba(100,100,100,.7) 5%, rgba(30,30,60,.85) 96%), url(${Bg})`,
+      maxWidth: "550px",
+      maxHeight: "550px",
+      minHeight: "550px",
+      width: "100%",
+      borderRadius: "20px",
+      backgroundSize: "cover"
+    }}
     className="p-5 relative"
   >
-    <h1 className="mt-0 text-2xl md:text-4xl font-extrabold" style={{color: 'transparent', background: 'linear-gradient(315deg, rgba(47,255,43,1) 4%, rgba(0,160,255,1) 96%)', backgroundClip: 'text', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'}}>University of Sheffield researchers to help bring Green Industrial Revolution</h1>
+    <h1
+      className="mt-0 text-2xl md:text-4xl font-extrabold"
+      style={{
+        color: "transparent",
+        background:
+          "linear-gradient(315deg, rgba(47,255,43,1) 4%, rgba(0,160,255,1) 96%)",
+        backgroundClip: "text",
+        WebkitBackgroundClip: "text",
+        WebkitTextFillColor: "transparent"
+      }}
+    >
+      University of Sheffield researchers to help bring Green Industrial
+      Revolution
+    </h1>
     <div className="mt-12 md:mt-20 w-full flex space-x-8">
       <div className="text-right">
         <h1 className="my-0 text-3xl md:text-6xl font-bold text-white">£20m</h1>
@@ -32,41 +54,50 @@ import Bg from "./nuclear-power-station.jpg"
         <h3 className="mt-0 font-normal text-base text-gray-400">partners</h3>
       </div>
       <div className="text-right relative">
-        <span className="text-sm text-gray-400 inline-block text-right absolute top-0 right-0 -mt-4">by</span>
-        <h1 className="my-0 text-3xl md:text-6xl font-bold text-green-300">2030</h1>
-        <h3 className="mt-0 font-normal text-base text-gray-400">four low-carbon clusters</h3>
+        <span className="text-sm text-gray-400 inline-block text-right absolute top-0 right-0 -mt-4">
+          by
+        </span>
+        <h1 className="my-0 text-3xl md:text-6xl font-bold text-green-300">
+          2030
+        </h1>
+        <h3 className="mt-0 font-normal text-base text-gray-400">
+          four low-carbon clusters
+        </h3>
       </div>
     </div>
     <div className="mt-4 md:mt-16 text-gray-400 text-center text-xs md:text-base">
-      + world’s first net-zero emissions industrial cluster by <span className="text-green-400 text-lg">2040</span>
+      + world’s first net-zero emissions industrial cluster by{" "}
+      <span className="text-green-400 text-lg">2040</span>
     </div>
-    <h1 className="absolute bottom-0 left-0 m-5 text-gray-500 font-extrabold text-xs">Dataviz.Shef</h1>
-    <h1 className="absolute bottom-0 right-0 m-5 text-gray-500 text-xs">Source: The University of Sheffield - News</h1>
+    <h1 className="absolute bottom-0 left-0 m-5 text-gray-500 font-extrabold text-xs">
+      Dataviz.Shef
+    </h1>
+    <h1 className="absolute bottom-0 right-0 m-5 text-gray-500 text-xs">
+      Source: The University of Sheffield - News
+    </h1>
   </div>
 </VisDiv>
 
-
 <VisPagination mdx={props.mdx}>
   <EmbedCode localPath="svgImagePath" />
 </VisPagination>
 <VisDetail mdx={props.mdx} />
 
 export const data = [
   {
-    "title": "Source",
-    "content": `The University of Sheffield - <a href="https://www.sheffield.ac.uk/energy/news/university-sheffield-researchers-help-bring-green-industrial-revolution">Latest News</a>`
+    title: "Source",
+    content: `The University of Sheffield - <a href="https://www.sheffield.ac.uk/energy/news/university-sheffield-researchers-help-bring-green-industrial-revolution">Latest News</a>`
   },
   {
-    "title": "Code",
-    "content": `This visualisation is created using HTML and CSS. You can get the source code by right click the visualisation and select 'Inspect'. You will need to adjust CSS if hosted on a different website. This website uses tailwindcss (https://tailwindcss.com/) framework for styling of some elements. E.g. className="p-5 relative" translates to "padding: 1.25rem; position: relative".`
+    title: "Code",
+    content: `This visualisation is created using HTML and CSS. You can get the source code by right click the visualisation and select 'Inspect'. You will need to adjust CSS if hosted on a different website. This website uses tailwindcss (https://tailwindcss.com/) framework for styling of some elements. E.g. className="p-5 relative" translates to "padding: 1.25rem; position: relative".`
   },
   {
-    "title": "License",
-    "content": `Creative Commons license (<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>).`
+    title: "License",
+    content: `Creative Commons license (<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>).`
   }
 ]
 
-
 <VisDiv>
   <Tab data={data} />
-</VisDiv>
+</VisDiv>

content/visualisation/2021-06-24-Increased-snack-intake-in-UK-and-Australia/index.mdx

@@ -2,58 +2,52 @@
 type: visualisation
 author: ["Yu Liang Weng"]
 title: "People turned to sweets, chocolate and salty snacks during the Covid-19 lockdowns in the UK and Australia"
-thumbnail: thumb.png
+thumbnail: thumb.jpg
 category: [Department of Psychology]
 tag: [COVID-19 lockdown, Food intake, Craving control]
 description: A new study led by the University of Sheffield suggests that treats, such as sweets, chocolate and salty treats, increased for some people during Covid-19 lockdowns. People with low control over their cravings were most at risk of increasing their snack intake during the lockdown. Researchers warn about weight and health related issues for at-risk adults due to the impact of lockdowns on our eating behaviours.
 date: 2021-06-24
 pngImagePath: Increased-snack-intake-in-UK-and-Australia.png
 svgImagePath: Increased-snack-intake-in-UK-and-Australia.svg
-svgExternalImagePath: https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg
 rowSpan: 1
 columnSpan: 1
 ---
 
 import MarimekkoPlot from "./marimekkoPlot"
 
-
 export const data = [
   {
-    "title": "Source",
-    "content": `Low craving control predicts increased high energy density food intake during the COVID-19 lockdown: Result replicated in an Australian sample (<a href="https://doi.org/10.1016/j.appet.2021.105317">https://doi.org/10.1016/j.appet.2021.105317</a>). <br/> The University of Sheffield - <a href="https://www.sheffield.ac.uk/news/more-half-brits-snacked-more-lockdown">Latest News</a>.`
+    title: "Source",
+    content: `Low craving control predicts increased high energy density food intake during the COVID-19 lockdown: Result replicated in an Australian sample (<a href="https://doi.org/10.1016/j.appet.2021.105317">https://doi.org/10.1016/j.appet.2021.105317</a>). <br/> The University of Sheffield - <a href="https://www.sheffield.ac.uk/news/more-half-brits-snacked-more-lockdown">Latest News</a>.`
   },
   {
-    "title": "Detail",
-    "content": `The <a href="https://nivo.rocks/marimekko/">marimekko</a> component (similar to a bar chart) is used for this visualisation for extra dimensions - population in each country and percentages of respondents. If you would like to try this component, <a href="https://reactjs.org/docs/add-react-to-a-website.html">add React to your website</a> and install nivo and marimekko using <code class="language-text">npm install @nivo/core @nivo/bmarimekko</code>.`
+    title: "Detail",
+    content: `The <a href="https://nivo.rocks/marimekko/">marimekko</a> component (similar to a bar chart) is used for this visualisation for extra dimensions - population in each country and percentages of respondents. If you would like to try this component, <a href="https://reactjs.org/docs/add-react-to-a-website.html">add React to your website</a> and install nivo and marimekko using <code class="language-text">npm install @nivo/core @nivo/bmarimekko</code>.`
   },
   {
-    "title": "Code",
-    "content": `This visualisation is created using React and <a href="https://nivo.rocks/">nivo</a> package. <br/> <a href="https://github.com/researchdata-sheffield/dataviz-hub2/blob/master/content/visualisation/2021-06-24-Increased-snack-intake-in-UK-and-Australia/marimekkoPlot.jsx">Link</a> for the source code.`
+    title: "Code",
+    content: `This visualisation is created using React and <a href="https://nivo.rocks/">nivo</a> package. <br/> <a href="https://github.com/researchdata-sheffield/dataviz-hub2/blob/master/content/visualisation/2021-06-24-Increased-snack-intake-in-UK-and-Australia/marimekkoPlot.jsx">Link</a> for the source code.`
   },
   {
-    "title": "Attribution",
-    "content": `Images used here such as flags and snack were downloaded from <a href="https://uxwing.com/">uxwing.com</a>.`
+    title: "Attribution",
+    content: `Images used here such as flags and snack were downloaded from <a href="https://uxwing.com/">uxwing.com</a>.`
   },
   {
-    "title": "License",
-    "content": `This is covered by a Creative Commons license (<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>).`
-  },
+    title: "License",
+    content: `This is covered by a Creative Commons license (<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>).`
+  }
 ]
 
-
 <div className="flex justify-center">
   <MarimekkoPlot />
 </div>
 
-
 <VisPagination mdx={props.mdx}>
-  <EmbedCode localPath="pngImagePath">
-  </EmbedCode>
+  <EmbedCode localPath="pngImagePath"></EmbedCode>
 </VisPagination>
 
 <VisDetail mdx={props.mdx} />
 
 <VisDiv>
   <Tab data={data} />
 </VisDiv>
-

content/visualisation/2021-06-24-Increased-snack-intake-in-UK-and-Australia/marimekkoPlot.jsx

@@ -118,7 +118,7 @@ const marimekkoPlot = () => {
             tickSize: 5,
             tickPadding: 5,
             tickRotation: 10,
-            legend: "Country population (million)",
+            legend: "Nation population (million)",
             legendOffset: 36,
             legendPosition: "middle"
           }}
@@ -127,7 +127,7 @@ const marimekkoPlot = () => {
             tickSize: 5,
             tickPadding: 5,
             tickRotation: 0,
-            legend: "Respondent %",
+            legend: "Percentage of Respondents (%)",
             legendOffset: -40,
             legendPosition: "middle"
           }}
@@ -211,12 +211,12 @@ const marimekkoPlot = () => {
       <img
         src={UKFlag}
         alt="UK flag"
-        style={{ position: "absolute", top: "30%", left: "38%", width: "25px" }}
+        style={{ position: "absolute", top: "31%", left: "39%", width: "20px" }}
       />
       <img
         src={AUFlag}
         alt="Australia flag"
-        style={{ position: "absolute", top: "30%", left: "72%", width: "25px" }}
+        style={{ position: "absolute", top: "31%", left: "71%", width: "20px" }}
       />
       <h1
         style={{ fontWeight: 800, left: 0, fontSize: ".9rem", ...sourceInfo }}

content/visualisation/2021-07-22-Millions-of-UK-residents-struggle-to-access-food/index.mdx

@@ -2,7 +2,7 @@
 type: visualisation
 author: [Yu Liang Weng]
 title: Millions of UK residents struggle to access food
-thumbnail: thumb.png
+thumbnail: thumb.jpg
 description: >
   A new study from the University of Sheffield has revealed the areas in the UK where residents most struggle to afford or access food.
   For the first time researchers were able to identify food insecurity at local authority scale across three categories, from those experiencing hunger, to those just one emergency away from going without food.
@@ -15,36 +15,33 @@ pngImagePath: millions-of-uk-residents-struggle-to-access-food.png
 
 import RadarPlot from "./radarPlot"
 
-
 export const data = [
   {
-    "title": "Source",
-    "content": `The University of Sheffield - <a href="https://www.sheffield.ac.uk/news/new-map-shows-where-millions-uk-residents-struggle-access-food">Latest News</a>. <br/>Also check out this exciting <a href="https://shefuni.maps.arcgis.com/apps/instant/interactivelegend/index.html">new map</a> - Adult Food insecurity at Local Authority Scale.`
+    title: "Source",
+    content: `The University of Sheffield - <a href="https://www.sheffield.ac.uk/news/new-map-shows-where-millions-uk-residents-struggle-access-food">Latest News</a>. <br/>Also check out this exciting <a href="https://shefuni.maps.arcgis.com/apps/instant/interactivelegend/index.html">new map</a> - Adult Food insecurity at Local Authority Scale.`
   },
   {
-    "title": "Detail",
-    "content": `This visualisation is based on the map mentioned in the source tab. I have chosen five cities across UK including two cities from Yorkshire and the Humber area, in which "almost half of local areas in here have very high percentages of people who were hungry in January", as suggested by researchers. The <a href="https://nivo.rocks/radar/">radar</a> component is used for this visualisation. If you would like to try this component, <a href="https://reactjs.org/docs/add-react-to-a-website.html">add React to your website</a> and install nivo and radar using <code class="language-text">npm install @nivo/core @nivo/radar</code>.`
+    title: "Detail",
+    content: `This visualisation is based on the map mentioned in the source tab. I have chosen five cities across UK including two cities from Yorkshire and the Humber area, in which "almost half of local areas in here have very high percentages of people who were hungry in January", as suggested by researchers. The <a href="https://nivo.rocks/radar/">radar</a> component is used for this visualisation. If you would like to try this component, <a href="https://reactjs.org/docs/add-react-to-a-website.html">add React to your website</a> and install nivo and radar using <code class="language-text">npm install @nivo/core @nivo/radar</code>.`
   },
   {
-    "title": "Code",
-    "content": `This visualisation is created using React and <a href="https://nivo.rocks/">nivo</a> package. <br/> <a href="https://github.com/researchdata-sheffield/dataviz-hub2/blob/master/content/visualisation/2021-07-22-Millions-of-UK-residents-struggle-to-access-food/radarPlot.jsx">Link</a> for the source code.`
+    title: "Code",
+    content: `This visualisation is created using React and <a href="https://nivo.rocks/">nivo</a> package. <br/> <a href="https://github.com/researchdata-sheffield/dataviz-hub2/blob/master/content/visualisation/2021-07-22-Millions-of-UK-residents-struggle-to-access-food/radarPlot.jsx">Link</a> for the source code.`
   },
   {
-    "title": "Attribution",
-    "content": `The food dish image used here were downloaded from <a href="https://uxwing.com/">uxwing.com</a>.`
+    title: "Attribution",
+    content: `The food dish image used here were downloaded from <a href="https://uxwing.com/">uxwing.com</a>.`
   },
   {
-    "title": "License",
-    "content": `This visualisation is covered by a Creative Commons license (<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>).`
-  },
+    title: "License",
+    content: `This visualisation is covered by a Creative Commons license (<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>).`
+  }
 ]
 
-
 <div className="flex justify-center">
   <RadarPlot />
 </div>
 
-
 <VisPagination mdx={props.mdx}>
   <EmbedCode localPath="svgImagePath" />
 </VisPagination>
@@ -53,4 +50,4 @@ export const data = [
 
 <VisDiv>
   <Tab data={data} />
-</VisDiv>
+</VisDiv>