added option to change colour

src/components/partials/Visualization.vue

@@ -10,7 +10,7 @@
         </h3>
         <div id="options" v-else>
           <b class="mr-3">Tata letak</b>
-          <b-form-group class="mb-0">
+          <b-form-group class="mb-0 mr-5">
             <b-form-radio-group v-model="selected" name="position-options">
               <b-form-radio value="normal">Normal</b-form-radio>
               <b-form-radio value="sorted">Terurut</b-form-radio>
@@ -18,6 +18,13 @@
               <b-form-input v-if="selected == 'separated'" v-model="separator" type="range" :min="minRadius" :max="maxRadius"></b-form-input>
             </b-form-radio-group>
           </b-form-group>
+          <b class="mr-3">Warna</b>
+          <b-form-group class="mb-0">
+            <b-form-radio-group v-model="selectedColor" name="color-options">
+              <b-form-radio value="random">Random</b-form-radio>
+              <b-form-radio value="valueDependent">Sesuai nilai</b-form-radio>
+            </b-form-radio-group>
+          </b-form-group>
         </div>
       </div>
       <svg id="chart"/>
@@ -41,6 +48,7 @@ export default {
       tooltip: null,
       simulation: null,
       selected: 'normal',
+      selectedColor: 'random',
       radiusCircles: null,
       maxRadius: 60,
       minRadius: 3,
@@ -75,6 +83,10 @@ export default {
       this.clear()
       this.createChart()
     },
+    selectedColor(val) {
+      this.clear()
+      this.createChart()
+    },
     selected(val) {
       this.setSimulation()
     },
@@ -169,7 +181,7 @@ export default {
         })]).range([self.minRadius,self.maxRadius])
         
         //create circle colors by data
-        var colorCircles = d3.scaleOrdinal(d3.schemeBrBG[11])
+        var colorCircles = d3.scaleOrdinal(d3.schemeCategory10)
         
         // make force simulation function
         self.setSimulation()
@@ -183,7 +195,10 @@ export default {
             return self.radiusCircles(d[self.columnForWidth])
           })
           .style("fill", function(d) {
-            return d3.interpolateViridis(self.radiusCircles(d[self.columnForWidth])/self.maxRadius)
+            if (self.selectedColor == 'valueDependent')
+              return d3.interpolateViridis(self.radiusCircles(d[self.columnForWidth])/self.maxRadius)
+            else if (self.selectedColor == 'random')
+              return colorCircles(d[self.columnForColor])
           })
           .attr('transform', 'translate(' + [width / 2, height / 2] + ')')
 
@@ -274,6 +289,7 @@ export default {
 
   #chart-container {
     display: flex;
+    flex-wrap: wrap;
     width: 100%;
     height: 100%;
 
@@ -285,7 +301,7 @@ export default {
   #options-container {
     position: absolute;
     padding: 1rem;
-    background-color: #ffffff44;
+    background-color: #ffffff88;
 
     #options {
       display: flex;