Skip to content

Instantly share code, notes, and snippets.

@capitolmuckrakr
Created March 2, 2017 21:22
Show Gist options
  • Save capitolmuckrakr/c6a22e4476c674f54f55166e0510dfa5 to your computer and use it in GitHub Desktop.
Save capitolmuckrakr/c6a22e4476c674f54f55166e0510dfa5 to your computer and use it in GitHub Desktop.
I Make Circles
license: gpl-3.0
<!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>
����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
� " 9 Q i � � � � � �  * 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�C Rã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��4 YU�̽���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٦��'��Ǜ.��^�?WG SӮ^��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���5 8����L��i�����&"g�F۬@
?h�֧�Q���6r��M�yV�
���Mɝ�:����n��K����F>6'7NJt��oX�7���j�MȦco����g��p�o 3�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�#ҮΝk O�]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�?��
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment