d3 v4 pack layout of Hawaii 2010 Election Data. Based on this.
xxxxxxxxxx<meta charset="utf-8"><style>circle { fill: rgb(31, 119, 180); fill-opacity: .25; stroke: rgb(31, 119, 180); stroke-width: 1px;}.leaf circle { fill: #bcbddc; fill-opacity: 1;}text { font: 10px sans-serif;}.yes circle { fill: #f0f0f0;}.no circle { fill: #252525;}.republican circle { fill: #b2182b;}.democrat circle { fill: #2166ac;}.green circle { fill: #1a9850;}.libertarian circle { fill: #fee08b;}.independent circle { fill: #878787;}pre { background-color: #fee8c8; padding: 5px;}</style><body><script src="https://d3js.org/d3.v3.js"></script><script>/* https://github.com/d3/d3-hierarchy Copyright 2015 Mike Bostock */!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r(n.hierarchy={})}(this,function(n){"use strict";function r(n){var r=[];return n.forEach(function(n){n.children&&n.children.forEach(function(e){r.push({source:n,target:e})})}),r}function e(n,e){return n.sort=function(){var r=e.sort.apply(e,arguments);return r===e?n:r},n.children=function(){var r=e.children.apply(e,arguments);return r===e?n:r},n.value=function(){var r=e.value.apply(e,arguments);return r===e?n:r},n.nodes=n,n.links=r,n}function t(n){return{x:n.x,y:n.y,dx:n.dx,dy:n.dy}}function u(n,r){var e=n.x+r[3],t=n.y+r[0],u=n.dx-r[1]-r[3],a=n.dy-r[0]-r[2];return 0>u&&(e+=u/2,u=0),0>a&&(t+=a/2,a=0),{x:e,y:t,dx:u,dy:a}}function a(n,r){for(var e=[n],t=[];null!=(n=e.pop());)if(t.push(n),(a=n.children)&&(u=a.length))for(var u,a,l=-1;++l<u;)e.push(a[l]);for(;null!=(n=t.pop());)r(n)}function l(n,r){for(var e=[n];null!=(n=e.pop());)if(r(n),(u=n.children)&&(t=u.length))for(var t,u;--t>=0;)e.push(u[t])}function i(n){return n.value}function c(n){return n.children}function o(n,r){return r.value-n.value}function f(){function n(r){var l,i=[r],c=[];for(r.parent=null,r.depth=0;null!=(l=i.pop());)if(c.push(l),(f=t.call(n,l,l.depth))&&(o=f.length)){for(var o,f,h;--o>=0;)i.push(h=f[o]),h.parent=l,h.depth=l.depth+1;u&&(l.value=0),l.children=f}else u&&(l.value=+u.call(n,l,l.depth)||0),delete l.children;return a(r,function(n){var r,t;e&&(r=n.children)&&r.sort(e),u&&(t=n.parent)&&(t.value+=n.value)}),c}var e=o,t=c,u=i;return n.nodes=n,n.links=r,n.sort=function(r){return arguments.length?(e=r,n):e},n.children=function(r){return arguments.length?(t=r,n):t},n.value=function(r){return arguments.length?(u=r,n):u},n.revalue=function(r){return u&&(l(r,function(n){n.children&&(n.value=0)}),a(r,function(r){var e;r.children||(r.value=+u.call(n,r,r.depth)||0),(e=r.parent)&&(e.value+=r.value)})),r},n}function h(){function n(n){var r=x.call(h,n,n.depth);return null==r?t(n):u(n,"number"==typeof r?[r,r,r,r]:r)}function r(n){return u(n,x)}function a(n,r){for(var e,t,u=-1,a=n.length;++u<a;)t=(e=n[u]).value*(0>r?0:r),e.area=isNaN(t)||0>=t?0:t}function l(n){var r=n.children;if(r&&r.length){var e,t,u,i=y(n),f=[],h=r.slice(),d=1/0,p="slice"===m?i.dx:"dice"===m?i.dy:"slice-dice"===m?1&n.depth?i.dy:i.dx:Math.min(i.dx,i.dy);for(a(h,i.dx*i.dy/n.value),f.area=0;(u=h.length)>0;)f.push(e=h[u-1]),f.area+=e.area,"squarify"!==m||(t=c(f,p))<=d?(h.pop(),d=t):(f.area-=f.pop().area,o(f,p,i,!1),p=Math.min(i.dx,i.dy),f.length=f.area=0,d=1/0);f.length&&(o(f,p,i,!0),f.length=f.area=0),r.forEach(l)}}function i(n){var r=n.children;if(r&&r.length){var e,t=y(n),u=r.slice(),l=[];for(a(u,t.dx*t.dy/n.value),l.area=0;e=u.pop();)l.push(e),l.area+=e.area,null!=e.z&&(o(l,e.z?t.dx:t.dy,t,!u.length),l.length=l.area=0);r.forEach(i)}}function c(n,r){for(var e,t=n.area,u=0,a=1/0,l=-1,i=n.length;++l<i;)(e=n[l].area)&&(a>e&&(a=e),e>u&&(u=e));return t*=t,r*=r,t?Math.max(r*u*_/t,t/(r*a*_)):1/0}function o(n,r,e,t){var u,a=-1,l=n.length,i=e.x,c=e.y,o=r?v(n.area/r):0;if(r==e.dx){for((t||o>e.dy)&&(o=e.dy);++a<l;)u=n[a],u.x=i,u.y=c,u.dy=o,i+=u.dx=Math.min(e.x+e.dx-i,o?v(u.area/o):0);u.z=!0,u.dx+=e.x+e.dx-i,e.y+=o,e.dy-=o}else{for((t||o>e.dx)&&(o=e.dx);++a<l;)u=n[a],u.x=i,u.y=c,u.dx=o,c+=u.dy=Math.min(e.y+e.dy-c,o?v(u.area/o):0);u.z=!1,u.dy+=e.y+e.dy-c,e.x+=o,e.dx-=o}}function h(n){var r=d||p(n),e=r[0];return e.x=0,e.y=0,e.dx=s[0],e.dy=s[1],d&&p.revalue(e),a([e],e.dx*e.dy/e.value),(d?i:l)(e),g&&(d=r),r}var d,p=f(),v=Number,s=[1,1],x=null,y=t,g=!1,m="squarify",_=V;return h.size=function(n){return arguments.length?(s=[+n[0],+n[1]],h):s.slice()},h.padding=function(e){if(!arguments.length)return Array.isArray(x)?x.slice():x;var u;return y=null==e?(x=null,t):"function"==(u=typeof e)?(x=e,n):"number"===u?(x=[e,e,e,e],r):(x=[+e[0],+e[1],+e[2],+e[3]],r),h},h.round=function(n){return arguments.length?(v=n?Math.round:Number,h):v!==Number},h.sticky=function(n){return arguments.length?(g=!!n,d=null,h):g},h.ratio=function(n){return arguments.length?(_=+n,h):_},h.mode=function(n){return arguments.length?(m=U.hasOwnProperty(n)?n+"":"squarify",h):m},e(h,p)}function d(n){var r=n.children;return r.length?r[0]:n.t}function p(n){var r,e=n.children;return(r=e.length)?e[r-1]:n.t}function v(n,r,e){return n.a.parent===r.parent?n.a:e}function s(n,r,e){var t=e/(r.i-n.i);r.c-=t,r.s+=e,n.c+=t,r.z+=e,r.m+=e}function x(n){for(var r,e=0,t=0,u=n.children,a=u.length;--a>=0;)r=u[a],r.z+=e,r.m+=e,e+=r.s+(t+=r.c)}function y(n,r){return n.parent===r.parent?1:2}function g(){function n(n,e){var i=o.call(this,n,e),f=i[0],d=r(f);if(a(d,t),d.parent.m=-d.z,l(d,u),m)l(f,c);else{var p=f,v=f,s=f;l(f,function(n){n.x<p.x&&(p=n),n.x>v.x&&(v=n),n.depth>s.depth&&(s=n)});var x=h(p,v)/2-p.x,y=g[0]/(v.x+h(v,p)/2+x),_=g[1]/(s.depth||1);l(f,function(n){n.x=(n.x+x)*y,n.y=n.depth*_})}return i}function r(n){for(var r,e={A:null,children:[n]},t=[e];null!=(r=t.pop());)for(var u,a=r.children,l=0,i=a.length;i>l;++l)t.push((a[l]=u={_:a[l],parent:r,children:(u=a[l].children)&&u.slice()||[],A:null,a:null,z:0,m:0,c:0,s:0,t:null,i:l}).a=u);return e.children[0]}function t(n){var r=n.children,e=n.parent.children,t=n.i?e[n.i-1]:null;if(r.length){x(n);var u=(r[0].z+r[r.length-1].z)/2;t?(n.z=t.z+h(n._,t._),n.m=n.z-u):n.z=u}else t&&(n.z=t.z+h(n._,t._));n.parent.A=i(n,t,n.parent.A||e[0])}function u(n){n._.x=n.z+n.parent.m,n.m+=n.parent.m}function i(n,r,e){if(r){for(var t,u=n,a=n,l=r,i=u.parent.children[0],c=u.m,o=a.m,f=l.m,x=i.m;l=p(l),u=d(u),l&&u;)i=d(i),a=p(a),a.a=n,t=l.z+f-u.z-c+h(l._,u._),t>0&&(s(v(l,n,e),n,t),c+=t,o+=t),f+=l.m,c+=u.m,x+=i.m,o+=a.m;l&&!p(a)&&(a.t=l,a.m+=f-o),u&&!d(i)&&(i.t=u,i.m+=c-x,e=n)}return e}function c(n){n.x*=g[0],n.y=n.depth*g[1]}var o=f().sort(null).value(null),h=y,g=[1,1],m=null;return n.separation=function(r){return arguments.length?(h=r,n):h},n.size=function(r){return arguments.length?(m=null==(g=r)?c:null,n):m?null:g},n.nodeSize=function(r){return arguments.length?(m=null==(g=r)?null:c,n):m?g:null},e(n,o)}function m(n){var r,e,t=n.children,u=0;if(t)for(r=0,e=t.length;e>r;++r)u=Math.max(u,m(t[r]));return 1+u}function _(n,r,e,t){var u=n.children;if(n.x=r,n.y=n.depth*t,n.dx=e,n.dy=t,u&&(a=u.length)){var a,l,i,c=-1;for(e=n.value?e/n.value:0;++c<a;)_(l=u[c],r,i=l.value*e,t),r+=i}}function k(){function n(n,e){var u=r.call(this,n,e);return _(u[0],0,t[0],t[1]/m(u[0])),u}var r=f(),t=[1,1];return n.size=function(r){return arguments.length?(t=[+r[0],+r[1]],n):t.slice()},e(n,r)}function z(n,r,e,t){var u=n.children;if(n.x=r+=t*n.x,n.y=e+=t*n.y,n.r*=t,u)for(var a=-1,l=u.length;++a<l;)z(u[a],r,e,t)}function M(n){delete n._pack_next,delete n._pack_prev}function b(n){for(var r,e=(n=n.slice()).length,t=null,u=t;e;){var a={id:n.length-e,value:n[e-1],next:null};u=u?u.next=a:t=a,n[r]=n[--e]}return{head:t,tail:u}}function q(n,r){var e=n.x-r.x,t=n.y-r.y;return Math.sqrt(e*e+t*t)<n.r-r.r+1e-6}function A(n,r,e){var t=n.x,u=n.y,a=n.r,l=r.x,i=r.y,c=r.r,o=e.x,f=e.y,h=e.r,d=2*(t-l),p=2*(u-i),v=2*(c-a),s=t*t+u*u-a*a-l*l-i*i+c*c,x=2*(t-o),y=2*(u-f),g=2*(h-a),m=t*t+u*u-a*a-o*o-f*f+h*h,_=x*p-d*y,k=(p*m-y*s)/_-t,z=(y*v-p*g)/_,M=(x*s-d*m)/_-u,b=(d*g-x*v)/_,q=z*z+b*b-1,A=2*(k*z+M*b+a),E=k*k+M*M-a*a,N=(-A-Math.sqrt(A*A-4*q*E))/(2*q);return{x:k+z*N+t,y:M+b*N+u,r:N}}function E(n,r){var e=n.x,t=n.y,u=n.r,a=r.x,l=r.y,i=r.r,c=a-e,o=l-t,f=i-u,h=Math.sqrt(c*c+o*o);return{x:(e+a+c/h*f)/2,y:(t+l+o/h*f)/2,r:(h+u+i)/2}}function N(n,r){var e,t,u,a=null,l=n.head;switch(r.length){case 1:e=r[0];break;case 2:e=E(r[0],r[1]);break;case 3:e=A(r[0],r[1],r[2])}for(;l;)u=l.value,t=l.next,e&&q(e,u)?a=l:(a?(n.tail=a,a.next=null):n.head=n.tail=null,r.push(u),e=N(n,r),r.pop(),n.head?(l.next=n.head,n.head=l):(l.next=null,n.head=n.tail=l),a=n.tail,a.next=t),l=t;return n.tail=a,e}function w(n){return N(b(n),[])}function S(n,r){var e=n._pack_next;n._pack_next=r,r._pack_prev=n,r._pack_next=e,e._pack_prev=r}function j(n,r){n._pack_next=r,r._pack_prev=n}function O(n,r){var e=r.x-n.x,t=r.y-n.y,u=n.r+r.r;return.999*u*u>e*e+t*t}function P(n,r,e){var t=n.r+e.r,u=r.x-n.x,a=r.y-n.y;if(t&&(u||a)){var l=r.r+e.r,i=u*u+a*a;l*=l,t*=t;var c=.5+(t-l)/(2*i),o=Math.sqrt(Math.max(0,2*l*(t+i)-(t-=i)*t-l*l))/(2*i);e.x=n.x+c*u+o*a,e.y=n.y+c*a-o*u}else e.x=n.x+t,e.y=n.y}function B(n){n._pack_next=n._pack_prev=n}function C(n){if((r=n.children)&&(c=r.length)){var r,e,t,u,a,l,i,c;if(r.forEach(B),e=r[0],e.x=-e.r,e.y=0,c>1&&(t=r[1],t.x=t.r,t.y=0,c>2))for(u=r[2],P(e,t,u),S(e,u),e._pack_prev=u,S(u,t),t=e._pack_next,a=3;c>a;a++){P(e,t,u=r[a]);var o=0,f=1,h=1;for(l=t._pack_next;l!==t;l=l._pack_next,f++)if(O(l,u)){o=1;break}if(1==o)for(i=e._pack_prev;i!==l._pack_prev&&!O(i,u);i=i._pack_prev,h++);o?(h>f||f==h&&t.r<e.r?j(e,t=l):j(e=i,t),a--):(S(e,u),t=u)}var u=w(r);for(a=0;c>a;++a)e=r[a],e.x-=u.x,e.y-=u.y;n.r=u.r,r.forEach(M)}}function D(n,r){return n.value-r.value}function F(){function n(n,e){var i=t.call(this,n,e),c=i[0],o=l[0],f=l[1],h=null==r?Math.sqrt:"function"==typeof r?r:function(){return r};if(c.x=c.y=0,a(c,function(n){n.r=+h(n.value)}),a(c,C),u){var d=u*(r?1:Math.max(2*c.r/o,2*c.r/f))/2;a(c,function(n){n.r+=d}),a(c,C),a(c,function(n){n.r-=d})}return z(c,o/2,f/2,r?1:1/Math.max(2*c.r/o,2*c.r/f)),i}var r,t=f().sort(D),u=0,l=[1,1];return n.size=function(r){return arguments.length?(l=[+r[0],+r[1]],n):l.slice()},n.radius=function(e){return arguments.length?(r=null==e||"function"==typeof e?e:+e,n):r},n.padding=function(r){return arguments.length?(u=+r,n):u},e(n,t)}function G(n){for(var r,e;(r=n.children)&&(e=r.length);)n=r[e-1];return n}function H(n){for(var r;(r=n.children)&&r.length;)n=r[0];return n}function I(n){return 1+n.reduce(function(n,r){return Math.max(n,r.y)},0)}function J(n){return n.reduce(function(n,r){return n+r.x},0)/n.length}function K(){function n(n,e){var i,c=r.call(this,n,e),o=c[0],f=0;a(o,function(n){var r=n.children;r&&r.length?(n.x=J(r),n.y=I(r)):(n.x=i?f+=t(n,i):0,n.y=0,i=n)});var h=H(o),d=G(o),p=h.x-t(h,d)/2,v=d.x+t(d,h)/2;return a(o,l?function(n){n.x=(n.x-o.x)*u[0],n.y=(o.y-n.y)*u[1]}:function(n){n.x=(n.x-p)/(v-p)*u[0],n.y=(1-(o.y?n.y/o.y:1))*u[1]}),c}var r=f().sort(null).value(null),t=y,u=[1,1],l=!1;return n.separation=function(r){return arguments.length?(t=r,n):t},n.size=function(r){return arguments.length?(l=null==(u=r),n):l?null:u},n.nodeSize=function(r){return arguments.length?(l=null!=(u=r),n):l?u:null},e(n,r)}function L(n){for(var r=[],e=n.parent;null!=e;)r.push(n),n=e,e=e.parent;return r.push(n),r}function Q(n,r){if(n===r)return n;var e=L(n),t=L(r),u=null;for(n=e.pop(),r=t.pop();n===r;)u=n,n=e.pop(),r=t.pop();return u}function R(n,r){for(var e=Q(n,r),t=[n];n!==e;)n=n.parent,t.push(n);for(var u=t.length;r!==e;)t.splice(u,0,r),r=r.parent;return t}function T(){return function(n){for(var r,e=-1,t=n.length,u=new Array(t);++e<t;)r=n[e],u[e]=R(r.source,r.end);return u}}var U={slice:1,dice:1,"slice-dice":1,squarify:1},V=(1+Math.sqrt(5))/2;n.bundle=T,n.cluster=K,n.links=r,n.pack=F,n.partition=k,n.tree=g,n.treemap=h});var diameter = 960, margin = 2;var pack = hierarchy.pack() .size([diameter - margin * 2, diameter - margin * 2]) .value(function(d) { return d.votes; }) .sort(function(a,b) { return b.value - a.value; })var svg = d3.select("body") .append("svg") .attr("height", diameter) .attr("width", diameter) .append("g") .attr("transform", "translate(" + margin + "," + margin + ")")d3.csv("General_Election_2010_Summary_Results.csv", function(data) { var nested_data = d3.nest() .key(function(d) { return d["Contest Title"].replace(/[,\"]/g, "").replace(/[\s]/g, "_").replace(/:_/g, ":"); }) .entries(data); var haiwaii_elections = { name: "haiwaii_elections", children: nested_data.map(function(d) { return { "name": d.key, "children": d.values.map(function(v) { return { name: v["Candidate Name"], party: v["Candidate Party"], votes: v["Total Votes"]} })} })}; var tooltip = d3.select("body") .append("pre") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden"); var node = svg.selectAll(".node") .data(pack.nodes(haiwaii_elections)) .enter() .append("g") .attr("class", function(d) { var classes = ""; if (d.name == "YES") { classes += " yes"; } if (d.name == "NO") { classes += " no"; } if (/^\(R\)/.test(d.name)) { classes += " republican"; } if (/^\(D\)/.test(d.name)) { classes += " democrat"; } if (/^\(G\)/.test(d.name)) { classes += " green"; } if (/^\(L\)/.test(d.name)) { classes += " libertarian"; } if (/^\(N\)/.test(d.name)) { classes += " independent"; } if (d.children) { classes += " node"; } else { classes += " leaf node"; } return classes; }) .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"}) .append("circle") .attr("r", function(d) { return d.r; }) .on("mouseover", function(d) { var tooltip_text = ""; if (d.parent != null) { // top-most level's parent is null if (d.children) { tooltip_text = d.name.replace(/:(.)/, ":_$1").split("_").map(function(d) { return d.charAt(0).toUpperCase() + d.substr(1).toLowerCase(); }).join(" "); } else { tooltip_text = d.name + "\n" + d.votes + " votes"; } if (d.parent.children && d.parent.children.length == 1) { // 1 candidate contest tooltip_text = d.parent.name.split("_").map(function(d) { return d.charAt(0).toUpperCase() + d.substr(1).toLowerCase(); }).join(" ") + "\n" + d.name + "\n" + d.votes + " votes"; } } else { // top-most level's tooltip is just its name tooltip_text = d.name.split("_").map(function(d) { return d.charAt(0).toUpperCase() + d.substr(1).toLowerCase(); }).join(" "); } if (d3.event.pageX >= 500) { var whitespaces = []; if (tooltip_text.length >= 40) { var regex = /\s/g, result; while (result = regex.exec(tooltip_text)) { whitespaces.push(result.index); } var l = whitespaces.length - 1, b = []; b.push(0); b.push(Math.floor(l/2)); tooltip_text = tooltip_text.substr(0, whitespaces[b[0]]) + "\n" + tooltip_text.substr(whitespaces[b[0]], whitespaces[b[1]] - whitespaces[b[0]]) + "\n" + tooltip_text.substr(whitespaces[b[1]]); } } tooltip.text(tooltip_text); return tooltip.style("visibility", "visible"); }) .on("mousemove", function() { var pageX = d3.event.pageX, pageY = d3.event.pageY, left, top, bottom, right; if (pageX < 600) { left = pageX + 10; top = pageY - 10; } if (pageX >= 600) { left = pageX - 250; top = pageY - 80; } return tooltip.style("top", top + "px").style("left", left + "px"); }) .on("mouseout", function() { return tooltip.style("visibility", "hidden"); });});d3.select(self.frameElement).style("height", (diameter + margin) + "px").style("width", (diameter + margin) + "px"); </script> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js