Skip to content

Instantly share code, notes, and snippets.

@timurista
Last active January 21, 2019 16:37
Show Gist options
  • Save timurista/1aea8d37b3d5b1aa3114b6e49c054171 to your computer and use it in GitHub Desktop.
Save timurista/1aea8d37b3d5b1aa3114b6e49c054171 to your computer and use it in GitHub Desktop.
Stacked-to-Grouped | Generated Data, Horizontal Bars
license: mit

switch between stacked and grouped layouts using sequenced transitions ✨

animations preserve object constancy and allow the user to follow the data across views

animation design by Heer and Robertson inspired by Byron and Wattenberg

this iteration generates random data and draws horizontal bars

an ES2015 implementation in something like the airbnb style

inspired by Stacked-to-Grouped Bars from @mbostock

custom radio buttons from the codepen Pure CSS & HTML cross-browser elegant Radio Buttons from knitevision1

you can also view this set of experiments in github repo form

👏 to @alexmacy for wading through a few thousand transition errors to help me find the data-prep 🐛 causing them all

Stacked-to-Grouped | Generated Data, Vertical Bars
Stacked-to-Grouped | JSON Data, Vertical Bars
Stacked-to-Grouped | Generated Data, Horizontal Bars
Stacked-to-Grouped | JSON Data, Horizontal Bars
Stacked-to-Grouped | JSON Data, Horizontal Bars, String Series Names

forked from micahstubbs's block: Stacked-to-Grouped | Generated Data, Horizontal Bars

<!DOCTYPE html>
<meta charset='utf-8'>
<style>
/* Radio button */
.custom-radio input[type="radio"] {
display:none;
}
.custom-radio input[type="radio"] + label {
font-size:14px;
color: black;
cursor: pointer;
}
.custom-radio input[type="radio"] + label span {
display:inline-block;
width:10px;
height:10px;
margin:-1px 4px 0 0;
vertical-align:middle;
cursor:pointer;
-moz-border-radius: 50%;
border-radius: 50%;
}
.custom-radio input[type="radio"] + label span {
background-color: #c4c4c4; /* have to be of the same color */
border: 2px solid #c4c4c4; /* have to be of the same color */
}
/* Checked state for radio */
.custom-radio input[type='radio']:checked + label span{
background-color: #31A354;
}
.axis.axis--y .domain{
stroke: #ccc;
margin-left: 8px;
margin-right: 8px;
}
</style>
<svg width='960' height='1200'></svg>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js'></script>
<script src='vis.js' lang='babel' type='text/babel'></script>
�PNG

IHDR���D bKGD������� pHYs  ��tIME�3K��J IDATx���}��u}'��=3r�a���
$ ��<�ˢ�U{Q�T O������s�(Vh],�om� \D�MH�j ݪl��П�L�f�& �0a sX��!���# 
B��9y��1�s�ߙ�9\^��s?UUU��&`P�@`P�@�Wձ3o޲eK���2<<����$I�^Owwwz{{��~���o1Z�,��j���ؖ�� -�(k����O^���'��C=� 6��g�MUU��*�>�l6lؐ�z(O<��έ^e��訧�ۗd�E���g^Q�և˦ ��W��������h���Odݺu���U�SUU֭[��K���\������s��H�e�g�*���Y��8 n"S>rUQ����Z޲eK֯_���~��lٲ�5߷����*���Wr�!/��w��5_��Ǜm<�$�ԏM�h�<44�K'�?��� ��7������wd�!���)���\4��r�@���u�w��Y��(��X_&���8wz�ϝ�����}g I��u�^�������y)�y�w}2������˼�ߘ�.,RE�.X����n�/�O߱�kؼ�id�g������7���[�c�8��k�kxxx�:<<�#�8����ceI��g����L��=�>��C��3érT���,�-9�}�s�o͡��\~����G���LJ�����c�~<���(��vU�����sJ���y����y��23{���.˝������Y���9�}e�1o���μ�nȧ���Ρ\�vhޞ�2z���ݙ[[�jٌd�r���Ɉ/@��w{�����������N��c���3��Y� �9>���O�?}0_�Ȭ�>2+���ZfVs��_OJ�t��,�sQ�~�{��}��7';��KϢ�M<9'�9�����8�79������rڟ��#'�β,K��W��_��J��~������Br���m����9��7��^ypm��27�7�|��Jj�k���|�H�tBzkI�u$��/�e蟾�"��T�ZN�57������/^T�}��$����������Wo�|>����Vy��2�?{0�Ӝ7�`�z}�/x}�}:'e�����~?l��?Y%Ͼ����3SeI��|�I��ϽNj�K�V�������������������|�$��ϔ/�mZ�www��A_{����G+3-�sF��y`�K��Oe �c#��[O~�b��z��27�'�>�}K#ߝ�,���S_��w�`M�eV���$ɺ'_��y���7����/����9��3S�u���ohd�￙��p����|�H.�zm�I6�g���c�֦1���R���7EQ��E�����~�!3�jxm��;��Sz�)�O���E�ޙ9�w���������\�{K�|�������$�S��ồ��d��� �s���%s���r�%צ�qV�;���dn�eӏ�VXߘ<����~���qd��O�ϕ��M���5w]�궋2���u��<���m����ޝ9�&S���$K���8k֕�=�HQ��g=��Y�n��:��ɓs����o1Z��L�t��U�m; ���Z��j��2���v�̊���q��,�ӗr���-�m�;�xI��L�V��<`��;��M;
����_���EQ䨣����$��Pbwg���+\��m�cۯ-~�[�j�|�o{Rk���oƟ�5�a˖-���� �:������Nooo��o���C��}]��sU�i�a�͹�)>}���M�Lr�)��_�����D� -b�N��U��ܼ�QF����G ���_|��Nj4ʝ�C5M�uO��x�<��CٰaC�}��TU������fÆ y衇��O���G����E����"��"m3���=�G5�f�E:�Z�rW���ێ���~ ��� �O<�u��%I~�y ?xzM��$����3�85'u�%I&O����<���s�9�g��+�۞4�W�{�Y3�4SjIʁ��ߓs�M�.�aߘ��������dW�{�4�לoٲ%�ׯO�����r����r0�U[�\�5�����{���K��_�>[�lyͅ˭I2����]Sf�{�sxFF���=�:&��ӟ�i4)_�8���ldR퀺o��R����RUU~�y ���^�}�������*CC�}"s��T�&o;��o��j���_��Z2��O�7&�/9&�瞔I���L?c^.��H�ܯe���6r�祘>/EQ��o<�S�kI�o�<E1=�>~c�7%��OOQi+.Ͻ���G���N�1/�ϝ�#�Y��K�O����$��^�����2�~�ӹイZ}U���s�7�K�ՕZ{2�7���s�i7�ɪ/| ��?G��,X�4�/�����n+��.��-�?�j�� ����f�)��g߼� ���7�ڿ�=Ko�"Sz�|�CS^��RUU��ś�޾Ofp4��u9�<�uin_�7Y>'�Ӿ$��5���n�;���ev�g�>�T{o�]\�ԏ,�1�(�̟�/|�<��sӵ�N�GԷ_y[����|/���z��,>�P#�4���0-k���$隱0k�;;}�`�y~��g^1+���p�|G׶c��;�Nr���gG$��I���f���̫2{����'I-'�;7�Ͼ$�`�=��y������T�ksÜ����ܱ��
�嘷���{~�r�;3�m�Z�Orċ�Nj�ʔ�SRkO����β$?��O�.��$��5_�J>���d��*��*����'�Op�+�}����nu�~����v�g�>�jt �p� 7�JW_����I��ּ����K����ii.|�Y9���cI�QO�,��Ii�؟�֗I�%ł;�e��5���]o;/��}�G���8�'y�?+�湼�H������n7��g
pwww��7N}̓�xώ}^U��̚����/�T�1�x�d��{�|x8� ����v�'3�Ƚ����� 23��e'�?߼o ���d^����Zj�s>��W$�����6%9�|�H>���s2���\~��t��~E���������6�X�����M� �����7EQ�ξ���'�����ƓsRg_��Hoo�k����e��MQ���NO�ɗ��kr��m?���������~?{j>[$�<2�y�O2�iY�pf��I���|�X��f�#�^���ݜI+r��-��?������ �oH�,3��o�CW���򜞛�c͡�gf��7��I���m�bϚڝ���9��$ F�КA��q����z�7=��Y�n]��G��׼pë��;,g�qjN��6��<yr>���^y4�N?-�x�LmB��kw_T�I��
������e�Zm'��-�����p��_�@��%x���y��E���:���_h��$[�l���P���_x�Q�^Owwwz{{��~�I��_�`�j
0(���
0(��� �
�V��h�
0(���
0
0(��@s���N[�`����7�����[�8� dr��W����'f�:�1�<<���o5�+0@`h�\n������B�E ��_]��A ���ٿ�� ������c�F�����g��ܙ��S��%�g��}��i��x��,�-������_� K��*������� �kM��mr4-V�k�O��gG����6�W��VNG-�\���e�2}wYN;�K�4�ݿ V{_��w�{j=&i���l~� 0�V��t�xn���������Th��$�u�K��I��ZDQUU5� E�xI0`�б7��|��������<�婽����3����縞�et�U~�A���h�m� &�(��� -\��M��2�e �h����2���g@�U ��_�����ܙ��d
@��I�4K�6s2���h�
0(�0 p]�4��=v����^-�(M�)�(���8RTUU��E�1^L��7t�E�-_в��{�<���1Yk��S�xn�k�︞�etd���S;8���_ �L�P�@Z��3��`�Ph�����.��o]��z��ւh.����?S�ޔ5#U�Ԓ�OO����}2�"�o@�� pmJ��ΔZ��Y���r��#% @��$]=])�ߗ�����-���}���
����K}�̜�?���efRM�ͤ�d����dữʊ5�9�خ��ˤVK�]�4�ݟo|4�%�5�;EG���z�k@�4�ݟO<+��c @�k
0(�0~U5��E��5��1`� {c�i�H��б�8��1_��ޓ����٩}�뙒-����>���s܁��A�>�`P��E pc�`��*-Y���{��8��,�ya����&��\v�1H�@>���Tue�����"����=5��B�6%��)Ic ���_�7$+�T~h.{�&X�P~�nS�%yp�dh���?+��?9dF������{>��~�Q��X.͜�^�m/���MI�)�4�ݿx�Y����1�"IR�yh�O��XN-g]�*#W4Rn�������,��kpgWT_�U�P��EUUUc�`Qd��`� {c�i�H���&�ڛ�w�>��<�ܦ����ZO�T����'pLzjo�`̙��
0�r-3��!UZ����z�3�\h�<��sƧ���*-Z�7ޛ��]�ڇ�'?}V�4���>��P�;�=���*}����P��`.�2WUIΞ��^�$�`�l����� @��Z�y~rN�^�p�e�d�*��XN{-]=��nW�Q��Ez; @���:zVFW ���&`P�`�(����t���/ &��:�ƢӖ/�<��=3��mW�s{ў�z��1�[���;`���� 9��dA�>�`P���왛`��)˗���Rk.�c�L��5?� ��Ʌ�d�{���u�dh*{d�菓��4�L(�iL��<��e���"EQ���4��
��pF�{mV ���x�,.�o-�,Me�O�n�ͅ��2iO����?ܐ�+���I������}):��s�����sڱ�����������Gd�"IR�~C~򻦿�ZN-3���T�i�IWWM��b�уk�}hVm"@�QTUU��E�1^L��7t�E�-_ y���������o�������W�s|�����>o�09���ƒq�`P��U � <2��f�Т�����f�~��tO(�͇K��Tv�1H����5k�Y�)�ɢ9g灧���J���G&����%�)RE���'雪�Ђx$ɇ��6������y9��% @��e���ƌ���+�>wG����
�VQU�@N�qH~�X�5k�U��</��|jj�����M��{�ݑ���I�"��C�}���
p���M�uv�2�u��Т8I�^K�S�4�6�@�(�1��{Qn#��3`�б7��|���#~��wg��� ~:;:�������4ar�k�s��_{Ӵ$&��#``P�`�#7�*7�/��^K�&\���O�7ܛ����ߞ�K^���z:��])e @�� �ij��Z���er�H>u�91��
�K�s��+͔N�Ъx��|���f�͓�
@������ӗ�Mo�Ph���w>�|�_�$
@S�3�.���r�!�9� pmJVU_�&M�M(����QTUU��E�1^L��7t�E�-_ �_��:���x�!�q�ăߞ�QA�o�>.�U9�kN�|s���w� 0
0(��@��r�PJ�>�j����?��,�ua��8?�m,�e��4:�K.Ț��2�=ywQ�O��rf��W��Pn���_\�>|u�~Vr����a���N�n�ѿON?nr<��L˲<80$Y���O��/��!�� ӕd�w�)��zc.|�)0�c�'�]����i�n���Ɵ�]R,�e�'�=3r���r�AE�����?��"Y��y ���J����<3�端����\:�ؑj5g>д�D� -������"c�$��o���N[�`\��[G�Z�5|{H����kyv�iA�a�&���;���q�G��!>�` �
0(���8���C)G�
@���0/��?��o\��;��@)X���?[`�y�'ޙ���t%9���y���3z���4v\���$#�_�#�i�I����ன�w�ff���O��\�ՙ�D�4�=p pW.���<t�I�8�S�ޗ��F @s�� pٟ������K��Fn������'Y���xJ��rrLG�����?Y�s& ��ұ'2s�Ҍ\�HY����X�hN�ZgWj��9��ZDQUU5� E�xI0`�б7��|��|�㻏ȑ��H͞��zO��&A���:OgG�%��C�?,Gt�Cx ``P�@�V(��e��o*7 ep�P�Q����������%�/l���S?ha�ܼ0�w\��R�4��{ ��`/\��n]��K�?bht �>pM���ɝ��=E�_r~V]�']���M��'���K�貹yld���k�<�dj綗��_� K�q\��+G^��� ���^������hZ��Tm�i����쨼��ߝ�&�J��*�騥�˲��LR��.�iGvI��ұK{��ɎӠ�����#�S�0I�wg��L�h��7���z���M5�46���S�*�Q�_Q�+]�/M�M(��"����1]�(2�K� 0������� vy�_�Iik�'ǯ�����6�������S���0~�C�sĄɂ�5���
0�H.75R��m0> �h����2���g��%�`<����8�ۙ�3}���m0� ��^��?X�9y�t�W���
0��\���t��^�}��Z����I8`G����1]�(2�K� 0������� v�� �vF��O�_�S9)#����:�!��t�w�0������|@� xU&�(��� �P�G�4/�Tn��#�i�B�
p���n;3=K�_�����.��o]��z��ւh.;����,^�(�ݺ:s�Զ7��L�{S֌T�RK.>=9�Wf􆳤 @�ع p��\�xi]67��l�V���'�3��$eV~㦜6�H�0� �v���_w�t�\_.o�g�ӷ����I��_�����K}�̜�?���efRM�4���>��@����X3�s��J��Lj��څ @�ص p���7>�ǒ̚ڝ��H}B=�5 Y��.M���ܞU;^L<+��J�4�6�� �GQUc{oQ�\3 �3`�б7��|�����G�3�� �dxU3&���s���q�;� �q섞����3�����
0�B-�h�|Sc�`��*-P��͍<pۙ�YҿcK�vz�u}�ܼ0��yy`�`woJ�oIDATh.;����,^�(�ݺ:s�Զ�߁|��g���t%y�3E��h��{j��i���}R.]�4�.���F�o�Mɪ��t5r�7n�7$���0� �v��+mʏ�mʴ$��,��̦��������ӟϷ��Xn��F��b�|4s>�{(��\��7%5�@�\:vi�z=�q�ij��/^�c�E���g��p�d��o��Y�«ZκjUF�h��ZKW��/-R�_I��+�/ͪM(��"����1]�(2�K� 0������� ^��~��i<����bfL<5��6�J�8���<_�
���u|xC� x]L�P�@Z���i4^y��ƆT���������%��𳕿_�a�w��+��f�‹s�ū3���� }�Ɯ��$�{�
�8/��r��yt��<6����a�g��˓�>+U�NǮ�T�����Cߓ��ҷ����
@����ၿ�UU���'�W'I:/�?�o='5��*��w^������2��G�<#Y���/�P���d�i���t�l��]�G%���,-P���ܞU��get�Ph>m"@Ə���jL,���` ���co,:m�����C����ރ}Rc섃ߖ�z~��=���l���o�̱�(ƌ 0
0(��@sٵ�`��i<SKW׋���%?��Rk.�c�'���F����,�a����>a~>�����ܻ��,Me�&���Y�pQ.�uu�.�����'+�yiΙ,P���M��'���K�貹y�G��y�;�2�-E��H��3h ��.�;*��K^�g��f��p�������ֲ��T:v�����sW&�Iҕ���2w�P�>��4v�1H��RtLO��$)s����c{% @Sٵ p���8 �����Gd�"IR�~C~򻦿�@�s{V�𪖙�~i���4ʤ��&UZ���Z-�/ͪM(��"����1]�(2�K� 0������� vz�9����7��^������ܦ�����9>ύ���Z܉����]4=``P�@�V(��e��۶i(� ��Y��@.77��mg�gI� �.Nq�of�oN��"�|��,��f�‹s�ū3���}�@.~�͚gV��E��Ⱥ�sT9,Y�qn��K/ͣ��汗<޵�չ�=E����7�$}S{% �8.�ە#/=���_Z�j�p�|�����`����Z���o��Kڻ2�sw$ ����D�T�8$�^,˚��*�w���n>55��D:vi�z}�y�I�ޛO��tWO��l�,��͹=�^���sSm���Lj�f��H~E���:
@sj
0�����1}ZMQ�%��}C��Xt��������м�瀖 {��S�x�[�����迠&wL��9� ]�����
04�]� �h��3�tm��N��|���k�Մ @��� p���n;3=K��m�po�O83�{~.YxI����Ww��-Md�&���Y�pQ.�uu�.�>�xV�V������֑|��sb @3ٹ p��\�xi]67�����tj��)������5��+�߬_����l�y�Th��J��rvN_�6��B�e p#��h���(Miמ\���u9�?�>�(�i�&�}snϪ�n�Mɪ�+��i��`?����1]�(2�K� 0������� ^q��m���#�h���zJ��֧��/��=SR�>뿚]������� `/1@`h�<Z��x��r�PJ9*TZ���y�3ӳ���m�����?���.����M�����c�F�x�\v���]R۾m �\<�5[WeJ{��ȟ����x_�t��}R.]�4��y����m���_\�>|u�~Vr����a���K��#/}�ȣ��~��x�a��eyp`H�4���>���e��7dSua�����?�7Wo̅�l�)p�[0��c�����Ӭ�~㫍?���&X�ˮM���d�i�=3r���r�AE�����?��"Y��s{V�����J��_J9��:�h���j5g>д�D� -���jL��SE�xI0`�б7��|��~��z���7�J�����֧|v��]�$mٿ�� G�M�C|�0����
0�B-�h�|S�q(�R�
�(���F����,�a��?���ٟ��7.���e�,�e��4:�� �[Wg�ڶm�ͻ>�� WW�+��'L�ۗ��ы�H���s��I�t��<�lnپ�V��Iv�,G��R�,M�cWv*G^�kj�ݴ��xA���1}bu�.,�e��+��p���L���|��yq: M�c��P�gz�s�}��|���g&���I���k�z��צ��/'�t)����59g�`h.�4�s{V����EK3ri#eYKW�`�"���:�R�(ͩM(��"����1]�(2�K� 0������� v������M[��c�Ϙxj�m���e���-�#M����ޛ#'��-�`P�`���2�� dpC�e��MC\?�rT�������o�gѭKs�G����R&���S?ha�ܼ0�w\��R�4��z �����/ׯ��)I.N�ͽ�X�[>pM���ɝ��=E�_r~V]�']��NM��.ΦK�$I�GV�jZ�|~m��L����IӯM��% ��-���JWg���\�z�����o��� ����R;hb�n�s��xt0׵��=)k��r���&���?Ύ�;x��9mr�d�x�E�̬y�����L��L:j��,�/��y��rڑ]�����M���cy~��t���ܬY�����ZυIڮ�;��g �8.�3�Z��W�����P�k��I��]��ZW�t_�T�P��EUUUc�`Qd��`� {c�i��������8��.�����������r�ٽ��Q����>h&�(��� ���|d ���rS#�L��џ��PϢ[����v���wm+��e�����ޟ �&�S�AX25���5]4%��Iۡ��?U��fq��e�3�s�LhB;5�`8�.��$)Y���i9�'���K��k3'#N�`��tv�����[.O�ov�h�3�&DZ��溶z���'e�3U.��+Aƅ��x�E�̬y���kk�rsR�4������?���JwG��^O}�����ߺ<hR;5�yժTW����r{�T�4�6�� �GQUU5� E�xI0`�б7��|��z߹ǜ�M����w�N͖��h ;�뭿�c9�yS�W���L�P�@�{-3��@74^���8��G�(�
�x/���\��zݺ4��;m�+e��;/O�wQ�~��t׋��� @s٩� ,���r���.�������{Ś|p�MY3ReJ-����?^��Β.Mc�&�} gӥS�$�#+sS5-GN���'�3��$eV~㦜6�H�0~ p:���Yf�-���7;��ۙRK�z�R��/���3��[�g��$ �8.�������w��IY�L�Kg�&I��]�g���6�/�0�j�����5��w-�gf��S_?'][˔��Zm0 �}UV��9�v��\&�Zj���y����?���JwG��^O}������<�d���E������Tvj<�U�������J�4�6�� �GQUc{oQ�\3 �3`�б7��|��ǩ9o��gF�vj�OM�M�ۇ{�qy��r����:>o|C��m�??poi==��IEND�B`�
gimp xcf file��B�B�gimp-image-grid(style solid)
(fgcolor (color-rgba 0.000000 0.000000 0.000000 1.000000))
(bgcolor (color-rgba 1.000000 1.000000 1.000000 1.000000))
(xspacing 10.000000)
(yspacing 10.000000)
(spacing-unit inches)
(xoffset 0.000000)
(yoffset 0.000000)
(offset-unit inches)
���*Screen Shot 2017-01-21 at 10.26.49 PM.png� 
   ]������&�2��m������� )9IYiy (*-�-�... .0.@.P.`.p.�.�.�6�79d>uC�C�FjF�F�F�F�H�H�H�H�P�S�U�X�Z�[�\\^^_�` `d`�c6er)r�s�zi~B������"�2�B�R�b�������S��&�6�F�V�f�v���������Z��������������.�>�N�^�n�~÷� �m�:�n�~ˎ˞ˮ˾��������K����������� ��%����������
���TT�� ����������n�����������������������ԏ�����
������\�������T����8���8�����T������
�������]�����̗n��nn��~��8����~�������
�������]���������������T�����T��������
������T����n]�����������T�����T��������
�����������\T�����������T�����T��������
������8���8������T8���T���������~������������ߦ8n��\]���88�8����T~�88]��������� ��
���������T��� ����������%���8� �����������%����� ����������� ���������������� ���T�����T������˛_<<_���������������� ����� �����~77�~��������������8���������� ���˛77�������������8��8\����~����T��������_77�_����ߦ~����8�����n��T����������������<77�<���������T�����TT�������T����~�����<77�<������������T���\��T������~���������_77�_�����]����]��T�����8����������������˛77������ݮ8����������TT���T������n�������~77�~�����ݽn�����~8���n��\����8�����˛_<<_�����
�������������
��������������5��������������=���=���=���=���=���=���=���=���=���=��77�}��77�}K����������� ���������!���������� ����S88�� �����������������������������}�����������
�������R�����_���SS�����`��|p`_�����
������������ƻ�`�`������8�����8ܻ�����
�������������|��7������SR�S�����S���������
�������_�������7�������7�S�����S���������
������S��������7�������7�S�����S���������
����������������������Sp����S�����������������}88���8�����`�������``����������
�����������������S���� ����������%��S�� �����������%�����:�������������� �����������������������p887����7��������������������������� ���7�����˺��������������}��p����������7��������������ݰ8�����|��8`S����8���7��p��p����˴����������`����S�������q�����R�S���8�����ˮ��������߻_��S������������������`|����ˮ�������������S��S�����8�����������������˴����������������S�����S�������_��������������������S������S�����������7�p��������˺����������}8`����S�|p����8������������������������������������������� ���������������5��������������=���=���=���=���=���=���=���=���=���=����������������K����������� ��&���������� ���T\\�� �����������n�������������������T������
�������������ۆ�\��8T8�����TT��T�������
�����������۽Ŷ��~�����������\������
���������������\����T������������������
��������������T���T\���T����������\�����
�������8������T�������T����������T�����
�������n������\�����������8�������������������T8�������������8��n����������
��������������������� ����������%���� �����������%���8�� ����������� ���������������������������������˧{bb{�������\����T����� ��T������ˑ^^��������\~���n���� ��T�����˧^^�������n�����n���T����TT��T��n8���8�����{^^�{����������������������T�����������b^^�b����ߞ�����������8�����\8����nn�����b^^�b��� ���������T�ۦT���n����T�����{^^�{�����ۏ����������ۮ�����T�~�������˧^^���������������Ԧ���8۶\�\��T��n������ˑ^^�������8�T8���T���8��8��ԏ8������˧{bb{����� ��������� �� ����������5��������������=���=���=���=���=���=���=���=���=���=��^^������^^�����M����;���8�<���T�<���8�0�����n����T]�0���T�������\]�0���\~�8����T�0������������T�0�����������T�0�������~��\8��1������T�\��3�������������;���T��;�����;�����4������\��4����������4��8��T�����7��T~�����6����8�����4���n�������4���������9������!�����������
�!�����������
�L�����;�����<��8��:����`��0�����8_���}S8��0�����_�}�����0��7�pp����S��0��7�7��������S��0��7���������S��0����_��������1�������8|��2�����������������;���7�<���7�:�����7�5������S_�5�������SR�5�������7�5��������7�6�������7�5����q��`��4�����S�_��4�����������!������������
�!������������
�L����<��~��;�����<����2�������8\��0����T���������0��n~\�������0���T����������0���n~����������0������~����2��n���8���2�����������;�����<��T��<��\��5��n���~T8��5��n�������5������T��7������T��6�������\��5���������4�����8~��9������!������������
�!������������
��������������������������������������������������������77�}��77�}��77�}��������77�}��������77�}��T���8���77�}�����8���77�}���������77�}��T���8���77�}��\���n���77�}�������77�}������77�}��77�}��77�}��77�}���=���=��77�� ��77�� ��77�� ��77�� ��77�� ����77�� ���T����77�� ���T����77�� ��T����77�� ��T����77�� ��T����77�� ��T����77�� ��\����77�� ��77�� ��77�� ��77�� ��77�� ���=���=��7!7��7!7��7!7��7!7��7!7��������7!7��������7!7��������7!7������8���7!7���n����7!7�������7!7��T�������7!7��8�T���7!7��7!7��7!7��7!7��7!7���=���=��7!7��7!7��7!7��7!7��7!7��������7!7��������7!7��8��ď���7!7�������7!7�����������������������������������������|�������������������������������ƍ������������7���|������������������������������`�������������p�������������������������������������������������=���=������� �������� �������� �������� �������� ������������ �������������� ����8��������� ������������� ������������� ������������� ������������� ������������� �������� �������� �������� �������� ����=���=���!����!����!����!����!����������!����������!�������p����!������`�����!����S�����!���������!������������!����������!����!����!����!����!����=���=���!����!����!����!����!����������!����8|�����!������q�����!���������!���^^������^^������^^��������^^������~TT~���^^�������������^^���������������^^���������������^^������ԗ��T����^^�������������^^�����������^^�����������^^������^^������^^������^^�������=���=��^^��� ���^^��� ���^^��� ���^^��� ���^^��� �������^^��� �����8���^^��� ����\���^^��� ����T���^^��� ����T���^^��� ����T���^^��� ����T���^^��� ����T���^^��� ���^^��� ���^^��� ���^^��� ���^^��� ����=���=��^!^��^!^��^!^��^!^��^!^����^!^��nTn����^!^�����n����^!^���������^!^�������^!^�������^!^���������^!^��������^!^��^!^��^!^��^!^��^!^���=���=��^!^��^!^��^!^��^!^��^!^�������^!^���8nTT���^!^��Ԇ������^!^��ۏ���^!^�!�����������
�!�����������
�!�����������
�!�����������
�!�����������
�!�����������
�!�����������
�!�����������
�!�����������
�!�����������
�!�����������
�!�����������
�!�����������
�!�����������
�!����������������
������������
������������
������������
������������
������������
������������
������������
������������
������������
������������
������������
������������
������������
������������
������������
������������
����������7����������7����������7����������7����������7����������7����������7����������7����������7����������7����������7����������7����������7����������7����������7����������7����������7������������@7!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������@�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������
�!������������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
�������������
����������^������������^������������^������������^������������^������������^������������^������������^������������^������������^������������^������������^������������^������������^������������^������������^������������^��������������@^� �����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�������7�C���
����
�����7�C���
����
�����7�C���
����
�����7�C���
����
�����7�C���
����
�����7�C���
����
�����7�C���
����
�����7�C���
����
�����7�C���
����
����� �����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6���������������
����
�������������
����
�������������
����
�������������
����
�������������
����
�������������
����
�������������
����
�������������
����
�������������
����
����� �����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�������^�g�����
����
�����^�g�����
����
�����^�g�����
����
�����^�g�����
����
�����^�g�����
����
�����^�g�����
����
�����^�g�����
����
�����^�g�����
����
�����^�g�����
����
���������������������������������������������������������8����7!7������8���7!7�����8���7!7�������7!7�������7!7��7!7��7!7��7!7���=���=��7!7��7!7��7!7��7!7��7!7������7!7�������7!7�������7!7�������7!7���������7!7��������7!7��������7!7������7!7��7!7��7!7��7!7��7!7���=���=��7!7��7!7��7!7��7!7��7!7����7!7���nT����7!7�������7!7�������7!7������8���7!7������7!7�����8���7!7�������7!7������7!7��7!7��7!7��7!7���=���=��7!7��7!7��7!7��7!7��7!7�������7!7��������7!7��T�������7!7��\8����7!7��T������7!7��8�������7!7��~���8���7!7�������7!7������7!7��7!7��7!7��������!������������!������������!����������!���������!����!����!����!����=���=���!����!����!����!����!���������!��������!����R����!�����7����!����������!����8_����!������������!����7����!����!����!����!����!����=���=���!����!����!����!����!������������!����`8�����!���}�����!���8_�����!����|��`�����!�������|����!������q�����!����7�����!���������!����!����!����!����=���=���!����!����!����!����!����������!����������!������������!����8p�����!������`�����!�����������!������������!����������!���������!����!����!����~����^!^����n����^!^���\������^!^���8~���^!^�������^!^��^!^��^!^��^!^���=���=��^!^��^!^��^!^��^!^��^!^�������^!^������^!^�������^!^���������^!^���������^!^���8����^!^����������^!^�������^!^��^!^��^!^��^!^��^!^���=���=��^!^��^!^��^!^��^!^��^!^����^!^�T�\T����^!^��T���^!^��������^!^���������^!^�������^!^���8������^!^���T����^!^����^!^��^!^��^!^��^!^���=���=��^!^��^!^��^!^��^!^��^!^�������^!^���8~����^!^���8�������^!^��������^!^���������^!^���T�������^!^���������^!^���~���^!^����^!^��^!^��^!^�7��@7��@7��7���@���@����^��@^��@^��^�7�C���
����
�����7�C���
����
�����7�C���
����
�����7�C���
����
�����7�C���
����
�����7�C���
����
�����7�C���
����
�����7�C���
����
������@7��@7��7��������
����
�������������
����
�������������
����
�������������
����
�������������
����
�������������
����
�������������
����
�������������
����
������@���@����^�g�����
����
�����^�g�����
����
�����^�g�����
����
�����^�g�����
����
�����^�g�����
����
�����^�g�����
����
�����^�g�����
����
�����^�g�����
����
������@^��@^��^���7�f ����7�f ����7�f ����7�f ����7�f ����7�f ����7�f ����7�f ����7�f ����7�f ����7�f ����7�f ����7�f ����7�f ����7�f ����7�f ����7�f ������"7��"7��"7��"7��"7��"7��"7��"7��"7��"7��"7��"7��"7��"7��"7��"7��"7���� 7�i 7�i 7�i 7�i 7�i 7�i 7�i 7�i 7�i 7�i 7�i 7�i 7�i 7�i 7�i 7�i������ ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� �������"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"������� ����� ����� ����� ����� ����� ����� ����� ����� ����� ����� ����� ����� ����� ����� ����� �������^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �����^�~� �������"^����"^����"^����"^����"^����"^����"^����"^����"^����"^����"^����"^����"^����"^����"^����"^����"^������ ^� ^� ^� ^� ^� ^� ^� ^� ^� ^� ^� ^� ^� ^� ^� ^���� ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���������-����-����-����-����-����-����-����-����-����-����-����-����-����-����-����-����-��������������������������������������������������������������������� ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ����������-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-������������������������������������������������������������������������������������� ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ���� � ���� ����������-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-�����-������������������������������������������������������������������������������������@�@����@�@����@�@�����@�+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �������@�+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �������@�+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �����+���� �������� �� �� ��� �� �� ��� �� �� ��� �� �� ��� ����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0� ����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0� ����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����
����0����������������7!7���=���=��7!7��7!7��7!7��7!7��7!7����7!7�T�\����7!7��\����7!7���]���7!7������7!7���8���7!7�������7!7��8����7!7��7!7��7!7��7!7��7!7���=���=��7!7��7!7��7!7��7!7��7!7��������7!7��������7!7��8���n���7!7��������7!7���8�8����7!7�����8���7!7�����8���7!7�������7!7������7!7��7!7��7!7��7!7���=���=��7!7��7!7��7!7��7!7��7!7��������7!7���~����7!7��������7!7��8���8���7!7����T���7!7��Զ�8���7!7��8�������7!7���T���7!7�������7!7��7!7��7!7��7!7���=���=��77�a��77�a��77�a��77�a���!����=���=���!����!����!����!����!���������!����S`7����!���������!���`�����!���������!���������!��������!���������!����!����!����!����!����=���=���!����!����!����!����!����������!����8|�����!������}�����!����S������!���S|������!������������!������������!����������!���������!����!����!����!����=���=���!����!����!����!����!����������!����8p�����!������������!������������!���8_������!�����ƍ�����!�����������!���������!���������!����!����!����!����=���=����������������������������������^!^���=���=��^!^��^!^��^!^��^!^��^!^����^!^���8T\����^!^���T���^!^������^!^���~���^!^������^!^������^!^���n���^!^��^!^��^!^��^!^��^!^���=���=��^!^��^!^��^!^��^!^��^!^����^!^�\�T\���^!^���8������^!^��~~T���^!^���������^!^������n����^!^���8��8����^!^��nn���^!^����^!^��^!^��^!^��^!^���=���=��^!^��^!^��^!^��^!^��^!^����^!^��T\T����^!^������8����^!^��ņ��8����^!^����\����^!^��������^!^���T�����^!^��T����^!^�������^!^��^!^��^!^��^!^���=���=��^^�z����^^�z����^^�z����^^�z���?7��@7��57��57��57��57��57��57��57��57��57��57��57��57��57��57��57��57��57���� 7��0 7��0 7��0 7��0 7��0 7��0 7��0 7��0 7��0 7��0 7��0 7��0 7��0 7��0 7��0 7��0 7��0��?���@���5�����5�����5�����5�����5�����5�����5�����5�����5�����5�����5�����5�����5�����5�����5�����5�����5������� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0����?^��@^��5^����5^����5^����5^����5^����5^����5^����5^����5^����5^����5^����5^����5^����5^����5^����5^����5^������ ^���0� ^���0� ^���0� ^���0� ^���0� ^���0� ^���0� ^���0� ^���0� ^���0� ^���0� ^���0� ^���0� ^���0� ^���0� ^���0� ^���0�����?7��/7�� /7�� /7�� /7�� /7�� /7�� /7�� /7�� /7�� /7�� /7�� /7�� /7�� /7�� /7�� /7�� /7�� ��@��@��?���/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� ���@���@����?^��/^��� �/^��� �/^��� �/^��� �/^��� �/^��� �/^��� �/^��� �/^��� �/^��� �/^��� �/^��� �/^��� �/^��� �/^��� �/^��� �/^��� ���@���@����� 7�i��@��"����"����"����"����"����"����"����"����"����"����"����"����"����"����"����"����"���������,����,����,����,����,����,����,����,����,����,����,����,����,����,����,����,����,��� ���0� ���0� ���0� ���0� �������@���"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����������,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,��� ����0� ����0� ����0� ����0� ^���@���"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����������,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,��� ����0� ����0� ����0� ����0�����������6����6����6����6����6����6����6����6����6����6����6����6����6����6����6����6����6���@���@���������������6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6���@���@���������������6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6���@���@�����?���@���@���@������4��������4��������4��������4�����?���@���@���@������4��������4��������4��������4�����?���@���@���@������4��������4��������4��������4������?���@���@���@���?���@���@���@���?���@���@���@����?���@���@���@���?���@���@���@���?���@���@���@����?���@���@���(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�������?���@���@���(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�������?���@���@���(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(�����(��������?���@���@���
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
������?���@���@���
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
������?���@���@���
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
�������?���@���@�@�?���@���@�@�?���@���@�@�����
������@���@�@����
������@���@�@����
������@���@�@����@���@�@���@���@�@���@���@�@����@����������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ���������N���@����������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ���������N���@����������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ��������� ���������N����)������)������)������)������)������)������)������)������)������)������)������)������)������)������)������)������)����� ���)������)������)������)������)������)������)������)������)������)������)������)������)������)������)������)������)����� ���)������)������)������)������)������)������)������)������)������)������)������)������)������)������)������)������)����� ����77�a ������������77�a ������������77�a ���T��T���8���77�a ���8�����8���77�a ���8��������77�a ���8��T���8���77�a ���8��\���n���77�a ���8�������77�a������77�a��77�a��77�a��77�a���=���=��7 7�}��7 7�}��7 7�}��7 7�}��7 7�} ������7 7�} ���T����T����7 7�} ���T���T����7 7�} ��T����T����7 7�} ��T����T����7 7�} ��T����T����7 7�} ��T����T����7 7�} ��\����\����7 7�}��7 7�}��7 7�}��7 7�}��7 7�}���=���=��7
7����7
7����7
7����7
7����7
7�� ������������7
7�� ������������7
7�� ���T��������7
7�� ���8������8���7
7�� ���8����n����7
7�� ���8�������7
7�� ���8��T�������7
7�� ���8��8�T���7
7����7
7����7
7����7
7����7
7�����=���=��77����77����77����77����77�� ������������77�� ������������77�� ���T��8����77�� ���8��������77�� ���8����8����77�� ���8������8���77���������� ������������������� ��������|����������
���`���������������� ��������ƍ��������� ������7���|��������� ������������������� ��������`���������� �������p�������������������������������������������������=���=��� �������� �������� �������� �������� ����� ����������� ����� ������������� ����� ���8���8����� ����� ������������ ����� ������������ ����� ������������ ����� ������������ ����� ������������ �������� �������� �������� �������� ��������=���=���
��������
��������
��������
��������
����� ��������������
����� ��������������
�����
���`������p����
����� ���������`�����
����� ��������S�����
����� ������������
����� ��������������
����� ������������
��������
��������
��������
��������
��������=���=���������������������������������������� ������������������� ��������8|����������
���`�����q���������� ������������������ ������������������ ���������������������^^�z�� ��������^^�z�� ���8���~TT~���^^�z��
���T���������^^�z�� ��T�����������^^�z�� ��T�����������^^�z�� ��T��ԗ��T����^^�z�� ��T���������^^�z�� ��\��������^^�z���������^^�z����^^�z����^^�z����^^�z�����=���=��^ ^������^ ^������^ ^������^ ^������^ ^���� ����������^ ^���� ����8����8���^ ^���� ���\���\���^ ^���� ���T����T���^ ^���� ���T����T���^ ^���� ���T����T���^ ^���� ���T����T���^ ^���� ���T����T���^ ^������^ ^������^ ^������^ ^������^ ^�������=���=��^
^������^
^������^
^������^
^������^
^���� ��������^
^���� ���8���nTn����^
^����
���T�����n����^
^���� ��T����������^
^���� ��T���������^
^���� ��T��������^
^���� ��T���������^
^���� ��\��������^
^������^
^������^
^������^
^������^
^�������=���=��^^������^^������^^������^^������^^���� �����������^^���� ���8���8nTT���^^����
���T��Ԇ������^^���� ��T����ۏ���^^���� ��T�����~����^^���� ��T������n����^^�����@��@��@���@���@���@�����@���@���@������@��@��@��,����,����,����,����,����,����,����,����,����,����,����@���@���@���,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����@���@���@���,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,������ ���0� ���0� ���0� ���0� ���0� ���0� ���0� ���0� ���0� ���0� ���0� ���0� ���0����������������������������������������������������������������������������������������������������������������������������������������������������+��������+��������+��������+��������+��������+��������+��������+��������+��������+��������+��������+��������+��������+��������+��������+��������+�������:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0����������������������������������������������������������������������������������������������������������������������������������������������������������������������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+�������:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0� ����0����������������������������������������������������������������������������������������������������������������������������������������������������������������������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+���������+�������:�����:�����:�����:�����:�����:�����:�����:�����:�����:�����:��@���0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0������2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2������3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �@���0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0������2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2������3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �@���0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0������2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2����
�2������3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �3���� �����4��������4��������4��������4��������4��������4��������4��������4��������4��������4��������4��������4��������4���� �����4��������4��������4��������4��������4��������4��������4��������4��������4��������4��������4��������4��������4���� �����4��������4��������4��������4��������4��������4��������4��������4��������4��������4��������4��������4��������4���� ��������������������������������������� ���8�����8���77�� ���8�������77���������77����77����77����77�����=���=��77����77����77����77����77�� ����������77�� ������������77�� ���T��������77�� ���8��������77�� ���8���������77�� ���8�������77�� ���8���������77�� ���8�������77����77����77����77����77�����=���=��7 7�N��7 7�N��7 7�N��7 7�N��7 7�N ��������7 7�N �������nT����7 7�N ���T�������7 7�N ���8�������7 7�N ���8������8���7 7�N ���8�������7 7�N ���8�����8���7 7�N ���8�������7 7�N������7 7�N��7 7�N��7 7�N��7 7�N���=���=��7 7����7 7����7 7����7 7����7 7�� �����������7 7�� ������������7 7�� ���T��T�������7 7�� ���8��\8����7 7�� ���8��T������7 7�� ���8��8�������7 7�� ���8��~���8���7 7�� ���8�������7 7��������7 7����7 7����7 7����7 7�����!� ������������������� ����������������������������������������������������������=���=���������������������������������������� ������������������ ������������������
���`�����R��������� ��������7��������� ����������������� ������8_��������� ������������������� ��������7��������������������������������������������=���=��� �������� �������� �������� �������� ����� ��������������� ����� ��������`8����� �����
���`���}����� ����� ������8_����� ����� ������|��`����� ����� ����������|���� ����� ��������q����� ����� �������7����� ������������� �������� �������� �������� ��������=���=��� �������� �������� �������� �������� ����� �������������� ����� �������������� �����
���`����������� ����� ������8p����� ����� ��������`����� ����� ������������� ����� �������������� ����� ������������� ������������� �������� �������� �������� ��������!� ��T���\������^^���� ��\���8~���^^�����������^^������^^������^^������^^�������=���=��^^������^^������^^������^^������^^���� �����������^^���� ���8��������^^����
���T���������^^���� ��T����������^^���� ��T���������^^���� ��T���8����^^���� ��T����������^^���� ��\���������^^������^^������^^������^^������^^�������=���=��^ ^�m����^ ^�m����^ ^�m����^ ^�m����^ ^�m�� ��������^ ^�m�� ���8���TT\T����^ ^�m��
���T���T���^ ^�m�� ��T��������^ ^�m�� ��T���������^ ^�m�� ��T���������^ ^�m�� ��T���8������^ ^�m�� ��\���T����^ ^�m������^ ^�m����^ ^�m����^ ^�m����^ ^�m�����=���=��^ ^������^ ^������^ ^������^ ^������^ ^���� �����������^ ^���� ���8����8~����^ ^����
���T���8�������^ ^���� ��T��������^ ^���� ��T���������^ ^���� ��T���T�������^ ^���� ��T���������^ ^���� ��\����~���^ ^��������^ ^������^ ^������^ ^������^ ^�������!�����@��@��0��� �0��� �0��� �0��� �0��� �0��� �0��� �0��� �0��� �0��� �0��� �0��� �0��� �0��� �0��� �0��� �0��� �?�����@���@���0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �?�����@���@���0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �0���� �?��,����,����,����,����,����,����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�?�,�����,�����,�����,�����,�����,���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�?�,�����,�����,�����,�����,�����,���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�?������:�����:�����:�����:�����:�����:���@���@���@�?�����:�����:�����:�����:�����:�����:���@���@���@�?�����:�����:�����:�����:�����:�����:���@���@���@�?��3���� �3���� �3���� �3���� �3���� �3������/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/������������������������������������������������������������������������������������������������,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����l�3���� �3���� �3���� �3���� �3���� �3������/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/������������������������������������������������������������������������������������������������,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����l�3���� �3���� �3���� �3���� �3���� �3������/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/���� �/������������������������������������������������������������������������������������������������,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����,�����l���������������������������������������������=��77�X��77�X��77�X��77�X��77�X ���������77�X ������TT\����77�X ���T���\����77�X ���8����]���77�X ���8�������77�X ���8����8���77�X ���8��������77�X ���8���8����77�X��77�X��77�X��77�X��77�X���=���=��77�@��77�@��77�@��77�@��77�@ ������������77�@ ������������77�@ ���T��8���n���77�@ ���8��������77�@ ���8���8�8����77�@ ���8�����8���77�@ ���8�����8���77�@ ���8�������77�@������77�@��77�@��77�@��77�@���=���=��7 7�B��7 7�B��7 7�B��7 7�B��7 7�B ������������7 7�B �������~����7 7�B ���T��������7 7�B ���8��8���8���7 7�B ���8����T���7 7�B ���8���Զ�8���7 7�B ���8��8�������7 7�B ���8���T���7 7�B�������7 7�B��7 7�B��7 7�B��7 7�B���=���=��7
7���������7
7���������7
7���������7
7���������7
7������� ����������7
7���������=���������������������������������������� ������������������� �������S`7���������
���`��������������� �������`���������� ������������������ ������������������ ����������������� ����������������������������������������������������=���=���������������������������������������� ������������������� ��������8|����������
���`�����}���������� �������S����������� ������S|����������� ������������������� ������������������� ����������������������������������������������������������=���=��� �������� �������� �������� �������� ����� �������������� ����� ��������8p����� �����
���`����������� ����� �������������� ����� ������8_������ ����� ��������ƍ����� ����� ������������� ����� ������������ ������������� �������� �������� �������� ��������=���=���
�������������
�������������
�������������
�������������
����������
���������������
������������=��^^�u����^^�u����^^�u����^^�u����^^�u�� ��������^^�u�� ���8���8T\����^^�u��
���T�����T���^^�u�� ��T��������^^�u�� ��T�����~���^^�u�� ��T��������^^�u�� ��T�������^^�u�� ��\����n���^^�u����^^�u����^^�u����^^�u����^^�u�����=���=��^^�e����^^�e����^^�e����^^�e����^^�e�� ��������^^�e�� ���8���\\T\���^^�e��
���T���8������^^�e�� ��T���~~T���^^�e�� ��T���������^^�e�� ��T������n����^^�e�� ��T���8��8����^^�e�� ��\���nn���^^�e������^^�e����^^�e����^^�e����^^�e�����=���=��^ ^�f����^ ^�f����^ ^�f����^ ^�f����^ ^�f�� ��������^ ^�f�� ���8���T\T����^ ^�f��
���T������8����^ ^�f�� ��T��ņ��8����^ ^�f�� ��T����\����^ ^�f�� ��T���������^ ^�f�� ��T���T�����^ ^�f�� ��\���T����^ ^�f���������^ ^�f����^ ^�f����^ ^�f����^ ^�f�����=���=��^
^�����������^
^�����������^
^�����������^
^�����������^
^���������
����������^
^���������?����"����"����"����"����"����"����"����"����"����"����"����"����"����"����"����"����"��� ���1� ���1� ���1� ���1� ���1� ���1� ���1� ���1� ���1� ���1� ���1� ���1� ���1� ���1� ���1� ���1� ���1������<����<����<����<����<����<����<����<����<����<����<����<����<����<����<����<����<�����?�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"��� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1�������<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����?�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"��� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1� ����1�������<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<�����<������?� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/���
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2����-��-��-��-��-��-��-��-��-��-��-��-��-��-��-��-��-���������������������������������?� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/���
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2����-��-��-��-��-��-��-��-��-��-��-��-��-��-��-��-��-���������������������������������?� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/� ����/���
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�
����2�������+�����+�����+�����+�����+�����+�����+�����+�����+�����+�����+�����+�����+�����+�����+�����+�����+����������������������������������?�7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7����������"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"������� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����������6�����6�����6�����6�����6�����6�?�7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7����������"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"������� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����������6�����6�����6�����6�����6�����6�?�7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7�����7����������"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"�����"������� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����3� ����������6�����6�����6�����6�����6�����6���������������������������������������������� ��nTn�������7
7������� �����n�T���8���7
7�������
���������8���7
7������� �����������7
7�������
������T���8���7
7������� �������\���n���7
7������� ����������7
7�������������7
7���������7
7���������7
7���������7
7����������=���=��7 7�� ������7 7�� ������7 7�� ������7 7�� ������7 7�� ���� ������7 7�� ���� ��nTn���T����7 7�� ����
�����n��T����7 7�� ���� ��������T����7 7�� ���� �������T����7 7�� ���� �������T����7 7�� ����
���������T����7 7�� ����
�������\����7 7�� ������7 7�� ������7 7�� ������7 7�� ������7 7�� �������=���=��77����� ���77����� ���77����� ���77����� ���77����� � ����������77����� � ��nTn�������77����� �
�����n�������77����� � ����������8���77����� � �������n����77����� � �����������77����� �
�������T�������77����� �
�����8�T���77����� ���77����� ���77����� ���77����� ���77����� ����=���=��7!7
���|Sp��|�����
���������� ���������������
���������� ��������ƍ����
���������� �����7���|����
���������� ���_�����������
���������� ���R������`�����
���������� ������p����
������������������
�������������
�������������
�������������
�������������=���=��� ���� �������� ���� �������� ���� �������� ���� �������� ���� ����� ������������� ���� �����
���|Sp�������� ���� �����
�������8����� ���� �����
������������� ���� ����� ������������ ���� �����
���_���������� ���� �����
���R����������� ���� �����
������������ ���� �������� ���� �������� ���� �������� ���� �������� ���� ��������=���=����������� ������������ ������������ ������������ ������������ � ����������������������� �
���|Sp���������������� �
����������p������������ �
���������`������������� � �������S������������� �
���_����������������� �
���R�������������������� �
������������������� ������������ ������������ ������������ ������������ ����=���=���!�
������~TT~���^
^��������� ������������^
^��������� ������8���������^
^���������
���n鞦�������^
^��������� ������ԗ��T����^
^��������� ��T�����������^
^��������� ��8�T������^
^����������������^
^�����������^
^�����������^
^�����������^
^������������=���=��^ ^��� �������^ ^��� �������^ ^��� �������^ ^��� �������^ ^��� ����� ������������^ ^��� �����
��������8���^ ^��� �����
�������\���^ ^��� �����
������8���T���^ ^��� ����� ���n����T���^ ^��� �����
��������T���^ ^��� �����
��T�������T���^ ^��� �����
��8�T���T���^ ^��� �������^ ^��� �������^ ^��� �������^ ^��� �������^ ^��� ��������=���=��^^������� ���^^������� ���^^������� ���^^������� ���^^������� � ����������^^������� �
������nTn����^^������� �
��������n����^^������� �
������8��������^^������� � ���n��������^^������� �
������������^^������� �
��T�����������^^������� �
��8�T������^^������� ���^^������� ���^^������� ���^^������� ���^^������� ����=���=��^!^ �����@���@���?7����@���@���?�����@���@���?^ ����������������������������������������������������������&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�������*��*��*��*��*��*��*��*��*��*��*��*��*��*��*��*��*���� 7��
���$����������������������������������������������������������&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�������*��*��*��*��*��*��*��*��*��*��*��*��*��*��*��*��*���� ����
����$����������������������������������������������������������&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�����&�������*��*��*��*��*��*��*��*��*��*��*��*��*��*��*��*��*���� ^���
����$� �����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����������6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����������;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�������?�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����������6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����������;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�������?�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����������6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����6�����������;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�����;�������?� � ������ ����� ������ ����� ������ ����� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � ����}x><
const n = 3; // The number of series
const m = 14; // The number of values per series
// The xz array has m elements, representing the x-values shared by all series
// The yz array has n elements, representing the y-values of each of the n series
// Each yz[i] is an array of m non-negative numbers representing a y-value for xz[i]
// The x01z array has the same structure as yz, but with stacked [y₀, y₁] instead of y
const xz = d3.range(n).map(() => bumps(m));
const yz = d3.range(m);
const x01z = d3.stack().keys(d3.range(n))(d3.transpose(xz));
const xMaxGrouped = d3.max(xz, x => d3.max(x));
const xMaxStacked = d3.max(x01z, x => d3.max(x, d => d[1]));
console.log('xz', xz);
console.log('yz', yz);
console.log('x01z', x01z);
console.log('xMaxGrouped', xMaxGrouped);
console.log('xMaxStacked', xMaxStacked);
const svg = d3.select('svg');
const controlHeight = 50;
const margin = {top: 10, right: 10, bottom: 20, left: 20};
const width = +svg.attr('width') - margin.left - margin.right;
const height = +svg.attr('height') - controlHeight - margin.top - margin.bottom;
const g = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const x = d3.scaleLinear()
.domain([0, xMaxStacked])
.range([0, width]);
const y = d3.scaleBand()
.domain(yz)
.rangeRound([0, height])
.padding(0.08);
const color = d3.scaleOrdinal()
.domain(d3.range(n))
.range(d3.schemeCategory20c.slice(8, 12)); // greens
const series = g.selectAll('.series')
.data(x01z)
.enter().append('g')
.attr('fill', (d, i) => color(i));
const rect = series.selectAll('rect')
.data(d => d)
.enter().append('rect')
.attr('x', 0)
.attr('y', (d, i) => y(i))
.attr('width', 0)
.attr('height', y.bandwidth());
rect.transition()
.delay((d, i) => i * 10)
.attr('x', d => x(d[0]))
.attr('y', (d, i) => y(i))
.attr('width', d => x(d[1]) - x(d[0]));
g.append('g')
.attr('class', 'axis axis--y')
.attr('transform', `translate(0,0)`)
.call(d3.axisLeft(y)
.tickSize(0)
.tickPadding(6));
d3.selectAll('input')
.on('change', changed);
const timeout = d3.timeout(() => {
d3.select('input[value=\'grouped\']')
.property('checked', true)
.dispatch('change');
}, 2000);
function changed() {
timeout.stop();
if (this.value === 'grouped') transitionGrouped();
else transitionStacked();
}
function transitionGrouped() {
x.domain([0, xMaxGrouped]);
rect.transition()
.duration(500)
.delay((d, i) => i * 10)
.attr('y', function(d, i) {
return y(i) + y.bandwidth() / n * this.parentNode.__data__.key;
})
.attr('height', y.bandwidth() / n)
.transition()
.attr('x', d => x(0))
.attr('width', d => x(0) + x(d[1] - d[0]));
}
function transitionStacked() {
x.domain([0, xMaxStacked]);
rect.transition()
.duration(500)
.delay((d, i) => i * 10)
.attr('x', d => x(d[0]))
.attr('width', d => x(d[1]) - x(d[0]))
.transition()
.attr('y', (d, i) => y(i))
.attr('height', y.bandwidth());
}
// Returns an array of m psuedorandom, smoothly-varying non-negative numbers.
// Inspired by Lee Byron’s test data generator.
// http://leebyron.com/streamgraph/
function bumps(m) {
const values = [];
let i;
let j;
let w;
let x;
let y;
let z;
// Initialize with uniform random values in [0.1, 0.2).
for (i = 0; i < m; ++i) {
values[i] = 0.1 + 0.1 * Math.random();
}
// Add five random bumps.
for (j = 0; j < 5; ++j) {
x = 1 / (0.1 + Math.random());
y = 2 * Math.random() - 0.5;
z = 10 / (0.1 + Math.random());
for (i = 0; i < m; i++) {
w = (i / m - y) * z;
values[i] += x * Math.exp(-w * w);
}
}
// Ensure all values are positive.
for (i = 0; i < m; ++i) {
values[i] = Math.max(0, values[i]);
}
return values;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment