diff --git a/src/components/pages/SemuaAnggaran.vue b/src/components/pages/SemuaAnggaran.vue
index 782dc05514fa7dccb0020e76c6de6bcb0d6e35f8..111d00c59fa278f091c08a4d8bb740a02f94ae5c 100644
--- a/src/components/pages/SemuaAnggaran.vue
+++ b/src/components/pages/SemuaAnggaran.vue
@@ -9,7 +9,10 @@
         />
       </b-col>
       <b-col cols="12" lg="4">
-        <simple-card-container :dataBubble="data" />
+        <simple-card-container
+          :dataBubble="data"
+          @click-handler="handler"
+        />
       </b-col>
     </b-row>
     <div id="comments-container">
diff --git a/src/components/partials/SimpleCard.vue b/src/components/partials/SimpleCard.vue
index 1709a796a474d3e39e7d45d05dce6f59f82429f2..6de2f3fccca0d2fff97ad21b543514905e3f1219 100644
--- a/src/components/partials/SimpleCard.vue
+++ b/src/components/partials/SimpleCard.vue
@@ -5,6 +5,7 @@
       header-tag="header"
       header-bg-variant="info"
       bg-variant="light"
+      @click="passIndex()"
     >
       <div slot="header" class="text-left px-2 py-1 mb-0"> 
         {{ jenisAnggaran }}
@@ -30,7 +31,9 @@ export default {
       }
   },
   methods : {
-    
+    passIndex() {
+      this.$emit('click-handler', this.index)
+    }
   }
 }
 </script>
@@ -47,6 +50,7 @@ export default {
     margin-top : 10px;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
     overflow: hidden;
+    cursor: pointer;
 }
 
 .index {
diff --git a/src/components/partials/SimpleCardContainer.vue b/src/components/partials/SimpleCardContainer.vue
index 3a752a8ca5a09a4b0482149f58cc65c477cf33a5..615029e79cb3068533bbf23e7cfc3f71f5a44315 100644
--- a/src/components/partials/SimpleCardContainer.vue
+++ b/src/components/partials/SimpleCardContainer.vue
@@ -1,6 +1,6 @@
 <template>
     <b-row id="content-detail">
-        <simple-card v-for="(data, index) in dataBubble" :key="data.name" :jenisAnggaran="data.name" :index="index" :totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
+        <simple-card v-for="(data, index) in dataBubble" @click-handler="passData" :key="data.name" :jenisAnggaran="data.name" :index="index" :totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
               ',00.-'"/>
     </b-row>
 </template>
@@ -19,7 +19,12 @@ export default {
       'simple-card':SimpleCard,
   },
   methods : {
-    
+    passData(index) {
+      if (this.dataBubble[index].subdata.length != 0) {
+        window.scrollTo(0, 0);
+        this.$emit('click-handler', this.dataBubble[index]._id)
+      }
+    }
   },
 }
 </script>
diff --git a/src/components/partials/SimpleCardContainerScroll.vue b/src/components/partials/SimpleCardContainerScroll.vue
index 6972741674a16162d4ad0bb4f9f71b20b864b316..e78e681283e88211c7e6e62df019789bef04a3ea 100644
--- a/src/components/partials/SimpleCardContainerScroll.vue
+++ b/src/components/partials/SimpleCardContainerScroll.vue
@@ -4,7 +4,7 @@
       {{"Detail (" + rows + ")" }}
     </h4>
     <b-row id="content-detail">
-        <simple-card class="simple-card" @click.native="passData(data)" v-for="(data, index) in dataBubble" :key="data._id.$oid" :index="index" :jenisAnggaran="data.name" :totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
+        <simple-card class="simple-card" @click-handler="passData" v-for="(data, index) in dataBubble" :key="data._id.$oid" :index="index" :jenisAnggaran="data.name" :totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
               ',00.-'"" />
     </b-row>
   </div>
@@ -29,10 +29,10 @@ export default {
     'simple-card':SimpleCard,
   },
   methods : {
-    passData(obj) {
-      if (obj.subdata.length != 0) {
+    passData(index) {
+      if (this.dataBubble[index].subdata.length != 0) {
         window.scrollTo(0, 0);
-        this.$emit('click-handler', obj._id)
+        this.$emit('click-handler', this.dataBubble[index]._id)
       }
     }
   },
@@ -68,7 +68,7 @@ b-col {
   }
 
   .simple-card {
-    cursor: pointer;
+    
   }
 }
 
diff --git a/src/components/partials/Visualization.vue b/src/components/partials/Visualization.vue
index 3b72a59500474864fcc6fb3b904543d4e85ff973..4e1dac0533833d5120638f29410b63fe1055d472 100644
--- a/src/components/partials/Visualization.vue
+++ b/src/components/partials/Visualization.vue
@@ -57,7 +57,7 @@ export default {
   props: ['src'],
   data() {
     return {
-      hide: false,
+      hide: true,
       svg: null,
       tooltip: null,
       simulation: null,
@@ -214,6 +214,7 @@ export default {
             else if (self.selectedColor == 'random')
               return colorCircles(d[self.columnForColor])
           })
+          .style("cursor", "pointer")
           .attr('transform', 'translate(' + [width / 2, height / 2] + ')')
 
           // set data visible in mouseover
@@ -241,9 +242,9 @@ export default {
             let yPos = d3.event.pageY - window.scrollY + 2
             let xPos = (d3.event.pageX)
             if (xPos < window.innerWidth/2)
-              return self.tooltip.style("top", yPos + "px").style("left", (xPos+2) + "px").style("right", null)
+              return self.tooltip.style("top", yPos + "px").style("left", (xPos+10) + "px").style("right", null)
             else
-              return self.tooltip.style("top", yPos + "px").style("left", null).style("right", (window.innerWidth-xPos-20) + "px")
+              return self.tooltip.style("top", yPos + "px").style("left", null).style("right", (window.innerWidth-xPos-15) + "px")
           })
           .on("mouseout", function() {
             return self.tooltip.style("visibility", "hidden")