An example of a picture cloud layout, derived from the beautiful word cloud layout by Jason Davies. Follow the links for more details.
<!DOCTYPE html>
<meta charset="utf-8">
<style>body,html {background: #222; width: 100%; height:100%; padding:0; margin:0; overflow:hidden;}</style>
<body>
<svg xmlns="//www.w3.org/2000/svg" viewBox='-10 -10 20 20' width='960px' height='500px'>
</svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//wafi.iit.cnr.it/webvis/picturecloud/d3.layout.picturecloud.js"></script>
<script src="//davidbau.com/encode/seedrandom-min.js"></script>
<script>
Math.seedrandom('abcde'); // define a fixed random seed, to avoid to have a different layout on each page reload. change the string to randomize
var pictures = []; // pictures that are already displaced by the layout are pushed into this array
var svg = d3.select('svg') // obtain a d3 reference to the SVG
d3.layout.picturecloud().size([25, 20])
.pictures([ // define weight and URL for each of the pictures that have to be displaced
{weight: 150, url: 'van-gogh.jpg'},
{weight: 35, url: 'kandinskij.jpg'},
{weight: 30, url: 'magritte.jpg'},
{weight: 25, url: 'miro.jpg'},
{weight: 20, url: 'dali.jpg'},
{weight: 15, url: 'klimt.jpg'},
{weight: 10, url: 'mondrian.jpg'},
{weight: 10, url: 'marc.jpg'},
{weight: 30, url: 'van-gogh2.jpg'},
{weight: 15, url: 'gauguin.jpg'},
{weight: 7, url: 'dali2.jpg'},
{weight: 8, url: 'boccioni.jpg'},
{weight: 20, url: 'kandinskij2.jpg'},
{weight: 64, url: 'kandinskij3.jpg'},
{weight: 24, url: 'kandinskij4.jpg'},
{weight: 38, url: 'kandinskij5.jpg'}
])
.padding(0.2) // define the minimum distance between pictures
.on('picture', function(picture, extent) { // whenever a picture is displaced, call this callback
pictures.push(picture); // store the picture into the global array
draw(pictures, extent); // call the function that actually draws the picture (more on that below)
} )
.start(); // execute the layout
function draw(pictures, extent) {
svg.selectAll('.picture') // select all elements having the class 'picture'
.data(pictures) // bind those elements to the global array containing all the pictures that have already been displaced
.enter().append('image') // for each new picture found, create an SVG image element
.attr('class', 'picture') // assign the class 'picture' to it
.attr('xlink:href', function(d) { return d.url; }) // set the source URL for the image
.attr('width', function(d) { return d.width; }) // set width and height (that have been computed by the layout)
.attr('height', function(d) { return d.height; })
.attr('transform', function(d) {
return 'translate(' + [d.x-d.width/2, d.y-d.height/2] + ')'; // center the image in d.x and d.y (also computed by the layout)
})
.attr('opacity','0') // fade in animation
.transition()
.duration(600)
.attr('opacity','1')
// update the SVG viewBox using extent data (provided by the layout)
svg.transition()
.duration(600) // animate the update
.attr('viewBox', extent.left+' '+extent.top+' '+(extent.right-extent.left)+' '+(extent.bottom-extent.top));
}
</script>
���� JFIF �� � ' # / #'),,,!150*5&+,*
-$$,-,,/-,),,,,,,,),,,,),,,,,,,,,,,,,,,,),,,,,,,,,,,)�� �" �� �� F ! 1AQ"a2q��BR��#br��т���3c�$Ss��4C����� �� 0 !1AaQ"2q����#BRb����� ? 8z��*U��_SG���?鏞q~�b����IQ��5} ��&1�*"������U�.� ,���GA��c9�fH�cH9$�EZd�w&X�(dz�C#� ��|�[��]�O���ȜH�N#��-d���2�O�uh]�~�Lot���=ŕ��x�E>PPޘr�����}2�k^�ԦC`z��m��FM��3_j\39R�*�MCHiHV#EFxo��P�E�&�G'���4�V��� ��5\I��U��~�&ɋD�$�ePHt��`�P` =ga+(�J����A1�=Im�o�գ��N�O��3�#$�}�i71|E��]�C3Z�L�J®���^GR$(�ly6�����׳<�f��SMؙ4�.���A� �భ�m�.h䯵�r��f���*���(g�N�v�-����N��J��ѧ�"�������!�hV� �F�O�E'�>Gq�$�j5k?�MK:��|M�xg�q6l�:�D����^�{ą��1�����1i����r̄�Te��o3/�*I�����<#ٶ^���U3�>b/p�X
ȓ|e�LĈ�#���������Ԫ��7u:X�z��X� ���r��J_����q���>|���F�SE�D��jC�3 �����d��YCҨ�1���}1�"�����k?��J�G�WB��2}t�4�� ��1_G�d�tIX���v���#������w]�f
H,�7� o;�s>s��W��Sh��>gx�v�5*�D]��[\���$�>yl�4���c�Hطa�/��uzl�r'[w�q��
ds>Tq�[��鍩�~3��f���$�$����L�JFi;�=ъ�Ȍw���wMa��^�М?(ʲ���6鲅]�|��3BQ��2F�A��W!�/=Kz� � ����f��i�}�W� �*��Q�Gі?Վo��Ǿ���N�>���|���a����1�Yԑ�f�����?/�lEJ��
T��2פ2��Y��OX�'�����f����%I˖�7w �1bTi8�GT��K%-F�Dm����E�N� ���j�W-Pf�Ԝ(j��A�&77�[���P1���?A'��J:]1���m��0?=����+)��=I���6ÜG�3͝�O/HxN����'�d QА{���9Óif�<V}`α���&���c�Ҷ��ȷ�ܯ��!O4��,Z��Ua1 SԴ���݉ ����}v�n�����N���bX���&%��k.2����$@h2�-��75/F.�~I�|�C'�H�z���8��y� �-\�N��
A� T���6��^_�8��gbͳ]���� ��>*Tj�i�(@�;��|g��Q������.i\+���Y
"��q���|0����6���=�߀tu��m��&'�;�OH�6��s�����"�Hh���=`�;�u�.�Ylý:5��t��L�'qЉ�����Us�<�N��T�< �V��T��&>X ��ĭM*�`��H#b�o�� |���U�3J�B��) �TԤ�c��L`˗8(�e�PRXSR'mD�I��6��GJ�AW{��)��Y�I�̜Ws/������`���G�� ����p�#mO�x�P��2�ݜ!r��ŝ�� �j?\d�$l�+
9��'�xt�R�4H;���1m�2�*h��@���@�M� �3�e�Ǫ�ʹ�$�OU����=�mĸ�S�Te�U���E5vb N�L�1|�OH)��|_��+ �J���LyI�$�zLmE���l�|�?��#N�^���I��z��1�V"QI6��~�t���\-�t'�\��iӧ�D,z*�۹h �ɰ�y��x�N"�h��D0(EHZ@�zo����>���V��
�K�b��q H�XHX"G�ⲁ���-.�굹U�\$�r�������V���%��ҧNO6�b���*��`��������ɞ
I�֘ �t^�;��܈�&��.?ci��^l��*�" 0.{�d���� X�QK,���Z �E���c!�J�J�fPY\�'[�kP�ؘH&1�3UW9F�f����58%���z��<I������� �{�$!�$�T ,�P��n�Ws6��f�Ն�y�yS�?���6�Z�Ƌ��41*��P�������Vs�����j��grAa���[�M�oG�
i�{~w!�9�V�2��>��a�������/��N�����Ě�'��鈹۵����0A�ER!��,ӝ]r\p�R�e����xX��o�"`��b��U�,�
$Ėi�1'ɉҹYi�£��ic������q�����7�fg��=H(����XS@���S�]��&#��sI�Q��Ug��
��7��i0��u{.�*/A�P�.JD�ԢB��ʝ��S��0` �� PUWLu:fX=1�[�����SjuD��B����a�� s���-4E��Q�ʼnc�.o�8��^%��R���<�6�:��Zw���u�I�,�v(��}���+�1[�fQ�Yj����i�� ���� I����@�S��
�a�}�AaԎ���y�N�%�(�$���L*������ �`E��]� @�e0�'Q&�opd` |�;np�l�c�O�N�#@2/'�-�|qZ�Q�¨�A�P"u�7�b��q����N�6>/� �qb ����� &����s�����Sc��IV � ܛ������Tf�b�?rĕYas��I�>�yղ
�"�T��'H
E�}�?(��r��u��A� ����n$�6�`�9%�Z2u��8��V��K��G�#��^E�Nu�� \������|5���I�0���p�n���p�\ɛ�Up��S@o�����&{�q���rM��"��4
4bK�l, \��|y�9R@�q#��ߧH-�l�>B�-J�$jH�H"F9c�~�U�5Y�WJ�j�[T�LDlsZ�E,vQ'�\<笍Edz"��C4���%YD���6;l���J�P��e������W�wbK[Xz��0��4���B� t�A���v@�
��Teo�A?䏞4��w�Ԣ�:��A�
� �
�+1�G�YL�Sut0�dn���tU��fE� ����_�8dz��Z�w�Qt��#���9���:��OyI:\vh�U5��(N1������Q��*i:h����W� {?�g�*��R�n���4����W�R�R�N��`RoI��~6�VV� ,J�T����q�E�ԝ*$��Ȁ=I�Vp.nL�B��F�ΡVgO�I3e�x�,x�]jR4� Q���M�a��
�di���B��̞�嘒`煍����u���%@��i� �.I1�!O�LSq>y��#W�+m4����_�ל9ֿsG,r������On����G"�8�]�>v�-�/���*L@c`
��m���']ޞے����Z��V�S=��T�|A$D�73�Y�
��(�\�"5!��IQ?�p5���A�p�b�>Q[1_Ũ_+�R{A�������|�[Ǡ�jL��]XRJ��dX�t�<�M���M�Ms�8�����^��S'�`��{��13��s�e*~�)�ԣ|��}E�X�����y���{C�Rg�^��K-jԗ2���W��N��Zdz�WL��WqI��M��Zd� [X%A$u���8��|e*�L4
F-qx�����p�$�r Ѫ4��Ɩv�c��8�~l�fVebY�:]�D� �ۮ�S�-Δ:̫�����j4�(��d�A3�� j���c�i�CM�MJj�Q%I;�7@��~�x#ңP;�+���
�F%H#�����w� _��m��Ś8�k�����,�9��U����1OI�c�>��ݳ٠�"�l�n�
��I�8���+U��ԝK 03�Q߸��)r��}�+�MN�!�g����g;��d�QKJW��{��c.�Y�z :(��w'��֚O���/=B�t|9ij5�CIf�S�w1a~������W̌·� ��h%�)Q� v��\y+�n�|���,�zի���Z\�&ȶ�;M�6��R�!cA����Z&;��`;���|��Jv�Ci��$��d&d�u� X�y'�}pYopq�ҩ �ة�9 )PT.��5~���������ڹ��>�DT��\�X���bl ������hӬ)�4j��!;�%�t7�lzM�zJ:l�W��ڇ�}��Z��)�3��=�a68���\�Z�\��n��~�"� L��^:U�~�5�,�D�`�{�c�1R��`z��
1i,���� �h��J�9��(yg�V���<�kme� 8Q1�E�a'�p>S+V��^��������d܃"`@=��n#a��~Bq�潠U9�@SV�BD�b�ch�k`�s�J�Aʝ$�@�� &�� �ǘ��eC��7�� �s���ʓ$;Ė���Rpɨ���
��ٕ�Yč�qO��������<"YZL�1>V�y���g|�r4\�MmT�*靻���a����s���I�0u=e��%O��?��e������yK#Aq��Q��-߳+�&'���~��劬x��ǿT'�ao��=�nl��*���g����1vJ�rd�`1���X��k?����c9���R����Ȫ��R?�pI����,��1�yi�w>��d�)��\�FE��E�C�3q֢���"Y�z3��.
���3�(��/�T92`@1��3^�;�1,�I$�I2OĜm����3-���K3� �4����M(%Ks#�n.��?���T=*�مE��;���W���<8ͭ!PXe�>�G�� �b_�t�4��ԍ766��Ȉ��q��3�E�����lM�#���w�i�� ��\~c��������ԉ�Z6��v�N�#e�GCc��o,��OA����q��R��q�JM&SA��Gn=��v��N_0��O��p����},=qe�<�G;O�yZ��tG�Hـ��&�`gY�F���� ��o����ۘ#i��Q�M:~Db��ɾSTˊ��s��2�U,��b�H�C��b�zyn�>�AY�������� �O�/��}H��y�:^��:5�F�� hf|��T�ܦT�t����e~G˨�-6���o;r����Dy�O�?N�<W��%���,�
;��W�=�����Cf�@�e���{�3���ƕ��u,���M ��Ic��ܓa���
��H���yi2k�UsZ�]�a��V!g`}�Lu��챦�ZIf=%�c�O}� 䲾#
�B��;���"�B��M�M�9��U(>T.UA�V�`,��A�����jJ ��`�HI$��&p'�
�O�'� ]_�+&�#W�ĝ��j���aI�G�>����E:�@�vY��o�A�� XV�v,������+�Ќ���|��5�V�è����ؔ���� ��/:s��Ӣ2KZ^�� ��HO)���B-���Ei���C�8����D��TR�
��ر =I�\C��ѲԊ2��IR݄�2L�p����k-R�R�L���|�\q�<r�!-��u%Gn�#؏jw���[�k�s����)�էPb<��/"�D��m����+x �N�gJj�^
>Jd��~x8��K��"Ϭ�@�j��C����=L�z�� .g�*��*� {�?�������ӫ��u
I�u�#��� ��ziS�$����=�Jѓ��l�J���ЊT���cK1mBO`��<��UQgEEiRI ��+&�� �k� �C������R�,�˥ ��6�PY�;
��pR������J���jb%���u�I'�v�}�\;'Pi>Q��W�}q�k���h���?�끪ʽw6��N.2t<:kL�*7?x�?3&=q�s'"�+�E�R�=I���T��*��H'��xƬhǙ�5*AD����8X4���������EPbI���
z@�ntܻ�'�h��KJ����A��pW��%E+QU���؍G(��M5�H�i�*�N�p�Zj�����3N���C��`�Q�V"v�-�n/w�s���L��xn�H� ]#�� ]�W[,�Q���T��`���f`w (8��R`���ua����bF���X L��?3���3��7���^V����F�����ۘ�O'R���M?�ow�v� ��l�o������
}�p/�g��� hH�>lW�8�yߓ)�(˗W��XA�IR;�����fjE�"| �A�oh���:*24��ԵY[(� 12�h�����H�Rӹu��z�N�ѥ:nےI%����b'vu"��>Q r��A�h NͰ�dz��v�Y�ެ*�ԁ\�x :�'i�u�kg�&��4t����n6*���:I-�Q� �,���X���Uj�lK�c:�#uz�i�����H��@�'��`7�x��T���Z{���AУvL����hm6;���� ���P̤������'�@<������T_�_�3�Մ�2�d"u���xٶSR��G62�F�V�6:��g��V���w��hp��Iֳ��|� ��<-7,�ЌcV��1 �s�q�|�1,�g8�n��*U�Q}�HO�m�\i���ur�)�CƜ�4*R4Ͻ��b�9��i�
@
��<z�5~
��� ��J�.�4�`K%���g�hpD�Ajz٤D����S_3TD� ͠���'l{���'�EMN� �:y�Q$N��� �\���D�yR�P�����(�aL�L_a��ؕ�ɄvO>�&MG`�n�33 ��B1<��-��[�Ui�Hx�>�}�ؖV:}p)�����,Ѩ�mM��a��Y�N�w���1�j�����-A�8${�/R��������<�R�ZZ����VX��}1/���J.���`�n�(�z�q3'�Ғ*RE���U@���H�I4���/�����"3U��VE�7�� � �%UjP���� �$��du��ct�������52 ��j�QZ�j ��Ҥ������-kTR�{xᔛWi��/� 9�%�)q/F���HE)��/.@
��v���R�C�)V)�Aa*$luI�$��V��ry��錍QI�r`�h��v3#I=�$g��uN����OW(>���㼾T�Y��x�� �(��RI�L�כL�+R�������uZZN��1�,�3-@}�Q+I��D}�n@>����`�]�f8�>[�\5�E6xn��3pA�H���Vh�@�1��������'x ���8�*�!�y�*��
P�ـ`��S0@� � {ܥm ɪY��{�: P�D���o�!��}3?Q���X�5[
R� 1���b4f*�^�e�5 ���J��^ÿ{b#.le��K��Vt��o�N����bZخ�L�)����Gq}�۾=�s_زd���e)�������.1''H��s3���i�x4�ҠH���~Q�| �<&8X��iT���b�a��������4��i)���i>�?[c��25��W�TR!�b�P �G�����5~#Q��K��X;��Ls�}l�-&?�̀�����ɴ�A�-=�₇0�J��drA'èB��5�������fw2�� ��#vP}�6�S�Y��.<�>�R��'Sj�<�66����J�p�A]DDy��H:� ��G~��~h�f3��沾;��42�U�f�ۭ�� xfd�ĩ�R/`e�{���A#��G�#_���m%tƠ���F�DZ�yŦL� �lum0�i�V����//�ʋ�U����$ⴧ����2�x*&������Ǖ�*�fm!A,I� ܓ�4�b:`C�{Eȳ�W�:����@V��A���{�q���댥DsV�-7VN�j���U�pU�!`hT�5#I��O����������wO�eʠ�.�߲��u�0e��\7���w�:�� ���o,p���Dr5*�;��~1007˼�^�l�J�X�T�'�" �su�@�1WO���!/�Y�IT�/3��o*��@�j>i���'L�
=e���� ������%��:�֖b��:X���A���,�=�Ըǂ>c��E�1��O����������3G:��W
L�:i���L-F� ocxc7<��m���#Xh"F�[�*A�@�u�w�>�(QfJz�I���R7]���4� eR� 5�L�?<�.P�gc1W,�� ��ua�I����t��;�_=�k�ٓ��)�%0P;� d/�|��pY̼����;ѓ$��C�\k&� �^�5�i�Q
�
'`6ħƷocU�r�+M�ӧ�.��4�C�*��vewW�ˍ:t�cLv���c1��g1�4)�i�E����Y;z�@胹ƙ���I_x�ň}2}T!���2U�2L�Rzw-��n�dK&��wc;$(,,5}[i���`}O�=ɹ=L�s�-�:�[;�V��b��rLċ0H[9�);VpE����y��� \8���TAk��h7V�lI��0@�R��r�}.{)UOBu �ag>]�����;t ���e_?sC�r�Z� ��h�ғ$��x����er�9��T]QA(d�7�Ё#�"�|u�<b�*��B}��-ɷ`N�b'�t��VV�$� � �g��Ǜ���H��,qI$IY����[�-L��ī4�?W�o�ʤ�~�ʼn�ɈwS�b�ox&=A�Gm6��G��:�ʣ9HS���J��|�n��oq�i�ʛ����vG?�0-� ��s�x���� )���� �t� ��+E�T7\���$��ą��>m�f����f,OrL��
��VG�k�R(�=�SӖ��/WH$�� ���y*��F����6�y���&�6���;t�g�?��������m�B��#]T��D���jؑ�I����/3�6��K�&E�q2t�6�gy�|�bD��63�[1�3n��}-��b�y�Ův>R
�|y�p`��ÇdH����&H0A$r��lNt�(�b��C��x"� ��
�j�tx��4�Ǻ*T�"WC�bKD�_t� �CZ��,����Ę�����ןI>�>~���G������&'�J��ZYPډ&�4�$t2bLN-s��Z-I��2�:�<�DO��c|@���T�j&b�B�����b��l� �ԑ�-(#�5� ����cqV�$N�id�
�O��%��6��f� �I���3��L�&K����S1���gM:nUwB��=d���:�����M�b�>]� �i��#�$��)�:_^z.�5�yZr|P���o���x{�x��-G�'���HD��H��Ƒ��+OJ��Pl+g9QwW�C-I��+9=C�������~D�E�P��ٍik\�/�����S�
�X���H�K�z��'凳�m&�Gͼ���5��?gI}���+�~Rm���}�qf}L�c]���Xk'���e�u�\�]]�g�;�'a\;;�;jV Ň@ϹG|��S������ ������n#
Ǚ����?�}� >磏\d�ip���\Q|����cA���v5�{cG�x9�(����0E��R�T��A�����ro�[3L(h%�P$�l ;���h|�P�g�h
zM.�?h��1�S�1���X�����ϓe���4���Z��)}���(�$�� L�~'q�ɥ����)Ta�T$�"r����S��i͙H�Y�h"v#qi�ʊ��gVS�`A�x�r!�|���1��� � �Q���\N��z�&�=���~X�Ӂ�-�(S�!�f��|EEC����7�� ����D̦��J�*��8!H"�$OMK"gf�o��L�e��Lj�"��:�`u ��߲2�+�mM� u�0���v
0��[�W�[�zF��x�����yG��]�zAbI�=1K�<�G&��b�U��@��!��{��L�Lx���$�L��\ŀ$�$�'��T����צu�
hVt��ꙹ6Q�u��j�~<|� ��<�ޝ_�5C+i�y���:��Q*eZ��f��Yd]=v�L�P��=D,�m;�����꒥[�h%v�$(����m�����-�l�k[���˒�'�� �,*�X�l�P�X�
N�G�q��~
$�3�&�V��@�p={�i��d��mc��1"zN�q*U��%H�AYIY�PT�Q��{X�._��4�O�Y|�OrX$���Ə��0Nf�9�iLv,�?��g���O�bo��1^�j:������~�8_���D�4�|��O��++f��ZzB
@Z��h�� ��� O �X�����E�2,@�1�<}>"��w�qK��ȠhR
�кn A���37 �7�=���@�G(�+w�7������A�q{��R@ռ��@M�$oi�۾;��)i�A!��U"d^�$|�l7��̵Z��=Qu�`Y�QhH�E��
�2eu��4)wpP�� ,Z���y2O��U�U�G������§���������=C�0& ��0>$����M���)s|���YkV�jTww �ŗV��6�b����wÊ=q�m*H��s���H�y*F3����
f`��_�0L� N��P|�=T�i�Q�!aH�u�?>���Ĥ��t�\:��<jm;N����8����Tk�4>��#���'���e��
����n� �6` ��18&