diff --git a/src/components/partials/Visualization.vue b/src/components/partials/Visualization.vue
index f996d18dff1f7fa96160f122e55054d4ddf4284b..7a787120927a93781c029a62e2641516acf1b91b 100644
--- a/src/components/partials/Visualization.vue
+++ b/src/components/partials/Visualization.vue
@@ -9,7 +9,6 @@
           Memuat data
         </h3>
         <div id="options" v-else>
-          <transition name="fade" mode="out-in">
           <div v-if="optionHidden">
             <b-button class="option-toggle" @click="optionHidden = !optionHidden">
               â–¼
@@ -28,7 +27,7 @@
                 <b-form-radio value="sorted">Merata</b-form-radio>
                 <b-form-radio value="sorted-proportional">Proporsional</b-form-radio>
                 <b-form-radio value="separated">Pisah</b-form-radio>
-                <b-form-input v-if="selected == 'separated'" v-model="separator" type="range" :min="minRadius" :max="maxRadius"></b-form-input>
+                <b-form-input v-if="selected == 'separated'" v-model="separator" type="range" :min="0" :max="src.length-1"></b-form-input>
               </b-form-radio-group>
             </b-form-group>
             <b class="mr-3">Warna</b>
@@ -39,10 +38,15 @@
               </b-form-radio-group>
             </b-form-group>
           </div>
-          </transition>
         </div>
       </div>
       <svg id="chart"/>
+      <div id="separator" v-if="selected=='separated'&&hide">
+        <div id="text">
+          <b>{{anggaran}}</b>
+        </div>
+        <div id="line"/>
+      </div>
     </div>
   </div>
 </template>
@@ -67,7 +71,7 @@ export default {
       radiusCircles: null,
       maxRadius: 60,
       minRadius: 3,
-      separator: 20,
+      separator: 0,
       width: 600,
       height: 400,
       columnForColor: "name",
@@ -79,6 +83,14 @@ export default {
       optionHidden: true,
     }
   },
+  computed: {
+    anggaran() {
+      if (this.src[this.separator])
+        return 'Rp'+this.src[this.separator].value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
+                ',00.-'
+      return ''
+    }
+  },
   mounted() {
     window.addEventListener("resize", this.sizeHandler)
     this.width = this.$refs.container.clientWidth
@@ -90,6 +102,7 @@ export default {
   watch: {
     src(val) {
       if (this.simulation) this.simulation.stop()
+      this.separator = parseInt(this.src.length/2);
       this.createChart()
     },
     width(val) {
@@ -133,10 +146,10 @@ export default {
     setSimulation() {
       this.simulation = d3.forceSimulation(this.src)
         .force('charge', d3.forceManyBody().strength((d) => {
-          if (this.selected == 'sorted' || this.selected == 'sorted-proportional')
-            return -10
-          else
+          if (this.selected == 'normal')
             return -20
+          else
+            return -10
         }))
         .force('collision', d3.forceCollide().radius((d) => {
           return this.radiusCircles(d[this.columnForWidth]) + 1
@@ -149,7 +162,7 @@ export default {
           else if (this.selected == 'normal')
             return 0
           else if (this.selected == 'separated')
-            return this.radiusCircles(d[this.columnForWidth]) < this.separator ? -this.width/3 : this.width/3
+            return d.index > this.separator ? -this.width/4 : this.width/4
         }))
         .force('y', d3.forceY())
         .on('tick', this.ticked)
@@ -178,7 +191,7 @@ export default {
         self.tooltip = selection
           .append("div")
           .style("position", "fixed")
-          .style("z-index", "1")
+          .style("z-index", "99")
           .style("visibility", "hidden")
           .style("color", "white")
           .style("padding", "8px")
@@ -339,13 +352,15 @@ export default {
 
     #chart {
       margin: auto;
+      z-index: 1;
     }
   }
 
   #options-container {
     position: absolute;
     padding: 1rem;
-    background-color: #ffffff88;
+    background-color: #ffffffcc;
+    z-index: 2;
 
     #options {
       .option-toggle {
@@ -354,6 +369,32 @@ export default {
       }
     }
   }
+
+  #separator {
+    font-size: 1.5rem;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    #text {
+      position: absolute;
+      color: #00000066;
+      z-index: 0;
+      text-align: center;
+      bottom: 0;
+    }
+
+    #line {
+      background-color: #00000066;
+      position: absolute;
+      height: 90%;
+      width: 1px;
+    }
+  }
+
+
 }
 
 </style>