vue-d3-network no-link forces

https://github.com/emiliorizzo/vue-d3-network

by emii

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://rawgit.com/emiliorizzo/vue-d3-network/master/dist/vue-d3-network.umd.js"></script>
 <!-- full demo here: https://emiliorizzo.github.io/vue-d3-network/ -->
  <body>
  <h1>vue-d3-network</h1>
  <h2>no-link forces</h2>
    <div id="app">
    <d3-network :net-nodes="nodes" :net-links="[]" :options="options">
    </d3-network>

  <div class="controls">
  <label>Force: {{force}}</label>
    <input type="range" min="-500" max="500" v-model="force"> 
    <label>Forces X: {{fX}}</label>
    <input type="range" min="0" max="1" step=".01" v-model="fX"> 
     <label>Forces Y: {{fY}}</label>
    <input type="range" min="0" max="1" step=".01" v-model="fY"> 
    
    <label class="in">Center:</label>
    <input type="checkbox" v-model="fC"> 
    <label class="in">Many Body:</label>
    <input type="checkbox" v-model="fMb"> 
    <button v-on:click="reset">
    restart simulation
    </button>
  </div>
    </div>
  </body>

CSS

body{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: gray;
  text-align: center;
}

label,button{
  display: block;
}
label.in{
  display: inline;
}
.node{
  stroke-width: 1;
  stroke: rgba(0,0,0,.2);
}
.controls{
  display:flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

JavaScript

var D3Network = window['vue-d3-network']
new Vue({
  el: '#app',
  components: {
    D3Network
  },
  data () {
    return {
    force:50,
    fX:0.5,
    fY:0.5,
    fMb:true,
    fC:false,
    nNodes:500
    }
  },

	computed:{
  nodes(){
  	return this.makeNodes()
  },
  options(){
  	return {
    	force: this.force,
      forces:{
       X:this.fX,
       Y:this.fY,
       ManyBody:this.fMb,
       Center: this.fC,
      	
      },
      nodeSize: 20,
      nodeLabels: false
    }
  }
  },
  methods:{
  		makeNodes(){
      return Array.apply(null, { length: this.nNodes }).map((value, index) => { return {id:index, _color:this.randomColor(),_size:Math.random() * 30}})
      },
  		reset(){
      	this.nNodes++
      },
      randomColor () {
      return 'rgb(' + parseInt( Math.random()*64) +1 + ',' + parseInt( Math.random()*10) + 1+ ',' + 100 + ')'
    }
  }
})