VisualizationView.vue

<template>
  <section id="visualization">
    <VizTitle />
    <BeeswarmChart /> 
    <NarrativeIntro />
    <InteractiveDendrogram />
    <Maps />
    <Conclusion />
    <AboutTheTeam :data="circleData" />
    <ReferencesSection />
    <AuthorshipSection />
  </section>
</template>

<script setup>
  import VizTitle from '.././components/VizTitle.vue'
  import NarrativeIntro from '.././components/NarrativeIntro.vue'
  import BeeswarmChart from '../components/BeeswarmChart.vue'
  import InteractiveDendrogram from '.././components/InteractiveDendrogram.vue'
  import Maps from '.././components/Maps.vue'
  import Conclusion from '.././components/Conclusion.vue'
  import AboutTheTeam from '../components/AboutTheTeam.vue'
  import ReferencesSection from '.././components/References.vue'
  import AuthorshipSection from '.././components/Authorship.vue'

  const circleData = [
  { name: "Oronde Drakes", link: "https://example1.com", image: "https://i.pinimg.com/originals/e3/e5/b4/e3e5b4544f08a948e591b5894cefa2be.jpg" },
  { name: "Diana Restrepo-Osorio", link: "https://example2.com", image: "https://i.pinimg.com/originals/e3/e5/b4/e3e5b4544f08a948e591b5894cefa2be.jpg" },
  { name: "Person", link: "https://example3.com", image: "https://i.pinimg.com/originals/e3/e5/b4/e3e5b4544f08a948e591b5894cefa2be.jpg" },
  { name: "Person", link: "https://example4.com", image: "https://i.pinimg.com/originals/e3/e5/b4/e3e5b4544f08a948e591b5894cefa2be.jpg" },
  { name: "Person", link: "https://example5.com", image: "https://i.pinimg.com/originals/e3/e5/b4/e3e5b4544f08a948e591b5894cefa2be.jpg" },
  { name: "Person", link: "https://example6.com", image: "https://i.pinimg.com/originals/e3/e5/b4/e3e5b4544f08a948e591b5894cefa2be.jpg" },
];
</script>

<style lang="scss" scoped>
  #visualization{
    padding: 0rem 0rem 0rem 0rem;

  }
</style>