JS Bin // source https://jsbin.com/moqaruh

#map2 {
  display: none;
}

/* Buttons: */
.btnGroup {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

/* 3-YR-REVENUE GROWTH BTN */
#btn1 {
 font-family: RobotMedium; 
 font-size: 14px;
 border: 1px solid #1A558F;
 color: #1A558F;
 margin-right:10px;
}

/* TOTAL REVENUE 2018 BTN */
#btn2 {
 font-family: RobotMedium; 
 font-size: 14px;
 color: #1A9D9B;
 border: 1px solid #1A9D9B;
 margin-left:10px;
}

button {
  width: 185px;
  height: 28px;
  text-transform: uppercase;
  outline: none;
}

button.activeBtn1 {
  background-color: #1A558F;
  color:#FFFFFF !important;
  outline: none;
}

button.activeBtn2 {
  background-color: #1A9D9B;
  color: #FFFFFF !important;
  outline: none;
}
</style>
</head>
<body>
  <container>
    <div class='btnGroup'>
      <button id="btn1">3-YR REVENUE GROWTH</button> 
      <button id="btn2">TOTAL REVENUE 2018</button>
     </div>
    <div class="flourish-embed" id='map1' data-src="visualisation/541997"></div>
    <div class="flourish-embed" id='map2' data-src="visualisation/541850"></div>
  </container>
<script id="jsbin-javascript">
document.addEventListener('DOMContentLoaded', (event) => {
  var btn1 = document.querySelector('#btn1' );
  var btn2 = document.querySelector('#btn2');
  var map1 = document.querySelector('#map1');
  var map2 = document.querySelector('#map2');

btn1.addEventListener('click', function(e) {
    map1.style.display = 'block';
    map2.style.display = 'none';
    e.target.classList.add('activeBtn1');
    btn2.classList.remove('activeBtn2');
  })
  btn2.addEventListener('click', function(e) {
    map1.style.display = 'none';
    map2.style.display = 'block';
    e.target.classList.add('activeBtn2');
    btn1.classList.remove('activeBtn1');
  })
})
</script>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://public.flourish.studio/resources/embed.js" type="text/javascript"><\/script>
  <title>JS Bin</title>
</head>
<body>
</head>
<body>
  <container>
    <div class='btnGroup'>
      <button id="btn1">3-YR REVENUE GROWTH</button> 
      <button id="btn2">TOTAL REVENUE 2018</button>
     </div>
    <div class="flourish-embed" id='map1' data-src="visualisation/541997"></div>
    <div class="flourish-embed" id='map2' data-src="visualisation/541850"></div>
  </container>
</body>
</html></script>

#map2 {
  display: none;
}

/* Buttons: */
.btnGroup {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

/* 3-YR-REVENUE GROWTH BTN */
#btn1 {
 font-family: RobotMedium; 
 font-size: 14px;
 border: 1px solid #1A558F;
 color: #1A558F;
 margin-right:10px;
}

/* TOTAL REVENUE 2018 BTN */
#btn2 {
 font-family: RobotMedium; 
 font-size: 14px;
 color: #1A9D9B;
 border: 1px solid #1A9D9B;
 margin-left:10px;
}

button {
  width: 185px;
  height: 28px;
  text-transform: uppercase;
  outline: none;
}

button.activeBtn1 {
  background-color: #1A558F;
  color:#FFFFFF !important;
  outline: none;
}

button.activeBtn2 {
  background-color: #1A9D9B;
  color: #FFFFFF !important;
  outline: none;
}
</script>

https://public.flourish.studio/resources/embed.js