diff --git a/package-lock.json b/package-lock.json
index 67ac605..6bf7d01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2976,6 +2976,11 @@
         "d3-array": "1.2.4"
       }
     },
+    "d3-hexbin": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/d3-hexbin/-/d3-hexbin-0.2.2.tgz",
+      "integrity": "sha1-nFg32s/UcasFM3qeke8Qv8T5iDE="
+    },
     "d3-hierarchy": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz",
diff --git a/package.json b/package.json
index 98e373b..a74bdb9 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "d3": "^5.7.0",
+    "d3-hexbin": "^0.2.2",
     "firebase": "^5.5.4",
     "topojson": "^3.0.2",
     "vue": "^2.5.2",
diff --git a/src/components/ArcSubscription.vue b/src/components/ArcSubscription.vue
new file mode 100644
index 0000000..68cbb21
--- /dev/null
+++ b/src/components/ArcSubscription.vue
@@ -0,0 +1,273 @@
+<template>
+	<div class="donut"></div>
+</template>
+
+<script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
+<script src="http://d3js.org/topojson.v2.min.js"></script>
+
+<script>
+import * as d3 from "d3";
+import * as topojson from "topojson";
+
+export default {
+	name: 'ArcSubscription',
+  props: {
+
+  },
+  data() {
+    return {
+      
+    }
+	},
+	mounted() {
+    this.renderArc();
+    
+	},
+  methods: {
+    renderArc() {
+
+			var width = 350,
+					height = 350,
+					radius = Math.min(width, height) / 2;
+
+			var color = d3.scaleOrdinal()
+					.range(["#6fc9e1", "#00627d"]);
+
+			var bigarc = d3.arc()
+					.outerRadius(radius - 100)
+					.innerRadius(radius - 60);
+
+			var smallarc = d3.arc()
+					.outerRadius(radius - 100)
+					.innerRadius(radius - 50);
+
+			var pie = d3.pie()
+					.sort(null)
+					
+					.value(function (d) {
+					return d.percent;
+			});
+			
+			var svg = d3.select(".donut").append("svg")
+				.attr("width", width)
+				.attr("height", height)
+				.append("g")
+				.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+			var data = [{
+						"label": "Big",
+						"name": "Free membership",
+						"percent": 75
+						}, {
+						"label": "Small",
+						"name": "Paid membership",
+						"percent": 25
+						}];
+
+			var piedata = pie(data);
+
+			var g = svg.selectAll(".arc")
+					.data(piedata)
+					.enter().append("g")
+					.attr("class", "arc");
+
+			g.append("path")
+					.attr("d", function (d) {
+					
+					if (d.data.label == "Big") {
+							return bigarc(d);
+					} else {	
+							return smallarc(d);
+					}})
+					.style("fill", function (d) { return color(d.data.label); });
+					// .attr("stroke", "#fff");
+
+			var labels = g.append('g').classed('labels', true);
+
+			labels.selectAll("text").data(piedata)
+					.enter()
+					.append("text")
+					.attr("font-size", "12px")
+					.attr("text-anchor", "middle")
+					.attr("x", function(d) {
+							var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
+							d.cx = Math.cos(a) * (radius - 75);
+							return d.x = Math.cos(a) * (radius - 20);
+					})
+					.attr("y", function(d) {
+							var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
+							d.cy = Math.sin(a) * (radius - 75);
+							return d.y = Math.sin(a) * (radius - 20);
+					})
+					.text(function(d) { return d.data.name; })
+					.each(function(d) {
+							var bbox = this.getBBox();
+							d.sx = d.x - bbox.width/2 - 2;
+							d.ox = d.x + bbox.width/2 + 2;
+							d.sy = d.oy = d.y + 5;
+					});
+
+			labels.selectAll("path.pointer").data(piedata).enter()
+				.append("path")
+				.attr("class", "pointer")
+				.style("fill", "none")
+				.style("stroke", "black")
+				.attr("marker-end", "url(#circ)")
+				.attr("d", function(d) {
+						if(d.cx > d.ox) {
+								return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
+						} else {
+								return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
+						}
+				});
+
+
+			// var svg = d3.select(".donut")
+			// 	.append("svg")
+			// 	.append("g")
+
+			// svg.append("g")
+			// 	.attr("class", "slices");
+			// svg.append("g")
+			// 	.attr("class", "labels");
+			// svg.append("g")
+			// 	.attr("class", "lines");
+
+			// var width = 960,
+			// 		height = 450,
+			// 		radius = Math.min(width, height) / 2;
+
+			// var pie = d3.pie()
+			// 	.sort(null)
+			// 	.value(function(d) {
+			// 		return d.value;
+			// 	});
+
+			// var arc = d3.arc()
+			// 	.outerRadius(radius * 0.8)
+			// 	.innerRadius(radius * 0.4);
+
+			// var outerArc = d3.arc()
+			// 	.innerRadius(radius * 0.9)
+			// 	.outerRadius(radius * 0.9);
+
+			// svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+			// var key = function(d){ return d.data.label; };
+
+			// var color = d3.scaleOrdinal()
+			// 	.domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"])
+			// 	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
+
+			// function randomData (){
+			// 	var labels = color.domain();
+			// 	return labels.map(function(label){
+			// 		return { label: label, value: Math.random() }
+			// 	});
+			// }
+
+			
+
+			// function change(data) {
+
+			// 	/* ------- PIE SLICES -------*/
+			// 	var slice = svg.select(".slices").selectAll("path.slice")
+			// 		.data(pie(data), key);
+
+			// 	slice.enter()
+			// 		.insert("path")
+			// 		.style("fill", function(d) { return color(d.data.label); })
+			// 		.attr("class", "slice");
+
+			// 	slice		
+			// 		.transition().duration(1000)
+			// 		.attrTween("d", function(d) {
+			// 			this._current = this._current || d;
+			// 			var interpolate = d3.interpolate(this._current, d);
+			// 			this._current = interpolate(0);
+			// 			return function(t) {
+			// 				return arc(interpolate(t));
+			// 			};
+			// 		})
+
+			// 	slice.exit()
+			// 		.remove();
+
+			// 	/* ------- TEXT LABELS -------*/
+
+			// 	var text = svg.select(".labels").selectAll("text")
+			// 		.data(pie(data), key);
+
+			// 	text.enter()
+			// 		.append("text")
+			// 		.attr("dy", ".35em")
+			// 		.text(function(d) {
+			// 			return d.data.label;
+			// 		});
+				
+			// 	function midAngle(d){
+			// 		return d.startAngle + (d.endAngle - d.startAngle)/2;
+			// 	}
+
+			// 	text.transition().duration(1000)
+			// 		.attrTween("transform", function(d) {
+			// 			this._current = this._current || d;
+			// 			var interpolate = d3.interpolate(this._current, d);
+			// 			this._current = interpolate(0);
+			// 			return function(t) {
+			// 				var d2 = interpolate(t);
+			// 				var pos = outerArc.centroid(d2);
+			// 				pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
+			// 				return "translate("+ pos +")";
+			// 			};
+			// 		})
+			// 		.styleTween("text-anchor", function(d){
+			// 			this._current = this._current || d;
+			// 			var interpolate = d3.interpolate(this._current, d);
+			// 			this._current = interpolate(0);
+			// 			return function(t) {
+			// 				var d2 = interpolate(t);
+			// 				return midAngle(d2) < Math.PI ? "start":"end";
+			// 			};
+			// 		});
+
+			// 	text.exit()
+			// 		.remove();
+
+			// 	/* ------- SLICE TO TEXT POLYLINES -------*/
+
+			// 	var polyline = svg.select(".lines").selectAll("polyline")
+			// 		.data(pie(data), key);
+				
+			// 	polyline.enter()
+			// 		.append("polyline");
+
+			// 	polyline.transition().duration(1000)
+			// 		.attrTween("points", function(d){
+			// 			this._current = this._current || d;
+			// 			var interpolate = d3.interpolate(this._current, d);
+			// 			this._current = interpolate(0);
+			// 			return function(t) {
+			// 				var d2 = interpolate(t);
+			// 				var pos = outerArc.centroid(d2);
+			// 				pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
+			// 				return [arc.centroid(d2), outerArc.centroid(d2), pos];
+			// 			};			
+			// 		});
+				
+			// 	polyline.exit()
+			// 		.remove();
+			// };
+
+			// change(randomData());
+
+
+		}
+
+	}
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index 6f96491..5d6bc4e 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -23,7 +23,6 @@
     <div class="nav">
       <ul>
         <button class="tab" v-on:click="makeActive('fansActive')">Fans</button>
-        <button class="tab" v-on:click="makeActive('entourageActive')">Entourage</button>
         <button class="tab" v-on:click="makeActive('postActive')">Posts</button>
         <button class="tab" v-on:click="makeActive('eventsActive')">Events</button>
       </ul>
@@ -33,11 +32,6 @@
       <Fans/>
     </div>
 
-    <div class="tabcontent" v-show="isActiveTab('entourageActive')">
-      <h3>Entourage component</h3>
-      <!-- Add component here -->
-    </div>
-
     <div class="tabcontent" v-show="isActiveTab('postActive')">
       <h3>Posts component</h3>
       <!-- Add component here -->
@@ -137,7 +131,7 @@ export default {
   cursor: pointer;
   padding: 14px 16px;
   font-size: 17px;
-  width: 25%;
+  width: 33.33%;
 }
 .tab:hover {
   background-color: #A5A5A5;
@@ -147,6 +141,7 @@ export default {
 }
 .tabcontent {
   background-color:#848484;
+  /* background-color: beige */
   /* background-color:white; */
 }
 h1, h2 {
diff --git a/src/components/FanLocation.vue b/src/components/FanLocation.vue
index 400b981..556002b 100644
--- a/src/components/FanLocation.vue
+++ b/src/components/FanLocation.vue
@@ -1,6 +1,7 @@
 <template>
-	<!-- <div class="map"><h1 id="name"></h1></div> -->
-	<svg class="map" width="950" height="500"><h1 id="name"></h1></svg>
+	<div class="map"></div>
+	<!-- <svg class="map" width="950" height="500"></svg> -->
+  <!-- <svg class="map"></svg> -->
 	<!-- <div class="map">
 		<div id="tooltip-container"></div>
 
@@ -8,10 +9,8 @@
 	</div> -->
 </template>
 
-<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
-<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
+<script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
 <script src="http://d3js.org/topojson.v2.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
 <script>
 import * as d3 from "d3";
@@ -24,414 +23,265 @@ export default {
   },
   data() {
     return {
-
+      // us: null
+      tempColor: null
     }
 	},
 	mounted() {
-		this.renderMap();
+    this.renderMap();
+    
+    // d3.json("https://unpkg.com/us-atlas@1/us/10m.json", this.renderMap());
 	},
   methods: {
     renderMap() {
-			// "https://unpkg.com/us-atlas@1/us/10m.json"
-
-
-
-			// d3.csv("static/data/population.csv", function(err, data) {
-
-			// 	var config = {"color1":"#d3e5ff","color2":"#08306B","stateDataColumn":"state_or_territory","valueDataColumn":"population_estimate_for_july_1_2013_number"}
-				
-			// 	var WIDTH = 800, HEIGHT = 500;
-				
-			// 	var COLOR_COUNTS = 9;
-				
-			// 	var SCALE = 0.7;
-				
-			// 	function Interpolate(start, end, steps, count) {
-			// 			var s = start,
-			// 					e = end,
-			// 					final = s + (((e - s) / steps) * count);
-			// 			return Math.floor(final);
-			// 	}
-				
-			// 	function Color(_r, _g, _b) {
-			// 			var r, g, b;
-			// 			var setColors = function(_r, _g, _b) {
-			// 					r = _r;
-			// 					g = _g;
-			// 					b = _b;
-			// 			};
-				
-			// 			setColors(_r, _g, _b);
-			// 			this.getColors = function() {
-			// 					var colors = {
-			// 							r: r,
-			// 							g: g,
-			// 							b: b
-			// 					};
-			// 					return colors;
-			// 			};
-			// 	}
-				
-			// 	function hexToRgb(hex) {
-			// 			var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-			// 			return result ? {
-			// 					r: parseInt(result[1], 16),
-			// 					g: parseInt(result[2], 16),
-			// 					b: parseInt(result[3], 16)
-			// 			} : null;
-			// 	}
-				
-			// 	function valueFormat(d) {
-			// 		if (d > 1000000000) {
-			// 			return Math.round(d / 1000000000 * 10) / 10 + "B";
-			// 		} else if (d > 1000000) {
-			// 			return Math.round(d / 1000000 * 10) / 10 + "M";
-			// 		} else if (d > 1000) {
-			// 			return Math.round(d / 1000 * 10) / 10 + "K";
-			// 		} else {
-			// 			return d;
-			// 		}
-			// 	}
-				
-			// 	var COLOR_FIRST = config.color1, COLOR_LAST = config.color2;
-				
-			// 	var rgb = hexToRgb(COLOR_FIRST);
-				
-			// 	var COLOR_START = new Color(rgb.r, rgb.g, rgb.b);
-				
-			// 	rgb = hexToRgb(COLOR_LAST);
-			// 	var COLOR_END = new Color(rgb.r, rgb.g, rgb.b);
-				
-			// 	var MAP_STATE = config.stateDataColumn;
-			// 	var MAP_VALUE = config.valueDataColumn;
-				
-			// 	var width = WIDTH,
-			// 			height = HEIGHT;
-				
-			// 	var valueById = d3.map();
-				
-			// 	var startColors = COLOR_START.getColors(),
-			// 			endColors = COLOR_END.getColors();
-				
-			// 	var colors = [];
-				
-			// 	for (var i = 0; i < COLOR_COUNTS; i++) {
-			// 		var r = Interpolate(startColors.r, endColors.r, COLOR_COUNTS, i);
-			// 		var g = Interpolate(startColors.g, endColors.g, COLOR_COUNTS, i);
-			// 		var b = Interpolate(startColors.b, endColors.b, COLOR_COUNTS, i);
-			// 		colors.push(new Color(r, g, b));
-			// 	}
-				
-			// 	var quantize = d3.scaleQuantize()
-			// 			.domain([0, 1.0])
-			// 			.range(d3.range(COLOR_COUNTS).map(function(i) { return i }));
-				
-			// 	var path = d3.geoPath();
-				
-			// 	var svg = d3.select("#canvas-svg").append("svg")
-			// 			.attr("width", width)
-			// 			.attr("height", height);
-				
-			// 	d3.tsv("https://s3-us-west-2.amazonaws.com/vida-public/geo/us-state-names.tsv", function(error, names) {
-				
-			// 	var name_id_map = {};
-			// 	var id_name_map = {};
-				
-			// 	for (var i = 0; i < names.length; i++) {
-			// 		name_id_map[names[i].name] = names[i].id;
-			// 		id_name_map[names[i].id] = names[i].name;
-			// 	}
-				
-			// 	data.forEach(function(d) {
-			// 		var id = name_id_map[d[MAP_STATE]];
-			// 		valueById.set(id, +d[MAP_VALUE]); 
-			// 	});
-				
-			// 	quantize.domain([d3.min(data, function(d){ return +d[MAP_VALUE] }),
-			// 		d3.max(data, function(d){ return +d[MAP_VALUE] })]);
-				
-			// 	d3.json("https://s3-us-west-2.amazonaws.com/vida-public/geo/us.json", function(error, us) {
-			// 		svg.append("g")
-			// 				.attr("class", "states-choropleth")
-			// 			.selectAll("path")
-			// 				.data(topojson.feature(us, us.objects.states).features)
-			// 			.enter().append("path")
-			// 				.attr("transform", "scale(" + SCALE + ")")
-			// 				.style("fill", function(d) {
-			// 					if (valueById.get(d.id)) {
-			// 						var i = quantize(valueById.get(d.id));
-			// 						var color = colors[i].getColors();
-			// 						return "rgb(" + color.r + "," + color.g +
-			// 								"," + color.b + ")";
-			// 					} else {
-			// 						return "";
-			// 					}
-			// 				})
-			// 				.attr("d", path)
-			// 				.on("mousemove", function(d) {
-			// 						var html = "";
-				
-			// 						html += "<div class=\"tooltip_kv\">";
-			// 						html += "<span class=\"tooltip_key\">";
-			// 						html += id_name_map[d.id];
-			// 						html += "</span>";
-			// 						html += "<span class=\"tooltip_value\">";
-			// 						html += (valueById.get(d.id) ? valueFormat(valueById.get(d.id)) : "");
-			// 						html += "";
-			// 						html += "</span>";
-			// 						html += "</div>";
-									
-			// 						$("#tooltip-container").html(html);
-			// 						$(this).attr("fill-opacity", "0.8");
-			// 						$("#tooltip-container").show();
-									
-			// 						var coordinates = d3.mouse(this);
-									
-			// 						var map_width = $('.states-choropleth')[0].getBoundingClientRect().width;
-									
-			// 						if (d3.event.layerX < map_width / 2) {
-			// 							d3.select("#tooltip-container")
-			// 								.style("top", (d3.event.layerY + 15) + "px")
-			// 								.style("left", (d3.event.layerX + 15) + "px");
-			// 						} else {
-			// 							var tooltip_width = $("#tooltip-container").width();
-			// 							d3.select("#tooltip-container")
-			// 								.style("top", (d3.event.layerY + 15) + "px")
-			// 								.style("left", (d3.event.layerX - tooltip_width - 30) + "px");
-			// 						}
-			// 				})
-			// 				.on("mouseout", function() {
-			// 								$(this).attr("fill-opacity", "1.0");
-			// 								$("#tooltip-container").hide();
-			// 						});
-				
-			// 		svg.append("path")
-			// 				.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
-			// 				.attr("class", "states")
-			// 				.attr("transform", "scale(" + SCALE + ")")
-			// 				.attr("d", path);
-			// 	});
-				
-			// 	});
-			// });
-
-			// D3 Projection
-			var projection = d3.geoAlbersUsa(); // scale things down so see entire US
-			this.projection = projection;
-			
-			// D3 US States map
-			fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/us-states.json')
-				.then( response => response.json() )
-				.then( (states) => {
-
-				// Define path generator
-				var path = d3.geoPath() // path generator that will convert GeoJSON to SVG paths
-				.projection(projection); // tell path generator to use albersUsa projection
-
-				// Bind the data to the SVG and create one path per GeoJSON feature
-				var svg = d3.select(".map");
-
-				svg.selectAll("path")
-					.data(states.features)
-					.enter()
-					.append("path")
-					.attr("d", path);
-
-				// svg.append("path")
-				// 	.attr("class", "state-borders")
-				// 	.attr("d", path(topojson.mesh(states, states.objects.states, function(a, b) { return a !== b; })));
-			});
-
-// 			fetch('https://d3js.org/us-10m.v1.json')
-// 				.then( response => response.json() )
-// 				.then( (us) => {
-
-// 				var path = d3.geoPath().projection(projection);
-
-// 				var svg = d3.select(".map"),
-// 						width = +svg.attr("width"),
-// 						height = +svg.attr("height");
-// ;
-
-// 				svg.append("g")
-// 						.attr("fill", "#000")
-// 					.selectAll("path")
-// 					.data(topojson.feature(us, us.objects.states).features)
-// 					.enter().append("path")
-// 						.attr("d", path)
-// 					.append("title")
-// 						.text(function(d) { return d.id; });
-
-// 				svg.append("path")
-// 						.attr("stroke", "#fff")
-// 						.attr("stroke-width", 0.5)
-// 						.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
-// 			});
-
-
-			// // var v = this;
-			// var svg = d3.select('.map');
-			// var width = svg.attr('width');
-			// var height = svg.attr('height');
-
-			// var projection = d3.geoAlbersUsa().scale([1500]);
-			// var path = d3.geoPath().projection(projection);
-
-			// d3.json("static/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)')
-			// });
-
-
-
-			// var svg = d3.select("svg");
-
-			// var path = d3.geoPath();
-
-			// d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
-			// 	if (error) throw error;
-
-			// 	svg.append("g")
-			// 			.attr("fill", "#000")
-			// 		.selectAll("path")
-			// 		.data(topojson.feature(us, us.objects.states).features)
-			// 		.enter().append("path")
-			// 			.attr("d", path)
-			// 		.append("title")
-			// 			.text(function(d) { return d.id; });
-
-			// 	svg.append("path")
-			// 			.attr("stroke", "#fff")
-			// 			.attr("stroke-width", 0.5)
-			// 			.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
-			// });
-
-			// var width = 960,
-			// height = 500;
-		
-			// var svg = d3.select('.map').append('svg')
-			// 	.attr('width', width)
-			// 	.attr('height', height);
-			
-			// var projection = d3.geoAlbersUsa()
-			// 	.scale(100)
-			// 	.translate([width / 2, height / 2]);
-			
-			// var path = d3.geoPath()
-			// 	.projection(projection);
-			
-			// d3.json('https://d3js.org/us-10m.v1.json', function(error, us) {
-			// 	svg.selectAll('.states')
-			// 		.data(topojson.feature(us, us.objects.usStates).features)
-			// 		.enter()
-			// 		.append('path')
-			// 		.attr('class', 'states')
-			// 		.attr('d', path)
-			// 		.on('mouseover', function(d){
-			// 			var name = d.properties.STATE_ABBR;
-			// 			return document.getElementById('name').innerHTML=name;
-			// 		});
-			// });
 
+      // Might use this: https://d3js.org/us-10m.v1.json
+
+      var width = 560,
+          height = 350;
+
+      // var projection = d3.geoAlbersUsa()
+      //                     // .translate([width/2, height/2])    // translate to center of screen
+      //                     .scale(1000);          // scale things down so see entire US
+
+      // var path = d3.geoPath()
+      //   .projection(null) //albersUsa projection stated in Make file when creating the topojson data
+
+      var radius = d3.scaleSqrt() 
+        .domain([0, 3e6]) // INPUT domain-range of possible input data values
+        //To avoid distortion, make sure that the minimum "domain" and "range" values are both 0
+        .range([0, 60]); // OUTPUT range of possible output values
+
+      var arc = d3.arc()
+        .outerRadius(radius)	
+
+      var svg = d3.select('.map').append('svg')
+        .attr('height', height)
+        .attr('width', width);
+
+      var toolTip = d3.select('.map')
+        .append('div')
+        .style('position', 'absolute')
+        .style('padding', '0 10px')
+        .style('background', 'white')
+        .style('opacity', 0)
+        .style('font-family', 'Open Sans')
+        .style('z-index', 1000);
+
+
+      d3.json('https://raw.githubusercontent.com/ameliapower/d3BubbleMap/master/builds/development/js/json/poverty/us.json').then(function(usa) {
+        
+        var featureCollection = topojson.feature(usa, usa.objects.nation);
+
+        // need to scale down the map but may hinder performance
+        var projection = d3.geoIdentity()
+                           .fitSize([width,height], featureCollection);
+
+        var path = d3.geoPath()
+                     .projection(projection)
+
+        //build the main land area
+        svg.append('path')
+          .datum(topojson.feature(usa, usa.objects.nation))
+          .attr('class', 'land')
+          .attr('fill', '#ccc')
+          .attr('d', path);
+
+        svg.selectAll('.states')
+          // retrieve the features so that id is accessed
+          .data(topojson.feature(usa, usa.objects.counties).features)
+          .enter().append('path')
+          .attr('id', function(d) { return d.id; })
+          .attr("class", "states states-hover")
+          .attr('fill', '#aec7e8')
+          .attr('d', path)
+
+          //add Tool Tip
+          .on('mouseover', function(d){
+            toolTip.transition()
+              .style('opacity', .9)
+              .style('left', (d3.event.pageX) + 'px')
+              .style('top', (d3.event.pageY) + 'px')  
+            this.tempColor = this.style.fill; //store current color
+
+            // console.log(d.properties.name)
+            
+            if(d.properties.name != null || d.properties.name != undefined){
+              toolTip.html(
+                "<div style='background-color:#FD2D3A; color:white'>" + 
+                  d.properties.name + 
+                "</div>" +
+                "<div>" + 
+                  "<font size='6' color='black'>" + d.properties.population + " </font>" +
+                  "<font size='3' color='black'>" + "FANS" + "</font>" +
+                "</div>")	
+            } else {
+              toolTip.html("???")	
+            }
+          })
+          .on('mouseout', function(){
+            d3.select(this)
+            .transition().delay(400).duration(800)
+            .style('opacity', 1)
+            .style('fill', this.tempColor)
+          })
+
+          //build internal state lines
+        svg.append('path')
+          .datum(topojson.mesh(usa, usa.objects.states, function(a, b) { 
+            return a !== b; 
+          })) //topojson.mesh
+          .attr('class', 'border-states')
+          .attr('stroke', '#fff')
+          .attr('fill', 'none')
+          .attr('stroke-linejoin', 'round')
+          .attr('stroke-linecap', 'round')
+          .attr('d', path);
+
+
+        //show data as layered bubbles
+        svg.append("g")
+          .attr("class", "bubble")
+          .attr('fill', 'red')
+          .attr('fill-opacity', '.5')
+          .selectAll("circle")
+          .data(topojson.feature(usa, usa.objects.counties).features
+            .sort(function(a, b) { //sort population low to high
+              return b.properties.population - a.properties.population; 
+            }) //sort
+          ) //data
+          .enter().append("circle") 
+        .on('mouseover', function(d, i){
+            d3.select(this).attr('class', 'hover')
+          })
+          .on('mouseout', function(d, i){
+            d3.select(this).attr('class', '')
+          })
+          .attr("transform", function(d) { 
+            return "translate(" + path.centroid(d) + ")"; //Computes the projected centroid
+          })
+          .attr("r", function(d) { 
+            return radius(d.properties.population); //radius var with input (domain) and output (range)
+          })
+
+      }).catch(function(error) {
+        if (error) return console.log(error);
+      });
+
+      // ==============================
+
+      // var width = 960,
+      //     height = 600;
+
+      // var formatNumber = d3.format(",.0f");
+
+      // var path = d3.geoPath()
+      //     .projection(null);
+
+      // var radius = d3.scaleSqrt()
+      //     .domain([0, 1e6])
+      //     .range([0, 15]);
+
+      // var svg = d3.select(".map").append("svg")
+      //     .attr("width", width)
+      //     .attr("height", height);
+
+      // var legend = svg.append("g")
+      //     .attr("class", "legend")
+      //     .attr("transform", "translate(" + (width - 50) + "," + (height - 20) + ")")
+      //   .selectAll("g")
+      //     .data([1e6, 5e6, 1e7])
+      //   .enter().append("g");
+
+      // legend.append("circle")
+      //     .attr("fill", "none")
+      //     .attr("stroke", "#ccc")
+      //     .attr("cy", function(d) { return -radius(d); })
+      //     .attr("r", radius);
+
+      // legend.append("text")
+      //     .attr("fill", "black")
+      //     .attr("font", "10px sans-serif")
+      //     .attr("text-anchor", "middle")
+      //     .attr("y", function(d) { return -2 * radius(d); })
+      //     .attr("dy", "1.3em")
+      //     .text(d3.format(".1s"));
+
+      // d3.json('https://d3js.org/us-10m.v1.json').then(function(us) {
+
+      //   svg.append("path")
+      //       .datum(topojson.feature(us, us.objects.nation))
+      //       .attr("class", "land")
+      //       .attr("fill", "#ddd")
+      //       .attr("d", path);
+
+      //   svg.append("path")
+      //       .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
+      //       .attr("class", "border border--state")
+      //       .attr("fill", "none")
+      //       .attr("stroke", "#fff")
+      //       .attr("stroke-linejoin", "round")
+      //       .attr("stroke-linecap", "round")
+      //       .attr("d", path);
+
+      //   // svg.append("g")
+      //   //     .attr("class", "bubble")
+      //   //     .attr("fill", "rgb(250, 49, 65)")
+      //   //     .attr("fill-opacity", ".5")
+      //   //   .selectAll("circle")
+      //   //     .data(topojson.feature(us, us.objects.counties).features.sort(function(a, b) { return b.properties.population - a.properties.population; }))
+      //   //   .enter().append("circle")
+      //   //     .attr("transform", d => "translate(" + path.centroid(d) + ")")
+      //   //     .attr("r", "1.9");
+
+      //   svg.append("g")
+      //       .attr("class", "bubble")
+      //       .attr("fill", "rgb(250, 49, 65)")
+      //       .attr("fill-opacity", ".5")
+      //     .selectAll("circle")
+      //       .data(topojson.feature(us, us.objects.counties).features.sort(function(a, b) { return b.properties.population - a.properties.population; }))
+      //     .enter().append("circle")
+      //       .attr("transform", d => "translate(" + path.centroid(d) + ")")
+      //       .attr("r", d => radius(d.properties.population));
+            
+      // }).catch(function(error) {
+      //   if (error) return console.log(error);
+      // });
+
+      // d3.select(self.frameElement).style("height", height + "px");
+
+      // ================================
+
+			// // D3 Projection
+			// var projection = d3.geoAlbersUsa(); // scale things down so see entire US
+			// this.projection = projection;
+			
+			// // D3 US States map
+			// fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/us-states.json')
+			// 	.then( response => response.json() )
+			// 	.then( (states) => {
 
-			// var svg = d3.select(".map");
-
-			// var path = d3.geoPath();
+			// 	// Define path generator
+			// 	var path = d3.geoPath() // path generator that will convert GeoJSON to SVG paths
+			// 	.projection(projection); // tell path generator to use albersUsa projection
 
-			// d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
-			// 	if (error) throw error;
+			// 	// Bind the data to the SVG and create one path per GeoJSON feature
+			// 	var svg = d3.select(".map");
 
-			// 	svg.append("g")
-			// 		.attr("class", "states")
-			// 		.selectAll("path")
-			// 		.data(topojson.feature(us, us.objects.states).features)
-			// 		.enter().append("path")
+			// 	svg.selectAll("path")
+			// 		.data(states.features)
+			// 		.enter()
+			// 		.append("path")
 			// 		.attr("d", path);
-
-			// 	svg.append("path")
-			// 		.attr("class", "state-borders")
-			// 		.attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
-			// });
-
-
-			// var width = 960, height = 500;
-
-			// var svg = d3.select('.map').append('svg')
-			// 	.attr('width', width)
-			// 	.attr('height', height);
-			
-			// var projection = d3.geoAlbersUsa()
-			// 	.scale(1000)
-			// 	.translate([width / 2, height / 2]);
-			
-			// var path = d3.geoPath()
-			// 	.projection(projection);
+      // });
+      
+      // ================================
 			
-			// d3.json('/static/us.json', function(error, us) {
-			// 	svg.selectAll('.states')
-			// 		.data(topojson.feature(us, us.objects.usStates).features)
-			// 		.enter()
-			// 		.append('path')
-			// 		.attr('class', 'states')
-			// 		.attr('d', path)
-			// 		.on('mouseover', function(d){
-			// 			var name = d.properties.STATE_ABBR;
-			// 			return document.getElementById('name').innerHTML=name;
-			// 		});
-			// });
 		}
 	}
 }
 </script>
 
 <style scoped>
-h1 {
-  font-family:arial;
-  font-size:2em;
-  color:#333;
-}
-#info {
-  position:absolute;
-  top: 10px;
-  left: 10px;
-}
-.states {
-	fill: #e5e5e5;
-	stroke: #fff;
-	stroke-width:2px;
-}
-.states :hover {
-  fill: steelblue;
-}
-.state-borders {
-  fill: none;
-  stroke: #fff;
-  stroke-width: 0.5px;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  pointer-events: none;
-}
 
-path {
-  fill: #ccc;
-  stroke: #fff;
-  stroke-width: .5px;
-}
-
-path:hover {
-  fill: red;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/Fans.vue b/src/components/Fans.vue
index ad843dc..f03da43 100644
--- a/src/components/Fans.vue
+++ b/src/components/Fans.vue
@@ -1,29 +1,49 @@
 <template>
   <div class="fansboard">
     <h1>{{msg}}</h1>
+
     <div class="fancount">
-      <p>Total number of fans: {{totalFans}}</p>
+      <p>Total number of fans:</p>
+      <p>{{totalFans}}</p>
+      <!-- <NewFansChart/> -->
     </div>
+
     <div class="geo">
-      <p>(Show Map Here)</p>
       <FanLocation/>
     </div>
-    <div class="row">
-      <div class="column" style="float: left;">
-        <div class="agecount">
-          <h3>Age Groups:</h3>
-          <ul v-for="(a, idx) in ageGroups" :key="idx">
-            <p>{{a.group}}: {{a.number}}</p>
-          </ul>
-        </div>
+
+    <!-- <div class="aftermap" style="background-color :#848484;">
+      <div class="agecount" style="float: left; width: 50%;">
+        <h3>Age Groups:</h3>
+        <ul v-for="(a, idx) in ageGroups" :key="idx">
+          <p>{{a.group}}: {{a.number}}</p>
+        </ul>
       </div>
-      <div class="column" style="float: right;">
-        <div class="passion">
-          <h3>Popular Interests:</h3>
-          <InterestChart :interests="orderedVals"/>
-        </div>
+      <div class="passion" style="float: right; width: 50%;">
+        <h3>Popular Interests:</h3>
+        <InterestChart :interests="orderedVals"/>
       </div>
+    </div> -->
+
+    <div class="nav">
+      <ul>
+        <button class="tab" v-on:click="makeActive('fansInterest')">FANS Interest</button>
+        <button class="tab" v-on:click="makeActive('fansEntourage')">FANS Entourage</button>
+      </ul>
+    </div>
+
+    <div class="tabcontent" v-show="isActiveTab('fansInterest')">
+      <InterestChart :interests="orderedVals"/>
     </div>
+
+    <div class="tabcontent" v-show="isActiveTab('fansEntourage')">
+      <!-- <h3>Entourage component</h3> -->
+      <ArcSubscription/>
+      <NewFansChart/>
+    </div>
+
+    
+
   </div>
 </template>
 
@@ -35,13 +55,17 @@
 import { auth, db } from '../main'
 import InterestChart from "./InterestChart";
 import FanLocation from "./FanLocation";
+import ArcSubscription from "./ArcSubscription"
+import NewFansChart from "./NewFansChart"
 import _ from 'lodash';
 
 export default {
   name: 'Fans',
   components: {
     InterestChart,
-    FanLocation
+    FanLocation,
+    ArcSubscription,
+    NewFansChart
   },
   data () {
     return {
@@ -66,7 +90,8 @@ export default {
         {name: "skiing", value: 76}, {name: "sports", value: 1200}, {name: "swimming", value: 865}, 
         {name: "travel", value: 764}, {name: "volunteer", value: 235}
       ],
-      users: []
+      users: [],
+      choice: ''
     }
   },
   firestore () {
@@ -136,6 +161,12 @@ export default {
     // Gets top 10 interests of fans
     getInterests(arr) {
       return arr.slice(0, 10);
+    },
+    makeActive(val) {
+      this.choice = val
+    },
+    isActiveTab(val) {
+      return this.choice === val
     }
   }
 }
@@ -143,6 +174,29 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.tab {
+  background-color: #555;
+  color: white;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  font-size: 17px;
+  width: 25%;
+}
+.tab:hover {
+  background-color: #A5A5A5;
+}
+.tab:focus {
+  background-color:#848484;
+}
+.tabcontent {
+  background-color:#848484;
+  /* background-color: beige */
+  /* background-color:white; */
+}
+
 h1, h2 {
   font-weight: normal;
 }
@@ -157,17 +211,4 @@ li {
 a {
   color: #42b983;
 }
-
-/* Create two equal columns that floats next to each other */
-.column {
-    width: 50%;
-    padding: 10px;
-}
-
-/* Clear floats after the columns */
-.row:after {
-    content: "";
-    display: table;
-    clear: both;
-}
 </style>
diff --git a/src/components/NewFansChart.vue b/src/components/NewFansChart.vue
new file mode 100644
index 0000000..44ddf05
--- /dev/null
+++ b/src/components/NewFansChart.vue
@@ -0,0 +1,87 @@
+<template>
+	<div class="chart"></div>
+</template>
+
+<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
+<script>
+import * as d3 from "d3";
+
+export default {
+	name: 'NewFansChart',
+  props: {
+
+  },
+  data() {
+    return {
+			fans: [
+				{name: "JAN", value: 200},
+				{name: "FEB", value: 300},
+				{name: "MAR", value: 220},
+				{name: "APR", value: 800},
+				{name: "MAY", value: 670},
+				{name: "JUN", value: 930},
+				{name: "JUL", value: 1150},
+				{name: "AUG", value: 1234},
+				{name: "SEP", value: 2000},
+				{name: "OCT", value: 2500},
+				{name: "NOV", value: 2575},
+				{name: "DEC", value: 2375}
+			]
+    }
+	},
+	mounted() {
+		this.renderChart();
+		
+	},
+  methods: {
+    renderChart() {
+
+			var margin = {top: 20, right: 0, bottom: 30, left: 40},
+					width = 960,
+					height = 500;
+
+			var x = d3.scaleBand()
+				.domain(this.fans.map(d => d.name))
+				.range([margin.left, width - margin.right])
+				.padding(0.1)
+
+			var y = d3.scaleLinear()
+				.domain([0, d3.max(this.fans, d => d.value)]).nice()
+				.range([height - margin.bottom, margin.top])
+
+			var xAxis = g => g
+				.attr("transform", `translate(0,${height - margin.bottom})`)
+				.call(d3.axisBottom(x)
+						.tickSizeOuter(0))
+
+			var yAxis = g => g
+				.attr("transform", `translate(${margin.left},0)`)
+				.call(d3.axisLeft(y))
+				.call(g => g.select(".domain").remove())
+
+			var svg = d3.select(".chart").append("svg")
+
+			svg.append("g")
+					.attr("fill", "steelblue")
+				.selectAll("rect").data(this.fans).enter().append("rect")
+					.attr("x", d => x(d.name))
+					.attr("y", d => y(d.value))
+					.attr("height", d => y(0) - y(d.value))
+					.attr("width", x.bandwidth());
+
+			svg.append("g")
+					.call(xAxis);
+			
+			svg.append("g")
+					.call(yAxis);
+			
+			return svg.node();
+			
+		}
+	}
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/static/data/index.d.ts b/static/data/index.d.ts
new file mode 100644
index 0000000..4055028
--- /dev/null
+++ b/static/data/index.d.ts
@@ -0,0 +1,54 @@
+// Type definitions for D3JS d3 standard bundle 5.0
+// Project: https://github.com/d3/d3
+// Definitions by: Tom Wanzek <https://github.com/tomwanzek>
+//                 Alex Ford <https://github.com/gustavderdrache>
+//                 Boris Yankov <https://github.com/borisyankov>
+//                 denisname <https://github.com/denisname>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+// Last module patch version validated against: 5.0.0 RC3
+
+// NOTE TO MAINTAINERS: Review D3 v4.x module dependencies (see v4 sub-folder) and update its path-mappings in tsconfig (v4 folder),
+// if new MAJOR version of D3 v4 modules are released!!!
+
+export as namespace d3;
+
+/**
+ * Version number in format _Major.Minor.BugFix_, like 5.0.0.
+ */
+export const version: string;
+
+export * from 'd3';
+export * from 'd3-hexbin';
+// export * from 'd3-array';
+// export * from 'd3-axis';
+// export * from 'd3-brush';
+// export * from 'd3-chord';
+// export * from 'd3-collection';
+// export * from 'd3-color';
+// export * from 'd3-contour';
+// export * from 'd3-dispatch';
+// export * from 'd3-drag';
+// export * from 'd3-dsv';
+// export * from 'd3-ease';
+// export * from 'd3-fetch';
+// export * from 'd3-force';
+// export * from 'd3-format';
+// export * from 'd3-geo';
+// export * from 'd3-hierarchy';
+// export * from 'd3-interpolate';
+// export * from 'd3-path';
+// export * from 'd3-polygon';
+// export * from 'd3-quadtree';
+// export * from 'd3-random';
+// export * from 'd3-scale';
+// export * from 'd3-scale-chromatic';
+// export * from 'd3-selection';
+// export * from 'd3-shape';
+// export * from 'd3-time';
+// export * from 'd3-time-format';
+// export * from 'd3-timer';
+// export * from 'd3-transition';
+// export * from 'd3-voronoi';
+// export * from 'd3-zoom';
\ No newline at end of file