Pictures are a scrollable ul; select “All” in the select box to scroll thru all people.
demonstrates:
genning a canvas globe with topojson
creating a circle from an object with lat-lon coords
and spinning the globe to it via transition, interpolation
canvas is partially responsive
smooth scrolling of ul via transition, interpolation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Good People to Follow</title>
<link rel="shortcut icon" type="image/png" href="d3.png">
<link rel="stylesheet" href="globe-list.css">
</head>
<body>
<div class="peeps-box">
<div class="select-box"></div>
<p>Select:</p>
<div class="list-box"></div>
</div>
<div class="globe-box">
<h2>Good People to Follow</h2>
<h3>Click or Select Person to Rotate</h2>
<div class="canvas-box">
<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="globe-list.js"></script>
</body>
</html>
���� JFIF H H ���ICC_PROFILE �lcms0 mntrRGB XYZ �
6 acspAPPL �� �-lcms desc 8cprt @ Nwtpt � chad � ,rXYZ � bXYZ � gXYZ � rTRC gTRC , bTRC L chrm l $mluc enUS s R G B b u i l t - i n mluc enUS 2 N o c o p y r i g h t , u s e f r e e l y XYZ �� �-sf32 J ����* � ���������� � ��XYZ o� 8� �XYZ $� � ��XYZ b� �� �para ff �
Y �
[para ff �
Y �
[para ff �
Y �
[chrm �� T{ L� �� &f \�� �Exif MM * J R( �i Z H H � �� � �� C
$.' ",#(7),01444'9=82<.342�� C
2!!22222222222222222222222222222222222222222222222222�� � �" ��
�� � } !1AQa"q2���#B��R��$3br�
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������
�� � w !1AQaq"2�B���� #3R�br�
$4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������� ? �:(�����( ��( ��( ��IGj (�� )i(���� Z(� �QE QE QE QE QV �;�N)7mF�n�lV�+ 8��폆�놕��6��Jd�+�����^��_���C�OY����Z!�"%Oֹ�FG(�U�P{W�D�9�+��g��x����co�c��V�y��#h�h�a���+�<Т��PEPEPEPEPEP��@�r�U:��?t[֢w���i=OB�ѥ� ��"�� ��a����ַyH�h&Q���O�]���a��+���ϡ��馍b0��]F&��u�X`��j�}� u{9�a�j]Y_@�ZJ�m88�iJ/qFJ�g�x�K67i*���<w�W����eы����^]^���5s��SP��
JZJ�9B�(��(��(��(���R�� H�_Y�ؑl
ëb��é�5��x|_�B�$l>d~��X֜b��z�7h���&�sot˔~U�#p�W�钋�)/�"�'5�kN�k
��U`SC9ۓ�Ͻz�~o�@��m�Ak�iEH��Г�A���.���3�e�,O���f��{1�H0d�}���zʶ��ص���7|���#9�
�-t�-��
ݒrz�ɮY��N���$d������e"���B��a^=�Y� g��k�$�21"t`Fs^�-�\��wC��^�ʳ�W�ʛ��;�v��t8s��]B�%-%zG���PEP z�A��Kފ((�KE (�]��IolbF��X1`ʀ��j��������2H���+$ՙч����5饝�/E���"I��In
�JW;s��:�K��������z����Ge����>?� �6%EEF�fo�ɽ�.��z�V�h�';Ou�u-,r��8�y���nm2t�;�p$VO�F{Î�+���ܳ��|���Z�厧o<g"�אX�sq H⇒x��s?��ij}O'��W��A����Yˊ0Y7���H�O딯G K��y8ʼ����WY�%-PEP(4P�E QE {־�~����J�$�$���Ppj'%fT&��{H-n�T�][��?x� J���*V��!Y��i�H�� �U�i���+.��w�NЭf�ðTPC��&n:\�0n7qԪ����/qmqq˾9f�
�k� ��.8 'ˌ(��+�%cf���t��۱+(�9���>g'y��:Y,�jN��;��sҫ�E�}"�-J��8K[�2����w9�ȵecÖ�(���Q@Q@h�"�I�lk�r}�[����e��R�@,p?J��#.�>��&
吧��@�S'�W��S� � �ɵU�jf̧j�F@?Z�h�FS�˃E�b��B�E*F�6ь�cO�k+���y�Xx�G�������\Ͷ�-�֎U#��}�]F���F%�R��8�q�=������[Z;6�ͨK�Hr�q��{
چ!E9os�T�-@ �x�~��Zю1�(��]�3z�W*��f.2�Nx�\���;K�G�o&��� �ƺیæ
��s�������B�L���ɧ���{�_��[R�#Α�L�U��I���=?J��F���Z������^���&���dr�|L#�d��l���5��jf���:+F�H�"�fU$�+<� GPkT�f%QL�9�.��A�9�����=�©l�ܜS,�j��ޣr��Z(���S�Đ�[0:|����b��`� ��'n #�bk�m��bW}����W5��Ң��\ )��=Ա}�r�ܱ�����MYOS5���d�����ox���6�ʠy���VTS� ix�8�+uڞ�?ƺ]\��G�O�D�����(G�z���s�`}k��t֕L���GqX�A��s��ժ��
Y�Vs�t*�_=I�ԟJ�<7*�X�������@��`:�l�}8�y-��#`� ���>���sX��@���ԓ5��� �yK��}��ǹǥg8_SHͭ�[��#��20<0=+Ap��\>�w&����~� ���Z��?��?����B$�?C��+ +2��J|ɱ�
rO���!}�q75j�d`z�&��LH��8�?�%��� H[�Rș`��<��bE��HȐ�<���[���/���e���mpP��p��"�wy�[�Ǻ�x�\ %��F3�����q���+Gu I�
�9S����j�
6mRT
1o*�E���z����fG淙1v�[�_8j�k�-մ����o/̤n��:��^���V��Q��P�B�Ej��ڙ�o��zdm&��̊YO�Web�� !<�I��z�4��5]>N2w3}�����~��N9�����%Ԁ&�=Ӎ�H�c_a��U�酥�3��x۹�H �ɑ�i[�A�+��%�]�^Lg!v���SvSؗ�p��K���+�ԕZ�
d��L�0:�֭�y�B8�CwwVF4@�G�D, E�Se��z8�h��P��)#G�v��;�W�3��%�F����Wo�J��>��dh�P}� �g�;�O�c�z������&�k�r�D�S��K_�� D�� f:d�m�V yI�;m9���j���ڝ鴵�o%y#I퐁a�G\�Ҵ����:<&�F�܌�匆 �����5��Q%�}�x����Ѥ�H��̧ Tz��d#����f^�)-.װ �cQ_E��Ox�f4#����YҡR9�n�mnq��S��ꐋw�i�.�h�bA�I�txkw�%�0Ē����?γ.� ��h!p=�+Vݾ�t�Wd���m ��3ETi�����N{
*l���j�L�(�h��n�v�Cgz�rѰ
~�4Q]�L���.���*r�ҹ}"���݃ܚ(�[2�����*Ɯ�n���QEK�}L/C �9��P�l�s7R���+Z{#4W�|>�a��a����f;#� l�ۿ�EU_�T�:�]72G���Q1E�l�a��M�cB�֊)�[\��5�[�� S����QM��'���A�%�2b+jYYu-,d��#c�(��E�BYw�- �(���
���� JFIF H H ���ICC_PROFILE �lcms0 mntrRGB XYZ � 4acspAPPL �� �-lcms desc 8cprt @ Nwtpt � chad � ,rXYZ � bXYZ � gXYZ � rTRC gTRC , bTRC L chrm l $mluc enUS s R G B b u i l t - i n mluc enUS 2 N o c o p y r i g h t , u s e f r e e l y XYZ �� �-sf32 J ����* � ���������� � ��XYZ o� 8� �XYZ $� � ��XYZ b� �� �para ff �
Y �
[para ff �
Y �
[para ff �
Y �
[chrm �� T{ L� �� &f \�� �Exif MM * J R( �i Z H H � �� � �� C !"$"$�� C�� � � ��
�� � } !1AQa"q2���#B��R��$3br�
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������
�� � w !1AQaq"2�B���� #3R�br�
$4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������� ? �rHQ���`�� :��(~`NwJ�}�$�(����UNX��SW�3(�F�I��ڴ�m�ExN��݉$���U���e��1��t#C)�F0�����fA�Mp��#��� n-�������%W�b���K�,�gҫ��Ց 9\����2W r;P�tD��G��.�X�/|�V�)�b.�N:wB}Z�N�1r�*\z�6�b�e�֡I�u�\�K[��
t��CFm��W��Ax�#��a��
�i<Oo&ܹ�� ��\l�̬uֳ�,��T�H=k
�ya����2��8ic>mOL��� �N���L�k���[���y���-#a��W�Q[Ri#��n;\�bwך��y%�rG;@�[�4���ENj2v�J��U6֞�PH#�x�+?k>�=_�M{� �N��x� *�ǵR���u2���jE&��g
ێ�4��,��ZӚ2��'��B\ֱ��;K�ϝ�q��S���a��:0�Y:�zt�YmP�\�#����P�\�#�����k')�zN�J��p��A�ӟ;�nn�V��K�8*e����ج�՝�H�%��5�.�4�d�ɞq\1���hܽ���ҩ�����M_S?04ύ��tF&-��:��h̰�]�Ş���b�g��\ʱ�z֊
��٫6� �>j�=���5��G�M,��"1�J2�z֪�A
�os�Y�� zڳ,eH�"Pى�G��gT]���;T��U�|Gr����zҾ�6�1�#��pu��m����EM�Y��ΥD�"퍷��zi\��n��:1R�<d�d���xf��'}�P�A���6��0u�
�����\u^��M'N����L�� c�śr�eh��Q�7|��ҧ�O�k������Qc*��4W!����0~�����(�yD��U�c�mξ�U���8%B�]����?Z�{�{��m�Fg�7Fa��!A6�B�b��F���Yq�؎���kVS"��;}h�N;r�a��&�N[���~�E]��b���I�4���f
J��hȈ�e(i���0w�+vᣙFPd��R��Վ�OԊ+�h��1��T�<~e��KrS�� Jͨs�|H����)o�ǡ*��ٸ��F��n�=��,R�J���G���,��qȮ��9��H�V23ϥ)Wk�1X(�x6�sJ�0+[șq��]4>R�}9�'UKdvB��'s�6��HC
Ǹ��^-���0v�d�i? ]\��.F[a�ϭ>8Z��۾��t�#8�V�_qtd�S���+�x����q�CuJ=N~�H�la�ź�rOR~���x,A��iv5F+S�����V���w:��+�±��SZt��+_B��s����4kH��HK.�4�+�5�U����:�8���|��t�J����+D�,Iol���l��䍡~����x�(K�x���Ԛ��qǥ&�&MX�ux��$0�M9�p������ih4H��rG���
��0��".G\�U�X�s.xV���d��$�"3��[����
6�y�:\XLth+r��=�����h�[f/.;�R鵳;�����$i��3n��'�w�*M7QA�vW��eΟq�R��������o���@��2?�խ��p�*��Rܖ�ӗ��mu��Ԩ�v���z�u-�~�P{���-@�f����
I�i���l�i�,�1Ǧ+�-7�,?"j���_?�J�f�3F��ZƼvv��h�J�.In�Rc+F�m ����[S��줻�}��:�'���ϖU%kڴ�.@n�^y�x����[�
��8U� z�t6�WOL��JϿz���A�i*��<Gl�#� �N�;��RWGO,����s���rEk�Ň>��cWQX���٭�RNOOIԚ��[E�+<3)nޠҳ)M[sVk]B��Pʊ�r�����麳G�˷E,�8�|zU��O:�e�Cjr��8�V5�3e=ޥ��/s�����������=��U��5��kf��n,� ���4�`��7n $)q�֬ꮢ8�x⤇-f�H�T�غ��%P���9����䶑��!#`zy � ��q����gd{M��b��ݎ��/j���mK����,�H>�t�Q�t}sy�<�*G�fc� ��<G�ꤋ��$O��>T���]����/ƚf��-�`ϝ�ˀ�ּM.eFV��\������#�4���+����U�ᖷs#���9���Զk%�=��j�O�X�D��B��x|�r;�y��fɩl�z��GYx��W�^@nk�t�}�+ɖKe��8�Ff�Ku�=�&�{\�*Ks�5X�59��^=�x���\���Vn��Jϡ�R}O^�.����s�5���ZI
J�dsс�r#oj�9�Vݖ_��j�e�\ OsR�C��>�5�CT!�.�eS���++�mSJ�����[X�� �NO�f�ț;A���/QM9!��n�MQ.-|��O�_oqڪMi�q,g%A1�֎:\Μ����[_i��H�A:�� ���+��y�Zn��� VO�{�r�=*U�Wg��iFK�����>�)��?�G{FCu-�wӗ6��`�]B��t�A��-���#ۭTf�qo죜��wH$��r?�F�?OJݾ�"�;����D>e������\"����� � ����I��s��9�x�=>�E�ծ�R�(����\G�����y��W��D"N�F�?L� *�fy�1NZD�v�v9�$��֢��S�$�N�#z�A)���6~�W�h���sRF�/LP�=y��ǵ+
nId�ҟob �m�,Fw s��[Z��
ZO.�ե�nn�>��rH�Bu>s(g�GZ�-+�UĨ
��������Mf�Aq˫�G�D[<�^զ�&���O;�� g��D����s���q�ǧ����r`d��{��-#GM�P*9|���O��K
(�"
'̎<J�8��V�El`ڤu���V���A�����Oz�x�H���o��V��k�M� �\��4B>��#���=?¸��F�x��K�?!�S�����B�K������h6�k���R2��#����k��5�6��iq-���ќn� xta���%aR�{X�����S"�+����%��5�w)���J\¤[�}$O�'��ǯ�SP��#R�tOC�|#�i�Ho"�96+�&����^��!��~��`z0=��#���ԁ�jA�}L��xX�� Z��5+���t��,͟ʫ�_���֩m��ܤo%�� �@�yG��K���_Vw];M��(w'q �Z���:�|����#kK�h� d�b����z��ݏ�M�~'�yW�5{�SS��.ٞ{��@< �{��g�gd��s�)�T����<1P�����iV�%�N} �ki��'��
�h�'.���H�+m�F쨤�ҎQ��A��W����9��F9'o?�ZV�;�;��t_O�Z�nb����9lu����̫?��~����qXi�^�����3(�4������D����jР7���>��;�2�ӎ������M���f�Q�>�}{L�%���`+�n����K��I=�,��d{���-�FlL� �*���5J O3�=;'������5�^sc�n4��~�3�d���*�� �vk��f��w�hR��f]L������)8��j��B,V
�0K�H���枂ס�G" ���v:7�/g���T�&ј-��}<�4��J2�C����q�,�����]�<mo�j?ڎom� I�J�Cg����4ӲG��q���ÚԆ7^4���nѓ�I���ҵ���z�i)�����1�Q&N���q��Z�r��N������ɥ]�is�<<H3�{�ҽ�R�%Ǎ<'c��4f�Mf��Q�k:';ǫc��5�l��I���g�3G�����]Ϋ'�.�|��U��� �ϋ�G'�46�p���8��J�Uy����"�8�h�S����@��� }~��x �j�,0"�.z�9?�P�ȳ��me��oc�mZ�i$m�����@����*M2a�v� �������siZ����r���=�k�0��M�u�籕=~T5mJJ�_�.��xز���1�\`� CY����n��A�LJ�O���R�`H��|Aa���y�(�8<�ֵ~*h�a�����y�GBÃ�)�r��7��7ľ�].?)�dhF�'� �sϡ�:�=O���\�>e��|�٢C���l���K�D�i:����('���~ Ƴ�}F������KY&�F��?BJ�j�:=v+}��r��ڵ�[d�z��(ڎ�bq��� ��F��C��I�����s�O��K�^L?Y���%�������V�m��<�i$ � p2x�ގRy�eǸ��]�������G�6q�sC��
�S��
���!4]��i�_�73��ݺ�}=1Y� tîx�����cd��yp�uQ�I�+Ynv)9m�:ojRXx6Y�-�
F/�Cn�b=y��?�|W�ɭ�W:����e�gh��SR���t'��)kH���͌�dl�{ԟ`qc�#X:�� %]5��K��h�6��ꗚ������#$�Crz`��|7�/������_��he���b��1����_VZ��C7O��J�������ʲ3m��a���<=u�bM1�DҬH�b&�I�L�b�\�hd�$�}�����ڶ�<�kg�Y��e`0�v�3�#�t[��\�n��]����D�1� �\�)�+'cY5��|f��1i��+�#��+�����z"Gg�ߢ��e�f�|���up��I3�4kt��c��^X�S���M\գ{O�nY�}�bG�g��UI�$��Qg��GQӴ���S���)�����9�Һ��ҵ�M�kg�+hрF3�=:�k)i����#I�_H��Q�C���T�d'�oÿ�
z���)�o
���[h�����-��~x=*}�n�T���|Y���x�I]֗C�! �6�I����\�k�x�L�eӯ���4��V�9 ڧ�=}�JZu\�1|Cl5� �0_��N�����5�_�?����p7i��,��� キ����$�Իi��C�G�uM/P���$�)�0�+p�?^���Ox2�]F}i'�1H�)l�U���Nv{
�fy���->���R����3����Y������O��3�4�X>]�Ibv�(��D�[���$��4}X� �1�f�M���E�aqc��fֶ����`:Rٍ��i�#ޯiֿkԠ�/��ry�"���o����%�tN��wkr+���e����y��%���#"3n�@BƪV7ہ��&Eh�3yg9����\��(EA{#2�}�?֥�2�H�葏�����������1��!�����61�~��#��5B/x�N�&t�>Wki��0 ! �d�ӃYIFZ��pvh���V�y�O��b���W�o�`ס|X�d�I��L.#�Ar��ʜ�BHϽJa%mL��WI�6v
�u^+�ִ�:.�&��%���c�T-� �����.[�sWJ�?^�G��xeh���7m$|�8}6�]CW�F��;�C�2�sEg_0�bǶ@���{
���/��|��;�b�C<�X�7�ַ�~+X�O'D�G�y�
3�H� �UtS��ȴ�v� �%��x.4�ՑdB�~8<�#���~ jZʹ�Ogk
��c�`��O��&����G��c�=_�D���ʂ�=p��Bk8I=��߲�1g��q��sX'�"}�N�r<+u��;D�uHc�(c��Y��Üq�S^Er� 3��~bZ-�[��;���W��%叅����J��(�����:^o1%�ӻ���K��oJ��4봼��Xf�mܽǡ�QY�d*s�����E�M�;���'�_�Z���n�I$W����� $U�sSP�uMO����%C��J�߈�v�x*i�.K,̀U�U^o��)��=����MɎ�M�+�Ǡ��,B،�rޔH�� /�zq@�5�I�G0��Y��{��v_7F���٭c�/S��� q"�]��� h����L� �̉��ɚ�Q�����|2q�ˊ����Xv����tj�+nR��I��$�!|�� &� ��E�X���^R�#�ɚ��}
�������A��C�En��4R�I�3�Z�u"�^jwS���v�z��H\̡$ͽy�=h�
Dބ��Y@�c�Ohwi�8#��Sїm�� 7#֊q�pL����q��N^��=��b����+�'\�Ww������*�#�(v��( ��L�2c"P�H `�QVփ������#���[�����Cv�-Ewqdl/� S�(�hRw�_, 4SHRѝG�_3_G�w�(�EKs��rf/��� ���EQ���V��na�ۑEsʹuSI�j�MxB�l-2�"��=M�?��
* { box-sizing : border-box; }
body {
background: #111;
color: #fff;
font-family: sans-serif;
font-weight:normal;
font-size: 13px;
min-height: 100%;
margin:0;
min-width: 100%;
}
h2::selection,
h3::selection,
p::selection,
span::selection {
background: #ff619b; /* a nod to mr. irish */
}
h2 { text-align: center; }
.peeps-box, .globe-box {
position: absolute;
top: 0;
bottom: 0.769em;
}
.peeps-box {
background: #222;
left: 0.769em;
overflow: hidden;
padding: 0.769em;
width: 14.615em;
}
.select-box {
background: #222;
padding-top: 0.769em;
}
.select-box select {
background: #555;
border: none;
color: #fff;
font-size: 1em;
margin:0;
outline: none;
width: 100%;
}
.list-box {
position: absolute;
top: 3.846em;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
}
.list-box ul, .list-box li { list-style : none; }
.list-box ul {
margin-top: -0.95em;
padding: 0 3em 0 0;
}
.list-box ul li:first-of-type article {
margin-top: 0;
}
.peep-box {
background: #333;
margin: 0.769em 0 0 0;
padding: 0.769em;
width: 13.077em;
}
.peep-box img {
cursor: pointer;
margin: 0;
}
.peep-box .peep-name {
margin: 0 0 0.4em 0;
}
.peep-tweet {
margin: 0.2em 0 0 0;
text-align: right;
}
.twitter {
color: #2aa9e0;
}
.globe-box {
left: 15.384em;
right: 0; /* 0.769em; */
}
.globe-box h3 {
text-align: center;
width: 100%;
}
.canvas-box {
position: absolute;
top: 6.154em;
bottom: 0;
width: 100%;
}
.slug {
position: absolute;
top: 500px;
left: calc(50% - 11em);
background: #333;
width: 22em;
padding: 0.5em;
}
.slug-img {
background-size: 3.692em 3.692em;
float: left;
margin-right: 0.5em;
width: 3.692em;
height: 3.692em;
}
.slug p {
margin: 0.5em;
text-align: center;
}
.slug p:first-of-type { margin-top: 0.25em; }
.slug p:last-of-type { margin-bottom: 0; }
/*
* shamelessly adapted from World Tour, http://bl.ocks.org/mbostock/4183330
*/
(function () {
var crtKey = function (arr) {
var key = "";
arr.forEach(function (str) {
key += str.toLowerCase().replace(/[^a-z]/g, "");
});
return key;
};
var list = {
el: {},
selectBox : {},
listBox : {},
peeps : {},
init : function (opts) {
var self = this;
var template = opts.template;
var select = document.createElement("select");
var ul = document.createElement("ul");
this.el = d3.select(opts.selector);
opts.peeps.forEach(function (peep) {
var peepKey = crtKey([peep.firstname, peep.lastname]);
select.appendChild(list.crtOption(peep, peepKey));
ul.appendChild(list.crtLi(peep, peepKey, template));
list.peeps[peepKey] = peep;
});
select.appendChild(this.crtOption("All", "all"));
this.selectBox = d3.select(opts.selector + " .select-box");
this.selectBox.node().appendChild(select);
this.listBox = d3.select(opts.selector + " .list-box");
this.listBox.node().appendChild(ul);
this.el.selectAll("li img").on("click", function () {
var id = this.parentElement.parentElement.id;
var peep = list.peeps[id];
globe.rotateTo([ peep ], 0, 1);
});
this.el.select("select").on("change", function () {
var peepArr = [];
var peepKeys = [];
if ( this.value == "all" ) {
peepKeys = Object.keys(self.peeps);
peepKeys.forEach(function (peep) { peepArr.push(list.peeps[peep]) });
} else {
peepArr = [ list.peeps[this.value] ];
}
globe.rotateTo(peepArr, 0, peepArr.length);
});
},
crtOption : function (peep, val) {
var option = document.createElement("option");
option.value = val;
option.textContent = peep == "All" ? peep : peep.firstname + " " + peep.lastname;
return option;
},
crtLi : function (peep, id, template) {
var li = document.createElement("li");
li.id = id;
var peepBox = document.querySelector(template).cloneNode(true);
var peepName = peepBox.querySelector(".peep-name");
peepName.textContent = peep.firstname + " " + peep.lastname;
var peepImg = peepBox.querySelector("img");
peepImg.src = peep.img;
peepImg.alt = peep.firstname + ' ' + peep.lastname;
var peepLink = peepBox.querySelector("a");
peepLink.href = "https://twitter.com/" + peep.twitter
var peepHandle = peepBox.querySelector(".twitter");
peepHandle.textContent = "@" + peep.twitter;
li.appendChild(peepBox);
return li;
},
transScroll : function (id) {
var offsetTop = document.querySelector("#" + id).offsetTop;
var scrollTween = function (t) {
return function() {
var terpRound = d3.interpolateRound(this.scrollTop, offsetTop);
return function(t) {
this.scrollTop = terpRound(t);
};
};
};
this.selectBox.select("select").node().value = id;
this.listBox.transition()
.duration(1250)
.tween("scrollTween", scrollTween(0))
}
};
var globe = {
el : {},
canvas : {},
ctx : {},
cities : {},
path : {},
slug : {},
init : function (opts) {
var self = this;
this.el = d3.select(opts.selector).select(".canvas-box");
this.globe = {type: "Sphere"};
this.land = topojson.feature(opts.world, opts.world.objects.land);
this.countries = topojson.feature(opts.world, opts.world.objects.countries).features;
this.borders = topojson.mesh(opts.world, opts.world.objects.countries, function(a, b) { return a !== b; });
this.xref = this.initXref(opts.peeps);
this.slug = this.el.select(".slug");
this.initCanvas();
window.addEventListener("resize", function () { self.initCanvas() });
},
initXref : function (peeps) {
var self = this;
var xref = {};
var ids = [];
var xrefKeys = [];
var createGeoMarker = function (angles, lon, lat) {
var marker = [];
angles.forEach(function (angle) {
marker.push( d3.geo.circle().origin([lon, lat]).angle(angle)() );
});
return marker;
};
peeps.forEach(function(mbr) {
var cityKey = crtKey([mbr.location.city, mbr.location.country]);
var cityArr = [];
if ( ids.indexOf(mbr.location.id) === -1 ) {
ids.push(mbr.location.id);
}
if ( !self.cities[cityKey] ) {
self.cities[cityKey] = createGeoMarker( [1, .3], mbr.location.lon, mbr.location.lat );
}
});
this.countries.forEach(function(country, cx){
if ( ids.indexOf(country.id) > -1 ) {
xrefKeys.push({id : country.id, cx : cx });
}
})
peeps.forEach(function(mbr) {
var nameKey = crtKey([mbr.firstname, mbr.lastname]);
var cityKey = crtKey([mbr.location.city, mbr.location.country]);
var id, cx;
xrefKeys.forEach(function(uniq) {
if ( uniq.id === mbr.location.id ) {
id = uniq.id;
cx = uniq.cx;
}
});
xref[nameKey] = { id : id, cx: cx, cityKey : cityKey };
});
return xref;
},
initCanvas : function (selector) {
var defaultScale = 248;
var defaultHeight = 500;
var elRect = this.el.node().getBoundingClientRect();
var scaleFactor = (Math.min(elRect.width, elRect.height) -30) / defaultHeight;
this.slug.style("opacity", 0);
this.width = elRect.width;
this.height = elRect.height;
this.el.select("canvas").remove();
this.canvas = this.el.append("canvas")
.attr("width", this.width)
.attr("height", this.height);
this.ctx = this.canvas.node().getContext("2d");
this.center = { x: elRect.width / 2, y: elRect.height / 2 }
this.projection = d3.geo.orthographic()
.translate([this.center.x, this.center.y])
.scale(scaleFactor * defaultScale)
.clipAngle(90);
this.path = d3.geo.path()
.projection(this.projection)
.context(this.ctx);
this.slug.style("top", ( elRect.height * .75 ) + "px");
this.draw({});
},
draw : function (opts) {
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.globalAlpha = 0.2;
this.ctx.strokeStyle = "#fff", this.ctx.lineWidth = 4, this.ctx.beginPath(), this.path(this.globe), this.ctx.stroke();
this.ctx.globalAlpha = 1;
this.ctx.fillStyle = "#62a4ea", this.ctx.beginPath(), this.path(this.globe), this.ctx.fill();
this.ctx.fillStyle = "#339633", this.ctx.beginPath(), this.path(this.land), this.ctx.fill();
if (opts.country) {
this.ctx.fillStyle = "#246b1d", this.ctx.beginPath(), this.path(opts.country), this.ctx.fill();
}
this.ctx.strokeStyle = "#246b1d", this.ctx.lineWidth = .5, this.ctx.beginPath(), this.path(this.borders), this.ctx.stroke();
if (opts.city) {
this.ctx.fillStyle = "#246b1d", this.ctx.beginPath(), this.path(opts.city[0]), this.ctx.fill();
this.ctx.strokeStyle = "#fff", this.ctx.lineWidth = .8, this.ctx.beginPath(), this.path(opts.city[0]), this.ctx.stroke();
this.ctx.fillStyle = "#fff", this.ctx.beginPath(), this.path(opts.city[1]), this.ctx.fill();
}
},
setSlug : function (peep) {
var self = this;
this.slug.transition()
.duration(500)
.style("opacity", 0)
.each('end', function () {
self.slug.select(".slug-img")
.style("background-image", "url(" + peep.img + ")");
self.slug.select(".name")
.text(peep.firstname + " " + peep.lastname + " - ");
self.slug.select("a")
.attr("href", "https://twitter.com/" + peep.twitter)
self.slug.select(".twitter")
.text("@" + peep.twitter);
self.slug.select('.city')
.text(peep.location.city + ", ");
self.slug.select('.loc').text( function () {
return peep.location.state ? peep.location.state + ", " + peep.location.country : peep.location.country;
});
})
.transition()
.duration(1250)
.style("opacity", 1);
},
rotateTo : function (peeps, px, pLen) {
var self = this;
var peep = peeps[px];
var nameKey = crtKey([peep.firstname, peep.lastname]);
var cityKey = crtKey([peep.location.city, peep.location.country]);
var opts = {
country : this.countries[this.xref[nameKey].cx],
city : this.cities[cityKey]
};
list.transScroll(nameKey);
this.setSlug(peep);
this.draw(opts);
d3.transition()
.delay(500)
.duration(1250)
.each("start", function() {
self.terp = d3.interpolate(self.projection.rotate(), [-peep.location.lon, -peep.location.lat]);
})
.tween("rotate", function() {
return function(t) {
self.projection.rotate(self.terp(t));
self.draw(opts);
};
})
.transition()
.each("end", function () {
px += 1;
if (px < pLen) {
self.rotateTo(peeps, px, pLen);
} else {
return;
}
});
}
};
var loaded = function (error, peeps, world) {
var listOpts = {
selector : ".peeps-box",
template : "#templates .peep-box",
peeps : peeps
};
var globeOpts = {
peeps : peeps,
selector : ".globe-box",
world : world
};
list.init(listOpts);
globe.init(globeOpts);
};
window.addEventListener('DOMContentLoaded', function () {
queue()
.defer(d3.json, "peeps.json")
.defer(d3.json, "world-110m.json")
.await(loaded);
});
}());
���� JFIF H H ��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 <