Skip to content

Instantly share code, notes, and snippets.

@thadk
Last active February 12, 2016 18:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thadk/898afff5657fcd2dc73a to your computer and use it in GitHub Desktop.
Save thadk/898afff5657fcd2dc73a to your computer and use it in GitHub Desktop.
Chained Transitions
license:gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
max-width: 960px;
margin: 1px;
}
div {
width: 10px;
height: 10px;
margin: 1px 0 0 1px;
float: left;
background: #eee;
display: inline-block;
}
</style>
<body>
<script src="//d3js.org/d3.v4.0.0-alpha.16.min.js"></script>
<script>
var n = 4002;
var whiteblue = d3.interpolateRgb("#eee", "steelblue"),
blueorange = d3.interpolateRgb("steelblue", "orange"),
orangewhite = d3.interpolateRgb("orange", "#eee");
d3.select("body").selectAll("div")
.data(d3.range(n))
.enter().append("div")
.transition()
.delay(function(d, i) { return i + Math.random() * n / 4; })
.ease(d3.easeLinear)
.on("start", function repeat() {
d3.active(this)
.styleTween("background-color", function() { return whiteblue; })
.transition()
.delay(1000)
.styleTween("background-color", function() { return blueorange; })
.transition()
.delay(1000)
.styleTween("background-color", function() { return orangewhite; })
.transition()
.delay(n)
.on("start", repeat);
});
</script>
�PNG

IHDR��}��^
�iCCPICC ProfileH���T���̤Z � �#��k(ҫ��@%�@P�+�
���,E\�"kAD��(v� ���.l�� ������;��w�w����o��{��\a ���lQ��'#6.��� ��@���z��T3׿��mt4���S�����<7)��r"7����)4�s��l.��]�-���(+��Q.�b�4���i��>&2� �(l���w4�����: ʖ._��-ʮ�6:��22�N�!�����o5�5�l�������,a:{����[��9tР���ç�C׬6mi����Cf�ϝ�i�S��Q3���a.�;p��iQ3��>��fEΰhi��� }~��~K�IY>3���e�pnJd� ����pVZD��/i^$���,�cF�lo��\�)���=�J��&y�H�(�xa����0=t��t?i>+'B�l6��f8�:['T�>��p���O�+�T�B��d3<�S��` 8f kK+{����'}K�~� ���\f;�h�7�c�p�)���9�7�v���^�X�3���� H@(� t�0��8w�@�q`1���D`Xփ|Pv�=��A-8N�p\��u� � ����Ax�
� H ҇L!k� �B>P�A @bh�*���R���~�NC��Pt�F�7�g�)�"��sa&�‘�"�g¹p� .�+�p3|���<����m�a"^H�$#"d R�#�H҆t!7 ����ah����Da8�L��VL)�ӌ���� b�0߰T�:��eac�<�2l>�[�m�^�`���q8g�s����p��������F\;�7����*xS� >��g�����G�����a�G��E�&�� �B1����0B� ���N�"�����XEl#� 'H�$C� )��JZO*!5�.��ޒ�d�#9��'�#������ɟ(
�e!EL�F���S�Q�R�T�;5��M�F��^�>�~���XȰd�2ke�d�e�e^�e�e=d���˞��!�R�(g �%ǖ[#W&wZ�ܸ<M�J>D>C~�������

>
\�<��
�hM��E��6Ҫh�hÊ8ECE�b�b��1��1%%[�h��JeJg�$t�n@g�����'���h��4g˜�9�s>(�)�+')(7*(Va������TiQy��Q5Q S]�z@���K5E5g5�Z�� ��갺�z��J�������~B�}5^j�5�5S5wk��բi�j�vk��z�Pbx0�%�NƘ�����X�B�G{B�P'Jg�N��#]�.S7Yw�n��^��*�z���D}�~��^�.��1� Z �*� s � Q�܌2�*�n㌙�i���{M`;��2�����)�t�i����L`Vivǜb�a�c^o>hA���`�b�j�����;�v��fig�nYe��J�*�j�U��kk�u��-����Z�V�׶��I�l�����6�u�}�w��7؏:�9$8�;�a*2C�[�W����k�8~r�w�v:�����s���g� �%ͫ�7���v�p��2\\�Jܴ��n�nO�uݹ���#��G=^yZz�<�<?x9y��j�F��� �{||�|J}����|�}����V���c��w��ai�8�:�X�C���@J`D`i�� � QP[0�+��|����-! ��+�Q�ahf�/a��а����V�»"hK"�D����� �(J�-�0�.�C�wLQ�$vn����q�q���x||t|u���{ /�[����"�E�]]��8}��%�K�KN&`b�$|a��+�㉬���1�g/�ם��;��T�4��\�������MqK)Ny����_���L���V�6��ޘA�H�8-P� :�j.]��Oh*�J2�2�d��E�YP֢��lE��t���?�s\s�r>.�^vr��r���&+������i%f%ge�*�U�W ��X]�Z���c��ڼ�����ծ'�O[��� E�m��ؖ���.o����e�E�w69o:�����g�͖}[�p �Z~���z�G�K~�ܖ��g���;p;;n�t�Y[$_�[4�+xW�n�����,�s�ض��^�^�^IIPI�>�};�})M)(�,k,W/�R�a?w�� 5�|��n�_Es�Ae�a���O����~b�TW�Z]X��FP#� ���s��;�~d{=\/�=��h�1�c� � ���������~�}"�D�I�ɆS��ʛhM�P�汖�Ik\k���m�mM�X�RsF�L�Y���ϑ�坛<�{~�]�����Pǒ�c/�� ��x��e���<��_q�r����ט�Z��_o��n���צ���7Z{{������w�p����[�[���ݎ�}���;��ܻ���{}?��ău� �=*~����7��%����ރ�O"�<� ��=��/�yO�O�G�F�Y?;3�;��|����/�������ѫS���=;6�Z�z��ַ*ok�پ��>��ć��*k?1?u}��<2�� �K�W�m��=�̘��E��VANN�M �8�;�@�����M����O���B�K�;Q�B=�4�Q���)K�`i�CY�6�ӵ(���~��|�� ����ɉ���_��f�О9�ŧ�C�P�c��[s �W��"L�BOY�iTXtXML:com.adobe.xmp<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 5.4.0">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""
xmlns:exif="http://ns.adobe.com/exif/1.0/">
<exif:PixelXDimension>960</exif:PixelXDimension>
<exif:PixelYDimension>500</exif:PixelYDimension>
</rdf:Description>
</rdf:RDF>
</x:xmpmeta>
��2(�IDATx���y����7p�1�"�B��P�8�JR�&��D�"*�8�C)Q*QQ$�&E�<2d��P"�B��y��z~�<�k�ϵ�u�{�z�u��k}����~wν�g�u��}��������NEl�Pl
4(��@�
4(����֭s��������[@�P_���ʻP����/? ;�W�8��V.;T��y�?�ò�y�l�
�M
4(��@�
4(��
4��� Fy�����g�m�o^g�Çs��v�6*������,�9�C�O�o���e�4�_�Rؾ��Y�'OGǰW�z�^ءB�,���+Y�� ��ǷF�m麁�@�����y��@o���Z����kq�z�����^F.���ѥ�Ҡ�?��(��@�
4(��@
4(�P:�����(�5K��V=;�.~{�� �y��6�a���0l�g-SO7*���w����B���oO4�^ '���~zcH����nV��]-l�d� U��//�[5�f���k��\��G��w����A`�� ~Z4,z�����A`�]*ĥ^;���77z��?��(��@�
4(��@
4(�P:������ˋ]�Ėnj*c0gT&�n�S3l�xQ�����ۂ�6w�b�������gp kޟ�ݿ���;G�.<��]�^�4�X�J�����6A`��.��O�
[����.�^ G߼���ѥ޵R��:$���V>\�5K�D�}�Vk>��k�nZ��s���?�=lr��%�_'z�6x���@�=?z��pW�]lt��QA8w]��_�lؾ� �p����\��*����. _����X��u�q�?|87l�o�ߞi6?qr \���C@�)��@�
4(��@
4(�P:�����<�wѰ �u͞�/{!l_�؟�n��_}v�eς@���̍��"��9���B�`}�cG���х���u��G��j�*�Y����פl��M|~�hAt��_�W�x`>�^�����s�A`�����c��;s������]��6��/��� ����]-l�dq�Y$��Y%z�-M<�u�=0g}�<w�ѺA`�S��cv��:,)�����u�JO��Gy��+ly��?�݋F�o 3�O�'[�ם����޼9��5.���C@�)��@�
4(��@
4(�P:���k�w> w��ɖ���u�ep ̩�o�xQ�.�>\+��-�@&3���IA`�S�(� �,~y�� ��Q7d0�6�+��������W�a�/��+]�� ��s�,�gr����+Y~�|x6��Y��V�g����A`��:��7LA|�N�#l��ă�}A��K��� ^��}�V�a�C���G��:̩/��n�����g~�|�� ����S�@�hP�@�hP��t� 9X?�{͒��ĶU�ɇ9��S��&Lf0/4�.~{�� �y��6��҉�5�ψ������w+�*T[�Պ�ޥ�=���� d�ob�'[F�}�i��T�~�:鏡���;.z5|� ����t~��Vi�|S�Z��ya�`}�Z���魑��ևt�����Y9(���w[7n�}[������GO
���D>܋uSw����oz���fո,�OV�]�9}� �I�O ��dp%t���)� ŧ@�
4(��@� (��@@�0�r�~�jI =~/�P�������~��y'DG��ق������ ����. ַ8~| �v�� ��{���L'��� �m�s�ߋ?���7m��ϯ�3lu�?~y�G�������
��״lL�͇c�s�>A`�fm ��|�Y�*�@�(�i���[���R�}������r><���Y����)� U+�P �����W�C@�)��@�
4(��@
4(�P:�����(�|a���Â���^O��^��X����ogp�~y�`}ˣo���{�|�Z]�]*�P��}0N{%�c��C���V.�nV���/��%S���U[���� �u��@��{Zt�����FA`�zs�xͩ��Ƌ�aD�oO4 ��4;q�=�4�¬�g�ۓͣ]ԝ��:|��A`���&n��G�͊����?�60X���~�w�� ���-����|���G����sr�~��Rg>\�ߛ�oS�]�q��� ����������@�
4(��@� (��@@�0�r�~�w> ��y�5��V����A`��:���ul�k���p�6���1��?��s����F�����A`���?�߻+z䪟�Ӣ��c�y��ϴ [�8���;F���f0�tݴ]�'�嗫�� ��~�De0˷$F7_��&q �W-�nV�*�o�/���o��a�w������+�~k��a>���Ŕͣ@�ߒ��c��8�ō�l�������4����`}��N���7
�7�7� ����B���#�3��=�:X����Y|x��'�hP�@�h@�J�Q���b��NY����A`��[���5K���?�14:�C{ep�N�3Xߤŧ� M�����`}�=k�Y2%�ԭ��ì�������6;�������j���M��S������-N�+q��t~خJ���]����J?_�ۯWF��\����۷EW��N?�60lux�����C`������ UR���Y%��j�4���U�;��'?^�LJ���[�8�P�Z�Yt[��O�hP�@�P�@���a�7�`�(�o��"H�Tn���չ������TL��_^��oy������� w�?�H�5�~ l{�Y܋�_�g����H���`}��:����w�79��|[6�=}n��y�{ �,~�Q��Y��e�f�9k��s��ü8�)�������`}����l��������.T��ݷe���9������_
ַ�tt���S-��:���R���O�hP�@�P�@���a�7�ு�1�rj���g~mVg�~}�]��� ](����xI���1���ŏo� ַ9�s LɞQ9Xߤ���q�~|wBt%l�nڮ�˼嗙��.�Qw��wִ]���ʧ��?/�&Xߪֵ�w��㍂����M~O��#zO=��,��]���o(>hP�@�h@�J�Q�����A���Ղ�M�,.��猽��M��~k�=s ��� d���S���N~ą*�\pJt%�?���#���i����2ϋ�|�|t�g��<d(z���O�hP�@�P�@���a�7��(o��L`�=��۞�� %�w��� �@�hP�@�P�@���a�7��(� .���̓��[��rb� P���?��4lr�.u1�'V
�+�[�B����`}��k](���<�`��/gp snk�7�4�(o(y
4(��@�
4(��
4��� 3�{��=����>5'�,f�i�7�<+���^�ƴ�-�@�.�7������ۿ��\��F�������q�Cn����l��\I����18�cxhL�`���s��Ť݂���~�v���`��N��P���'�hP�@�h@�J�Q������ߛP=HTo�����6��`}d��
�,:�pk�>��K���Z8�V�^��²q�o���z�փ&��}��i�������_gq����S�:'q ���/X���[h2`z�>� o�b�����}� ���Ͽ�Q���U9X�|����քC��Cڿ�~k'o��ֿgp/� ��O��>nw�����nl�7�<hP�@�h@�J�Q�������E�,�~�@��3X����|x`F���w�>&����:X�꼟f�i�v��~�x�Y$.rK����}� �{��ࡽ`�`��>��a8�Ӽ�'� ��~=e�9A�U���d���s�����]�BA\�������=߼�=��ݽC��C��
�G]1tH�~c��E� �@�hP�@�P�@���a�7�`�(�'�$ʵ�� &L���7���7>�����o^�����I}��rK� p�#w�xB�`�Z��1P��q��Gtx-�٭���)X߱ͷ�nkv��� �*X�����7�c���XԮCF�zwO��������|�v�f�[����0�5�]�x�1��1��� ;�0*�ve���h<`f�ӿY>\�􁳯���U�c��f�g��� ���[�"��ezA<��� ��?ܿI��|l��A�䎏%n�����.~����/���*A��K��kp����z� ������ �@�hP�@�P�@���a�7�`�(ՙ~��Cc��;�I?����A`D�\���GC������?���܋��86w� ���N��x�/�~_N�5������Ť݂�nm��@�'� 7�
W^64��������\�x��o�5������ �_�_��,�_#X�q��p���U��e���bU��,_������߼���A`F�3 b|t>l� �rqY\��� �@�hP�@�P�@���a�7�`�(�1�2qg �?<�����uȈ`}T���A`��|��A`�6�g0����-��]�����F�����ฑ�@�n2���g��`}p�~�*q�z��Â��^=���կ'� �˵�:�S��9A`�Սw���3����LM��s�����m�a���!=�����m>|�fp k��6X���5�ʉ��
�V&����^~m��<�w��cH���������z���E#���p@hP�@�hP�h(Fy@�5ʻ$&3G3�[������ᄉu������&��(��v}���U��
s�7M��=9X����^�x�p�u�\}z٘ě�1d�����1�H��yk[/���xgq� ��;��~����N���)����޿|b� P���n���l��C���z�j:�� 0��Cn�z_6,>8�����gw�z�����W�So�|x?����N��n�ݣl|�'�_��r�@�
4(��@� (��@@�0�rP2�� b\p�-L}Fh���|Y�A����S;���B%�&'n�р�A`n�&�F��MH������=�+9~�A��nw&n!q�s�}�Ӄ���-��1����;�I<�����o�6 �� nw�u�b�`��^���\��\�_z��w���<q�ܵW���O28͵�7��A���E���֧\�&�f�1��X1X��nE�.ޛP=To�^�����A�.���6�� Щ����a����hP�@�h@�J�Q���b���`.�c��S:.(�i�.rK������Q���]����xx���<0 ��٧�ؑ������B=u{� P����ϰ�A`p�~?߳u�꼟�amb��[[�6�L.� �I�e�ɚV����n���|`�]�2�V8���|�M�����(�g�ۻw;��&q M��0��a7_z^vS�ț�k������+��-4�� з� �Ǟt|4^��w�A�K��_��r�@�
4(��@� (��@@�0�r�~�wAL�,�a��Ft]���䮽��^���,Z��O��6�E����eآ�/�[�9�ih�yV���U%T9i�/�A������W&n!qLn�T��#:�.�oK<��Ï��������{������=lPҳo���� 4�4� �{���y%�2� Ъ�}�[x}�aA� _��B��� ���[38���{�{���W��;+q �� C{�y��:A���O%��1������[�/~�9P�@�hP�@�hP��t� 9؀Fy���� 0�6C>L=(
L��mhwɤ�q�F^�w���P8wФ po߶�p�M�y���������~|�v ��@������M��]�&|Wߝ~w��.�6���� ��G�c���1A��+;�ý<�W��ch�]<1�� pR�'��:��'�hP�@�h@�J�Q���b��~pt� pF�ƢfH�8Z6N��C��M�z��P��A�O�!�F��M�T �s�����]}:��A�y�� 0��V�p�mM�����P��?��(��@�
4(��@
4(�P:���k�w�����{�2���A`\��i
��E� �@�hP�@�P�@���a�7� _Fy�C���G���B dh5|A�ң~����Lyщ.����G��?��(��@�
4(��@
4(�P:����(�!���-j%n��]��a�gFe��x5�l~� UR�.�?F_\ۅ����F?��R7��Q�A��Z�c�sA`x���bZ�M�����#7��%A��qU38�C�����E�����> ��62��
4(��@�
4�@� ��(o�A�FyO{nqhy|5��'�������Ԣ� ��̋������9'VO����=�v�SӀ��Ӽ�S�����B4˷��U��:���� pP�=��+�ƙ��+�Qg�һ˂��VN��)O�Z�>�l<�O}%\u�-�FC���*�!��g�z4=<q �X��X���+��~�*$����?����ax6��=��Fy@AR�@�hP�@�hP��t� 9(�(����o��N;�dxQ����/�����/Fs��S�l\����i8��=7�f�C����ъ/��>wˇ�(s�}i�wX�IO�ڞtЬ��s@��_�H�sթ�P�җڴ����W+����;��c�+�۽|�A�R�]��vgP2x���ȁ
4(��@�
4�@� ��(o��4���ע�u��>�ă� `�mQ`��o���n2(z<�oC���C�9頂��Ͻ�q8��� ��� pa�Cw1t�� ЫE��c�� ������pꀇ��#�O+o��}j���wVQ�ƙ��+�Qo��9h�+A�o�#��h`�ɚ��|x˥t�L��D���?@�hP�@�P�@���a�7� �Q�3_\�S5�����b����]|�� �{�]�p��ׂ�eMO�<�nhU���-<��� P�*-���{7H��������6Ǧ���~#t9�����e��A��&�Ĉڲ1h7Ns�k�����A~�٪ �����n��xy8�Z� /'n�a��y�y�M
�rm��rӞ[Z_m�ǟ�j{��c�G��Ԟ��:'zO^��������~��[L>Ԥ�1=���n�[��Y�p@hP�@�hP�h(Fy@2���n~,�s�� �|��h�)G�[s23�8z����sjWO�Eˡ�8�i�����~��/F����\��� ���[�q�A��fG��y�;��wp�!�S=�w�S�և+��!�V,������W�D���<-|����������`��o�ɗ��w���'���.u�xci8��*\�/��&�Zn�x�a �7a`�b�f�~�9P�@�hP�@�hP��t� 9X?�������/<!�྿leؿr��1�:�chs��A��K�%� M<�Y/. M���x���{3\ܰư�l��K`���c�
�w�S6��f8�h��=���d�#A`v�S����G�ٱU��{&��pbA��.��\�۟�.��=�#�q/
�7����@���/����p���2}a�ݢV�cx��eA��+'�%wD�����nd��<�[�|x��WR��_���x}&�[h{l�~�9P�@�hP�@�hP��t� 9X?ʻ fئ��{ꀇ��#�Oˇ���=�n8���C�h�^�C��x���~38����w�%<���N���p�A`�J�e0�[8�v�E'�43��~y�#�� �ۣ~�1,��� Pm��W|�U���.�À^��:*�0���}j��'2�q�/�խ^A�E����ޔ��Wļ���G���qU��bдW�@ߖG&�f���J�ډ�ȇ�^b�DŽ�� oBg�8 ��?��(��@�
4(��@
4(�P:���k���%˃@���2I�r��A�B�r������ ��M�O��^u�-���{7H�S�}/�yB�E�5������?�Z�c?�����PL> w-���o���I���/EOT���`�s�zO|> iw\��M~1 l}L����/T��5�a<����2�Ya� ���<}�#Aࡾ��Û�ާ� ��90q鿻W~v�]��S�p@hP�@�hP�h(Fy@֏��@� g0�6����~��s��1x�������gp�7�|5\���]\}�KA�s�N��3oF�O��<����pr{����|��h�z�}+&NM/�Ow��s^�����i�kA��'�E�3yG&�d�۞
c;�I���S_��<j�q����� �\x�%w<n���|�����A8����y� p^݃���1!��۟��1��*�7^~�rE� �@�hP�@�P�@���a�7�`�(� d�m��� �@������yA`ƕ ӏ$�z��A`�ŵ�}�� pB����e����-�=��<%nV�A�� ��dy8�j��G>��vR�c8c�� �`�q%�xci8��*�'T~� ��#=�����yщ�zoY�{���p�fD��͓_��>[*�Q>q _~�Mص�Ή[X��A�ʞ���P�0-���o���H��G+���O����6:� >�E� �@�hP�@�P�@���a�7���� о�!�[x�O��1�~n�;K? U٣l܋k���mut�]Lz�� �����g�� g�6�a�p13_X�[��pBu�C���v��;��\j���>�n8�΁e�4�ϸ(���W> ����W��V�� '?�Nh]��|��S�o������'�hP�@�h@�J�Q����Fy/�� Pe�ݞZ�Q�Ss�>�#�ED�ck�Wх�pE� �@�hP�@�P�@���a�7�`�(ﯿ�&H��yg����ȁ
4(��@�
4�@� ��(o���Q�f3
� %O�hP�@��2��h�xj�IEND�B`�
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment