tooltip-map-v1

package.json

@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "d3": "^4.6.0",
+    "topojson": "^2.2.0",
     "vue": "^2.1.10",
+    "vue-resource": "^1.2.1",
     "vue-router": "^2.2.0"
   },
   "devDependencies": {

src/d3-components/basic-map-tooltip/index.vue

@@ -1,35 +1,98 @@
 <!--
 
+Links:
+  Events: https://vuejs.org/v2/guide/events.html
+  Computed properties: https://vuejs.org/v2/guide/computed.html
+
+Data:
+  http://worldpopulationreview.com/states/
+
 -->
 
 <template>
   <div id="holder">
-    <us-map />
-    <tooltip />
+    <div class="mapHolder">
+      <us-map
+        v-on:stateSelected="onStateSelected"
+        v-on:stateDeselected="onStateDeselected"
+      />
+    </div>
+    <tooltip
+      v-if="currentState"
+      :title="currentState.Name"
+      :description="currentStateDescription"
+    />
   </div>
 </template>
 
 <script>
 
 var _ = require('lodash');
+
 const map = require('d3-components/basic-map-tooltip/map');
 const tooltip = require('d3-components/basic-map-tooltip/tooltip');
 
+const STATES_DATA_PATH = 'static/data/states-data.csv';
+
+// lets load with vue-resource, but parse with d3
+// just because we can
+import * as d3 from 'd3-dsv';
+
+
 export default {
   components: {
     usMap: map,
     tooltip: tooltip
   },
+  created: function() {
+    var that = this;
+
+    this.$http.get(STATES_DATA_PATH)
+      .then(function(res) {
+        this.statesData = {};
+        d3.dsvFormat(';')
+          .parse(res.data, d => {
+            var population = d["2017 Population"].split(',').join('');
+            d.value = +population;
+            that.statesData[d.STATE_ABBR] = d;
+            delete d["2017 Population"];
+            delete d["STATE_ABBR"];
+            return d;
+          });
+      })
+  },
   data: function() {
     return {
+      statesData: undefined,
+      currentState: undefined
+    }
+  },
+  computed: {
+    currentStateDescription: function() {
+      return "Population: " + this.currentState.value;
     }
   },
   methods: {
+    onStateSelected: function(stateCode) {
+      this.currentState = this.statesData[stateCode];
+    },
+    onStateDeselected: function(stateCode) {
+      this.currentState = undefined;
+    }
   }
 }
 
 </script>
 
-<style>
-
+<style scoped>
+#holder {
+  position: relative;
+  height: 300px;
+  width: 500px;
+  margin: auto;
+}
+.mapHolder {
+  position: absolute;
+  margin: auto;
+}
 </style>

src/d3-components/basic-map-tooltip/map.vue

@@ -1,7 +1,11 @@
 <!--
 
+It would be great if you color the map by population using data from index.vue
+
 Based on:
   http://bl.ocks.org/rveciana/a2a1c21ca1c71cd3ec116cc911e5fce9
+  http://bl.ocks.org/mapsam/6083585
+
 
 Links:
 
@@ -14,25 +18,47 @@ Links:
 <script>
 
 const d3 = require('d3');
+const topojson = require('topojson')
 
 export default {
   mounted: function() {
+    var v = this;
     var svg = d3.select(this.$el);
     var width = +svg.attr('width');
     var height = +svg.attr('height');
 
     var projection = d3.geoAlbersUsa();
-    var path = d3.geoPath()
-        .projection(projection);
-
-    d3.json("us.json", function(error, us) {
-      svg.append("path")
-          .attr("class", "states")
-          .datum(topojson.feature(us, us.objects.states))
-          .attr("d", path);
+    var path = d3.geoPath().projection(projection);
+
+    d3.json("static/data/us.json", function(error, us) {
+      var g = svg.append('g');
+        g
+          .selectAll('.state')
+          .data(topojson.feature(us, us.objects.usStates).features)
+          .enter()
+          .append("path")
+          .attr("class", "state")
+          .attr("d", path)
+          .on('mouseover', function(d) {
+            v.$emit('stateSelected', d.properties.STATE_ABBR)
+      		})
+          .on('mouseout', function(d) {
+            v.$emit('stateDeselected', d.properties.STATE_ABBR)
+          })
+      g.attr('transform', 'scale(0.57)')
     });
 
   }
   // TODO: fire events
 }
 </script>
+
+<style>
+.state {
+  fill: #ccc;
+  stroke: #fff;
+}
+.state:hover {
+  fill: steelblue;
+}
+</style>

src/d3-components/basic-map-tooltip/tooltip.vue

@@ -2,32 +2,29 @@
 <div id="tooltipPositioner">
   <div id="tooltip">
     <div id="tooltipContainer">
-      <div class="department">adsad</div>
-      <div class="rule">asdas</div>
-      <div class="name"></div>
-      <div class="discretion"></div>
-      <div class="valuesContainer">
-        <span class="value"></span>
-      </div>
-      <div class="chart"></div>
+      <div class="title">{{title}}</div>
+      <div class="description">{{description}}</div>
     </div>
   </div>
 </div>
 </template>
 
 <script>
-  var $ = require('jquery');
 
   module.exports = {
-    name: 'tooltip'
+    name: 'tooltip',
+    props: ['title', 'description']
   }
 
 </script>
 
 <style scoped>
+
 #tooltipPositioner {
   position: relative;
-  left: -48%;
+  left: 50%;
+  top: 350px;
+  width: 240px;
 }
 
 #tooltipContainer {
@@ -54,72 +51,17 @@
   display: block;
 }
 
-#tooltip .department {
-  text-transform: uppercase;
-  text-align: left;
-  font-size: 10px;
-  margin-bottom: 2px;
+#tooltip .description {
   color:#666;
-  text-align:center;
-
-}
-
-#tooltip .rule{
-  height:1px;
-  margin:1px auto 3px;
-  background:#ddd;
-  width:130px;
-}
-
-#tooltip .discretion{
-  color:#666;
-  /*   text-transform:uppercase;*/
   font-size: 11px;
   text-align:center;
   font-style:italic;
 }
 
-#tooltip .name {
+#tooltip .title {
   text-align: left;
   font-size: 13px;
-  /*  width:170px;*/
-  text-align:center;
-}
-
-#tooltip .value {
-  /*  position:absolute;*/
-  text-align:center;
-  right:10px;
-  top:28px;
-  font-size: 16px;
-  /*  width:100px;*/
-  text-align:center;
-  overflow:hidden;
-  font-weight:bold;
-}
-
-#tooltip .change {
-  padding-left:10px;
-  /*width:110px;*/
-  font-size: 16px;
-  text-align:right;
-  overflow:hidden;
-  /*position:absolute;*/
-  font-weight:bold;
-  color:#666;
   text-align:center;
-  display:inline;
 }
 
-#tooltip .valuesContainer {
-  padding-top:7px;
-}
-
-#tooltip.minus .change {
-  color:#900;
-}
-
-#tooltip.plus .change {
-  color:#090;
-}
 </style>

src/main.js

@@ -4,6 +4,9 @@ import Vue from 'vue'
 import app from './app'
 import router from './router'
 
+import VueResource from 'vue-resource'
+Vue.use(VueResource);
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/router/index.js

@@ -1,11 +1,11 @@
 import Vue from 'vue'
-import Router from 'vue-router'
+import VueRouter from 'vue-router'
 import Index from 'components/index'
 import {routes as demoRoutes} from './demos'
 
-Vue.use(Router)
+Vue.use(VueRouter)
 
-export default new Router({
+export default new VueRouter({
   routes: [
     {
       path: '/',

static/data/states-data.csv

@@ -0,0 +1,51 @@
+STATE_ABBR;Name;2017 Population
+CA;California;39,849,872
+TX;Texas;28,449,186
+FL;Florida;21,002,678
+NY;New York;19,889,657
+PA;Pennsylvania;12,819,975
+IL;Illinois;12,815,607
+OH;Ohio;11,646,273
+GA;Georgia;10,450,316
+NC;North Carolina;10,247,632
+MI;Michigan;9,935,116
+NJ;New Jersey;8,996,351
+VA;Virginia;8,492,783
+WA;Washington;7,384,721
+AZ;Arizona;7,026,629
+MA;Massachusetts;6,873,018
+TN;Tennessee;6,705,339
+IN;Indiana;6,663,280
+MO;Missouri;6,123,362
+MD;Maryland;6,068,511
+WI;Wisconsin;5,795,147
+CO;Colorado;5,658,546
+MN;Minnesota;5,554,532
+SC;South Carolina;5,030,118
+AL;Alabama;4,884,115
+LA;Louisiana;4,714,192
+KY;Kentucky;4,450,042
+OR;Oregon;4,144,527
+OK;Oklahoma;3,974,794
+CT;Connecticut;3,583,134
+IA;Iowa;3,152,735
+UT;Utah;3,098,761
+AR;Arkansas;3,000,942
+NV;Nevada;2,995,973
+MS;Mississippi;2,990,113
+KS;Kansas;2,929,909
+NM;New Mexico;2,084,193
+NE;Nebraska;1,922,610
+WV;West Virginia;1,834,882
+ID;Idaho;1,695,178
+HI;Hawaii;1,454,295
+NH;New Hampshire;1,335,832
+ME;Maine;1,327,472
+RI;Rhode Island;1,059,080
+MT;Montana;1,052,343
+DE;Delaware;965,866
+SD;South Dakota;868,799
+ND;North Dakota;790,701
+AK;Alaska;741,204
+VT;Vermont;624,592
+WY;Wyoming;589,713