Example illustrating the use of both d3-force-attract
and d3-force-cluster
.
forked from ericsoco's block: d3-force-cluster + d3-force-attract I
license: mit |
Example illustrating the use of both d3-force-attract
and d3-force-cluster
.
forked from ericsoco's block: d3-force-cluster + d3-force-attract I
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>d3-force-cluster and d3-force-attract</title> | |
</head> | |
<body> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://unpkg.com/d3-force-attract@latest"></script> | |
<script src="https://unpkg.com/d3-force-cluster@latest"></script> | |
<script> | |
var width = 960, | |
height = 500, | |
padding = 1.5, // separation between same-color nodes | |
clusterPadding = 6, // separation between different-color nodes | |
maxRadius = 12; | |
var n = 200, // total number of nodes | |
m = 10; // number of distinct clusters | |
var color = d3.scaleSequential(d3.interpolateRainbow) | |
.domain(d3.range(m)); | |
// The largest node for each cluster. | |
var clusters = new Array(m); | |
var nodes = d3.range(n).map(function () { | |
var i = Math.floor(Math.random() * m), | |
r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius, | |
d = { | |
cluster: i, | |
radius: r, | |
x: Math.cos(i / m * 2 * Math.PI) * 200 + width / 2 + Math.random(), | |
y: Math.sin(i / m * 2 * Math.PI) * 200 + height / 2 + Math.random() | |
}; | |
if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d; | |
return d; | |
}); | |
var simulation = d3.forceSimulation() | |
// keep entire simulation balanced around screen center | |
.force('center', d3.forceCenter(width/2, height/2)) | |
// pull toward center | |
.force('attract', d3.forceAttract() | |
.target([width/2, height/2]) | |
.strength(0.01)) | |
// cluster by section | |
.force('cluster', d3.forceCluster() | |
.centers(function (d) { return clusters[d.cluster]; }) | |
.strength(0.5) | |
.centerInertia(0.1)) | |
// apply collision with padding | |
.force('collide', d3.forceCollide(function (d) { return d.radius + padding; }) | |
.strength(0)) | |
.on('tick', layoutTick) | |
.nodes(nodes); | |
var svg = d3.select('body').append('svg') | |
.attr('width', width) | |
.attr('height', height); | |
var node = svg.selectAll('circle') | |
.data(nodes) | |
.enter().append('circle') | |
.style('fill', function (d) { return color(d.cluster/10); }) | |
.call(d3.drag() | |
.on('start', dragstarted) | |
.on('drag', dragged) | |
.on('end', dragended) | |
); | |
function dragstarted (d) { | |
if (!d3.event.active) simulation.alphaTarget(0.3).restart(); | |
d.fx = d.x; | |
d.fy = d.y; | |
} | |
function dragged (d) { | |
d.fx = d3.event.x; | |
d.fy = d3.event.y; | |
} | |
function dragended (d) { | |
if (!d3.event.active) simulation.alphaTarget(0); | |
d.fx = null; | |
d.fy = null; | |
} | |
// ramp up collision strength to provide smooth transition | |
var transitionTime = 3000; | |
var t = d3.timer(function (elapsed) { | |
var dt = elapsed / transitionTime; | |
simulation.force('collide').strength(Math.pow(dt, 2) * 0.7); | |
if (dt >= 1.0) t.stop(); | |
}); | |
function layoutTick (e) { | |
node | |
.attr('cx', function (d) { return d.x; }) | |
.attr('cy', function (d) { return d.y; }) | |
.attr('r', function (d) { return d.radius; }); | |
} | |
</script> | |
</body> | |
</html> |
���� Exif II* �� Ducky P ��/http://ns.adobe.com/xap/1.0/ <?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c067 79.157747, 2015/03/30-23:40:42 "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmp:CreatorTool="Adobe Photoshop CC 2015 Macintosh" xmpMM:InstanceID="xmp.iid:47955779929911E698BDF6567C979449" xmpMM:DocumentID="xmp.did:4795577A929911E698BDF6567C979449"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:47955777929911E698BDF6567C979449" stRef:documentID="xmp.did:47955778929911E698BDF6567C979449"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>�� Adobe d� �� � | |
�� �� �� � | |
!1AQa"q2�B#�Rb�r� 3C$����S�csT�4�%U' !1AQaq�"��2���BR�br#႒3����$�CScs4�� ? �� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � 3{o�������%� �lIJ�8ǹb�Njb�x�Rt̮Q���;ԝU����[9>T���g7�1�^ odK�ʞ�a���Ѧ�i��C)h�tl~�~���bEc���I�uF困���WN���T��l�+p�*f0����o3���N�p�#�zz�Ю��\z~���,G1����*�-��Vƞ)�̚�f� @�s{l����úqXY4�ٻn_��c��,��c��r�rl�g5|�O����K�g��6������q��4j�R��Ե�$�q����� r�zh��2���.��$��lk� � � � � � � � � � � � � � � � � � � � � � � � � � � � c���^�r�~����Oj�:������ ��.%fYK��g�Z���P߅��HEpTM�d�!5�V�������fܒGI��8r�'V�+�c�ON��� �}bz7�MN�k&�m���d�,�Շ����6�_�ự�1�{?���]t��� gv�;u�U��˩u���_�Y�~�i����M~�mԭk���$� | |
%�W�NS ���[�z� ����X^�*�w����5�n�R��/�p���*���s�g��x�ϸww-vY��d�ܚڟ�������I,�-�2�ͩ�_5��d��>.s�K�>��)EQ`�|ۜ���'��[�o�R͜}�oP�-՜^�g�)cp�^��W��N.2UOs��NV���%��F�V'F�4���oL���hY� ����� ��dM��Ϧ��֎��>��p�ZuGNC-�e�!���k�v}����� \��'���y'��ڥ��c_̻v�E-�� � � � � � � � � � � � � � � � � � � � � � � � � � � T�C^7KbVA?t�85��'@��#n<�i./S�|���;~숙���l�9���G�&�6xt:<���4u�ת�s�y��Oo/ꗿ�tĮ9$�B-6�U�����v���%N����B�q���Zk�wo���4��}����H!��tƫ������s��%��ƅ��~#�l>8ݱ�V7}�||��'j+=��W��>��\����w9��zw��5�hY���{~ܶ?��H'�7V�x`�s�̓��X������=�t�������E�̨yAds� �չz������˶����nAޜw�6��T�yzL�3� {R��awp�{���:������zs�^��zsG�e�˗1r \�J���<�V��R�ݴN�j�ώܵ�7�i�L��ڶjKj���3@�{I����:h����G�}{��:��ɻ���'�Eƛ�Ů;(\<�э��$w}Y���?i����Rq����>f�jW?Jo�p��B�Z�ܵ��r�%�nWK���G�O�����ۊ�v%E��+��~r�7YM�>�:��\���y�[wq`s�d1[�dk\���)Z��Dj�tf�F��ۖ�E��2����W��(N2^ }�v"������49���A5GC�Q�2M���ܞg��Y��i�k�������};�sB��b��HE��&��1����5��������^�ٹ��l6���,����n�,�Oǒ�s�gnIv��|����˖��I�RM�6��l � � � � � � � � � � � � � � � � � � � � � � � � ��Y�Z�/�n�Uk�5�y�ƏR�W�[�;�Q��ۢ��Oy���ġ�q7-���݁�'�5�$� ���e��L�Oӵ��)pS�͕|7�@��I@�Vr�#�r�g�rV��ؒ,.$8�b��-k�B���z�x �m�I뮱��~�7��M[�|�)�:o�����(b���s�y����[���� u�wf�:�����ݧ�w�+�ऌ����N�#~ğ%W<+�w��V�L��u�P�V+�x扳�Gc�� >] ��w�rڸ���ױ����'����Q��ۯ!�dK[Y� �wC� @r퍩2��/x�m.n՚�.-���_�x?���['�����E�h���=�Wg��J����oUd!^<�jW!����M�X�6�!����{�J�6�KyH��d���q��Q�����}[b9=Z���Xʼ��U4��k^; ��clX$��Y��-@��3,9��� `i=Oh��z�9�m,��#B���n㸿�rS�v�.)EE��c���B�h�ԵNn�ۅ���dii� �BNR[S'm��p{k�p�um��;rg6�J7EsrZ�3� �ak��*��f�����%_���<q�i�4��̵�I[�������0�t㝩s|o����F�%���ѯ�Z' ,H}ci?��`�Y��2�.�rt�x%�6��=K?g/�IW�+?��4�֍Ѡ@��� P�_!�ټS�����+{�7���GtT��[�2���p!�� ��hd�7����������_{+���5��V���&����������n�{?��9�ۓ-k9���%��]�4��4 ���^�^ | |
���r��o�;����{���ܻ��kZ�5��0������ujb$������J��W���N\�ֿ#+R�[q��:Gh���:��N��jY������~�^<�--���}���>�_�]�W=7;2i)<em�U{�ߌvևL��W�<� � � � � � � � � � � � � � � � � � � � � � � � ��nmÏژ���8��&���7�<��cu�g����_R����uk:NN�n��[����%�'D�Y�m����2���\{i�����+Vg������jN�6�Q���� Qf��څ|���An�������Z�vP�׀9�+O1Cc��d19I|.B���a�#���WF���i#N�������#1g5 3=7;W-�I�P��b���Oʗ�mS˲��C���Q��(�;qdd�=ͷvē�r�F�#lr8�E)h=�f�u�]52����n��<����(۔��&�i&��*}2��~�U�9�����ukc�V¶V��jH��b�^� �:5��ǧU�wFG�6�3p�m�6j��5H�;���pK~�*�s��r{��q�ֲkm�836av�ܱ�����ǧi��u��j��O����-##.[��\���� T�\*��(�� '�������X}����2�gE7���k���<G_M�u���������r���Rn�_�6� <x:ޱ�C�L{$c$���1�:�PA:�3�Q��M:�V�z��G��f{ <8}�FV�W�z�=��� #�$xG�����Zs��'+M���}�u�C��#�Yj��&����.��ݳs�q�'mK2V��|�npm���r����W7O�Eee���f5���7�����}S#'�y��9��8�������G[��q�� }��>�h��t�5�~��k[�e�Yݏr|���zwI��(���.2N^2�ʥ��݉��2�=��� ՙ�ٱ�p$�7�5h@���B��㦺 ��C7�����~�w�����4=M�ܻ���Zj�_�-��k��^�*Z�/8jŶ֒�Z�Nv��>>Odk�{����>��#�ؤ��|̛~�賟+�������' ��nLel�'[/����ת�$���j�<��<�n�^剸\����N��9�J퉩��i�s���gs����X���2�c�u���v4z~�Oԕt�Ye��ڊ�)��c��U������f�i7�yR�|H�m��@x 8���C�U;�<� �-џ���_#;�k[�s�t�8� �-J��̓��ܵmV��/�Ƌ�z��uU{C���$�a��Jŷ�*�!|��Y�b��+P�D�ȳ�8��'�����������}@�R�7�mF*Y�7/��{�(V����7 > | |
0_�j��j� .���hx/�ܹ��ɲ��nJz� Z��[Už}����>��ߢ��tnB�ih>5��� ������Y�n�\�_��σ:�\���k����nlY�$��J���c�=�Ђw���ۼ�1Od�ƿ(��o����_ճ��������=䢵D� � � � � � � � � � � � � � � � � � � � � � � ��� '�a�]+`�ڗ+M�4� ����;�Wm���=��O5��9���(��Y��B��>x�X�*�1څ��|D��M<�\e���Jq�[p���N��|Ό�?4��k���jŐ�Y(}�ᘟf�Z��e !��p!�k�$��[���z� �_q��6�f�T�3UI�0��i%���*���nj�?�U/6�I�����c_Y����$z8B{�B���R�/{5�W��zw!�.*8vJ8�n�[�\���q.[��$�ȱ���y4��A�D�:j��GQ��i*3����c����\�&�������N�����{�#�$�2H�]#�u.q�I'ĕ��JNM����C�@OxqM���%��mbL�ɤqԑX��� �-X${cڭ^z�Oؔ�en�������Rg\���_q���6ͯN�7 bJ��K2��ǐ���@����dB�UY枲��=��.e���[�').g9E��IF���������� ��3�l�x��M��:�5���� �$��i'B<z��ĥ5�n�IJ���=C��v�T.�_�K�q�jq�Z�,���[NYo����Ӓ�y���.�Ꮶ\K*U�PF< |