basic bubbles

src/d3-components/bubbles-nested-routes/bubbles.vue

@@ -7,7 +7,7 @@ Links:
 -->
 
 <template>
-  <svg width="500" height="300"></svg>
+  <svg width="500" height="400"></svg>
 </template>
 
 <script>
@@ -18,26 +18,26 @@ const d3 = require('d3');
 export default {
   props: ['groupBy', 'data'],
   watch: {
-    groupBy: function(newData) {
-      this.ph2.setLayout(this.groupBy);
+    groupBy: function(groupBy) {
+      this.ph2.setLayout(groupBy);
     },
-    data: function(newData) {
-
+    data: function(data) {
+      this.ph2.setData(data);
     }
   },
   mounted: function() {
-    console.log(this.$el);
     var svg = d3.select(this.$el);
     var width = +svg.attr('width');
     var height = +svg.attr('height');
-    this.ph2 = new PH2(svg);
-  },
-  methods: {
-    refreshLayout: function() {
 
-    }
-  }
+    var that = this;
+    var bubblesG = svg.append('g').attr('transform', `translate(${width/2}, ${height/2})`)
 
+    // TODO: remove it later
+    d3.csv('static/data/earthquakes.csv', function(data) {
+      that.ph2 = new PH2(bubblesG, data);
+    });
+  }
 
 }
 </script>

src/d3-components/bubbles-nested-routes/ph2.js

@@ -1,23 +1,76 @@
-const d3 = require('d3');
+// http://vallandingham.me/bubble_charts_with_d3v4.html
 
+const d3 = require('d3');
 
 // TODO: do it d3-way so I can use selection.call()
 
-
-
 export default class PH2 {
-  constructor(elem, layoutName) {
-    elem
-      .append('rect')
-      .attr('x', 10)
-      .attr('y', 10)
-      .attr('width', 10)
-      .attr('height', 10)
+  constructor(elem, data, layoutName) {
+    this.svg = elem;
+    this.setData(data);
+    this._init();
+    this.setLayout(layoutName);
   }
 
   setLayout(layoutName) {
+    // TODO: something special
+    this.simulation.alpha(1).restart();
+  }
+
+  setData(data) {
+    var range = data.length;
+    this.data = {
+      nodes:data.map(d => ({
+        label: "l"+d ,r:+d.Magnitude
+      })),
+      links:d3.range(0, range).map(function(){ return {source:~~d3.randomUniform(range)(), target:~~d3.randomUniform(range)()} })
+    };
+  }
 
+  _init() {
+    this.simulation = d3.forceSimulation()
+      .force("link", d3.forceLink().id(d => d.index))
+      .force("collide", d3.forceCollide(d => d.r + 5).iterations(16) )
+      .force("center", d3.forceCenter(0, 0))
+
+    var link = this.svg.append("g")
+      .attr("class", "links")
+      .selectAll("line")
+      .data(this.data.links)
+      .enter()
+      .append("line")
+      .attr("stroke", "black")
+
+    var node = this.svg.append("g")
+      .attr("class", "nodes")
+      .selectAll("circle")
+      .data(this.data.nodes)
+      .enter()
+      .append("circle")
+      .attr("r", d => d.r )
+
+    var ticked = function() {
+      link
+        .attr("x1", d => d.source.x )
+        .attr("y1", d => d.source.y )
+        .attr("x2", d => d.target.x )
+        .attr("y2", d => d.target.y );
+
+      node
+        .attr("cx", d => d.x )
+        .attr("cy", d => d.y );
+    }
+
+    this.simulation
+      .nodes(this.data.nodes)
+      .on("tick", ticked);
+
+    this.simulation.force("link")
+      .links(this.data.links);
   }
 
+  _initNodeYearPos() {
+    // TODO: fill
+  }
 
 }