nested routes

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

@@ -7,7 +7,7 @@ Links:
 -->
 
 <template>
-  <svg width="500" height="500"></svg>
+  <svg width="600" height="500"></svg>
 </template>
 
 <script>

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

@@ -14,8 +14,10 @@ Links:
 
 <template>
   <div class="holder">
+    <!-- <h4>Earthquakes in september 2012</h4> -->
     <groupMenu :links="links" :activeLink="activeLink" />
     <bubbles :groupBy="activeLink.layout" />
+
   </div>
 </template>
 
@@ -39,9 +41,9 @@ const LINKS = [
       layout: 'country'
     },
     {
-      name: 'By year',
+      name: 'By day',
-      path: '/year',
+      path: '/day',
-      layout: 'year'
+      layout: 'day'
     }
   ].map(d => {
     d.path = '#/' + MY_URL_PREFIX + d.path;

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

@@ -2,7 +2,7 @@
 
 import layoutTotal from './layout-total';
 import layoutCountry from './layout-contry';
-import layoutYear from './layout-year';
+import layoutDay from './layout-day';
 
 const d3 = require('d3');
 import _ from 'lodash';
@@ -53,9 +53,8 @@ export default class PH2 {
   _init() {
     this.simulation = d3.forceSimulation()
       .force("index-collide", d3.forceCollide(d => d.r + 5).iterations(16))
-      .force("index-x", d3.forceX().strength(0.05))
+      .force("index-x", d3.forceX().strength(0.04))
-      .force("index-y", d3.forceY().strength(0.05))
+      .force("index-y", d3.forceY().strength(0.04))
-
 
     this._initLayouts();
 
@@ -87,7 +86,7 @@ export default class PH2 {
     this.layouts = {
       'total': layoutTotal,
       'country': layoutCountry,
-      'year': layoutYear
+      'day': layoutDay
     };
 
     for (var k in this.layouts) {

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

@@ -36,10 +36,10 @@ export default class {
 
     this.nodesBefore = this.simulation.nodes();
     this.simulation
-      .force("link", d3.forceLink().id(d => d.index))
+      .force("country-link", d3.forceLink().id(d => d.index))
-      .force("charge", d3.forceManyBody().strength(-30))
+      .force("country-charge", d3.forceManyBody().strength(-30))
-      .force("x", d3.forceX().strength(0.11))
+      .force("country-x", d3.forceX().strength(0.11))
-      .force("y", d3.forceY().strength(0.11))
+      .force("country-y", d3.forceY().strength(0.11))
 
     //console.log(this.simulation.force("link").distance());
     this.simulation.force("link")//.distance(-10)
@@ -54,7 +54,7 @@ export default class {
       .append('text')
       .text(d => d.key)
       .attr("text-anchor", "middle")
-      .attr("font-size", "10")
+      .attr("font-size", "8")
 
     this.linesG = this.elem.insert("g", ":first-child");
     this.lines = this.linesG
@@ -62,11 +62,11 @@ export default class {
       .data(this.links)
       .enter()
       .append("line")
-      .attr("stroke", "#d5d5d5")
+      .attr("stroke", "#d7d7d7")
 
 
     this.simulation
-      .force("link")
+      .force("country-link")
       .links(this.links);
 
   }
@@ -83,10 +83,14 @@ export default class {
   }
 
   exit() {
-    this.simulation.nodes(this.nodesBefore);
     this.simulation
-      .force("link", null)
+      .nodes(this.nodesBefore);
-      .force("charge", null)
+    this.simulation
+      .force("country-link", null)
+      .force("country-charge", null)
+      .force("country-x", null)
+      .force("country-y", null)
+
     this.linesG.remove();
     this.countryG.remove();
   }

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

@@ -0,0 +1,56 @@
+const d3 = require('d3');
+const _ = require('lodash');
+
+const DAY_RANGE = d3.range(14, 24);
+const WIDTH = 500;
+
+export default class {
+  constructor(elem, data, simulation) {
+    this.elem = elem;
+    this.data = data;
+    this.simulation = simulation;
+  }
+  init() {
+    this.dayX = _.map(
+      this.data, d => this._dayToX(+d.Date.split('-')[0])
+    );
+  }
+  enter() {
+    this.forceIndexCollide = this.simulation.force("index-collide");
+    this.simulation.force("index-collide", null);
+    this.forceIndexY = this.simulation.force("index-y");
+    this.simulation.force("index-y", null);
+
+    this.simulation.force("day-collide", d3.forceCollide(d => d.r + 2).iterations(16))
+
+
+    this.daysG = this.elem.append('g');
+
+    this.daysG
+      .selectAll('text')
+      .data(DAY_RANGE)
+      .enter()
+      .append('text')
+      .text(d => d)
+      .attr('x', this._dayToX)
+      .attr('font-size', 10)
+      .attr('fill', 'gray')
+      .attr('text-anchor', 'middle')
+
+    var that = this;
+    this.simulation.force(
+      'day-x', d3.forceX(d => that.dayX[d.index]).strength(1)
+    );
+    this.simulation.force("day-y", d3.forceY().strength(0.005));
+  }
+  exit() {
+    this.daysG.remove();
+    this.simulation.force('day-x', null);
+    this.simulation.force("index-collide", this.forceIndexCollide);
+    this.simulation.force("index-y", this.forceIndexY);
+  }
+
+  _dayToX(day) {
+    return (day - DAY_RANGE[0]) * WIDTH / DAY_RANGE.length - WIDTH * 0.48
+  }
+}

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

@@ -1,15 +0,0 @@
-export default class {
-  constructor(elem, data, simulation) {
-    this.elem = elem;
-    this.simulation = simulation;
-  }
-  init() {
-    
-  }
-  enter() {
-
-  }
-  exit() {
-
-  }
-}

src/d3-components/pie-chart-local-component/index.vue

@@ -13,7 +13,7 @@ Data:
 
 <template>
   <div>
-    <h3>Most popular female names in the world</h3>
+    <h4>Most popular female names in the world</h4>
     <pie :data="names" />
     <br>
     <button v-if="canAddAName" v-on:click="addName">Add a name</button>