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
forked from f94f's block: Segundo Circulos
forked from anonymous's block: Segundo Circulos
| 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
forked from f94f's block: Segundo Circulos
forked from anonymous's block: Segundo Circulos
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>d3-force-cluster and d3-force-attract</title> | |
| </head> | |
| <style> | |
| /*tooltip*/ | |
| .show { | |
| display: block; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .tooltip { | |
| background-color: #333; | |
| padding: 4px 8px; | |
| position: absolute; | |
| color: #fff; | |
| opacity: 0.8; | |
| z-index: 100; | |
| } | |
| </style> | |
| <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 datos = [ | |
| {text: "Emp", frequency: 31}, | |
| {text: "Pro", frequency: 20}, | |
| {text: "Can", frequency: 58}, | |
| {text: "No", frequency: 25}, | |
| {text: "Cli", frequency: 31}, | |
| {text: "Epa", frequency: 20}, | |
| {text: "Prd", frequency: 58}, | |
| {text: "Cie", frequency: 25}, | |
| {text: "Ent", frequency: 31}, | |
| {text: "Noh", frequency: 20}, | |
| {text: "Cen", frequency: 58}, | |
| {text: "Otros", frequency: 25} | |
| ]; | |
| var width = 960, | |
| height = 500, | |
| padding = 1.5, // separation between same-color nodes | |
| clusterPadding = 2, // separation between different-color nodes | |
| maxRadius = 50; | |
| var n = datos.length, // total number of nodes | |
| m = datos.length; // number of distinct clusters | |
| //var color = d3.scaleSequential(d3.interpolateRainbow) | |
| // .domain(d3.range(m)); | |
| var color = d3.scaleLinear().domain([1,length]) | |
| .interpolate(d3.interpolateHcl) | |
| .range([d3.rgb("#EBEBFF"), d3.rgb('#0000FF')]); | |
| // 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, | |
| r1 = datos["frequency"] * 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< |