Pictures are a scrollable ul; select “Show All” in the select box to scroll thru all people.
textures for three mesh are generated with topojson and d3
d3 is used for transitions and interpolation
three.js renders the globe
adapted from Mike Bostock’s World Tour
and Steve Hall’s Interactive WebGL Globes with THREE.js and D3
Tested on os x Mavericks Chrome, Safari, Firefox.
“Show All” sporadically crashes in Chrome Beta on my KitKat Android phone.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>d3 to three</title>
<link rel="stylesheet" href="globe-list.css">
</head>
<body>
<div class="peeps-box">
<div class="select-box">
<p>Select:</p>
</div>
<div class="list-box"></div>
</div>
<div class="globe-box">
<h2>d3 to three</h2>
<h3>click image, or select person to potate</h3>
<div class="three-box">
<div class="loading">Loading...</div>
<div class="slug" style="opacity: 0">
<div class="slug-img"></div>
<p>
<span class="name"></span>
<a href="" target="_blank"><span class="twitter"></span></a>
</p>
<p>
<span class="city"></span>
<span class="loc"></span>
</p>
</div>
</div>
</div>
<div id="templates" style="display:none">
<article class="peep-box">
<p class="peep-name"></p>
<img src="" alt="">
<p class="peep-tweet">
<a href="" target="_blank">
<svg class="twitter-icon" xmlns:svg="//www.w3.org/2000/svg" xmlns="//www.w3.org/2000/svg" width="1.363em" height="1.108em" version="1.1" viewBox="0 0 171.505 139.378">
<g transform="translate(-282.32053,-396.30734)">
<path fill="#2aa9e0" d="m453.826 412.806c-6.31 2.799-13.092 4.69-20.209 5.54 7.264-4.355 12.844-11.25 15.471-19.467-6.799 4.033-14.329 6.961-22.345 8.538-6.418-6.839-15.562-11.111-25.683-11.111-19.432 0-35.187 15.754-35.187 35.185 0 2.758 0.311 5.444 0.912 8.019-29.243-1.467-55.17-15.476-72.525-36.764-3.029 5.197-4.764 11.24-4.764 17.689 0 12.208 6.212 22.977 15.653 29.287-5.768-0.183-11.193-1.766-15.937-4.401-0.004 0.147-0.004 0.294-0.004 0.442 0 17.048 12.129 31.268 28.226 34.503-2.952 0.804-6.061 1.234-9.27 1.234-2.267 0-4.471-0.221-6.62-0.631 4.478 13.979 17.472 24.151 32.87 24.434-12.042 9.438-27.214 15.063-43.7 15.063-2.84 0-5.641-0.167-8.393-0.492 15.572 9.984 34.067 15.809 53.938 15.809 64.72 0 100.113-53.615 100.113-100.114 0-1.526-0.034-3.043-0.102-4.553 6.874-4.96 12.839-11.156 17.556-18.213z"/>
</g>
</svg>
<span class="twitter"></span>
</a>
</p>
</article>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="globe-list-3d.js"></script>
</body>
</html>
���� JFIF H H ��DICC_PROFILE 4appl mntrRGB XYZ � + *acspAPPL �� �-appl desc P bdscm � cprt � #wtpt � rXYZ gXYZ bXYZ 0 rTRC D aarg P vcgt p 0ndin � >chad � ,mmod (bTRC D gTRC D aabg P aagg P desc Display mluc " hrHR �koKR �nbNO �id �huHU �csCZ daDK ukUA 2ar NitIT broRO vesES vheIL �nlNL �fiFI �zhTW �viVN �skSK �zhCN �ruRU $ �frFR ms .caES @thTH XesXL vdeDE denUS tptBR �plPL �elGR " �svSE �trTR �jaJP �ptPT L C D u b o j i��� L C D F a r g e - L C D L C D W a r n a S z � n e s L C D B a r e v n � L C D L C D - f a r v e s k � r m>;L>@>289 L C D L C D EDHF) L C D c o l o r i L C D c o l o r L C D ������ K l e u r e n - L C D V � r i - L C D_i�r L C D L C D M � u F a r e b n � L C D&25B=>9 -48A?;59 L C D c o u l e u r W a r n a L C D L C D e n c o l o r L C D *5 F a r b - L C D C o l o r L C D L C D C o l o r i d o K o l o r L C D������� ����� L C D F � r g - L C D R e n k l i L C D0�0�0� L C D L C D a C o r e s text Copyright Apple Inc., 2015 XYZ � �XYZ q� 9� gXYZ a# �� �XYZ #� � ��curv
# ( - 2 6 ; @ E J O T Y ^ c h m r w | � � � � � � � � � � � � � � � � � � � � � � � � �
%+28>ELRY`gnu|����������������&/8AKT]gqz������������ !-8COZfr~���������� -;HUcq~���������
+:IXgw��������'7HYj{�������+=Oat�������2FZn������� % : O d y � � � � � �
'
=
T
j
�
�
�
�
�
�"9Qi������*C\u�����
&
@
Z
t
�
�
�
�
�.Id���� %A^z���� &Ca~����1Om����&Ed����#Cc����'Ij����4Vx���&Il����Ae����@e���� Ek���*Qw���;c���*R{���Gp���@j���>i��� A l � � �!!H!u!�!�!�"'"U"�"�"�#
#8#f#�#�#�$$M$|$�$�% %8%h%�%�%�&'&W&�&�&�''I'z'�'�(
(?(q(�(�))8)k)�)�**5*h*�*�++6+i+�+�,,9,n,�,�--A-v-�-�..L.�.�.�/$/Z/�/�/�050l0�0�11J1�1�1�2*2c2�2�3
3F33�3�4+4e4�4�55M5�5�5�676r6�6�7$7`7�7�88P8�8�99B99�9�:6:t:�:�;-;k;�;�<'<e<�<�="=a=�=�> >`>�>�?!?a?�?�@#@d@�@�A)AjA�A�B0BrB�B�C:C}C�DDGD�D�EEUE�E�F"FgF�F�G5G{G�HHKH�H�IIcI�I�J7J}J�KKSK�K�L*LrL�MMJM�M�N%NnN�O OIO�O�P'PqP�QQPQ�Q�R1R|R�SS_S�S�TBT�T�U(UuU�VV\V�V�WDW�W�X/X}X�YYiY�ZZVZ�Z�[E[�[�\5\�\�]']x]�^^l^�__a_�``W`�`�aOa�a�bIb�b�cCc�c�d@d�d�e=e�e�f=f�f�g=g�g�h?h�h�iCi�i�jHj�j�kOk�k�lWl�mm`m�nnkn�ooxo�p+p�p�q:q�q�rKr�ss]s�ttpt�u(u�u�v>v�v�wVw�xxnx�y*y�y�zFz�{{c{�|!|�|�}A}�~~b~�#��G���
�k�͂0����W�������G����r�ׇ;����i�Ή3�����d�ʋ0�����c�ʍ1�����f�Ώ6����n�֑?����z��M��� �����_�ɖ4���
�u���L���$�����h�՛B��������d�Ҟ@��������i�ءG���&����v��V�ǥ8��������n��R�ĩ7�������u��\�ЭD���-������ �u��`�ֲK�³8���%�������y��h��Y�ѹJ�º;���.���!������
�����z���p���g���_���X���Q���K���F���Aǿ�=ȼ�:ɹ�8ʷ�6˶�5̵�5͵�6ζ�7ϸ�9к�<Ѿ�?���D���I���N���U���\���d���l���v��ۀ�܊�ݖ�ޢ�)߯�6��D���S���c���s����
����2��F���[���p������(��@���X���r������4���P���m��������8���W���w����)���K���m��para ff �
Y �
vcgt ndin 6 �@ U� L� �� %� � P T@ 33 33 33 sf32 r ���� � �r�������� � �qmmod �" �#� �� �Exif MM * V ^( �i f H H � �� � �� C
�� C�� � �" ��
�� � } !1AQa"q2���#B��R��$3br�
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������
�� � w !1AQaq"2�B���� #3R�br�
$4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������� ? ���( ��( ��( ��tq���f8 rI�7J�@Mw>��z{=M�Q�M�]�M�'%� �ף�� t�_��h��jd�CI�|��r�9h��?�5�SJ��[����6'����>|<u������[[DןnV9w� $/�H�<�����ƣ�O��Km�E$��$�������Mҕ�sc0�J�mr
(��� ��( ��( ��( ��( ��( ��( �K��||e���٭c�o?��~�2��͎�)$�5檻�����g���z<� ���K�+��C��6+�3���$���p�b���%us�{����Aм
z6��4�L�H@�ga�=j��?� �ּ+�ռ%q�=��K�1��;N
� �q�q_O|!���F���P�U�h<P}�Ӿ,Ao⯃����A��X�HY�9tH�lu�~)S9��aJS�G�xc ��tcn�g�&��O��ӯ�p<�`$��B�x��s��9,�խ�3w)$ьy�9��+���}/�vmkom%�ׇ�m"Y*o�1$���5�6��� .���;��5+udV�� ����~��a1k��Z-����IѭEқZ�x颊+���(��(��(��(��(��(�Z$��+s ���Fv�q��V��X�"^�����kf@��`C�L�J���@�=+Ǵ��,�sl�����q�z�g� ��Y<�{K�@n"t�8*
rs�ו��T��U�����+�!Jn����>���4��폈��d�&�m�[C}m}2-�ɻ�ep
��21��u�������x��A���kx�I$Z۽���eF�nzz�?d/۷�> ����C��K[�k��3H�s��wD�"`/�� 9�}����ڶ��ƥ�hm�O�nxx�^ }��Z��S�������?|�����XlCv���~$�z�֡��J������C4����I$F'�6���V�n�6��o$d����/��R�Ʈ��t�*�Q��h�Y�]��'�G�~|]�|�}mm��4�H���J�sq�q<���ݺc�~��g_Y��6������)��ռ������]��� ���0m>�E��պ�4��m���$H��Nk����V5�����'
<-GN��(����(�� (�� (�� (��� c=+м�6���V��jk�c" V[��$Bq�"_����_~ʞ��co^��Wn�t�m�Â0B�$@�7zv=>Y����wz9�f��3�I�������U��������]DŽ<G�i<�f�l��rג���Vt.�[ct�#��<�i�Bh��#�?��.�;�d��쌣��~Psԓ��_��<��^8���y$��l6�uϡ��|e5*.����i<�T���_�}{�9�{���u��x_Z�(n�)5j�r��VD9y�k�o�sZZ���
����y"�O���$���}+����~
�S{�Q`��
�m+��##��r��g�So��y�d�=�� �o�:����LU��r{[u����~���OA�5[�F�f~ӿu?x�[!$9f' 63ӥ|���?P�������x٭�ш�$�8�J�����/�,X^x��$ja�!k]"72+��|gF@B{��?��xĺƗ��ϵǡ�c\���J�8� t�k�iВ�����ό�i┡�q�u��� 3�־!�:��>�x����<�p�y
:�������-�]ᴽ�6���嵵��iG�*��F��9�^Y�j�����k]��R��S����?_j���0\�>Gs�O^�=��GQE QE QE Wq�3�m�x��`A�/�0嫌�E���������b)�3y�
#���hWQ���L�ʮ�O*ê��-��������P�f��<�o�����*@q��zg�S_i4�$1yɺْ�e�i����Ɍ~U��^�[o���40]Y�:+ܭ�H��WfA��j����a�2�>GvUԳ�fa�ϟ¸�ZRv�>�[�&�߹��kV��~�0kңj�^�Gw�I'�� ��'�㗺+�d���̶�$S�c��!n�@{f���σύ�=��._��l�̋�`�#�Q���^Gm��:�x4�D���5��Hh�9ۻ�����M?�Q���Yj�^�C�?�Z��G��9��I�p�D�͕��$n?N����|y�
����ڽ�۰{{+�����H�sڻ��6o���|s��9�����o�V��w7�+K���f{5���U�H�F�nJ6?k~#|F������^��mCNм7��)/��b C��1�$�+��� 2�P��XF������<fS�x����^G�w�og�� �9� e���p)a��I��W@�tI��N���`�Y%9ڪ@�����_�^*���������,��3�fM͐w|�{���^�� <� �����
U�I����)y��ON� @���<-"i���P`O#"K7$o�"<���*��4��Y��<'1\4aK`������r�����G�� #��c3*�S����}�F�$��r��Gr�!ǐ�I���dc�ƺi��Hb��7�]�٢��4S.����B���q�$�f����uYV��2Y��'���4�b�l�F����Z� 3���Ez��-ڤTou�_??#����<�Ekw�|1T� 9���H@�ێIԧa���?�}V5iZ�⸕bt,�e]�#�����a�#ך��ǚ �Nj��cY8%>Xu
�H��88�+��Ns�|0�U)�̊(��<`��( ��(ރ�6��[�Ļ���G~~��_�[[{!x�6��bQ� 8�B�8���ބ���4�
��cc��9���Ʒ
��L�o��n�n�~� �ڰ�+M�������ݮ��9���FR�o!P�&Wl��Ê��4�xa�P�������q�c�j��\��>"_�G�*�����Kʧ���W�x3ģW�����6�.�â���J���s
V5�{ߵ��3[O��C�!��g�"�H.|��Ec����L��K��,89hŎ�b>_C��������5�h[D�A��Q9;���a�S��b�Ʊ��4�P��8=zUS��J;i}�>��?k~����%��f���'���e�Y��Y%Y&D�J�(��s�u� S� ���Y����k��s��;ƞ0A7jD��F��4.�3���]y�歪�{h� �ZrZ�x,Ω$`]1��N
kxWO�������t�p?��#`�ry�9�z�J5�ӫ5�oo��'*�E�[o��-7C *���/"�^K8P|�`s�tPD��3i�}���!��pv ^�ז�-����Z�B�VD7q��������Ȋ��VQ�BI�NA[�7��b���ϲ�b�A�'K�a�%���?r00Z3�-Mե),���t�.<ѐG����R�IJ���j$s���щi3�nU�S~�ۃ���-̪�na�Q���c�V�ҵ�w���o�%= �ư@�JE��\^J��vI��9�y��
�,^%���4O���M���C���y��+���"���;��8��ZA���k0��3ד�����$���&~a�d�:��dw�i{�G���U0�{�SǨ���>@(�� (���6 ~�� O�F$�����:�Q[��>鍧i��[��ފ�$��U��������+��ӰY�7��N����x�!��=��O���#Ή�_��a�������� n��0ưɦ��qmܰ���^w댁\m�iNT���N;���S�>#���2���x'p5��r0r�zg�O�Z�j�D�|�9��tp�G
�
RG}BW���f�[vs�ֿ��_u�J��YF��O�WV��������Y�
� S�n5[e -Ń��L3���u�^�I V0����&쥉�'����,���� �<zt��������E�r�1~�����#5;_��M�$�Þ$������K��������*nI��x=G����w�~&���^;���[�E���)����� ��2��x�y��5�X�P�O�]�"y��*x��8���m��@cɓON�7}�>��)F�-+�v�~�Ӽ�e�g����ϰY6�1�5]�b���<dl��[�?��&��^E�W�K�) ��Աy?�>��7z�ɶs�?�\���s,�FCr8���rNZ���WU��(J�����r��<�l��<��k5��`�:���х�%'8��ņ9��/����0��-ρ"��l���{zW��77�$�E̱��A�$ ��������⽓J[���7��iz�)s�F� T>NW$��q�sާ���z��}A!o4��mbyg9,ܹ�r��Ʊ�$�4�1���t�z��H�^闑��J����(GL��@3����kG�����0i((c�[��(��₊(��4�����w1Y۹;$v$(��XӮ���O�23�YC��)lmBQ���s��<5+5�ӯ%2y�"�y#���3ۜѩh���|�ꑩ�c���F�R1���G1]'�=v������#b�3)'r���Tt��'�o��{��� �� ���kS�HKhb �g�HTFQ����I��ؕB.u��l�.OON��϶�>#��r��#<�|��4��b��Fe8��`� {�} �]� �.�'~���ί�ˉ����%��� ����>�~�����$K� 7(��#�3�p{⪞6�.��JK��U�1r�6.
j���ohsY���%[a���ձ�f��0ç5����(�o��Xg?ν?�9���� �.������M&6��W�;+(��2�b����S�rFF~��� �O�o?j�oJР�-��f7o
��T�Q�L�,��9�:�g��˒s��u>��c1U!ᦷV����7�M�l��^)�G�����X�Լ>/-�HBH-븑�r
��A��KrT����PI,
�y^�MZ�L�4��-�{�9�y�Խ�Z�,fb�v2J I&��k�D���1/��~�;��<����S���>V��]F����x�y<m�VB+�0P��n���b��-��2�j�}��89e8�*��qk��Mf���<2����T��U5�e�T��H�������� ��f����t���pr�'K~F
�����-�1sqG�{%`�%���/�fx�|��R�d���`��umU�����F�6,1̲M21j$y= ��ye���\��Ě����L��>x�Bp Y%@2I��<�W�M{�K�x��&�ײ�ܗ�N�<�h�I�8Đ.r���7n2z��J�|��U�C�'�8e(J3�ʒAS%�
I���vl�i���$d�^=˟�͑��1֟��q������6���U���f���<�D�kC���E�U���}?#�|[�b��P�S�[�:)�23�qۂ+:���������6���a�n[=��s��t��������ES3
(��6����n!/�6���� Ց�5�� �������[[)��U�_̼� �����:��5�dbB��]�|Gy�K�M��#�����+�kA�n����K$��%t��.�(լ3����^98Vl�t��5��� e���T�Z��mt7Ms�\˧=���@@~�H�~BX~�> ��"��]D�؏ֻ��_�5Džu%ٽ�fg�̨G��M|r�<N 7����g�� �09���⤿�՟���o�4�����ѭD�?��&������q�� �yf',�ܓֽ;��� �}���w�����p��|��]�����n_�Z/-�ѓʐGLb�4���A�$�I��LѶ�!�u`~���?a����^K�x��w�`�
_�M��Jц��Q��V9�J��e��$��ԗut�_/�p�xNd��&����� �3��o�� x3�7��>�D�WZ���mC\��㱸��B��>[�m'5����ؿ�~��/����uKt�P��t��S��I;�]�ı�) ��q\�ߊ����bң��#.ϥk2J�"�� Wj8�mߍz��R�O�n������!+#�v/m`Y~# ��W����q
�'�~�=� ����+�wa5?�����i��<6�yɢ@Ny��c>�����N��+ ����OB�r���~$�^_�C�~�Iuy�գ��ӆ�2�8��|��� �.7�>k��M���d��$m5R87�W`��g�s�2���h�Mz�s\�+ˢ���~�z���u��s�:
����b�ӟe�>7�<?�/��'��7S��� du<}��ut#������ ��o�����F�g��3��q;M&;gn^� U��z��O\��"`?�{4�70��I?yx�'�6WF.�5_�����4��[↿�y�.�z�#�rF�dr:�̌�s�uc^!���w�fݟ��bN2K}T����8�|Sy���E�Q���P��@��k�g.ı$�k��5 ƔcQ꒹�>c��u$��G}�"ޯ�����
��;���C���J�Eؕ�>fRswaES$(�� (�� )@�h�� ��h�kė���ӢJ��T���$���*C0qE�����98IJ.����I��.<G�}#Ú凇�ۀ���X�z'`�3��A�DZ�{��� w��õ���t���Ē���&�{��Y����̜������E|�#B�*���>5��˧R2����|o�������G��e��6�>� 1?K��@�Np������4�~�j�V����'�Ҋ+�)҆<����>F����������O��7�N
�\�I(;0�g$rs���+�u1��4Q]0wG&eFea:�EG�QE QE ��
���� JFIF H H �� �Exif MM * J R( �i Z H H � � �� � �� 8Photoshop 3.0 8BIM 8BIM% ��ُ �� ���B~��XICC_PROFILE HLino mntrRGB XYZ � 1 acspMSFT IEC sRGB �� �-HP cprt P 3desc � lwtpt � bkpt rXYZ gXYZ , bXYZ @ dmnd T pdmdd � �vued L �view � $lumi � meas $tech 0 rTRC <