diff --git a/.bowerrc b/.bowerrc
new file mode 100755
index 0000000..c641b74
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "components"
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100755
index 0000000..0553fb9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,10 @@
+*.iml
+*.orig
+.classpath
+.DS_Store
+.idea
+.project
+.settings/
+components/
+output.png
+target/
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..79ddcc8
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Frank R.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d44a22d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,21 @@
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/renfeng/github-punchcard)
+
+## <d3-colony>
+
+`<d3-colony>` displays a punchcard graph for a github repository.
+
+* https://github.com/hughsk/colony
+
+<!--
+```
+<custom-element-demo>
+  <template>
+    <link rel="import" href="d3-colony.html">
+    <next-code-block></next-code-block>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+<d3-colony-demo></d3-colony-demo>
+```
diff --git a/d3-colony-demo.html b/d3-colony-demo.html
new file mode 100644
index 0000000..27f7318
--- /dev/null
+++ b/d3-colony-demo.html
@@ -0,0 +1,15 @@
+<link rel="import" href="d3-colony.html"/>
+
+<dom-module id="d3-colony-demo">
+	<template>
+		<d3-colony nodes='[{"id":"index.js","module":false,"mgroup":false,"root":true,"index":0},{"id":"index.js","module":false,"mgroup":false,"root":true,"index":1},{"id":"index.js","module":false,"native":false,"mgroup":false,"index":2},{"id":"d3","module":true,"native":false,"mgroup":"d3","index":3},{"id":"mousetrap","module":true,"native":false,"mgroup":"mousetrap","index":4},{"id":"debounce","module":true,"native":false,"mgroup":"debounce","index":5},{"id":"resize.js","module":false,"native":false,"mgroup":false,"index":6},{"id":"highlight.js","module":true,"native":false,"mgroup":"highlight.js","index":7},{"id":"reqursive","module":true,"native":false,"mgroup":"reqursive","index":8},{"id":"marked","module":true,"native":false,"mgroup":"marked","index":9},{"id":"wrench","module":true,"native":false,"mgroup":"wrench","index":10},{"id":"utils.js","module":false,"native":false,"mgroup":false,"index":11},{"id":"async","module":true,"native":false,"mgroup":"async","index":12},{"id":"ejs","module":true,"native":false,"mgroup":"ejs","index":13},{"id":"jsdom","module":true,"native":false,"mgroup":"jsdom","index":14},{"id":"sizzle","module":true,"native":false,"mgroup":"sizzle","index":15},{"id":"d3.v2.js","module":false,"native":false,"mgroup":"d3","index":16},{"id":"bash.js","module":false,"native":false,"mgroup":"highlight.js","index":17},{"id":"erlang.js","module":false,"native":false,"mgroup":"highlight.js","index":18},{"id":"cs.js","module":false,"native":false,"mgroup":"highlight.js","index":19},{"id":"ruby.js","module":false,"native":false,"mgroup":"highlight.js","index":20},{"id":"rust.js","module":false,"native":false,"mgroup":"highlight.js","index":21},{"id":"rib.js","module":false,"native":false,"mgroup":"highlight.js","index":22},{"id":"diff.js","module":false,"native":false,"mgroup":"highlight.js","index":23},{"id":"javascript.js","module":false,"native":false,"mgroup":"highlight.js","index":24},{"id":"glsl.js","module":false,"native":false,"mgroup":"highlight.js","index":25},{"id":"rsl.js","module":false,"native":false,"mgroup":"highlight.js","index":26},{"id":"lua.js","module":false,"native":false,"mgroup":"highlight.js","index":27},{"id":"xml.js","module":false,"native":false,"mgroup":"highlight.js","index":28},{"id":"markdown.js","module":false,"native":false,"mgroup":"highlight.js","index":29},{"id":"css.js","module":false,"native":false,"mgroup":"highlight.js","index":30},{"id":"lisp.js","module":false,"native":false,"mgroup":"highlight.js","index":31},{"id":"profile.js","module":false,"native":false,"mgroup":"highlight.js","index":32},{"id":"http.js","module":false,"native":false,"mgroup":"highlight.js","index":33},{"id":"java.js","module":false,"native":false,"mgroup":"highlight.js","index":34},{"id":"php.js","module":false,"native":false,"mgroup":"highlight.js","index":35},{"id":"haskell.js","module":false,"native":false,"mgroup":"highlight.js","index":36},{"id":"1c.js","module":false,"native":false,"mgroup":"highlight.js","index":37},{"id":"python.js","module":false,"native":false,"mgroup":"highlight.js","index":38},{"id":"smalltalk.js","module":false,"native":false,"mgroup":"highlight.js","index":39},{"id":"tex.js","module":false,"native":false,"mgroup":"highlight.js","index":40},{"id":"actionscript.js","module":false,"native":false,"mgroup":"highlight.js","index":41},{"id":"sql.js","module":false,"native":false,"mgroup":"highlight.js","index":42},{"id":"vala.js","module":false,"native":false,"mgroup":"highlight.js","index":43},{"id":"ini.js","module":false,"native":false,"mgroup":"highlight.js","index":44},{"id":"d.js","module":false,"native":false,"mgroup":"highlight.js","index":45},{"id":"axapta.js","module":false,"native":false,"mgroup":"highlight.js","index":46},{"id":"perl.js","module":false,"native":false,"mgroup":"highlight.js","index":47},{"id":"scala.js","module":false,"native":false,"mgroup":"highlight.js","index":48},{"id":"cmake.js","module":false,"native":false,"mgroup":"highlight.js","index":49},{"id":"objectivec.js","module":false,"native":false,"mgroup":"highlight.js","index":50},{"id":"avrasm.js","module":false,"native":false,"mgroup":"highlight.js","index":51},{"id":"vhdl.js","module":false,"native":false,"mgroup":"highlight.js","index":52},{"id":"coffeescript.js","module":false,"native":false,"mgroup":"highlight.js","index":53},{"id":"nginx.js","module":false,"native":false,"mgroup":"highlight.js","index":54},{"id":"erlang-repl.js","module":false,"native":false,"mgroup":"highlight.js","index":55},{"id":"r.js","module":false,"native":false,"mgroup":"highlight.js","index":56},{"id":"json.js","module":false,"native":false,"mgroup":"highlight.js","index":57},{"id":"django.js","module":false,"native":false,"mgroup":"highlight.js","index":58},{"id":"delphi.js","module":false,"native":false,"mgroup":"highlight.js","index":59},{"id":"vbscript.js","module":false,"native":false,"mgroup":"highlight.js","index":60},{"id":"mel.js","module":false,"native":false,"mgroup":"highlight.js","index":61},{"id":"dos.js","module":false,"native":false,"mgroup":"highlight.js","index":62},{"id":"apache.js","module":false,"native":false,"mgroup":"highlight.js","index":63},{"id":"cpp.js","module":false,"native":false,"mgroup":"highlight.js","index":64},{"id":"matlab.js","module":false,"native":false,"mgroup":"highlight.js","index":65},{"id":"parser3.js","module":false,"native":false,"mgroup":"highlight.js","index":66},{"id":"clojure.js","module":false,"native":false,"mgroup":"highlight.js","index":67},{"id":"go.js","module":false,"native":false,"mgroup":"highlight.js","index":68},{"id":"detective","module":true,"native":false,"mgroup":"detective","index":69},{"id":"nub","module":true,"native":false,"mgroup":"nub","index":70},{"id":"async.js","module":false,"native":false,"mgroup":"async","index":71},{"id":"utils.js","module":false,"native":false,"mgroup":"ejs","index":72},{"id":"filters.js","module":false,"native":false,"mgroup":"ejs","index":73},{"id":"index.js","module":false,"native":false,"mgroup":"jsdom","index":74},{"id":"documentfeatures.js","module":false,"native":false,"mgroup":"jsdom","index":75},{"id":"request","module":true,"native":false,"mgroup":"request","index":76},{"id":"style.js","module":false,"native":false,"mgroup":"jsdom","index":77},{"id":"index.js","module":false,"native":false,"mgroup":"jsdom","index":78},{"id":"index.js","module":false,"native":false,"mgroup":"jsdom","index":79},{"id":"esprima","module":true,"native":false,"mgroup":"esprima","index":80},{"id":"core.js","module":false,"native":false,"mgroup":"jsdom","index":81},{"id":"xpath.js","module":false,"native":false,"mgroup":"jsdom","index":82},{"id":"events.js","module":false,"native":false,"mgroup":"jsdom","index":83},{"id":"html.js","module":false,"native":false,"mgroup":"jsdom","index":84},{"id":"ls.js","module":false,"native":false,"mgroup":"jsdom","index":85},{"id":"oauth.js","module":false,"native":false,"mgroup":"request","index":86},{"id":"uuid.js","module":false,"native":false,"mgroup":"request","index":87},{"id":"forever.js","module":false,"native":false,"mgroup":"request","index":88},{"id":"index.js","module":false,"native":false,"mgroup":"request","index":89},{"id":"jar.js","module":false,"native":false,"mgroup":"request","index":90},{"id":"tunnel.js","module":false,"native":false,"mgroup":"request","index":91},{"id":"aws.js","module":false,"native":false,"mgroup":"request","index":92},{"id":"mime","module":true,"native":false,"mgroup":"mime","index":93},{"id":"form-data","module":true,"native":false,"mgroup":"form-data","index":94},{"id":"core.js","module":false,"native":false,"mgroup":"jsdom","index":95},{"id":"html.js","module":false,"native":false,"mgroup":"jsdom","error":{"index":11943,"lineNumber":443,"column":12},"index":96},{"id":"utils.js","module":false,"native":false,"mgroup":"jsdom","index":97},{"id":"cssom","module":true,"native":false,"mgroup":"cssom","index":98},{"id":"htmltodom.js","module":false,"native":false,"mgroup":"jsdom","index":99},{"id":"domtohtml.js","module":false,"native":false,"mgroup":"jsdom","index":100},{"id":"htmlencoding.js","module":false,"native":false,"mgroup":"jsdom","index":101},{"id":"contextify","module":true,"native":false,"mgroup":"contextify","index":102},{"id":"htmlparser","module":true,"native":false,"mgroup":"htmlparser","index":103},{"id":"sizzle.js","module":false,"native":false,"mgroup":"jsdom","index":104},{"id":"events.js","module":false,"native":false,"mgroup":"jsdom","index":105},{"id":"combined-stream","module":true,"native":false,"mgroup":"combined-stream","index":106},{"id":"async","module":true,"native":false,"mgroup":"async","index":107},{"id":"core.js","module":false,"native":false,"mgroup":"jsdom","error":{"index":12443,"lineNumber":412,"column":16},"index":108},{"id":"CSSStyleDeclaration.js","module":false,"native":false,"mgroup":"cssom","index":109},{"id":"CSSRule.js","module":false,"native":false,"mgroup":"cssom","index":110},{"id":"CSSStyleRule.js","module":false,"native":false,"mgroup":"cssom","index":111},{"id":"MediaList.js","module":false,"native":false,"mgroup":"cssom","index":112},{"id":"CSSMediaRule.js","module":false,"native":false,"mgroup":"cssom","index":113},{"id":"CSSImportRule.js","module":false,"native":false,"mgroup":"cssom","index":114},{"id":"CSSFontFaceRule.js","module":false,"native":false,"mgroup":"cssom","index":115},{"id":"StyleSheet.js","module":false,"native":false,"mgroup":"cssom","index":116},{"id":"CSSStyleSheet.js","module":false,"native":false,"mgroup":"cssom","index":117},{"id":"CSSKeyframesRule.js","module":false,"native":false,"mgroup":"cssom","index":118},{"id":"CSSKeyframeRule.js","module":false,"native":false,"mgroup":"cssom","index":119},{"id":"parse.js","module":false,"native":false,"mgroup":"cssom","index":120},{"id":"clone.js","module":false,"native":false,"mgroup":"cssom","index":121},{"id":"bindings","module":true,"native":false,"mgroup":"bindings","index":122},{"id":"delayed-stream","module":true,"native":false,"mgroup":"delayed-stream","index":123},{"id":"async.js","module":false,"native":false,"mgroup":"async","index":124}];'
+				   links='[{"source":0,"target":2},{"source":1,"target":3},{"source":1,"target":4},{"source":1,"target":5},{"source":1,"target":6},{"source":2,"target":7},{"source":2,"target":8},{"source":2,"target":9},{"source":2,"target":10},{"source":11,"target":10},{"source":2,"target":11},{"source":2,"target":12},{"source":8,"target":12},{"source":2,"target":13},{"source":3,"target":14},{"source":78,"target":14},{"source":3,"target":15},{"source":3,"target":16},{"source":7,"target":17},{"source":7,"target":18},{"source":7,"target":19},{"source":7,"target":20},{"source":7,"target":21},{"source":7,"target":22},{"source":7,"target":23},{"source":7,"target":24},{"source":7,"target":25},{"source":7,"target":26},{"source":7,"target":27},{"source":7,"target":28},{"source":7,"target":29},{"source":7,"target":30},{"source":7,"target":31},{"source":7,"target":32},{"source":7,"target":33},{"source":7,"target":34},{"source":7,"target":35},{"source":7,"target":36},{"source":7,"target":37},{"source":7,"target":38},{"source":7,"target":39},{"source":7,"target":40},{"source":7,"target":41},{"source":7,"target":42},{"source":7,"target":43},{"source":7,"target":44},{"source":7,"target":45},{"source":7,"target":46},{"source":7,"target":47},{"source":7,"target":48},{"source":7,"target":49},{"source":7,"target":50},{"source":7,"target":51},{"source":7,"target":52},{"source":7,"target":53},{"source":7,"target":54},{"source":7,"target":55},{"source":7,"target":56},{"source":7,"target":57},{"source":7,"target":58},{"source":7,"target":59},{"source":7,"target":60},{"source":7,"target":61},{"source":7,"target":62},{"source":7,"target":63},{"source":7,"target":64},{"source":7,"target":65},{"source":7,"target":66},{"source":7,"target":67},{"source":7,"target":68},{"source":8,"target":69},{"source":8,"target":70},{"source":12,"target":71},{"source":13,"target":72},{"source":13,"target":73},{"source":14,"target":74},{"source":14,"target":75},{"source":14,"target":76},{"source":14,"target":77},{"source":14,"target":78},{"source":14,"target":79},{"source":69,"target":80},{"source":74,"target":81},{"source":82,"target":81},{"source":84,"target":81},{"source":85,"target":81},{"source":74,"target":82},{"source":74,"target":83},{"source":85,"target":83},{"source":74,"target":84},{"source":74,"target":85},{"source":76,"target":86},{"source":76,"target":87},{"source":76,"target":88},{"source":76,"target":89},{"source":76,"target":90},{"source":76,"target":91},{"source":76,"target":92},{"source":76,"target":93},{"source":94,"target":93},{"source":76,"target":94},{"source":77,"target":95},{"source":81,"target":95},{"source":105,"target":95},{"source":77,"target":96},{"source":84,"target":96},{"source":77,"target":97},{"source":105,"target":97},{"source":77,"target":98},{"source":78,"target":99},{"source":81,"target":99},{"source":78,"target":100},{"source":81,"target":100},{"source":78,"target":101},{"source":81,"target":101},{"source":99,"target":101},{"source":100,"target":101},{"source":78,"target":102},{"source":78,"target":103},{"source":79,"target":104},{"source":83,"target":105},{"source":94,"target":106},{"source":94,"target":107},{"source":95,"target":108},{"source":98,"target":109},{"source":111,"target":109},{"source":115,"target":109},{"source":119,"target":109},{"source":120,"target":109},{"source":121,"target":109},{"source":98,"target":110},{"source":111,"target":110},{"source":113,"target":110},{"source":114,"target":110},{"source":115,"target":110},{"source":118,"target":110},{"source":119,"target":110},{"source":98,"target":111},{"source":117,"target":111},{"source":120,"target":111},{"source":121,"target":111},{"source":98,"target":112},{"source":113,"target":112},{"source":114,"target":112},{"source":98,"target":113},{"source":120,"target":113},{"source":121,"target":113},{"source":98,"target":114},{"source":120,"target":114},{"source":98,"target":115},{"source":120,"target":115},{"source":98,"target":116},{"source":117,"target":116},{"source":98,"target":117},{"source":114,"target":117},{"source":120,"target":117},{"source":121,"target":117},{"source":98,"target":118},{"source":120,"target":118},{"source":121,"target":118},{"source":98,"target":119},{"source":120,"target":119},{"source":121,"target":119},{"source":98,"target":120},{"source":109,"target":120},{"source":117,"target":120},{"source":98,"target":121},{"source":102,"target":122},{"source":106,"target":123},{"source":107,"target":124}]'></d3-colony>
+	</template>
+	<script>
+		class D3ColonyDemo extends Polymer.Element {
+			static get is() { return "d3-colony-demo"; }
+		}
+
+		window.customElements.define(D3ColonyDemo.is, D3ColonyDemo);
+	</script>
+</dom-module>
\ No newline at end of file
diff --git a/d3-colony.html b/d3-colony.html
new file mode 100644
index 0000000..c6eed6f
--- /dev/null
+++ b/d3-colony.html
@@ -0,0 +1,408 @@
+<link rel="import" href="../paper-toast/paper-toast.html"/>
+<link rel="import" href="import-d3.html"/>
+
+<dom-module id="d3-colony">
+	<template>
+		<style>
+			#root {
+				background-color: #252929;
+			}
+		</style>
+		<div id="root"></div>
+		<paper-toast id="msgNotFound" text="Not found!"></paper-toast>
+	</template>
+	<script>
+		class D3Colony extends Polymer.Element {
+			static get is() { return "d3-colony"; }
+
+			static get properties() {
+				return {
+					nodes: {
+						type: Array,
+						value: function() { return []; },
+					},
+					links: {
+						type: Array,
+						value: function() { return []; },
+					},
+					scale: {
+						type: Number,
+						value: 1,
+					},
+					width: {
+						type: Number,
+						value: 600,
+					},
+					height: {
+						type: Number,
+						value: 400,
+					},
+					colors: {
+						type: Object,
+						value: function() {
+							var self = this;
+
+							return {
+								links: '#FAFAFA',
+								text: {
+									subtitle: '#FAFAFA',
+								},
+								nodes: {
+									method: function(d) {
+										return self.groups[d.group].color;
+									},
+									hover: '#FAFAFA',
+									dep: '#252929',
+								},
+							};
+						},
+					},
+					selected: {
+						type: String,
+						notify: true,
+						observer: "selectedObserver",
+					},
+					loaded: {
+						type: Boolean,
+						value: false,
+					}
+				};
+			}
+
+			static get observers() {
+				return [
+					"colonyObserver(links, nodes, scale, colors)",
+				];
+			}
+
+			ready() {
+				super.ready();
+				var self = this;
+
+				/*
+				 * Add event handler for window resize
+				 * https://github.com/Polymer/polymer/issues/1384
+				 */
+				window.addEventListener("resize", function() {
+					self.refresh();
+				});
+			}
+
+			colonyObserver(links, nodes, scale, colors) {
+				var self = this;
+
+				if (!self.loaded) {
+					return;
+				}
+
+				links.forEach(function(link) {
+					var source = nodes[link.source];
+					var target = nodes[link.target];
+
+					source.children = source.children || [];
+					source.children.push(link.target);
+
+					target.parents = target.parents || [];
+					target.parents.push(link.source);
+				})
+
+				self.groups = nodes.reduce(function(groups, node) {
+					var group = node.mgroup || 'none';
+					var index = groups.indexOf(group);
+
+					if (index === -1) {
+						index = groups.length;
+						groups.push(group);
+					}
+
+					node.group = index;
+
+					return groups;
+				}, []);
+
+				self.groups = self.groups.map(function(name, n) {
+					//var color = d3.hsl(n / self.groups.length * 300, 0.7, 0.725);
+					var color = d3.hsl(300 - name / self.groups.length * 300, 0.7, 0.725);
+
+					return {
+						name: name,
+						color: color.toString(),
+					};
+				});
+
+				self.force = d3.layout.force()
+					.size([self.width, self.height])
+					.charge(-50 * self.scale)
+					.linkDistance(20 * self.scale)
+					.on('tick', function() {
+						self.link.attr('x1', function(d) { return d.source.x; })
+							.attr('y1', function(d) { return d.source.y; })
+							.attr('x2', function(d) { return d.target.x; })
+							.attr('y2', function(d) { return d.target.y; })
+
+						self.node.attr('cx', function(d) { return d.x; })
+							.attr('cy', function(d) { return d.y; })
+
+						//if (textTarget) {
+						//	text.attr('transform'
+						//			, 'translate(' + textTarget.x + ',' + textTarget.y + ')')
+						//}
+					});
+
+				/*
+				 * https://stackoverflow.com/questions/10784018/how-can-i-remove-or-replace-svg-content
+				 */
+				self.vis = d3.select(self.$.root).select("svg").remove();
+				self.vis = d3.select(self.$.root)
+					.append('svg')
+					.attr('width', self.width)
+					.attr('height', self.height);
+
+				self.force.nodes(nodes)
+					 .links(links)
+					 .start();
+
+				self.link = self.vis.selectAll('line.link').data(links);
+				self.node = self.vis.selectAll('circle.node')
+					.data(nodes, function(d) { return d.filename });
+
+				self.link.enter()
+					.insert('line', '.node')
+					.attr('class', 'link')
+					.attr('x1', function(d) { return d.source.x; })
+					.attr('y1', function(d) { return d.source.y; })
+					.attr('x2', function(d) { return d.target.x; })
+					.attr('y2', function(d) { return d.target.y; })
+					.style('stroke', colors.links)
+					.style('opacity', function(d) {
+						return d.target.module ? 0.2 : 0.3
+					});
+
+				self.node.enter()
+					.append('circle')
+					.attr('class', 'node')
+					.attr('cx', function(d) { return d.x })
+					.attr('cy', function(d) { return d.y })
+					.attr('r', function(d) {
+						return scale * d.size;
+					})
+					.style('fill', colors.nodes.method)
+					.call(self.force.drag)
+					.on('mouseover', function(d) {
+						//textTarget = d
+						//
+						//text.attr('transform', 'translate(' + d.x + ',' + d.y + ')')
+						//	.text(d.id)
+						//	.style('display', null)
+
+						d3.select(this)
+						  .style('fill', colors.nodes.hover)
+
+						d3.selectAll(self.childNodes(d))
+							.style('fill', colors.nodes.hover)
+							.style('stroke', colors.nodes.method)
+							.style('stroke-width', 2)
+
+						d3.selectAll(self.parentNodes(d))
+							.style('fill', colors.nodes.dep)
+							.style('stroke', colors.nodes.method)
+							.style('stroke-width', 2)
+					})
+					.on('mouseout', function(d) {
+						//textTarget = false
+						//
+						//text.style('display', 'none')
+
+						d3.select(this)
+						  .style('fill', colors.nodes.method)
+
+						d3.selectAll(self.childNodes(d))
+							.style('fill', colors.nodes.method)
+							.style('stroke', null)
+
+						d3.selectAll(self.parentNodes(d))
+							.style('fill', colors.nodes.method)
+							.style('stroke', null)
+					})
+					.on('click', function(d) {
+						self.toggleFocus(d, false);
+					});
+
+				//text = self.vis.selectAll('.nodetext')
+				//	.data([
+				//		  [-1.5,  1.5,  1] // "Shadows"
+				//		, [ 1.5,  1.5,  1]
+				//		, [-1.5, -1.5,  1]
+				//		, [ 1.5, -1.5,  1]
+				//		, [ 0.0,  0.0,  0] // Actual Text
+				//	])
+				//	.enter()
+				//	.insert('text', ':last-child')
+				//	.attr('class', 'nodetext')
+				//	.classed('shadow', function(d) { return d[2] })
+				//	.attr('dy', function(d) { return d[0] - 10 })
+				//	.attr('dx', function(d) { return d[1] })
+				//	.attr('text-anchor', 'middle');
+
+				self.refresh();
+
+				self.selectedObserver(self.selected, undefined);
+
+				//self.restartForce();
+			}
+
+			selectedObserver(newValue, oldValue) {
+				var self = this;
+
+				if (!self.loaded) {
+					return;
+				}
+				if (self.internal) {
+					self.internal = false;
+					return;
+				}
+
+				if (oldValue) {
+					var node = self.nodeLookup[oldValue];
+					if (node) {
+						self.toggleFocus(node, true);
+					}
+				}
+
+				if (newValue) {
+					var node = self.nodeLookup[newValue];
+					if (node) {
+						self.toggleFocus(node, true);
+					} else {
+						self.$.msgNotFound.open();
+					}
+				}
+			}
+
+			toggleFocus(d, internal) {
+				var self = this;
+
+				if (self.focus === d) {
+					self.force.charge(-50 * self.scale)
+						 .linkDistance(20 * self.scale)
+						 .linkStrength(1)
+						 .start();
+
+					self.node.style('opacity', 1)
+					self.link.style('opacity', function(d) {
+						return d.target.module ? 0.2 : 0.3
+					});
+
+					console.log("blur: " + d.id);
+					if (!internal) {
+						self.setProperties({
+							selected: undefined,
+							internal: true,
+						});
+					}
+					self.focus = undefined;
+
+					//d3.select('#readme-contents')
+					//	.html(readme)
+					//	.classed('showing-code', false);
+
+					return;
+				}
+
+				console.log("focus: " + d.id);
+				if (!internal) {
+					self.setProperties({
+						selected: d.id,
+						internal: true,
+					});
+				}
+				self.focus = d;
+
+				//d3.xhr('./files/' + d.filename + '.html', function(res) {
+				//	if (!res) return
+				//
+				//	d3.select('#readme-contents')
+				//		.html(res.responseText)
+				//		.classed('showing-code', true)
+				//
+				//	document.getElementById('readme')
+				//			.scrollTop = 0
+				//});
+
+				self.node.style('opacity', function(o) {
+					o.active = self.connected(d, o)
+					return o.active ? 1 : 0.2
+				});
+
+				self.force.charge(function(o) {
+					return (o.active ? -100 : -5) * self.scale
+				}).linkDistance(function(l) {
+					return (l.source.active && l.target.active ? 100 : 20) * self.scale
+				}).linkStrength(function(l) {
+					return (l.source === d || l.target === d ? 1 : 0) * self.scale
+				}).start();
+
+				self.link.style('opacity', function(l, i) {
+					return l.source.active && l.target.active ? 0.2 : 0.02
+				});
+			}
+
+			refresh() {
+				var self = this;
+
+				self.width = Math.max(window.innerWidth * 0.5, 500);
+				//self.width = window.innerWidth;
+				self.height = window.innerHeight;
+
+				self.force.size([self.width, self.height])
+					.resume();
+
+				self.vis.attr('width', window.innerWidth)
+					.attr('height', self.height);
+			};
+
+			childNodes(d) {
+				if (!d.children) return [];
+
+				var self = this;
+
+				return d.children
+					.map(function(child) {
+						return self.node[0][child];
+					}).filter(function(child) {
+						return child;
+					})
+			};
+
+			parentNodes(d) {
+				if (!d.parents) return []
+
+				var self = this;
+
+				return d.parents
+					.map(function(parent) {
+						return self.node[0][parent];
+					}).filter(function(parent) {
+						return parent;
+					})
+			};
+
+			connected(d, o) {
+				return o.index === d.index ||
+					(d.children && d.children.indexOf(o.index) !== -1) ||
+					(o.children && o.children.indexOf(d.index) !== -1) ||
+					(o.parents && o.parents.indexOf(d.index) !== -1) ||
+					(d.parents && d.parents.indexOf(o.index) !== -1)
+			};
+
+			restartForce() {
+				var theta = self.force.theta();
+
+				self.force.start()
+					 .theta(theta);
+			};
+		}
+
+		window.customElements.define(D3Colony.is, D3Colony);
+	</script>
+</dom-module>
\ No newline at end of file
diff --git a/import-d3.html b/import-d3.html
new file mode 100644
index 0000000..fc729fe
--- /dev/null
+++ b/import-d3.html
@@ -0,0 +1,2 @@
+<!--<script src="../../components/d3/d3.min.js"></script>-->
+<script src="../../components/d3/d3.v2.min.js"></script>
diff --git a/publish.sh b/publish.sh
new file mode 100755
index 0000000..341c558
--- /dev/null
+++ b/publish.sh
@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+version=`cat bower.json | perl -nle 'print $& if m{(?<="version": ")[^"]+}'`
+git tag v${version}
+git push origin --tags
\ No newline at end of file