block by mbostock ad550c9d6d156ac726b45f48fa6ff2c7

I Make Circles

Full Screen

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

����JFIF88��@ICC_PROFILE0applmntrRGB XYZ �-acspAPPLAPPL���-appldescPbdscm�cprt�#wtpt�rXYZgXYZbXYZ,rTRC@aargL vcgtl0ndin�>chad�,mmod(bTRC@gTRC@aabgL aaggL descDisplaymluc"hrHR�koKR�nbNO�id�huHU�csCZdaDKukUA2arNitITbroROvnlNL�heIL�esESvfiFI�zhTW�viVN�skSK�zhCN�ruRU$�frFRms.caES@thTHXesXLvdeDEdenUStptBR�plPL�elGR"�svSE�trTR�jaJP�ptPTLCD u boji��� LCDFarge-LCDLCD WarnaSz�nes LCDBarevn� LCDLCD-farvesk�rm>;L>@>289 LCD LCD EDHF)LCD coloriLCD colorKleuren-LCD LCD ������V�ri-LCD_i�r LCDLCD M�uFarebn� LCD&25B=>9 -48A?;59LCD couleurWarna LCDLCD en colorLCD *5Farb-LCDColor LCDLCD ColoridoKolor LCD������� ����� LCDF�rg-LCDRenkli LCD0�0�0�LCDLCD a CorestextCopyright Apple Inc., 2016XYZ ��XYZ q�9�gXYZ a#���XYZ #����curv
#(-26;@EJOTY^chmrw|�������������������������
%+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�KKSK�K�L*LrL�MMJM�M�N%NnN�OOIO�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��paraff�
Y�
vcgtndin6�@U�L���%��PT@333333sf32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똈�:�bE^�������@{��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;���L2W�?d��v~��q��B�"Ю�E�ǽʢ���;�USV��vP���6�L
�=RƗ��z"���k�\����EM1ɚ���gm׫6��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���M޷G'�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�?`H3�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}>��tE[�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�?`H9�Ʊ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���b܏c�^�=��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���Rs۝�<��;�yH�nwh�7?.�Fe�J��ٮ7�(��}&~@
�Yf�6�۷E��LGT3�;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�N{s�G����v�)9���Rs۝�<��;�yH�nwh����� =�ݣ�Q9�&&94�?��