index.html
<!DOCTYPE html>
<style>
button {
position: absolute;
top: 10px;
left: 10px;
}
circle {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
</style>
<button>Click Me</button>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 30, right: 30, bottom: 30, left: 30},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleTime()
.range([0, width]);
var xAxis = d3.axisBottom(x);
var xAxisG = g.append("g")
.attr("transform", "translate(0, " + height + ")");
d3.timer(function() {
var now = Date.now();
x.domain([now - 5000, now]);
xAxisG.call(xAxis);
});
d3.select("button").on("click", function() {
var time = Date.now();
var circle = g.append("circle")
.attr("r", 80)
.attr("stroke-opacity", 0)
.attr("cy", Math.random() * height);
circle.transition("time")
.duration(5000)
.ease(d3.easeLinear)
.attrTween("cx", function(d) { return function(t) { return x(time); }; })
circle.transition()
.duration(750)
.ease(d3.easeCubicOut)
.attr("r", 3.5)
.attr("stroke-opacity", 1)
.transition()
.delay(5000 - 750 * 2)
.ease(d3.easeCubicIn)
.attr("r", 80)
.attr("stroke-opacity", 0)
.remove();
});
</script>
preview.jpg
���� JFIF 8 8 ��@ICC_PROFILE 0appl mntrRGB XYZ � -acspAPPL APPL �� �-appl desc P bdscm � cprt � #wtpt � rXYZ gXYZ bXYZ , rTRC @ aarg L vcgt l 0ndin � >chad � ,mmod (bTRC @ gTRC @ aabg L aagg L desc Display mluc " hrHR �koKR �nbNO �id �huHU �csCZ daDK ukUA 2ar NitIT broRO vnlNL �heIL �esES vfiFI �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 K l e u r e n - L C D 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 stext Copyright Apple Inc., 2016 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 �* �<� �� C
$.' ",#(7),01444'9=82<.342�� C
2!!22222222222222222222222222222222222222222222222222�� ��" �� �� E !1Rf��2AQaq�"�#B���$3Ubr�CSc�5st����� �� ! Q��AR!1B��� ? ��9��R�ɹ~�آ�ɷEUɈ���9������C�+�h�4�j�v/UO/�U꧓N�r��ݍ�3�=��'.�j2�k�UȷEu�T�ˍ�:�&��������nV�����Ss#"�Ur�Q3v�������fa9x8���oZdzDܹr��mM1�Ɋo������ѣc�bd��+��et[Ǯo��j�݈����� 3#� �&�o��mˢ9T[�O��Y�v�vo�V��V�L|b]Tڸ�mm�� U���(�ݟ�%��{s��������^Ew�d�Ǫ����_]�t����E�s
�]YZ/k�k�r�;:��sf�z)�'�G"mW���߯y���ֽ���MxX�bMYUL[��[�ê����+��g�k�3+�+��O��e�r|�� F鯷f�z����A�}/K���N9���̯�[��7bj��S��i���x�X-i��?�KM���N�V5�7h�_���ى��*�تz��V��_�\�*��3+�+��O�Z��-h���#�u����7q+�O���U�<��t�r��g� �F�-�
ѵ�N'���9�^�/�Uʨ�ez��ySry][m�1�d�ߦe�r|�� C�̯��O�?�i��f�z����q����:-]6,_��o�Ƚ�&*����y�����R'�g� *�g�U��� +����څ�6�v��ܷ7�����-��ʪfb"7ꎾ����9�qv�Eʭ]�z�E�7)���~ � "�v~�E^��� 1�r�V�r���"j��숎�S,i�j��sG��h�b՝V帋5L�������g������[y�9�w�w��n��v�6��|�8O�2�Ln���?C�6�2�/�]�D��G#nM5uDL���DDDGd �kF���5q��ʯ#�\�\��ox�fi���'ozbba��Zf�����ݳsQԲ��ȋ>Ή��b�w똈�:�b E^�������@ {��J*�g� q��]��t+��¬�ܪmX�L�7.�TSM;�:��<�K��s�oU��f�ڈ�3�TWf��h�fy\���^m]���/[��E�b�g�� ͡��Zn��9��]�k1LU_���Ȉ����7�2���WB�14��;zeە]¢c�TWO&+�'�j����w4N"Ҹ���Ve[��r"&����T���:j_����~�Ĺ]�+#�-�{�E۳MS3r����ݣ�}�@ �K�A��+R����s�b��"��n��º�&)�dq���]�M�uEtUU5S;���L2 W�?d��v~�� q��B�"Ю�E�ǽʢ���;�USV��v P���6�L
�=RƗ��z"���k�\����EM1ɚ���gm6��fݛqɢ�1M1� "f#�b 9�ο�p�-9:�m�[U�ɣ��5��#�g���u�;]���/2�V<��˷=��1���g�q�px�I�KZ]�W�=�{]�UsL��)���&�ۯig��Y�k����\�,jW-M�;�E����\GTUV��H� 5��t-g@���u+Z�E��3������϶��ޝ�;�C�@9�=�բp曥�w��E��w����� {��J*�g� ʵ8���1���8Ӎ��:�ܪ��M�DLܷ��*�V��\����[+O�ͪ���1�މ�n*���x��>�����>��]�f+�w/F�+��[����ɕ���6� U���(�ݟ�$ W�?d��v~�� Q����.�����4�m&�-LՍ��r�"��y�i��략�[�x#Jֵ�뻝��r��z�UVf��M{v� �=x7\��<7g7*ݺ2i�r��g�U]�扪�������t�M#N���X��-�y6���� ^��,ܮ�yu�L�4�����9���i�)���W+�s��{N^���v�����f��X�]�9�LMT��n�f ��gN
����S���,W~�#�TS��[�/i|C�VF��M�h��r�������i��� ����%{��� ��S@�c���Pߕ�=�r�_=�^�` avk��sn7�)��>r�;�2�bx36���̮��۳��{�<���=[|6a�n�'���W�M���MG'�U_X�f"~�����G#;A��4k�Ur�-Y����W�\LES��oh/����̯'#?RɈ���UDܪ#��۪�c� � "�v~�E^��� )|w�vs�
*�{N�u����Y����zm���O��_���/�s�
;R��4�0�Ȫ/ߛӋzjۑ�^�G^�=[.y�v��^~-��k����ET��/'D�4,Y�Ұ,aٙ�Mh�w����� ����%{��� ����:� �N����q��-r�U��^�]<���(��fw]��o���sP������M�e]����r��[v�'�5��wA��u�3"�%�����n��j��;n����+D�l��}�l�ٍ��:��3?��n ����%{��� <��-��^ɻ���n��m��A�>s��*���qf^�
�Eʱh��ͻ�DW��fv���o��X��"c�z� �ݟ�QW�?`H +|i��i:v�6�V�5�xV�ާ�E��}���;G�e����:�wO�lE�k�L�3111�q1=� �i����X���S���ƻ~��Sj嚭�o�M3�.���W�]���7�.����Ȫ�Ȣ;)�����C��Qv�V�*���j�{&'��"��o�G�ù�jW�;"�*���Q���[r����fWp {��J*�g� UTSL�T�Dv��cCX�1�l?o~*���-Y��v�즘����rc'���۞�4�5�Z�?���ya��]�\���c��zj�1� �%�m��� V�U�{�q.S|�o
�Z�ǵf�vSn��?��1Lo ����u;^�.�E�\U����qu�sns�V��͏w+}�q?]���;��u|�7P��뼚��;b�Q�/�v���N��� �^Di�ֻĵ�/ei�u�����,�4ݦ"c�5N��ٳ�v~����5
/*���w/Y����L�48??S�+3R�N]�15�U<��7���>1�� +""""#h�Ȅ� �ݟ�QW�?`H 3�o=���Yu��~��r,UM���� 0hhv� ]կq
��X���i�Oe4D�UϽS���ѧ�X�v�jlڦ��!� 4�]3XӮ�d��+������D�&%���:�F^
�\��?���Ozcݯ� �6�m\�9���]4�Q��˪>u۫m��� � Q��[�齡c�yq�~�UT�h�h�vf�5�t�5v� �����;���Ճc��lɫ#���ۮ�Mٻj�L�;�n����i���B {��J*�g� pxҊ���Ji��qso�j���w�Y-�c]ǻۻD�T|�ciعM�{w(�鮈�'�0�W�K&�t��FM_�e\�ڨ�r��ӷ�� "��EU�TSM1���D���o�
��4�����WLG�Jĭ��+Q��u��b����6� �4o?��>K .ٵ�j�W��r�Q�TWLLL}bY�����óqlZ�j;(�DSL� ��K��Vj�/W/�4ٳf�W.]����LL���f���E�VV�~nQEsn�S4Wn����g�'�� ����%{��� ���Fe�gI���b�Ev���ɷܟ��'�-�#]��mU�f�y��c]�M�U|�?���Z�`j�)�r�����ec�ȹO����uEr08���j����3lM5� �z��4����4k��7+�.�X.\�պ�\��(�7����!U�ɻ�gk�E���r㫜m� �o�:��4���M�wR��m;ʼn��b'����fV(���i��1�SLm �V�صE�TE�)��ch���f�_��.2�ci�����Sɹ:~<ݢ��M}T���4�3ҵ,�p.FN}^�6u��]���W� �� )�I���qV�ĺf��c�\Ľ�)��SUQTWD�վ��WR���:f�N��k��%8�K��T�ͺ-�ɉ�c�j����-� *�g�U���
�\�����Ջ�ٍR�s�r�ڨǷ�? �x�������F��qȞi�r�>]Q� �n�DEs���`��v�0�[��j���v�h�jk��0�-���Wi��q�]3�F��E5�TUMQ�U�L5�-GIӯ��ݦ�=�&��{"?�Gj�Z�S�ꊳ�/\�ɪ?�]��3W�O�< ��c���˵6�5���Z����V���y;,� *�g�U��� ;�-dعb��nZ�L�]��TOlL= T(��CJ���x�'����S�j�ҎV�L}7��c�*�̵��Z�F�r�Q]��M�U�{:{g�2�� "�v~�E^��� ����%{��� *�g�U��� ��֩cU��-����}�|�&���6��MSɉ�U_�"#v<5���k��k��{7ջ�(�j��7�fy5D�?G�8k�m�����X���l�Z�mU1��?)�ؘ�X�� b���ާ#+37.���̻���6��7�"">� *�g�U��� 5�gb�껑j��MQ����?���g���4�}S�;�� 4��m�wmݧ{w)�>t��� X���T��ch:6F�v��ݹ�ri�f�O&&y1333� Y����+W�CRãTӯE��v��۫�O*��ݦ'�� �ݟ�QW�?`J&b"fgh����z�=��ݪ)���f\�l��f.dEV��h��5�j�}�Z�yͽ>϶�꛵N���~?��m��y�w.� �۞E��-�(��E�4�TDF���gOñ�ƵOד��"��Ȅ�ƫv덪������iW*�Sg�Wߵ<�� �l��p���q�˽U� |��.�g*����ާr6�?մ�����Lr�i�O])ꪙ�H6G?.����gLr�� uz#jn}>��t E[�g�۷P1�֢�Z��Eɍ�To�ٛ�z?ь��=�� }��Nܾu�yS�������ճ�^ߘc�Dz������7� �� ���1wS�q�]7S������M�k�3��]�1�\|� N��4YU�̽���w�eeވ��U���Q�D;` *�g�U����Q��O����_ҧ�r����>N�v�n�tS�Lmd �kyv*�v7�{&;b~q�k`d\�ׇ�;�Z����~�}��ٮ-љf?��<����?ާ��7h�f���z+��'�� �ٵ7b�ۢnDm�c}��� V��.����Xzfv��ͯm]�:i�����������'h핑P�tm�25����1豕��]TF�oȮ����LLl惯a���qr���r��y7-\�v����0�%�d�z~UY����3���ʪ�3Eum�LO^�� �ݟ�QW�?`H ����� F��)�sz?諮?���K_�~�LOޙ�t ����r}��(�N�ʪ#yf *�g�U��� ��ի������������%=�U�?��� >Q��fx�^����o��s5{?aȍ���\�V���ط� g���8<� ��� ���Oc˟g�߯~G'�e�f��O��E|�ޞU1;Oј �ݟ�QW�?`H 9�ƱcDŷ~���}��l۷b�.����"?�A���j|ϗr�9�U1�{�N�_�oJ�?�~�ҿ�߇가�t�������+����~�
�J�?�~�ҿ�߇가�t�������+����~�_7&0�.^��b?l|��`�c�G��2rB�*��i�N�}�u�����_�����u��i�¢�s����'�T��h��4���w'#C�-ٵL�]ua�SLF�=����k����u٦��'��Ǜw����h���x�gS8��5F�U�"���\���:-��+̵ϑ���4��o���u�o�5:W��{��N��^�?U�{�~��_�����X@W�W��{��N��^�?U�{�~��_�����X@W�W��{��N��^�?U���״�72�^O#"�on�QUS1���D������k�U^>��\���TӇ�U3��o�cg�J�?�~��Kָ{H�Qč^�Sf����\Lrw��q��rj�n���7T���y�
��j*�&b&&���&'�'� ���������+����~�
�J�?�~�ҿ�߇가�t�������+����~�
�J�?�~�ҿ�߇가�t�������c��U�^$h���QD\��3�ff"{~q>K4�S��G�T��<7��n�F�ES��X��D�1��OV��US[�o�~��_�����vps�u,;yxw��b�oMt�z���v�+�+����~�J�?�~���ҿ�߇�t������� +�+����~�J�?�~���ҿ�߇�t�������,.ݢŚ�ݪ)�E3UUOdDû���cWf��&�EW��v�p�����:�Q3�=�W��{��Z���j6t�N�Nh���ۘ�_�+�uDS1��U3��t���f6%���d�EV���*��f��ș���gy�J�?�~�ҿ�߇가�t�������+����~�
�J�?�~�ҿ�߇가�t�������+����~�
�J�?�~��#�,�c]�����vmS5�]X}T���j��qN�����0uL�ŧ6��Q4�5U���m=Q��`<i��k����u٦��'��Ǜ.��^�?WGSӮ^��cfٽ�F=7yU>Ϫ"�۳~�@��^�?S�~�a^�_�����:W��{��V��^�?S�~�a^�_�����:W��{��V��^�?W�7X̢���Mr�4WU���>ʩ��;~:������Y����d^��ۊ*�f7�~�������\=�Q��F�n��z�U�&9;���j�5U�V���_�����:W��{��]m7T���y�
��j*�&b&&���&'�'�-�W�W��{��N��^�?U�{�~��_�����X@W�W��{��N��^�?U�{�~��_�����XQ3��1�f8��Y��F��NEEʭ�>��fb'�����_�����jY��g7W�W�����Qȫi���L�ս{�T�V�����j�Tf`ߦ���b+��'i��뉉�����_�����:W��{��V��^�?S�~�a^�_�����:W��{��V��^�?S�~�a^�_�����x��k�٢���QU�����?~��v���L� %۴X�]۵E6�j��숎��c?]��FΟ�թ�12�s���sn��b&7���z�@��_�����:W��{��[4qV�s3�J�w�i��QN�Eq3O_dL�N�3�� �t�������+����~�
�J�?�~�ҿ�߇가�t�������+����~�
�J�?�~�ҿ�߇가��q��Lk�9�nͪf����b7��gOS]�N���5F�<϶<��S�i64|�S:1iͳr�M4�UDru[DOTD�3����-�]�+P�w"�b�b"v�jbv���gm�h�k��������+����~�
�J�?�~�ҿ�߇가�t�������+����~�
�J�?�~�ҿ�߇가�t�������+����~����i�ne�<��FE��ݸ���c}���7��\���eb�~�6�Wb���WMtN�Dæ�h���_�cS�[��ʿ�~k��������rfb:�땋M�0�|^s�~/Z��������퉉��H6�W�?d��v~����MX�;FU��� 揅Q���O7��E�EV�ʧ�c�?FXy��ETUL�ȣ�媻i� X��h ̢Sϋ��W��\���B/_�S�V.-SM���_�� �~�WFժ,Z�պb�)��#��g\Ы����gOǢ�j62(�UQ3\S]������ɦco��˵�����3���1~������=T�yQV�L��m�ڽ (�A�kZ��F^6�ʪ�6��Z�*���7&w���&6���1+��dp���������*���/M�� l��Sr)����D����o�,�zu��c��˜�aMq_��M4�L�T���v��� OS�7�i�0���]���]|���'��ӵ��n����s4�s��^�rժr��ϲ�����b?gn�վ��`7`ei�<ћE�/_��]�ur��7+��;�vߵ� �֭ed�ױ1�����[�k�4E;�;vu��WWf�� >s���A����X���bc�^�=��M�����[�u�����+���:�ZuV,W�{+2�T^� s6�3U��m箘�����
O�z�V_'L�mS�z���z�E_�D�DmUȊ��v���� ��hS���58����L��i�����&"g�F۬@
?h�֧�Q���6r��M�yV�
���Mɝ�:����n��K����F>6'7NJt��oX�7���j�MȦco����g��p�o3�G/>����#�S\W��M11�3�w��n�
=N��Ŧ�÷�1v���u�b6��V� N���Z�8��Z�j���V�gn�~���ƵoɱF�S1�V�~K�
`U�hv�\Ź�w�]w)�z.�UuU35UTuL��� ˮ ��Z��ӯbccۻ�-\�T�vh�w�v��랮���R��{�0s1�+|�,[��t�ڇ����4UT\�x����Q?}���ִ�mi�X�^5�l��Q{�����V❷��b"~S/� )<K��9Y|�3I�N=��F]�9Q~�M�UTO"*�iۯ��]U�#ҮΝkO�]T�k'{u[�sLD�ۮ�\D��� G�
Z��*2�&�UV��o*֡U�i�3�T�Uq1����^ |�#�5�|lNo��W.ޱzoG�d�z��L�߷�&'��
�fcӨ��أ�v\�{
k���ri�"f:�n���U���(�ݟ�4����R��k���""(�j7��SO� =�5�q-�\Q5Lu��~{s�G����v�)9���R s�<��;�yH�nwh�7?.�Fe�J��ٮ7�(��}&~@
�Yf�6�۷E��LGT3�;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���R s�<��;�yH�nwh����� =�ݣ�Q9�&&94� ?��