Skip to content

Instantly share code, notes, and snippets.

@d3noob
Last active January 13, 2022 23:01
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save d3noob/9662ab6d5ac823c0e444 to your computer and use it in GitHub Desktop.
Save d3noob/9662ab6d5ac823c0e444 to your computer and use it in GitHub Desktop.
Tree diagram with node images
license: mit

This is an example of a tree digram where the nodes are images.

Many thanks to nbhatta who asked the question of how this could be done on d3noob.org.

It is used as an example and described in the book D3 Tips and Tricks.

�PNG

IHDR00W��
lIDATx��Zip�~s��-iu_HB�0�l�!qĉ�,c.Uv�$��q ����P�C��T��N9��c; �yA ��\�@B�vW{j�����eu,:�_��z�u�H|�5�H�2��0'7�L�T'EQ|��{���}��
�|VN�yƢb���4� �1F�����JK�<�B�'Ϟ5�N� A��w� ���穩��x�ؑ;��B>3k�yҴ��平���4E�?>�Q��4�̛�>�wofYٱ�GJ!�1&ۜ��p��47��a���/�%��+W��QHQ4<�f���[��g��#!��`ꬴ��3�yc��������� ������?��KJj~�ʨ �6}FqrJ����4��v,VK��IZ�r �\���ŋ_p<x�0�
���1$���5ܺ �#*�e+_6��g,ZDW>��Mp��L�\�3g�zE�ӿo����ОnOt�+^6�"�1u�|�\Z
�-M��͕U��FE���s6i5��8��om�������.[e�((�<{&T=��>x���|����*`�)�Z]�����%_�/ �͙�r<�4Y x��vH~�ק�� ��d�'�O�ʲ2�Z:`��F�z�C�~�~r�k�����q�!B~�q�)O����cň�j�=[Z��?�4T�< � �}�=�:�>m3��Zݍk����g�÷O�B�fC�}�NHL�8q�� ���j��IOB��rp;]P�� L��Tg��~ �ݿ'Y�P��(�bv"���M'�)�(�K��۩����Au����ik� .��x1�V?�Jf�A�H�B��SB�I#Q�O �8�����:H� �*�Y�+���Y��-�s�D6T�DƐ*�<���B�iZ�Õ�/.�?�����g�CRF\>�d�,G�i}����G���A�U����b�8�.Y��}^�����$���W��C�S��OA�X0%%���ZK��l���}P��J�@x�l�:�V�
���b��gc�?<� n�w���{�w6UAs��q&�q�$p�߾�����8�u���,��831�N���/��-s��!Ƀ�4|}��T���H���_�-��M�')�ܴTj ܮ���z �ߨ��v? 7m��*hlh�^��65>��Ԭ��x
>۞.��,yx�m���{�~}A=F/!4 ��C0�DQC;Wz�� ��sF��HJ� s`�����l���Ab�� I���='��[�ͷ�34��X=P=q�^��#%�ɹ����"�ax� ��,`����t�7��ƴ����.#����X��1XS���j��A|]zc���Z-tv�� vA`ơ��Hڼ;��f��q5��4���s{�(v �+��Q��1DL�/��+�p���_��e���$F]:ܸ�ŨFw������C�����`T���<�A���T���j�������B?�q+�?li�a��ۏ�q�=�~o;Cs��&h��A���n]Y�T�pvp���S�Y`T^�佡�=��—mCƔ������C1CœJ�_ ���u�>x{e���
�u�L� �#6��ĘD�x�/zU��P�����t���s�Vmv����n�����k4��~V��،l8\� X��.5�Rp1bBX�(h�"����F]24�A�{E�ߧ�
0G��E���E��4`��J���c@�s���$�$���i�� ��w)�t�l��"�,����C�q�t�� ��<���
������QDv�x58� a��0�t�!�a��½�nkd�R�1+٭
6�����feL�MƨM�#�� c��ɷ��D1�(#��@�-�U{T���N���܆���Rzhj�C��Va�~_�����:�-!���Z�\�`�a�`���+O����=w�|�9I��`n���U��S��^x�8bu���-�v�߼y�p�+J6H���Â���}#���+���:������S(������,t��%�Y��4�:(x�5y�������2��}ذ������>��Y�^t�r��~"d����D1�8�� ���>������0B�� ��ttZ��wf �_�H .����-*.����'���
���������]�`J��[>܁G���C5� �F�sx�3�H��a����p�Y���ѥr�,h��S����v��$&$��+�D�%T2
�P.�KJ��y�D"7\(�Q3��J jO�����S��Cs���0 p�|������:�6��� �F?NIWa�@|\�N[ڤ d�����CFj��O��Qq�4`zj��[��V�)�c��4�� ����#ЬA �u�w�]q� �7�P�X�u���A���=�ѱ1��v���{t�Uv��Q�����1;����8(��]��*�|��Q�o��L*������5�����4|��J�c�p����\B�_�#ӌ�U}|���}���%�"�ek�
s��|���|��|#;+Y,$����" ACD�p����LU�+IoJ=�}���xo'q7��D��i�!�o�ҥɱ��:��%:�N�z�ұ��v ���D�����<�]"#�����J�F~bD>�xZP��?�Ψ��ǃ����g,<8IEND�B`�
�PNG

IHDR00W���IDATx���y�]U��g�����^MIeN !I"vTlT�YԶQ��vI�� NqDE �L*�L���92%�@H��� f�JU��t�sN�q_� ����Y�ޭ{�������>�>�?y���_���<|�־����9���Ը��xd�X!<��5}�@ok)���3~����/�skfϞm���7z�=<i��z?��{����~���H�f�j0h�� �=���c¨"�yϑ�7Xkn����y��m�!p���OKS{ɃK׼/v���K=h��� �0{23��eɳ[(��;�lb[
�pg�Қ�t�m��:�)�'I�����g�^�B`ѢE�Z�˂ 8/_hҿ�k)Ç��~x� ��h��?Jks!�q�u��<�������V�%L�:�my��q� c�9e4ż��axU�V���c�x-��k���;�<�9w}�0�]{ټ�o�*+�j�懶`T�Ͽ6m�B��/��ċ�+�J��U�Zq�"��Ɩ�(���7�pZ
>Ƥ���/*�N[�|�9�f�Z�O����>g���#����x5m-����'�`G_L���3�:�O�k:B�<�j�ܼ�D��DH �Бs|���ZQ� K��F�V$�4MQJ���T�V�_�l��̙�7D��k����9wQ_و����Ϛ��'�����?obŦ*�=m�}j�����Gv�̦*�\�,��8�-3>�����S�W��v�1V)e�B_J��e˖������)���^)�7�������}�w7�|�4�v�c���^�n����/��H6���韯f�^K�xL�q�����2�oOA�X��^D��wr�Y���L�9��x�1�9���Z |�5����?�{Q�ˋ�>&sgN"��q��1,z&�Ǫ<Z���{L4�ϣ|EO�Y�6�^A��H)h �9������{��"��J���08�pΑ�儵��K��;w�/���,t�u׽%I�~{�w�葝������P��/����� � �U>��!|�yX�J!=�������}~$RJ:��i�m࢓���Ic��1cHӔ8���(�����I|�1���J9|k�Z�iW-�������{+(�c�
��~�s����!�� ����f�y�{�g���%ξe��߻�U;"�-~>���R6�R
�5����R <ϻiɒ%��*�J�rY���v(�����7ox���v��gc/?*�d�= R�V�“� ƴ9���' /��1��W ���Z9m���ٟ�R��<�y�OEkM.����e��^�k��f������f�i*GL�s�w�nk?w���A���T����p��Gh�O��pZfD<�yG��N<,Ͽ���&��m�,x�X�tB;c��W�B�����R����B�y���裏N{�0 /ijjҹ\�����_=�� ��{62P\�h3����{> �Cx>(�VjP�B(��
����pcw�����?;����9d��1P3\��N~t�N��T�³�S����)��k!D## ��|�;�Z�r����W���G�_N�����Z�~^s�2����|��0JC���Sh%H�%��:�q�9�����>��9��93���[-s�'Gqґ�~�=\p�f�J�T�j������o��.[��i���_�Q�·ד�h�R����I��"�@j�D*�-�,�� <R�n �n�scW>1�g�P�u���٢��I͜�5�C;L�p�'`�l��yA�V�p�|���U)���5���� �cp �������0N Eԃ-6[H� 1�XI� ���l�U�ܾ6���UN�{]�K)���ΛzY�dc��/q�;����#�ۜh���|�p�̇~X�?����-�vO�0n4RH,�@J�͔��:�g�2aDR`ܾsٗ��[�g� �lV8 g�UaeLoOx�o���̱xu�I���� ����7Ó�Y�u��� k����^5�����==o 6o�#1^Nc�̀Zp� �8ЮGv��G����[8�C7�����l�'ߢ�Ӌ��{b����,��C �=�蚵�c��Κ7�a��]�W:
�����t�$_�nmΓ$$q��� ΀��b�k��l��X��3� �9װ����; �D"��� Gu:�t� J+�m��-��VRT��ޔj��;�:������R�,���mS��XkAfOM���/�eL3D�fd��,
�3�F�I5JgcAJV�q�o��+�}��+��]G�R�)j��q�o��7[�1ܧ'g�j/p��Q�z�9��m|���,������}-F�}W g N�$F4Y��(i16�<a �L*�=�����tB'���9G�|�Hɱ�tc�q�-J.���Yn^���i?=�k3���?�}5���dd��9GSΧX��N��jg�\c��1to�E�0ր4`S� �$ĵ�j�
��a��!A��Z��! ��QM�;�,p�p]O^�BBƶh.�ߌs���M ��^�Y
��C�'p�O�⊏M��I`�eW_�0JF�]={��ZB�`&ںD2��p&��IH�8��Ø8�I�R�v���s�a�q�k��k�>`����p��F���7��'�>�_.z��X�s���GŁL�g-;{�8\�o�!��D�F�4�4�4�%1i��D)QdH��Ɛ$4��ӧ�:@ט_�؟ĩG�cˮ���y���X�k-rx[�2}�H)Τ���� �`�(�B�i&��$;�����ԒƎC��'>[�� �u�~5"����|d-�6�b{���*?r��E�(�P�z���/��&�:��V!�!�piq�Kb\�����D[N ��녃�7��O��V���r�}�$�M�nim�i��>��c��I��Z:� �ԭ���4lx@�� �$��$|p�d�� �H��W�S�!ù���0��ݤ��2�;����gN�o�ƭ��!�B�vx�FKKjb0��*�2(���Jb��!�e��������K��g�^��n$փ�Ox��f6��C �J�9lY�DQı�&Sȩz�IH�i�I�D�/b� ���V!�BT�%!DUHB\�bc���z,o�m�����yi'�ڛ��cƌz�c�0�)�1降u����MH�*q\%
��]��"<Wó!�� �jF")h�<��?�iJ��$IB�$<��%�մ��_�;;;7�޽��0 gA�٧���=�]����QM�����@�z�A:��֡qHi8�Ȧ������B��e��� ���0 ÐE=KGKn��Ǿy�<��SmSSӭ�Z�0 �&僧�e�,����� q�I �Tpq��Z"��H�%�r�u��I�� �����7Ɛ$ q�!�j�r�L��-<�f ���-�~�N���]'��U*�("�c��5��J�2�0#c�:�*� �2.��%.\�Ϭ��������C=�Z�F�R��g�ѻ��[�YJ�\y�䱿����������[�.Ðq�Z(t�ʼe�kj`j8S�>�e\R�%�r��g��${K�U�LS�`9<��>��oX~�fzz�x����Q��W_�� 0~��˵�a�R�R�0����?�6&�oG`�y���
i]Fi�2�%\\��v���Y��'Vn�@����*;��Yx�j���b�=�O\�?/��k�R�^��j�J�Tb��^�>b4���)��f�[0���h��rŎ�/�<�b�H�P I�;c���X�pNa�B{i}m@zY�Kx 5��#�Y���f��Ѭ�R�w0F �<E�$��;��I���UViFQD�V�T*Q*�x��ٖ�ɕ���������Z���ÿ����B�V�\.S�T�=�y;����N:�=��Q�ha�2E���^I+�VqI�x������h@<�L�([�sU�:��`�J�B�Tbpp���ڛ56o�\ ���������������ݏ� ��b�\.G.��T��ݢ'yv����!=��A*�H �Uꛞ���ӊ(�q����S�ϝ5��gq@`pp�r�̃K��fL�z�Ͽw��K`�…ߴi�ua�B�@�Ph�c�W�} R���:0��E���<�N`�����?$!�mS}O��'��W�U�\�R��1�c��z�-c}���{�W]u՘-[�|�R���?�j��-Ú)���N����w҂��G��<d2���MZ'`KYzz�(�����J%��2�{��=�� ���r�J`Ĉ���r�_��[�jU&IB5JY��E@a H�Ypu�ԇ3�ޕ��>�܏@6N�s�2�� 4�wWo���[;w�}����p�*�3�<��]�p��-[�^ݽvC�)�C
[oZ�(%���Lb�LVF8KC6�dgd���_������c``�r��@�2`u�G�k��W�X��|��WW��ō���^��_�5 �E�`�C ���
!%Ƹ�˽�K��=GV��\�A9�͌�(P.� �����Q���W��G�^���^yMp�����z݆KK�RJi�q4�L㍤B*�1� ��֚Ԙz'���;N�;�ζ�`��|Y��G�����\���g��#�=���={έT�m��@!Ѫt�@�q�ӤI�.��ba�q� �:�7_{e�������3?�������޳{{����8�}=�iZ��P)-��i��{^�����葝��5�֛~�����x��?N��sF ������m�9rXG۔=�{G��;��y���:�ja�Qk�j����3�M��u?�֮��� �s�z�?<IEND�B`�
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Collapsible Tree Example</title>
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text { font: 12px sans-serif; }
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
</style>
</head>
<body>
<!-- load the d3.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script>
var treeData = [
{
"name": "Top Level",
"parent": "null",
"value": 10,
"type": "black",
"level": "red",
"icon": "earth.png",
"children": [
{
"name": "Level 2: A",
"parent": "Top Level",
"value": 5,
"type": "grey",
"level": "red",
"icon": "cart.png",
"children": [
{
"name": "Son of A",
"parent": "Level 2: A",
"value": 5,
"type": "steelblue",
"icon": "lettern.png",
"level": "orange"
},
{
"name": "Daughter of A",
"parent": "Level 2: A",
"value": 18,
"type": "steelblue",
"icon": "vlc.png",
"level": "red"
}
]
},
{
"name": "Level 2: B",
"parent": "Top Level",
"value": 10,
"type": "grey",
"icon": "random.png",
"level": "green"
}
]
}
];
// ************** Generate the tree diagram *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 960 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var i = 0;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
root = treeData[0];
update(root);
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Declare the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter the nodes.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"; });
nodeEnter.append("image")
.attr("xlink:href", function(d) { return d.icon; })
.attr("x", "-12px")
.attr("y", "-12px")
.attr("width", "24px")
.attr("height", "24px");
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ?
(15) * -1 : + 15 })
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1);
// Declare the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter the links.
link.enter().insert("path", "g")
.attr("class", "link")
.style("stroke", function(d) { return d.target.level; })
.attr("d", diagonal);
}
</script>
</body>
</html>
�PNG

IHDR00W��
�IDATx��Z{pT��}�=ww�`��$��%)���P룕��V���� :�hy8�kc+-��0c�S-�eh-U��"�/� ���Q"��d_�{����n0$��Pp���͜��{����w�s~�;gC"��g�3 �T�g���6�ZCD�R�%����F�����P'pDԭA����1f�����A��+F��ߜ�ٚ5kP[[;Z)5�q��;�Y\\ �uɲ,���("a>�lNw��H?S(ʛ3g�ݍ����cD䯫��P��;�O�6m�.((`�u]˲P(���Ɯ;�vϧ���0�b0��${<�bŊ�+W�B)U���x��NK)��ZX�p�w�ygDk �Tw��K2�d��%K.D*�'"۶Ŷm���\2f̘E�P�D»sW-��p�%Â�[� ��G� ��/7��{��ɤ%"X�l�M��g*˖-�4���7�
���9����z 3��l��0���8H$��2;w�\q�����z��X�W���7�q���䗿}������x�u͍ �m�.�|^�����u;��T�t� ���dÙ��1&i��1�;�N
D���555����8���7|�y*q�7��7#����o�$7�"��8�D�v���v4�Č1d����ѥ��$;&LW��d4 ��Q�&*\y��+&� ~�v�k�&.���T�R{ @{ O�Y�?���ɷ�|G[���Gwp�vz�r7�%�ej�!�m�����W �BR� ��\��#47�����>��xnj���}�^��w݈r���0�Lv1��'C �J�|�\�Y�᱁g^�����e!K�i�p�� ~��ȇ��_!Z��|o�j0S(bO�p�c[�^\� �u�b��Ӊ@�O2�@�`0�����ݾx�u��=��
�Z��T���9�o��#ӡ��`Pս>�a%2�G�.0j��_}m�1̴u�r��5�nlۆ�`�ҥRQQ�:�s��Ո�`��"�p���淶ahQ ���-[?@�'O���M�7�"��N�0���7�d<o�B����zܦE�F��� �W�
�ي�ѭP$|n���L;���U�"G�y�vK��IM�nS����FYY�^�h�궉��l�Gפ"�v#P�.�R�&�0���%喳�����X�.XP���rWk�5�"�ߏ��2@�4�I8z ��^`O�A����%`�K���`�������hHE �s�^ȴ1��d��������e��xM0i4�J��&��嬿p��,�-������׹���@� _�8���p�h�Aj��؁���3��"�1�YU���\��"�A�7:M5��"}g"p�<`x�BK �Ÿ��X��3[��{�\��c ��L� #�6��8{ p~� e�����;w����cHDzC '���b/������0i���`�@�ӯn���#��nȶm�U���7o���,Z�ޜ���,PUU�׭[W `�L����5�J������h��إ�֭������`�d"�q%�D��[�p8�={6=��3��|�όa������7�� ,� \WX�kZZZ&M�6��Ç�����Y�(u=��y?*++7fv����ڶ-DT�d����d��ğ��m���}��l��G�W�̘�j�L���P:����|�3�^����㵋��`�>��_&�lx��g��-�~���Cʀ�Oܛ:C(�]�r�p2��@�cO/|x,�o�V���-�;G�"πa�Q@�<��`����A`~5P�C@���:�D�8�u7�I]}Q|��{>ؒo�>'����Z�B��a���m���?̶1�8���-˩��j}{�ol:���N:`0��2��q\=;�˯hB�� �``!�� R>�S���:�ӷiV�z ��=��&�Ԟ�SZ��|c��R�Q ���ڛ� 1`�0(�O x������>���䨨��4P�q6m*@4ʰ,�9Ga� �WRɃ �f=垜u `G�o�>D�Q""�Jg(�b/��A0�R1�ք@�q��76��;���@�h�ɶmY�re^(�ض �ɼa�2���2{�݅��N�|i7R1<A��iD"na�V���*�� ��D�A��)��Q�)��ȗ~̨D � �U�����ϧ��nƏ�ri+M�I��v���*�<�����1h�ޔ��)��L�rlL?ɩBJY0^����P�{�յPSܥ�t�� @�{��d�1��W�b��|m���72@��p������o�~�{����-����I^���ג7ޅڱݏa��H|��2����+��ٲF �W*�Ĺbp1W�ͪ���HۗŲ�`���|녍����r����l�s��uͳ&^�(�Ž9��d.k,��ٶ ۶;Vpב۶�e��+"Fǚʣ�����r���9oʾ�#o^{��u�)�AN[p��W���i]��GDN'���2�1ưR*� f%��ښpǛM�W�X,�JD���޿�[��}�v  wYye[�G�.��|h��c�ʃ�E�i���W/_����x�ȑ�G�n�i,fΜ�5T3�Y�ݧ�0�e�i�1c��0�rh;*�~����IS�;��=�裇JKK����D�;���DdD�*,,|��Y&'�Y.K���W "��H+3"c u��NŲp]���UB�ٵ,��h�ID�\}���2Y��_�3l�8��_�Usy0���IEND�B`�
�PNG

IHDR00W�� 4IDATx��]�]�u�k�}νw������Q���B�P�Ж�$��4Q�(J��JmZ�VD��/�}�xhHK��j��"J) ( !���6�mx���x�ν��V��w��x,�JR����������Z{��x#/���l�@X���=T��j�.�cG����G�8��ȿ��e�  �C���EY��S[��a�.�336O5��D33��������_����T]|��dkއ��?��E� ℁k�ʒ��Vλ�fv�#�� �em>�S�Dh����<q���kS�V�E� `��ge�ս��`�9G��Rb�7����߾�-���io�ٙ��� �s��w�-�OMs�d�N#���+�̾���f��b�8+�{��U��%�^�ˁ'��n���9���^� v�
'�g�8��~��29hH"T��>F{b���6p.kΔ����${C�fqS�X<� K����=T<S���WX9�C�3�O �w��|1�]㥣<��*��i˹����
ć����H�N�]Sv�9DK6�W̿��/�Dh\rTAX�D��BK"P�@0�zK��D�h���.��b�+�a��#��Im�<"KA�YzUx� ؀�h��"A�N�$�0�(B��4��+���.$�j"�H�ᝣpF� 8�t�/ZH�_B���K̅��~/���9���[��I�CړH��c� k�c� VL��B�P�%�Y�� "�Z�MGû�!8q�,�F����.� o����A;z{�����ê>��`�B��n�WQ��}Ȏ���YdЅ�ϣ{�&��:�r :�N�Np�e�6@�֜*�)N�ƒ�"8'��q����}֙�����qd��=����CقT!��}�s���]n5�휝�w�F����`��+�q��������}"��\am�� �$��=��L��3ȯ���qq�K {�8�kBR���}�O���!�Є��_"� �|J�X�R���G�_D����A�K�I��i�����!6�,
�@z �[��YHM�ڎM,��� �V`r+�?B���B.��>�
� �+�P4�wC鯠���x#�����i��I�!;Y� 9g+�����>��=��,�����S�S��W�O��O��#Nr@w����R6� �\O��d��"��C�O��$ �}�\�����;a�`2J�{���!�r����ATA���4�X���A�~�t�G�} <qg~���a�#o���©�� `�-j�%N�ˌ��4;# �����/@������� d��\T�����9�?&u�x�k���H{�^C�b>C���܌����~=�9������Wju��-\{
ٴ �`�h��B,��&�� �����,T� q��9��bB͏\�����YaÆFjj��Hw�ˈs�����=���ǎ�~��X\N�B�<&+�`y����S�R��6!���>��Jw��b#���γ͠�����9�3�C2������U��۠��1����}[>�6Ͳ!{ˤGoC})��i���v�cM�[|%p� ��)��]@��b�g�� �)i�Ÿ��>ҷ�����8��Y-,E��ˮ�*�1���ں� �Û�CE�"��X��f�x!��6��ٻ,��'�"��[�]@ZS�n��(m�0�R�PbKGpW�&켜�@,ؾGH�>��m,�ӄo^7�b5�p�*�E�G]������1́\4���@��7��aSD�����{�, p�>� �8�-�R�5��B0�A��ف��,o0�u��୰��4ơ��]�����X��ߪ��Uuv�)�/ k��\x q�-h9����� �3� ����G9� 5�h�@�>�=yҚ�Te�Μ���p��FD��Ӗ"���
�Կa���MA�8�]�Λ��
l���3!�s3�h���@M�L�=�o�0a58��1��e{����޿A؁;�8�؝�mb��%�<�Q�� ��0�C�[�A�1�����b��-��>�������i8Y�R�A���" ����7�6��P������ �����(���j%��=��7!활��&�k��˜�����ts|t�ɭ�nh�]�p��l$�� X�$!��aX9�Jf�Nٯ��=ti�=������dR�{��V�b�\|=r��)!���?[ _<r0��:���w��Au���/D?�L�֌�aE��O�|�؂Lnɱ�FL���å�]�B��*E��7��0�)���E��"<� ���f�o�ov!q�I�m*��"`83��]Yx�<���l����&=�70X��]�83��
�Y[ ,�l��w�<�MhMf*3��3745ޚqڨ�E�5�>s?v�M� \�X�C_�~��"M�=�7�{�I�WoB0�l�o����
�M��%�{3�5�)9��5c݆�$:qhk6� .�Dk���/R�
��O�51�5�5f�3�@��]X|�6� �;��B���,֞z�Z�`O�O��ӹ�f���F�z3ؓԭ�s���\��.�9����z�u=n��06��{ }����q$h�3�Ap�i��/����u5��R\�����x�߉/<�pEI���7���6lM6lQ7�f��6.f(�Q���s؁?�M\��L�~771�)T��z�+��5'`���g��j���s����ɔ��ֲ��Q��>��L�jy8��H&D�28����4'H�P��y۔{�T�89��l�� � ��N�ڜ�0,VY�PS���a��qg�<P�xbJDuD�3��A���Z� � �:���dq�X�վ͐:d���f&�2��Q�ATb#��8q8K��i����� GB̡����ȉ�DP�5�l8c?w\c�zD�P�c(�ѣU2z�ҷ@?�hS4̴ۣ.�K=�ٟ�-���Ô���;O�Y���;�O�n��Ne�8E�'Vf�Xd%*��o�Ak|
��8�96Ʀ+~��G��| ��(� 8�d��6.��0� I�}u,�@��N6]�a�#�Z���_�﫸D\>���1��� �Ŏ��c�B�Z�r�r���^jFE@�6~f�s/d��eff�\c�͓���R�#���J۶�co��J�O�"�M����#��i�]��Q��X��x�d����cuq]]'�!%eg�i�[Y"U�n��ֳ�^@}�;���{B�E�F�Cht�p
�9�O��aҤoP�'so�Y�����u�Zs�Qe��|W�*S��E����?����i+,�?@EIEND�B`�
�PNG

IHDR00W�� �IDATx�řˏ�u�ߩ�w^�� CR��!�)Yo�2%K�H1@6^$@�H �&�,�N6A�A�G�/��������(Ò��M��󺷻�d�=R���) ����S��s��U���d&?8n��4�I
y����.���0��\&�߻��[������������ �����n�ٺK[(H��V��Y�œG}7Cȧ�~�o�o���}�^�7f�K�V�0�O��.̰{͈e�����D�{"m?>mOތݒk�Q��:��+���,
�X���Dz�1��Y~KHN�AǷ�S�2I����ɲ��m<����
��h�g_':�%&�Ѝ䐜��L���C��Q�Ѝ��2��᧟˞�ʢ�Q��K�V֥�{l��NVq�@~o'�z���������[�!�X|�3�'�L��Iq�LE��Pve�b��t�����]+[�B���i����Ë�%�R�zlM{,�ݳ����{v=�ka�wO2����@Xس���ف,�� E�����e���dw~�Γڂ��Z�{�����t��u3sIYJ���#�,��9ǎ�8- O鮓�]hܧ����B���4+�2 f,,�9911�s����[�g�އv�^X��̬����8 ,�@q�����=��(���� `��c/�Ǻ)
�{jxc G����],����f���� ���AN�S����fc$��
r$� ��V���m3� xh&?�ɂ%�x7Nt�y@��=�(<���=0��<;���;��9'�P�����cK���Om��z��t�N8|~� �����$2��X���X�;^��?~5t�pс�C�6����eX[����T�K~��=���N]���;v��V�Ĵ�� P;�:Lhm�p���wɖ�%�\Ī5<�B7� NL��N���t�^tG��S9��Փ�C�h�#��]����3�M��pe�-���=>U�v�G� @C�ξ:�MfDV�D�p��$�Er!P@Y@����4v�Oo����׉�ؔ��vp�Tk��@�]�o��͆ �d�����3ٙ, ���K�p�j�����Y�PẠ�ԭ{����jA��v�g�u����>?a � ����l���kU��/�|_� K��r����W6e� �{�� ��$�z�‘dA�ֈ�f�&c
�`����x��7e�$p��n��]<�������O��6a�at�%T&��]ѝ�J�(��ы*����ڇ�� ǟ|��������>g"�i�������3'b���3+G1�r���9����|L�
�F� (
R�˨5�j��˭�\;���W.�\�tl�ž�??���������W�f�*����ڿx���x+W��h%������Q����#|���
�^ϖS�3"gXI�r裕+����QUYQd�,>����~��*����4��FH�i9��8�j��! ҈�~���G��y ]��k�S�c�U��ʑ��*�0�<��"Ϙ��~:�����-:�!9��dO���Nɲ��V�V�o��}��2�����@Jх�B�סɑ�z�0����;�x�������啡YH�zc��[Z�6b�mq����ヾ��7��~�w���+]O���=��E\�$�`��;)9f��H�\��k �L�`
����߼o�'�W�ļ�i�y}5��o��~����3��o��.o��9?���__�v�>j��Z�����<(aV3-ݘ������ގ�p���������/�"���z�ڏL�g����v�o �� ���K�=FJ�����w(�ƥT"��H��R��<��U~W�j�7�.��:qY���5�U��H�)��;��u�}���Ӛ��՝�a�+b��������/��ɛ�:Sx�sd�#��I<9)�7�����X�<"�]��$�� ��_�ڻ˗XuHɑ��
}m>���%���5`¢��׾#3ÇV��,�Қ��E瓷���S~���|��7����J"hs�� �CiN N�!^b��9���'���YY�Xn��r�o��g"�o����[�?�#n]��p����S��l-9��t�dm8����7�O����m���G)'vw�cۡӇ�%�Q5r����G��.�u強.�'~�>�KpE�BtJ�������:!f_��/��y;�ݬ;�D���_X�Ζ�������j;�� �m�9����`忈X �����i�:BP&��K�'�z�����C^8�������*�OG��ր��'X���U~u=B��`�^Uxf�
y�e����U+M$brbrwH&bV�)�zL�{�Dnj����O�C��S�b�?>�Ⱦ� �ݬ�oHO���;DQe
�O‘=� 0\o,cM<����(E����"H/�F�kOk��~G���.����P�Sue暑�4�~&��x�����nІ�BY�/�û�T�uT�C��'�z#6���%�1R�ރo, !9����E��^��Qh#�`9 ��z)�;�.�oY&���w��{t�ڳ(kaD �2� & ������Ѩ�^�� �C���S��(�T?+r�=�� o��u�6�!��Y9����g�5~��ڒ mP�Xr�S�zO�O]�_�J 5�랠1�V����U<�jZ,k/i�P�@����X� �Z�[~R������pT�؝n;���S�/� É7H�P�����HXA
N��l�6$K�F�� yZ �'��{xl�T��Bӷ@4Gĵ�w�|[m�&��s"S"Kv�a?���v�3�6� է������Y���{�]�I.���X��9�:��j�T�pޤ�N=�K6�>HϺ�M4ÚbCV���@�Y}~f����c�2 � ,֜2>z�u���h1nm�6R�A�"u���d����Ӂ�P,!��iT%��*���ެ'�H-�>
��A4�Q� �@��:S�{�{�}��.��BMhJ��+�ѩ0c$##�p,���M,����o��|ݮ���o��g@�)����y��D*f������zT�Mɏ_]y�oL�Xj��`�k��=�������E׍i��)��M� �ڼ�zw���x�?l ��Z�({�i��v����h�w���A_�F�M�v�aLQ�!,��P7�'}ր ���t�¯���/���s���k�j�������l���0IEND�B`�
@kdgosik
Copy link

kdgosik commented Dec 9, 2016

I'm a noob to D3 also. I enjoyed the well commented code of yours!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment