Skip to content

Instantly share code, notes, and snippets.

@lorenzopub
Created April 22, 2017 04:36
Show Gist options
  • Save lorenzopub/93256013a8d4a5fba2c71e8057a01872 to your computer and use it in GitHub Desktop.
Save lorenzopub/93256013a8d4a5fba2c71e8057a01872 to your computer and use it in GitHub Desktop.
Stacked-to-Grouped | JSON Data, Horizontal Bars
license: MIT
border: no
height: 1200

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 draws horizontal bars from static data

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 | JSON Data, Horizontal Bars

forked from Thanaporn-sk's block: Stacked-to-Grouped | JSON Data, Horizontal Bars

[
{
"0": 0.8345658418026087,
"1": 2.16990473059691,
"2": 0.11225498002657552,
"3": 0.17486306808582253,
"name": "zero"
},
{
"0": 0.4547571633367139,
"1": 2.293639687510199,
"2": 0.11257016829714184,
"3": 0.2298141045051727,
"name": "one"
},
{
"0": 0.190595042313489,
"1": 2.2298279573365214,
"2": 0.1839374938020395,
"3": 0.3360952676772113,
"name": "two"
},
{
"0": 0.19738488101007876,
"1": 2.206696498843617,
"2": 0.17533589513765335,
"3": 0.5859787329034409,
"name": "three"
},
{
"0": 0.109208829080153,
"1": 1.9552149026588583,
"2": 0.11277306719085622,
"3": 0.9600889268112711,
"name": "four"
},
{
"0": 0.1061610735747754,
"1": 1.5905810961242883,
"2": 0.13741060343967204,
"3": 1.1570885127433614,
"name": "five"
},
{
"0": 0.16451368843759093,
"1": 1.2859246485063744,
"2": 0.10184544036173926,
"3": 1.1241807682264733,
"name": "six"
},
{
"0": 0.1025131649061017,
"1": 0.9717402103146218,
"2": 0.12968887820309827,
"3": 0.8727085031257851,
"name": "seven"
},
{
"0": 0.1949447302325289,
"1": 0.6992763765691113,
"2": 0.17971966572582898,
"3": 0.517827011694173,
"name": "eight"
},
{
"0": 0.1177193520601679,
"1": 0.46505701727659365,
"2": 0.11270388919011565,
"3": 0.3260373543877625,
"name": "nine"
},
{
"0": 0.1462059409009294,
"1": 0.3094175422555735,
"2": 0.16167759830492812,
"3": 0.1715670622073826,
"name": "ten"
},
{
"0": 0.1851331271609325,
"1": 0.24030077931859933,
"2": 0.1011320269253213,
"3": 0.18588128995552966,
"name": "eleven"
},
{
"0": 0.18106955819260212,
"1": 0.22449970770786298,
"2": 0.14461975744106742,
"3": 0.13603826586713308,
"name": "twelve"
},
{
"0": 0.17837297705138078,
"1": 0.18174301488576006,
"2": 0.15011967618163913,
"3": 0.17794511739155605,
"name": "thirteen"
},
{
"0": 0.18259683666081902,
"1": 0.1847859732797195,
"2": 0.17994292592532157,
"3": 0.19901139192343287,
"name": "fourteen"
},
{
"0": 0.1110130198686905,
"1": 0.1436178823525508,
"2": 0.10628027401737211,
"3": 0.1814916926446018,
"name": "fifteen"
},
{
"0": 0.11361529035333096,
"1": 0.15947784914079133,
"2": 0.11441050324234148,
"3": 0.13875245625206478,
"name": "sixteen"
},
{
"0": 0.14790163702068787,
"1": 0.19014909804324626,
"2": 0.1555474119041413,
"3": 0.20840404337267765,
"name": "seventeen"
},
{
"0": 0.1949968036066766,
"1": 0.29270545322394426,
"2": 0.114201446093528,
"3": 0.20711288514200954,
"name": "eighteen"
},
{
"0": 0.16061663536254375,
"1": 0.4488311604689811,
"2": 0.19108732592581135,
"3": 0.29196460596774787,
"name": "nineteen"
},
{
"0": 0.11828970638524117,
"1": 0.6022499142439799,
"2": 0.1906754956974005,
"3": 0.44976999290236486,
"name": "twenty"
},
{
"0": 0.19052420051116256,
"1": 0.7586339982956414,
"2": 0.18611717332528988,
"3": 0.7135240637821088,
"name": "twenty-one"
},
{
"0": 0.14102757049524564,
"1": 1.0436032784557587,
"2": 0.21383567141546456,
"3": 0.9105069969517476,
"name": "twenty-two"
},
{
"0": 0.1400763509851857,
"1": 1.2529114940133406,
"2": 0.16792258073092658,
"3": 1.2392922805597992,
"name": "twenty-three"
},
{
"0": 0.17145341173755935,
"1": 1.369028294902841,
"2": 0.2554756001305245,
"3": 1.4390036686572394,
"name": "twenty-four"
},
{
"0": 0.1142197822651475,
"1": 1.3204483212776335,
"2": 0.2512993182290364,
"3": 1.6674115370963114,
"name": "twenty-five"
},
{
"0": 0.15427104036012443,
"1": 1.2467959228758292,
"2": 0.4447079455959,
"3": 1.7608832243905004,
"name": "twenty-six"
},
{
"0": 0.18941420012129426,
"1": 0.9566411058342233,
"2": 0.6934709075960008,
"3": 1.6711918800408099,
"name": "twenty-seven"
},
{
"0": 0.16030801532958389,
"1": 0.72968388523596,
"2": 1.2456663863075754,
"3": 1.449647296489422,
"name": "twenty-eight"
},
{
"0": 0.1612989393999626,
"1": 0.5232221990536086,
"2": 2.0069308208914673,
"3": 1.2387292588529517,
"name": "twenty-nine"
},
{
"0": 0.1680850695478585,
"1": 0.4098415290607861,
"2": 2.8534512729434294,
"3": 0.9218047337208097,
"name": "thirty"
},
{
"0": 0.1167075659137578,
"1": 0.2243459400027773,
"2": 3.4631976204576547,
"3": 0.6533988575872596,
"name": "thirty-one"
},
{
"0": 0.14647393431706796,
"1": 0.2458810499577117,
"2": 3.4525744339678957,
"3": 0.4886764645805308,
"name": "thirty-two"
},
{
"0": 0.1278677185146747,
"1": 0.18830239395443316,
"2": 3.1065773115746826,
"3": 0.37642130506603877,
"name": "thirty-three"
},
{
"0": 0.1391673391797843,
"1": 0.11174942607313926,
"2": 2.7357288662136545,
"3": 0.23271637827985625,
"name": "thirty-four"
},
{
"0": 0.2507616269855116,
"1": 0.13015386121548111,
"2": 2.541133252201119,
"3": 0.22131639202239528,
"name": "thirty-five"
},
{
"0": 0.26073384485168427,
"1": 0.13446671655256653,
"2": 2.5342757106187426,
"3": 0.19129613570397597,
"name": "thirty-six"
},
{
"0": 0.3255208118456826,
"1": 0.14310755099573258,
"2": 2.531776208280289,
"3": 0.20346806297265152,
"name": "thirty-seven"
},
{
"0": 0.49053994714140703,
"1": 0.1833573284332347,
"2": 2.5515216319513385,
"3": 0.16097417163299932,
"name": "thirty-eight"
},
{
"0": 0.6566616225859324,
"1": 0.1420633692087001,
"2": 2.566489413584417,
"3": 0.19608224521048845,
"name": "thirty-nine"
},
{
"0": 0.7906099471022422,
"1": 0.13088816206384812,
"2": 2.658579431787212,
"3": 0.1449285983263784,
"name": "forty"
},
{
"0": 0.9807878060688358,
"1": 0.10349600956435734,
"2": 2.678643544449402,
"3": 0.14288310732988485,
"name": "forty-one"
},
{
"0": 1.158566848273416,
"1": 0.14552089136288648,
"2": 2.8595505453152823,
"3": 0.1201609266976762,
"name": "forty-two"
},
{
"0": 1.3158716481832025,
"1": 0.11165480642176173,
"2": 2.9227109679896137,
"3": 0.18328416679433346,
"name": "forty-three"
},
{
"0": 1.3141794328922924,
"1": 0.17506966697906257,
"2": 3.0551860629320835,
"3": 0.17020174336390603,
"name": "forty-four"
},
{
"0": 1.2835620009724025,
"1": 0.15243850480914034,
"2": 3.149823756134488,
"3": 0.19692156360240798,
"name": "forty-five"
},
{
"0": 1.1763590731124858,
"1": 0.10565073069580855,
"2": 3.085488798263314,
"3": 0.10721725212540267,
"name": "forty-six"
},
{
"0": 1.0247175741491994,
"1": 0.13738228419716658,
"2": 2.9246150406007576,
"3": 0.1632273588191122,
"name": "forty-seven"
},
{
"0": 0.8811955960917054,
"1": 0.12676860140735136,
"2": 2.674648207968276,
"3": 0.17207439227140098,
"name": "forty-eight"
},
{
"0": 0.7063281912406454,
"1": 0.16015511531309168,
"2": 2.3763529091188613,
"3": 0.16109040013513898,
"name": "forty-nine"
},
{
"0": 0.5449865739415336,
"1": 0.19760568934581513,
"2": 2.0049745878747496,
"3": 0.30556676529604854,
"name": "fifty"
},
{
"0": 0.4121531564634099,
"1": 0.11815561152617993,
"2": 1.599948087918452,
"3": 0.5647793548545561,
"name": "fifty-one"
},
{
"0": 0.32214329647797335,
"1": 0.12102494255479967,
"2": 1.2459420697339225,
"3": 1.0819651957138756,
"name": "fifty-two"
},
{
"0": 0.27217968508738444,
"1": 0.19183100050676083,
"2": 0.8911795060576224,
"3": 1.831423637178713,
"name": "fifty-three"
},
{
"0": 0.1861140478814755,
"1": 0.1623990293221626,
"2": 0.642617369968976,
"3": 2.401284906380081,
"name": "fifty-four"
},
{
"0": 0.12542299658774217,
"1": 0.14343688785307282,
"2": 0.49382970229231415,
"3": 2.2719496090564806,
"name": "fifty-five"
},
{
"0": 0.14181692551789446,
"1": 0.18442442382104077,
"2": 0.3469738553459,
"3": 1.6072251382480411,
"name": "fifty-six"
},
{
"0": 0.1905082555552165,
"1": 0.15980815514017616,
"2": 0.26596917763541894,
"3": 0.9092048653077827,
"name": "fifty-seven"
}
]
<!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;
}
</style>
<div class='custom-radio'>
<div>
<input type='radio' id='grouped' name='mode' value='grouped'>
<label for='grouped'><span></span> Grouped</label>
</div>
<div>
<input type='radio' id='stacked' name='mode' value='stacked' checked>
<label for='stacked'><span></span> Stacked</label>
</div>
</div>
<svg width='960' height='1200'></svg>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://d3js.org/d3-queue.v2.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�7��� IDATx�����ea.���]��&�
�dt���Պ�$ U@�Z ���b�߾ =�pޞ�D�ꩅ�#�m$�cDۄľm��*�|�H���f�HV$Y��B �B��a���$JB����������<s�s����<wQ����6�!`P�@`P������7nݺ5���K�RI����������/x��� j�T�IJ��:w���� ӪU3^-����h5�u���˚5k�q��<��ө����y�駳q�ƬY�&�=�؞�\ͪ��������+�T���Μ[���j����L�U��[k�������c���L�|w�p�����h�'I^y��9�9ym��s�9��C_z�-ks��9���{r�h%�VJ�~�s9��e9� ����5��_���Y�nx�֭Y�~}���7#��'�~��龜��HN?�����Y�~}zzz^r9��4'�ԓ���i�?짯������|��.גt�R��<d���].�M�^�w� �\�}���o�[�S��3::������G��s�ȉ������e�hN)�����go̹ܜU��3EQd��j2�67/�����MQ�ϧ�<�$Y{獙_��F�-ks��(��]���ݕO��ܜ�ޛs�E��H�K3R�>��o���;^�T����kƳ��S��;s��"�ܞS6iZ�.����%I���������d(�����X�O�����К,K��s~%/XL<>�/ݵ!������R:lf�嚬��d�[V� ^��K����9�7䞷���w����c����)^xe�`�5�������\���r���d��՜�כ�ʊܹ���oʺ�Y�c�rQf���Ko�=���S��i�hn�8<����n?#w�7�Jw��bA�����s��I�vx�Ӟw��+;޳㘝zf���콴�g�_�J�Ypi����������O������~���S9��(��<#I���r�EY���暷������_E]:�����d�f�+��W^�{?qi��������Y�)_���"�zR��w3rK��G�;�l���0�ÜhI ��4㗳(�g�~�%5�� ,8-�)��_������3�$��{����"����R^}����I/1���T�;��$�R��G�q���M·��3�?Sϳ���������[3о�\�v��+<�%?h�{v�S�3r���ٿ�X�������z��N."����Գ,��?��L���礴�$�o�R]�2-�oޗ�{w&��[���:$I���se�6-����I������=;�ٹ�����μ��I}��ۏ>����N�P���Ė�o������-Y���;�5����"���ox�������ת��Ώ'I||��W>��]��|�+r�[�W��M��̼xi�n��w>��_s_��|�H.�sC֎'ټ6+�Lzp]�k&@[྾�E��v�����N?����{ EQ����G=lA�[�Ͼ������b��̟_��;1s��#�9g0��[�k�hY��y����KO���,���e����.����?��,[8���׿��o>;�]������(�����VXJ�}߉����՟�ս���}�̳3�R��2����<~u�<~u�:g�u_��\�9�E�3ߕeI*?�ЃU3���z���7<��cy���$��2���d�^���#s�As���$ɬY�r衇��_P�f��j�UJO��m���RzzJ?��jJ?s�n5��s�;�e�Tk/roo���������L5�Ri�~�& @+�z�7�(��ׯ�k��+�/h�E��3g�y�M��)�9���"w�n{����胭J��˷3)u���7��%��u�֌��fll칭���rz{{��ח<�iOr��ݘ9g]�d^nZ�$W�5�P����>�ʕ\��N�~q�
/�~�C(��&v{ �/�!X�-۶2*ug�o1T�R��-����xuϟP @Sڭ+��=�X֬Y��7�駟N�^O�^��O?��7f͚5y��v��hV��Hyr9�Z��_���Oet/����>�s�"ݧ�L��~�w�}�Է�����
�c�=�|0�zXt�^σ>��%x���›oȦg�Y~O=cKV��ͯ��m�:�/����:��_yGn\�(ɤ�J��&��P޺uk֯_���~��lݺ�%�W}&I*�Q8��W�?-�Z�T�?<&{�g�%�ݽ[�@"۷L*M)��K͞l\��3:�� �K]������'ݘ��/���_>�9�d��� gޜ�~�1���/��d�+�����ͻ.)ұ�S}n_��|�禘n���?��,Y.%Y{��)��9��7g��$��,}��E�����������>���ܼs�����,�m��xlll�?pw����� ���k2���~�����ԙ����g��dޒ���3R��M�[.�����|vե��]�J�]W��YJ�����r������>{Զ���/ޒ��3Y~��Z��N:<� �G��z���[r��d���~����YS����̊��� ���h�|
�=��:��/�XZ�~gi�y�E����/ߑ'>���l�����/�r��iՌ~�Y�l���d�pN�i^��L��,�,C�x{������ʏ�����ݱ\���m����9ou��ߟ�����I=�d�яd㛮�9+֥�3IJy�;%��h�d��-��w� S[��&��>/w ��ȻK9��j��=?�8ڛ�m{�:�>���n��ٓ���)u&�!IVgE���O�dW��$Y��O�i>��?�=��S��3����&�M���~Y���=�KS��O���`�g W|le��C/r���H��3s�����N�̣������dE���y��ѵ���j�GR,�#__�\w�1��}��E���a4ۊsg���f���?y]�����ϫ��������=���<�sF�^�ޜ��o?���ئ$�9'<��ʱ��o\���x�S�+��d�Gw�;��c�;���P$�z>��ጬ�R�����VJ����I9qᇳ���c��76'��꼧H~���s�G3�����9�}�ks���w��֎'��|�����dd���ھ����(�����(�����*���yY���S��� ���Ksê��5k����Ey�������Z���|�H.:�?�u��9�yYqىY9�\���yO�:�xL��\�K\�ër�-˳�<;7~am^}�MIV��C��s�֓��Y�rKN�}x�ub���XN9,9��mK�Ϟӛ����w{�ŕ�1K�@Q�}�{�<�����a�f�ʡ���o�e���Z5�OUS�ܳ��ݟ�V�R�E���'�V�)�����Zu��^�9�}V�Ͽ@��%x���;��(�̜9s��/4kN��[�ftt4ccc�muT.���ۛ���x����� 0����
0(���
0(�(���MEQH��/���
0(����
04��F8o�b��>�gܜC'M�-W�P��]�z�ް��"��Y"u���ɤ�� �ș�g��~���R�}����˱�@��%��ͣY?�jM�4� _��������%�^\�|8������d=�<[�e(�/Wm8W�q]�}��㻓�O-��e��=����R��A|���̔�m��&���uY��2�{ۏ3�ߐ��I��*�ձ�� ?��[:�|ksU�4� -�.͚�s���T�������̝��]38uN�O�~���=�w�����t�RΥY���\0���ʊ�=<�R��r!E���_�΁|���H�r.L�q���-}R���z}�U�3������]V���-Ԍ�G�-�}����" ��!`P�@������\,�6���qS�&"��� � ����ߺf���\_�!��U��3����h�=��*K�����5twu+��~e�-��nOU�4��_�U3�зs���=,����S���5n�7�X�G���\��Ksg�ύ����R�� }�o�/��m��&�z�i�d���ea*�@оZAß}���~�+����}�]y�A��4���o�U���8�`� � �%�eY�Ċz�q�E� O>�߅<c��f��V����`�h`P�@����}��\��}�ԏ����f@�p�E���u͒�nj�'=�)f�Ϝ���@���Ty�-�k��Z��ɞE������#��Hƫ�9M�
��;/ϜE�����ݒU?��٥���J����Z�V����6sݒ�J=�����#����n:e�����-��=!�z���b&��4����2XJ�j���-�;�_��YN�3�'������,��m����
@ә�6H�_�1��|Mn��u����.�EQdh�|h�EWS�}Gu��z�n��X�� 粓�ɪ���5�'�-դTJ�s�l�U�@�Ml ���P������*R�\����*Mg�K��h��Ȇ'��/����%������ �>�!`P�@������\�V�s��)R�IM�``h ���5K�*��=��"��#�y[�[�4��M���*�v;����'��d�,��8������
@s���j��M9���棧=�k�O�}|y����#��Loɠ��ٺ ���p����y�~uz���T��m�������S*�dP�9�:�f �~Y�K���>���K�9���KR���m����მ3/��֍J��3�m�6�ͪo&g�m0I2�O���������(2��_[��t�(l��j��G�ҡ�&z��,<��_�LJɺ�ߒ���]��V�:-V��8%_��u9�\$I�| k��
@ә����[�S}����]?�(�lx���0����{x�+�4p8x��:��
04��F8o�↎��'\����U�4�~�``h ���5Kz�t�i��M@ 9��Ss`灂`�j�=��*7�$z�A�4�X��m�-��U3��DhJ{�
��+��ko˖��)��}�S���5n�7�Z�G�vsN�6�8g�K���Tn�I�těsĤ#}����/�~��yr9��[�<��DhJ�\͍����g`��o
�6,����5�$o���^�$�`R��~�N�>v�q ?���n�[�÷ M`v�!�OLl�Z5��դ�����Y ���"3�w2XQ�;��#u�OM����E�[�YJ��m�z{�f&'��*�gbW��t��Ȇ'�:��fL>Z��n?^����
04��F8o�↍����wg��oW�P��m4|�[�,i� ���[`��?|~���������p[�@�`@~q�j����\*��)Xڬ��s~� �y�J.Z�,g������O��T���V.�~�����5k���S*7��O꜔_�?�,�L�)��l��}t��(�q�ҌT�
@���X*�ݐ���RfS�,.�Z1,U��ķA�%��Ы��ܜ�����/>XQdh�6U�E�Y�l]ye�lA������o��*COݓ��j�]���=~�.�Z�Hh�|��b���s|����3�H�'ܔ���*Mg�K���Z�x5��)�z��Ȇ'�:�VfL>Z�M����"u���t�`P���t5z�y+�L8�?����=�,h��@�h�>���Y�2�L-���4�,Z�+z^���J;��{�7Un�pZ�oxE�+�� {g ��� �h$�[
@s�����-M�k�27|⭹��r�*y���N��?ez�N�ָ���u� ����e���'��ɕ ߞo?1��o����� 9�;13��� �d/,�.gu�uj��(2���30�O��_�$�폯K������y9�/�J��3�m��k3���|���L��s霕l��#/vpQ��� ;�΢�7 L���9Bhk�]��Ŋ ��f`v)߾��]�.�]��V�:��, @ޮ�/W}������VE>�5cR��Ll ��j�դԽ�%EQdÓHh3&-�e V�ۛ�}�C(��� M����[��!����r�qg��H�
0
0����|�% ;��=�|�����?C4L���Ty�-��L����Z�����:K)� @;��w��#�MNO��r�ݾ,'�ʖ�geg����8�Z�V~����S��~϶W�&�W�w���&IO���O�����֣���(�{�K��I�jC��
@������ �̐(�[����99aٺ�u��{��z\S��}cC�}x�����ҡ�@�y����'���n�{k�"u�cŸP���ߓW&L�WQ�7n?��(����MlJ�A�@��\��.�@�P�@�JW���rqۄw�~?o����� � ����ߺfIۄ��љ��n���?C�L��n�<�V>�e�Y���2C�d������ �h4՚@hN����wf�_%7�Vɵח���?�Sw���)�[:�Z�V��4�6�w]<��g��`grrQ�o��D��o�����-��G���I����
p�@��������`>}Jr�G�ޱ>��t&x�x6|'9��Y9��#3/+��Q��t&� ��U霵>��W�'��W.�o��{��݃/>XQdh�t`�E�Y����΢S�^3�6�sx��dzn�9~j����JJ���C��*R��
���w�ܼ��"IR�=�ߏJ��3�%�;T��֒Rwi׃E6<���yIӺ�-�����`E��}t�:D�
0(��T�=༕��ɉ�{�)��W���S��@�h�>���Y��Nvf�4�x��������{�7U�g'�/��|��
0�4���꣣^?�jM�4� _��O��I�����J>r��r�� �v���)��ɉ����&4�{��+}����ӓd���yU}Ij��`E��|��'y���o��m���Ė@��9!Ie���J27%��t&��gN~oމ9��ӿ��\t��,Z&T��ķA��g���Ά���k{�型^|������''�Yt��y���f4�NL�V�f~�C��3�sF�xn>1�� �򐭵��A����=����O$�t)����WC9k�Ph>_���e<�j)=Sw���(����� �QtX ��.��=XQ�n?^����
04��F8o�� �So�:�=l�Ц\@�v��}�o]��)��>`R�4�e��_��k���m즆����ps&QI~�����~mگ��{`ϗ@ת�K�ͣY?�jM�4�=�\�2��ϟ���%��{0I2�OL��� �K�����_�pJ;���)�[&�Z�V��4�6���]�Ko_�E˶7��p�<���T=�w'o�Z��ޙ{.������-̯���ʞc��6��K�;g䒥˳aŢ<T��ڣ�2�e��g1͘C26&UZ�oW�<��c�~zE�t����Th:z
ti�ܜ�ͯ����d��/f�7��c���T�}*�� %I����.�`˳i IDAT-��*��K�r텹`0Y��{�'wy��ZE��@.���s ���;�;�� �t\��lyK�Th:E������g|K)=SK��(���Z.�#'Ͱ@ރ��"u{��t�`P���4����V.n���t���G .7sZ�+�(��.��k��|h3{����&uNʛ�z�Y�4��M��[>��{�v��f�>�@W7����@�س+��j��v.�uU>T�'����� �S�7����ٺ/��Q�G���\��Ksg�ύ�xmWzJ农���#�� �.��q�%Y��uY��s˝_�5h� ���O�>v�q g������|���9f��k[k��������%���| �EQ���YPQ���-ڌ�G�9
� p���x
4
0(��@si�>��V.nٰ�zS���]h�� W�P��]4|�[�,i��f�L������Uye�+�2�&��{�7Un�����U��0�&��K�kՌ����#��Hƫ�9����� }��̭,I�݃I��w^�9�� �O�5�%�~P�Y�K;���)ӛ2�Z�V����6���]�Ko_�E˶����YtK�*� ���OH����S�锝~LO��t!�pp�:�L��������d��lX�(U��V���c,%I5w��̝�/UZ�oW���瞩=���F.�(g�On�ߞ? U�΄�=��s����Y�g�����ة�5��wwN��j(�/�6��N�&���r��T�T�R)�Ν��Vi��?��K�Z�j��|���b��<���9�)���'�s�燥
@�)�����SE6<�@Ӝ|WGW��4�,P��~��o�}�C(��� M����[��%�:�|H�p�Mf @�r�E���u͒� kfϴ���YЂ~��íV� Ъ�| t�����4�q$#�GS� ��GW��[�3���3��$�w&��ޔ��~n>z�#�����Ǘ���;���)ӛ:�Z�V�Д�6���]�Ko_�E�J��p����y�~uz���T��m������~LO�ܴa,8��L�nV���_�9#�,]� +����J���~uzƇ��ޜ�nJ�N+I�.��U+/��h~����K�u�R��L�)Л�f�7��߶ W\� ��D~뻏�};=�ة�5m��>����ċ��H�W��1�e�n��3�����d�����-I���![k�� ��� �`�*��r���qJ����rL�H��@֌ H��S������e<�gJ�������Ȇ'hٰfL>ڌ؟ �nV��g�}�C(��� M����[������Z�;0sZ�+�(��.��k��t`�:"�9������{�7Un�|�YЂ�| t����}��q�Д��
pu�x�>z�V�������s�eK�”v��S�K�&.���,���\z��,Z�Š;���sҵI�9S_�czJ� kA�ə6Y�hE���sF.Y�<V,�C����]9��r�ݷ2y�i�Д��!X����hn<����h=[>�|S��I~A��\SO������I�� &e��g��>�c�ײam�?�e|���K�CsX�3 �� pi༌=�0�,el�gւ��[���C���*�`�P��- p���谝��L�Vw{�f&'��*ͧ����� V���m`�s�%�
�����
0(��@S�j��V.n�xsz�ΒS?��Ϲ � ����ߺfI�Orfϴ]�����[g��lhc �xS��4ۘ �o&(�?�V��S������j�y�/�R�,-\��[�3���3��$�w&I�?~�9?y��<r_%-[�3^Y��g�O����5n�7mQ�k#Yzٕ����Y��w��U?^��f������ ;��f�����؃�@w��%K�gÊEy����j6}yE�>�HQ�`iF�B�� ���[y���TN�!w���̦�Y\���bX�4��=��/~��3Izr��)�V�&��!�N=���W�}cC{/��+=������#E�Uz� vWs��f���vy��Z�e�:考������Ɏ�s|����3�H�'ܔ���*M�����>A�jƫIOOi׃E6<�@K6c��f �~[�ww��Hݾ��"@`h*]�p��� ?�K�]��Ǿݷ �s�E���u͒}r�3{������?��h# �xS��}r�{2�03�̞/��U3>�3�m���F2�E�4�=�\�2��ϟ���%��{0I2����}�_�O�5�\u]��A%�]��g�O��ON�ָ���t��d�eW���WgѲ��6��_�z� v'W.|{���X���~LO���<�{ZN:�M�m����/�K�.φ��P�/��:�:�HQ�t����'UZ�oW����J�����ԟ˝O��#�b�Th:{
�3�<�E��Igr���Hf}/�wfgw;��}r��� ���Gu��A��
�>,o-Vdh]5�K����e�u)�␭���h�\.o[��$�}��w���m�*��*M������@�j�դ�]��`E� O>�T|�!�@(�{y��H�~��"@`h*]�p���Mį��؂+��6�
0
0����|�%M�̞i���S�zsʝe3�E4��M���6�=��N9��f@[�Z5�O��ӳ���� �YJ�$XZ�W��g��gneIj�L6ޕ�6Y8=��Yv��t��*[V���u��)ӛ>�Z�V��t�6���]�Ko_�E˶��#N���=������J�𮝗�$�)5�}���˛�|���fv�)Н3r���ٰbQ�����tɜ��$��B����=��)�Y�*�~��q� ���Ŭ��sr²u��|��;���徱��u���9f@���|���?xd`�޽�Vi� ���lhb{���?���H������0aм�z�q{�E� O>жaΘ|��o+�u{���q`P���t5z�y+�Mx}��sj� f@ p�E���u͒� �����h�Xg��a�L@���Ty��|��_�s��`�LО/��U3>�—��G3���Tk�9����� }��̭,I�݃I����3s�*��J�����?��,�����2}��h�q+�h�\��ˮ̥��΢e��� �]g�{2ؙ�\��{?�o������� ?��g儾�mx7t��%K�������'v�6�?�����?�O��\��E�w�O�4�=��Zy�O����cg��Ï̼����G�
@ә�S��5��yS6�/LO�������Gs��v~�ة���ol����]���
3
�- p��y6Ϻ�W���ɣ�+)��.�Z��e��]�f@[�r9��a�.Ƚ�����I�"���~|P�4��^� �U��֒Rwi׃E6<�@ۆ9c��f@[���(R�/�@�P�@�JW���rqK�}"Gtj�� W�P��]4|�[�,i�`�45�L2C����Iy�QoД~���-L�����׎<Y@���%еj��_�R��� �M�&P��]�n���O��ʒ��=�$��O��I�����J>r��r�� �v��S��Mx�ƭ�a�6���]�Ko_�E˶7�G���z]��W�'�;_=?�Z���.������m܂�Oδ��f@���%Н3r���ٰbQ�l�T� Iv�X�$sS�*Mg��U�<9��y'� �O���s�U��h�Ph��B=���e��Ά��竟X�k+�>�ةǵEp��>����DC�:�tX-n��\]����3�,������>0��C��*R�S��d0A{� R�y�* �?��U�(zs�_ �YB�������nO�ZJ��]?�(�lx���I�ݖ@4C����"u{��t�`P���t5z�y+�}á���N�C�8�~�``h ���5K������'g��!�5��M������˱i��#�O���Z5#?�����\�<������
@s��+��ks��s�ȵ7d��ɟ�X��o:+����������������g����2�m«5n�8����Z�U��ԮL2��;��6��m3��>U�����?)��u����(���϶Ep�N{[��1�Z�n/��`,�/L�Ttwn��K���2�eN���̘C26&UZ���'=���}��)��?���2�����so)rD���*U����\ɍ���߽-랪g�;Iun����RMRJ2r�3w�w�1�N=�-�{�� �Ty� z�"E^�;(�� ������^�'>}Vz����%)�J)�Ҭ\{a.L�|eE���]~��ZE�m��� !�_�7��<����>wĢ U���vGz�sa��+��-o�*Mg���K��o)�gji׃E6<����،�G h����E���`�
0(��@S�j��V.n����-K�AG�A-�``h ���5K�"�C���� ~a��?C�5��M���"�v9��/�#���l t��� gd������y<UyФv�
���\~�<r� ���k�g3V���J�V��C��ų�ʇ*�d����2��C�5n�8�.�������PjW&�8�8<w��z� -͕�4w��ܸ��S*�t`Eё���/3����� Ʋ���$I�Gw����OMf�vI�}]�b 4�_��ݓ��j����ɟ��w/������\ɍ���߽-랪g�e�t���Z>��Ɔ��Hw���O>Z�
x� W�}g���>+=�TSݒ������ZE��طv{ �>�gW��ޮ"E������y7��e @+�����SE6<����/Ͱ��\��.�@�P�@�JW���rqS0s�����?n&�9W���ۻ�(�8�߷�,z�8UN�Uѻ�����Ea�G�K�Sq40��� c0@ܜ4���4�{@����&^��db�HL���������Y�y�߽
0 �M���/���M� ��5���_����7.�A|'�� 0���]��i/-����_�?�����j)PS�'�������͓�2qe&oﻔ��Le�B+ͣ7sꭉ̼9�KW��:P��g��=4���6�V9}�{x�l�'� ��H�����<��B^���Bw=�J��q+{?z1�3��~����� u�x:����L�W�'_���k�g�ʥ�̮J}O#��:iT������<��'4l���Zjce��Z�N��w�?L����k)��,��j^�y.�'�
�������m��|e.W]�����+�����f2��լ=������:���o���`g1�vmϞ{[F�3�� Dz���u~*�?ʔ��Ri���c9���ԁZʲL*�T��`���?~.u{��)�l)}_�^��z�.���"E����\����I�4w�-R�Q����R`��}��,VY���al���Nx�7r���`P�`��n���.���>r8o<a' 9'��/� �����n�KIEND�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.28.48 PM.png� 
   ]���zzzz(��m�>Z������ )9IYZ �!�"w# #�$3$�%[&y&�&�&�''/�0�22�45Q5�676�6�6�6�6�6�7>�@�BB�ClC|C�C�C�C�C�C�C�C�D M�Q�Q�Q�Q�Q�Q�Q�R
RR*R:RJRZRj[�^E^U^e^u^�^�^�^�^�^�^�^�__hKk�lIlYlilyl�l�l�l�l�l�l�l�m t�v�w�x�ydyty�y�y�y�y�y�y�y�
����������� ��%����������
���TT�� ����˛_<<_�������n�����������~77�~�����������ԏ����˛77�������\�������T����8���8�����T�������_77�_������]�����̗n��nn��~��8����~�������<77�<������]���������������T�����T��������<77�<�����T����n]�����������T�����T��������_77�_����������\T�����������T�����T�������˛77�������8���8������T8���T���������~�������~77�~�����ߦ8n��\]���88�8����T~�88]�����˛_<<_����� ��
���������T��� ����������%���8� �����������%����� ����������� ���������������� ���T�����T��������������������� ����� ��������������������8���������� ����
������������8��8\����~����T��������
�����ݦ~����8�����n��T������������������
����������T�����TT�������T����~8�����
�������������T���\��T������~���������
������]����]��T�����8�����������������
�����ܮ8����������TT���T������n��������������ܽn�����~8���n��\����8���������
�������������
��������������5��������������=���=���=���=���=���=���=���=���=���=��7"7��7"7��7"7
����������� ���������!���������� ����S88�� ����������������������������˺����������}����������������������R�����_���SS�����`��|p`_�����˴���������������ƻ�`�`������8�����8ܻ�����ˮ����������������|��7������SR�S�����S����7����ˮ����������_�������7�������7�S�����S����7����˴���������S��������7�������7�S�����S����7�������������������������������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��������������=���=���=���=���=���=���=���=���=���=���"����"����"�
����������� ��&���������� ���T\\�� ����˧{bb{��������n����������ˑ^^���������T�����˧^^��������������ۆ�\��8T8�����TT��T�������{^^�{����������۽Ŷ��~�����������\�������b^^�b��������������\����T�������������������b^^�b�������������T���T\���T����������\������{^^�{������8������T�������T����������T�����˧^^��������n������\�����������8�����������ˑ^^���������T8�������������8��n������˧{bb{�����
��������������������� ����������%���� �����������%���8�� ����������� ���������������������������������������\����T����� ��T��������������\~���n���� ��T������
������n�����n���T����TT��T��n8���8n�����
�����������������������T������������
�����ޞ�����������8�����\8����nn�����
���� ���������T�ۦT���n����T�����
������ۏ����������ۮ�����T�~��������
��������������Ԧ���8۶\�\��T��n��������������8�T8���T���8��8��ԏ8��������� ��������� �� ����������5��������������=���=���=���=���=���=���=���=���=���=��^"^��^"^��^"^� ����;���8�<���T�<���8�3��n����T]�2��T�������\]�1���\~�8����T�1������������T�1�����������T�2�����~��\8��1������T�\��3�������������;���T��;�����;�����5������\��5���������5����T�����7��T~�����6����8�����5��n�������5���������9�������7 �����;�����<��8��:����`��2���8_���}S8��1�����_�}�����1��pp����S��1��7��������S��1����������S��1���_��������1�������8|��2�����������������;���7�<���7�:�����7�6������S_�6������SR�6�������7�6��������7�6�������7�6���q��`��5�����S�_��9��������� ����<��~��;�����<����2�������8\��1���T���������1��n~\�������1��T����������1��n~����������1�����~����2��n���8���2�����������;�����<��T��<��\��6�����~T8��6��n�������6������T��7������T��6�������\��6��������5�����8~��9�������^�@��7@���@��^�@�:7����:7����:7����@�:�����:�����:�����@�:^����:^����:^����������������������������������������������������"���"��������"����������������T���8�������������8������������������������T���8��������\���n����"���������"��������"����=���=���=���=���=��7"7��7"7��7"7���"���"����"���T����������T�����������T�����������T�����������T���������T�����"���\�����"����"����=���=���=���=���=��7"7��7"7��7"7���"���"��������"���������"����������"�������8����"����n�����"���������"���T��������"���8�T����"����"����=���=���=���=���=��7"7��7"7��7"7���"���"��������"���������"���8��ď����"���������"����8�����"����"����"����������"����|���������������������������ƍ�����������7���|��������������������������`�����"����p����"���������"����=���=���=���=���=���"����"����"����"����"��������"���������������8���������������������������������������������������"���������"����"����=���=���=���=���=���"����"����"����"����"����������"����������"�������p����"������`�����"����S�����"���������"������������"����������"����"����=���=���=���=���=���"����"����"����"����"����������"����8|�����"������q�����"���������"���������"����"����"������"���~TT~������������������������������������������������������ԗ��T�����������������"���������"���������"����=���=���=���=���=��^"^��^"^��^"^���"����"��������"�����8���������\�����������T�����������T�����������T���������T����"����T����"����"����=���=���=���=���=��^"^��^"^��^"^���"����"������"���nTn�����"������n�����"�����������"���������"���������"�����������"����������"����"����=���=���=���=���=��^"^��^"^��^"^���"����"���������"����8nTT����"���Ԇ�������"���ۏ����"����~�����"��?��?��� �5�����4�����4� �v��7?��?�������%�����%�����%��g� 7���/� 7���/� 7���/� ����/�� �2� ����1� ����1� ����1� �'�����4�����4�����4����I�7���-�7���-�7���-��/�� ����3� ����3� ����3� ����3�?���?��� �5�����4�����4� �v���?���?�������%�����%�����%��g� ����/� ����/� ����/� ����/��� �2� ����1� ����1� ����1� �'�����4�����4�����4����I��/��/��/��/���
�4� ����3� ����3� ����3�?���?��� �5�����4�����4� �v��^?���?�������%�����%�����%��g� ^���/� ^���/� ^���/� ����/��� �2� ����1� ����1� ����1� �'�����4�����4�����4����I�^���-�^���-�^���-��/��� �5� ����3� ����3� ����3��?��?��7���(�7���(�7���(�����(��?���?��?���?��?���?���?������(�����(�����(�����(���?���?���?���?���?���?���?��^���(�^���(�^���(�����(���?���?���?���?���?����:������?���?��?���?��?���?��?���:�������?���?���?���?���?���?���?���:�������?���?���?���?���?���?���?����?��?���?��?���?��?���?��?���?���?���?���?���?���?���?���?���?���?���?���?���?���?���?���?����?��?���?��?���?��?���?��?���?���?���?���?���?���?���?���?���?���?���?���?���?���?���?���?����?��?���?��?���?��?���?��?���?���?���?���?���?���?���?���?���?���?���?���?���?���?���?���?����?��?���?��?���?��?���?��?���?���?���?���?���?���?���?���?���?���?���?���?���?���?���?���?����?��?���?��?���?��?���?��?���?���?���?���?���?���?���?���?���?���?���?���?���?���?���?���?����!�� ���� ���� ������?��?���1� �0��� �0��� �0������*�����*����*����*������!�� ����� ����� ������?���?���1� �0���� �0���� �1���+��*�����*�����*������!�� ����� ����� ������?���?���1� �0���� �0���� �0������*�����*�����*�����*����������<����;����;��
}����<�����;�����;��
}����<�����;�����;��
}������������������������8����"������8����"���������"���������"����=���=���=���=���=��77��� ��77��� ��77��� ����������"������"��������������������������������������������������������������������"��������"����"����=���=���=���=���=��77���!��77���!��77���!�������"����"���nT�����"���������!������������!����������8����!�����������"������8����"���������"��������"����=���=���=���=���=��7"7��7"7��7"7���"���"�������"�������������T��������������\8�����������T�������������8������������~���8����"���������"��������"����=���=���"������������"������������"����������"���������"����=���=���=���=���=������� ������� ������� �����������"���������"�������������R������������7������������������������8_�����������������"����7����"����"����=���=���=���=���=�������!�������!�������!��������"������������"����`8�����"���}�����!������8_�����!���� ���|��`�����!����������|����"������q�����"����7�����"���������"����=���=���=���=���=���"����"����"����"����"����������"������������������������������8p��������������`��������������������������������"����������"���������"����=���=���"�����n�����"����\�������"����8~����"���������"����=���=���=���=���=��^^��� ��^^��� ��^^��� �����������"���������"�����������������������������������������������������8������������������"���������"����"����=���=���=���=���=��^^���!��^^���!��^^���!��������"������"��T�\T�����"���T����!���� ���������!���� ����������!������������"����8�������"����T�����"������"����=���=���=���=���=��^"^��^"^��^"^���"����"���������"����8~����������8������������������������������������������T��������������������"����~����"������"����=���=���"�� ����3���?��?��?���?���?��?��?���?���?�@�7���6�7���6�7���6�����6��?���?���?���
�4���?��?���?���?���?��?���?���?���?�@�����6�����6�����6�����6���?���?���?��� ����3���?��?���?���?���?��?���?���?���?�@�^���6�^���6�^���6�����6���?���?���?����7�����7�����7�����7�����?��?���?���?��?��?���?���?��?��?���?���?���7�����7�����7�����7�����?���?���?���?��?���?���?���?��?���?���?���?���7�����7�����7�����7�����?���?���?���?��?���?���?���?��?���?���?���?�����?��?���?���?��?��?���?���?��?��?���?���?����?���?���?���?��?���?���?���?��?���?���?���?����?���?���?���?��?���?���?���?��?���?���?���?�����?��?����"�����!�����!��#�?��?���?���?��?��?���?���?����?���?����"�����!�����!��#�?���?���?���?��?���?���?���?����?���?����"�����!�����!��#�?���?���?���?��?���?���?���?�����?��?���?��?�������,�����,�����,��.�3���� �3��� �3��� �3�������6�����5�����5�����?���?���?���?�������,�����,�����,��.�3���� �3���� �3���� �3�������6�����5�����5�����?���?���?���?�������,�����,�����,��.�3���� �3���� �3���� �3�������6�����5�����5������?��?���?��?�@��?���?���?���?�@��?���?���?���?�@���?��?�������7����7����7�����x��?���?�������7�����7�����7�����x��?���?�������7�����7�����7�����x���'�����'����'����'���� ��'�����'�����'�����'���� ��'�����'�����'�����'���� �����������������������������=���=��77���"��77���"��77���"�������"����"�T�\����� ����\������������]����������������������8���� ����������"���8�����"����"����=���=���=���=���=��7"7��7"7��7"7���"���"��������"���������"���8���n����"����������"����8�8�����"������8����"������8����"���������"��������"����=���=���=���=���=��77�����77�����77����������"��������"���~����������������������8���8������������T����������Զ�8��������8��������"����T����"���������"����=���=���=���=���=��7"7��7"7��7"7���"���"���=���=�������"�������"�������"��������"���������"����S`7���� ����������������`����������������������������� ���������"���������"����"����=���=���=���=���=���"����"����"����"����"����������"����8|�����"������}�����"����S������"���S|������"������������"������������"����������"���������"����=���=���=���=���=�����������������������������"����������"����8p���������������������������������������8_��������������ƍ�����������������"���������"���������"����=���=���=���=���=���"����"����"����"����"����=���=��^^���"��^^���"��^^���"��������"������"����8T\����� �����T����������������������~��������������� ���������"����n����"����"����=���=���=���=���=��^"^��^"^��^"^���"����"������"��\�T\����"����8�������"���~~T����"�����������"�������n�����"����8��8�����"���nn����"������"����=���=���=���=���=��^^�����^^�����^^�����������"������"���T\T�������������8�����������ņ��8�������������\�����������������������T������"���T�����"���������"����=���=���=���=���=��^"^��^"^��^"^���"����"��@�?��?���?���?�@�7���.�7���.�7���.�����.�� �3�
����2�
����2�
����2� �3���?��?��?���1���� �1���� �1���� �1����L�7���;�7���;�7���;�����)�����-����@�?���?���?���?�@�����.�����.�����.�����.��� �3�
����2�
����2�
����2� �3���?��?���?���1���� �1���� �1���� �1����L�����;�����;�����;�����)�����-�����@�?���?���?���?�@�^���.�^���.�^���.�����.��� �3�
����2�
����2�
����2� �3���?��?���?���1���� �1���� �1���� �1����L�^���;�^���;�^���;�����)�����-������@�?��?���?���?��?��?���%�����%�����%�����%������'����&����&��h�@�?���?���?���?��?���?���%�����%�����%�����%������'�����&�����&��h�@�?���?���?���?��?���?���%�����%�����%�����%������'�����&�����&��h��@�?��?���?���?���(����'����'����� (�@�?���?���?���?���(�����'�����'����� (�@�?���?���?���?���(�����'�����'����� (��@������������������8�����8�����8����� 9�@��������������������8�����8�����8����� 9�@��������������������8�����8�����8����� 9������������������������������������������ ������������"
�������������"�
���T��T���8����"� ���8�����8����"� ���8���������"� ���8��T���8����"� ���8��\���n����"� ���8��������"��������"����=���=���=���=���=��7"7��7"7��7"7���"���" ������" ���T����T����������
���T���T�����������T����T�����������T����T�����������T����T���������� ��T����T�����"� ��\����\�����"����"����=���=���=���=���=��7"7��7"7��7"7���"���" ������������"
�������������"�
���T���������"� ���8������8����"� ���8����n�����"� ���8��������!����
���8��T��������!����
���8��8�T����!�������!�������=���=���=���=���=��7"7��7"7��7"7���"���" ������������"
�������������"�
���T��8�����"� ���8���������"� ���8����8�����"� ���8������8����"� ���8�����8����"� ��������������"�
��������|�����"� ���`�����������"� ��������ƍ����"� ������7���|����"� ��������������"� ��������`�����"� �������p����"���������"����=���=���=���=���=���"����"����"����"����"� �����������"�
���������������
���8���8������������������������������������������������������� ������������"� ������������"����"����=���=���=���=���=���"����"����"����"����"� ��������������"�
��������������"� ���`������p����"� ���������`�����"� ��������S�����"� ������������!����
��������������!����
������������!�������!�������=���=���=���=���=���"����"����"����"����"� ��������������"�
��������8|�����"� ���`�����q�����"� �������������"� �������������"� ��������������"� ��������������"� ���������"�
���8���~TT~����"� ���T����������"� ��T������������"� ��T������������"� ��T��ԗ��T�����"� ��T����������"� ��\���������"���������"����=���=���=���=���=��^"^��^"^��^"^���"����"� �����������"�
����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�����"� ��T���\�������"��-�����&���������7�����7�����7������4�����4�����4�����u� 7�w�1� 7�w�1� 7�w�1� � ����"����"����"������� �2� ����1� ����1� �s�
7���2�
7���2�
7���2� �
����&����&����&������&�����<�����<�����<��>� 7�O�3� 7�O�3� 7�O�3�
����2�
���2�
���2���3�����:�����:�����:������3� ����3�-������&���������7�����7�����7������4�����4�����4�����u� ����1� ����1� ����1� � ����"�����"�����"������� �2� ����1� ����1� �s�
����2�
����2�
����2� �
����&�����&�����&������&�����<�����<�����<��>� ����3� ����3� ����3�
����2�
����2�
����2���3�����:�����:�����:���4� ����3�-������&���������7�����7�����7������4�����4�����4�����u� ^���1� ^���1� ^���1� � ����"�����"�����"������� �2� ����1� ����1� �s�
^���2�
^���2�
^���2� �
����&�����&�����&������&�����<�����<�����<��>� ^�p�3� ^�p�3� ^�p�3�
����2�
����2�
����2���3�����:�����:�����:������3� ����3������������������������������������������������������ ���8��������"���������"����=���=���=���=���=��7"7��7"7��7"7���"���" ����������"
�������������"�
���T���������"� ���8���������"� ���8����������"� ���8��������"� ���8����������"� ���8��������"����"����=���=���=���=���=��77�c� ��77�c� ��77�c� �������" ��������"
�������nT�������
���T���������������8���������������8������8�����������8���������� ���8�����8����"� ���8��������"��������"����=���=���=���=���=��77�����77�����77����������" �����������"
���������������
���T��T���������������8��\8������������8��T��������������8��8���������� ���8��~���8����"� ���8��������"��������"����=���=���=���=���"� �������������"���������"����=���=���=���=���=���"����"����"����"����"� �������������"�
�������������"� ���`�����R����"� ��������7����"� ������������"� ������8_����"� ��������������"� ��������7����"����"����=���=���=���=���=������� ������� ������� ��������"� ���������������"�
��������`8������� ���`���}���������������8_���������������|��`�������������������|������ ��������q�����"� �������7�����"���������"����=���=���=���=���=�����������������������������"� ��������������"�
���������������� ���`���������������������8p�����������������`������������������������ ��������������"� �������������"���������"����=���=���=���=���"� ��\���8~����"���������"����=���=���=���=���=��^"^��^"^��^"^���"����"� ������������"�
���8���������"� ���T����������"� ��T�����������"� ��T����������"� ��T���8�����"� ��T�����������"� ��\����������"����"����=���=���=���=���=��^^�� ��^^�� ��^^�� ��������"� ���������"�
���8���TT\T������� ���T���T����������T���������������T����������������T������������ ��T���8�������"� ��\���T�����"������"����=���=���=���=���=��^^�����^^�����^^�����������"� ������������"�
���8����8~������� ���T���8��������������T���������������T����������������T���T���������� ��T����������"� ��\����~����"������"����=���=���=���=���"�� ����3�
�u� 7���1� 7���1� 7���1� ����1� ���1� ���1� ����1�
����2�
����2�
����2� �����-�����-�����-�����.�����<����<����<�������
����2�
����2�
����2� �4��9����8����8�������=����=����=����~� ����3�
�u� ����1� ����1� ����1� ����1� ����1� ����1� ����1�
����2�
����2�
����2� �����-�����-�����-�����.�����<�����<�����<�������
����2�
����2�
����2� �4��9�����8�����8�������=����=����=����~� ����3�
�u� ^���1� ^���1� ^���1� ����1� ����1� ����1� ����1�
����2�
����2�
����2� �����-�����-�����-�����.�����<�����<�����<�������
����2�
����2�
����2� �4��9�����8�����8�������=����=����=����~��������������������������������������������������������7"7��7"7��7"7���"���" ���������"
������TT\�����"�
���T���\�����"� ���8����]����"� ���8��������"� ���8����8����"� ���8���������"� ���8���8�����"����"����=���=���=���=���=��7"7��7"7��7"7���"���" ������������"
���������������
���T��8���n�����������8����������������8���8�8������������8�����8������ ���8�����8����"� ���8��������"��������"����=���=���=���=���=��7"7��7"7��7"7���"���" ������������"
�������~�����"�
���T���������"� ���8��8���8����"� ���8����T����"� ���8���Զ�8����"� ���8��8��������"� ���8���T����"���������"����=���=���=���=���=��77�l���77�l���77�l��������" ����������"
��nTn��������"����"����"����"����"����"� ��������������"�
�������S`7����"� ���`����������"� �������`�����"� �������������"� �������������"� ������������"� ������������"����"����=���=���=���=���=���"����"����"����"����"� ��������������"�
��������8|������� ���`�����}����������������S����������������S|�������������������������� ��������������"� �������������"���������"����=���=���=���=���=���"����"����"����"����"� ��������������"�
��������8p�����"� ���`�����������"� ��������������"� ������8_������"� ��������ƍ�����"� �������������"� ������������"���������"����=���=���=���=���=�����������������������������"�
���������������"� ���|Sp��|�����"���^"^��^"^��^"^���"����"� ���������"�
���8���8T\�����"� ���T�����T����"� ��T���������"� ��T�����~����"� ��T���������"� ��T��������"� ��\����n����"����"����=���=���=���=���=��^"^��^"^��^"^���"����"� ���������"�
���8���\\T\������ ���T���8�������������T���~~T����������T����������������T������n������� ��T���8��8�����"� ��\���nn����"������"����=���=���=���=���=��^"^��^"^��^"^���"����"� ���������"�
���8���T\T�����"� ���T������8�����"� ��T��ņ��8�����"� ��T����\�����"� ��T����������"� ��T���T������"� ��\���T�����"���������"����=���=���=���=���=��^^�����^^�����^^�����������"�
�����������"� ������~TT~����"��7�v�;�7�v�;�7�v�;��
����/� ���/� ���/������/�����9�����9�����9�� �,�����+�����+��m�7���.�7���.�7���.�������(����(����(����������+�����+�����+��m�7���7�7���7�7���7�����7���0� ����/� ����/� ����/�������(�����(�����(�����?���0�����;�����;�����;��
����/� ����/� ����/������/�����9�����9�����9�� �,�����+�����+��m�����.�����.�����.�������(�����(�����(����������+�����+�����+��m�����7�����7�����7�����7����0� ����/� ����/� ����/�������(�����(�����(�����?����0�^���;�^���;�^���;��
����/� ����/� ����/������/�����9�����9�����9�� �,�����+�����+��m�^���.�^���.�^���.�������(�����(�����(����������+�����+�����+��m�^���7�^���7�^���7�����7����0� ����/� ����/� ����/�������(�����(�����(�����?����0��
@�����*����*����*�������<��;����;����;�����
@�����*�����*�����*�������<��;�����;�����;�����
@�����*�����*�����*�������<��;�����;�����;������������������������������������������������������ �����n�T���8����"�
���������8����"� ������������"�
������T���8����"� �������\���n����"� �����������"��������"����=���=���=���=���=��7"7��7"7��7"7���"���" ������"
��nTn���T�����"� �����n��T�����"�
��������T�����"� �������T�����"�
�������T�����"� ���������T�����"� �������\�����"����"����=���=���=���=���=��7"7��7"7��7"7���"���" ����������"
��nTn��������"� �����n��������"�
����������8����"� �������n�����"�
������������"� �������T��������"� �����8�T����"����"����=���=���=���=���=��7"7��7"7 ���������������"� ��������ƍ����"� �����7���|����"� ���_�����������"� ���R������`�����"� ������p����"���������"����=���=���=���=���=���"����"����"����"����"�
�������������"� ���|Sp��������"� �������8�����"� �������������"� ������������"� ���_����������"� ���R�����������"� ������������"����"����=���=���=���=���=���"����"����"����"����"�
���������������"� ���|Sp��������"� ����������p����"� ���������`�����"� �������S�����"� ���_���������"� ���R������������"� �����������"����"����=���=���=���=���=���"����"� �������������"� ������8����������"�
���n鞦��������"� ������ԗ��T�����"� ��T������������"� ��8�T�������"���������"����=���=���=���=���=��^"^��^"^��^"^���"����"�
�������������"� ��������8����"� �������\����"� ������8���T����"�
���n����T����"� ��������T����"� ��T�������T����"� ��8�T���T����"����"����=���=���=���=���=��^"^��^"^��^"^���"����"�
�����������"� ������nTn�����"� ��������n�����"� ������8���������"�
���n���������"� �������������"� ��T������������"� ��8�T�������"����"����=���=���=���=���=��^"^��^"^ � ����/� ����/� ����/��0���?�@� 7���/� 7���/� 7���/� ����/�� �2� ����1� ����1� ����1� �2���?�@��V�=��V�=��V�=����=���*�����)�����)�����)��*���?�@����=����=� ����/� ����/� ����/��0���?�@� ����/� ����/� ����/� ����/��� �2� ����1� ����1� ����1� �2���?�@����=����=����=����=����*�����)�����)�����)��*���?�@����=����=� ����/� ����/� ����/��0���?�@� ^���/� ^���/� ^���/� ����/��� �2� ����1� ����1� ����1� �2���?�@��u�=��u�=��u�=����=����*�����)�����)�����)��*���?�@����=����=� �������*�����*�����*��,�?��?���?���?��?��?���?���?������+�����*�����*��,�?���?���?���?��?���?���?���?���������*�����*�����*��,�?���?���?���?��?���?���?���?��� ���&��%����%����%����������#�����#�����#��%�?��?���?���?�����&��%�����%�����%����������#�����#�����#��%�?���?���?���?�����&��%�����%�����%����������#�����#�����#��%�?���?���?���?��� ���2����
�2���
�2���
�2����������.�����.�����.���������2����
�2����
�2����
�2����������.�����.�����.���������2����
�2����
�2����
�2����������.�����.�����.������� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � ����}x><
const queue = d3_queue.queue();
queue
.defer(d3.json, 'data.json')
.await(render);
function render(error, data) {
const seriesKeys = Object.keys(data[0]).slice(0, Object.keys(data[0]).length - 1);
console.log('Object.keys(data[0])', Object.keys(data[0]));
console.log('seriesKeys', seriesKeys);
const stackedData = d3.stack()
.keys(seriesKeys)(data);
const xMaxGrouped = d3.max(data, d => d3.max(Object.values(d)));
const xMaxStacked = d3.max(data, d => d3.sum(Object.values(d)));
const n = Object.keys(data[0]).length; // the number of series
const m = d3.range(data.length);
console.log('stackedData', stackedData);
console.log('xMaxGrouped', xMaxGrouped);
console.log('xMaxStacked', xMaxStacked);
console.log('n, the number of series', n);
console.log('m, the number of values per series', m);
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(m)
.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(stackedData)
.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());
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment