Last active
February 16, 2018 07:49
General Update Pattern with Text
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>Shopping App Prototype</title> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
</head> | |
<body> | |
<svg width="500" height="960"></svg> | |
<script> | |
const textValue = d => `${d.name} $${d.price}` | |
const verticalSpacing = 45; | |
function render(selection, data){ | |
const text = selection | |
.selectAll('text').data(data) | |
text | |
.exit() | |
.remove(); | |
text | |
.enter().append('text') | |
.style('font-size', '32pt') | |
.style('font-family', 'Sans-Serif') | |
.attr('x', 250) | |
.attr('y', (d, i) => 50 + verticalSpacing * i) | |
.merge(text) | |
.text(textValue); | |
} | |
const svg = d3.select('svg'); | |
render(svg, [ { name: 'Milk', price: 3 } ]); | |
setTimeout(() => { | |
render(svg, [ { name: 'Milk', price: 3 }, { name: 'Eggs', price: 20 } ]); | |
}, 1000); | |
setTimeout(() => { | |
render(svg, [ { name: 'Milk', price: 3 }, { name: 'Eggs', price: 2 } ]); | |
}, 2000); | |
setTimeout(() => { | |
render(svg, [ | |
{ name: 'Milk', price: 3 }, | |
{ name: 'Eggs', price: 2 }, | |
{ name: 'Cupcakes', price: 5 } | |
]); | |
}, 3000); | |
setTimeout(() => { | |
render(svg, [ { name: 'Milk', price: 3 }, { name: 'Eggs', price: 2 } ]); | |
}, 4000); | |
</script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
�PNG | |
IHDR��X�� IDATx���w�%e}?��.�����JQ�"�+��{�ػ�b4�01jbWBШ���&vQcPA��bAQzw�mw����9';繧̹�]��~��ř�g���ܻ�~�����!I�:���.�9��C�U �T�m���[U�����I0�2`� | |
`������N%�4ɺ�{�>���l0��4[$yi�/$�}�����q��I.O�$�'���q�$����$�'�>ɲ$W$93����I6�����%�SI�0��{P��$kl[�)��u�^7�[R��~�b�v|�w��1�]�l��$oN��,<�cP�� �n��I�$-�kR�$�7���LrKcŀr�'�a�=v�7��J��NK?�jIh`���HiY���'ٸ��� ��ޚ�����=%�|[��.I��[�8~�$ǥk��R�V��@�G'�1�vI���I~^]����i��˓����qOj�i~^[Z�7IrC���$�M��A�K���>��=���,ÿ�X���57&ټ�c�9�ì�����0�I���"�O&��j�$5�ߞ�ԶqQ��T�^U�o��%��kR�m_6$�T���S�8�nY/�5�f�$_n��+Ƀf�)��Irb�w�n��\zMu�?$�z���Z��%�/��o��%)397[��U]̓�s��vM�t�n�y̺�Lv�$��)��=:�^���1b,J����3=\=%�Kq�EI��-|&n���� Ƴ�ܔ���/��2�v)�(�u�,� `��e�$���fz����$�w>�ډ��/���$�f�ߑKS��s'�ya����87�[uoLrVJ+�7��=F�;W��_5�՟e�$�i�o��c\����若�.Pvu�Kʸ�n�����w�=)%I�zk��&�9�I��������m�eQJw�����v��N���F���6I��҅8I�%yr�lʓ�>���[t�'�V�&6Jrt�{7�����6���T��=Ii��[�2��(/i\sEV�-=��Ǡe��L�5[� m�䗍]<�6H��SI��L��!�� KR�დ�c�/��L�$�eP�Q��:���h����[��������� }���0�%|e�'���$J�Č7溟�G���I^����̠8)�c������i�*��s�[|tu��C�k��7el�u��N��C�Rf�U28>'���XK K��_�{�8�j��yunuJ��U?t�3ͅ%I�K��$L�D�������$Lr��`�2,N��4�}a@���_�������:vtv��Cu�h�SR�"� �)-�m�?ɾ)K9='�����W$y�,<�aT��ƹ��j���4�ܘd�����6eɟ�of�I��-�wL�$W����f�1��%9��{u�'��Z2� 0�c�����~����i���_)�g�n�-e ܦ��~�2�eIޟd���E|�$��0��IN�Ʊ͓�o¸�% 00��I��د��<ɓ�G�y�f���ߩInjO���uF�8�_,$����=I.l�?)�[��x``&>���w������O��)��R3p\�����wI���st� G��)�p�N֥kyʒU]뤴0ܦH����~�ڱ]�o|~^��Sƕ��ޙ�Y)㘏H�ݵc���⽞�2��) ���Z���L�'�:e������_Q�o9~�Vo``&��۵�i��n�U���� �V���_�2su�A�{���%�=�l��w]^7�K ]������§%�^��ƌ]/�t�صX�I����t�=I��y�$On����+]�]���Y�LI��Iv����U��H���<;�csOn|�EU�)c�]�����1�X#H����(�w��N����:��0?NIN�6JY�x�2Mm���*۵[��l3F���|��s�/6���[<'�s���No������p� &��F|`V�"�%���:��INj���Y��Ҕ5v��䬔����6�-��3�+��I���5�ߕ���Rf�n^���ZOx��e�x�#F\p����1��m�!e�MriU~*��#�qhU~P�1U�m���[Ufи㣪r�û�$����t)�}��d�Ȁ��KrcU��$���:���w��&�f�اg�I���$�I�LO��q��'e<s��ҔI�&�}��f�;k��)��G�?0�u3�N��c��]��Iճ)�"e&�5�W��5x�$�Ki���yI��ҽ�m)ݛ�Mrmz��Z�2��|4����K#�#�}�|w�:-O��5�פ��&2npR��v��m��kBpR��=����-���C2^�F�+��yBJ�}M�)��g'�ϔɲ�8���f;�Ah� | |
�,t�qA���0e�_�$J2��^��uXP��0$���ޞU]fgs��|>�Zj�$OH��$�Jre��Y�3X�di�3���I������?��&��{\���$�L��$�M�(sO�fzj��2���$iy�����e�[�|"�f?���y�!���͍�+��y��{�d���NKr�YyJ� ���V{G&��,Ĺfb0ݣ����k����$�&�+�O;�^��I���Iv�_?�1I�Lr~�{<=ɿU����cI~��$%�#�sR�Vw�ѩˁc?��[�߲��a����������e��O����?�'�f) n��$Y2�N�$��k6�3� �c��vK>�O�a�o������3}��+���pB�DX�|���nA�w�AV'[&yUJ�u^JBv}�l�Hr�F�{�7�z]��;�$�?OrI�e)�"�(��l�(['~�{�N����$W�̎|c������I�ע�m�%���OƼ�����I���g�}�Iow�$yG����j��c� `�-T�)I� �nIǚ$�T�^:$����yn��$�\�����b����lj���$w�>ڸG�ߗ�Z����Iv��V�w'�J�8�3�~�������:�y� ��һ^mw�<eዪ$��c��]}b�L���)����7%�7�ŹY~����Ҕ���3}<�TJ��Z��a6No��)3*�+���y9��he��-ӛ�N�,�Tw�#�7:�eUW��vЀ��ez���$�5�,NI��9��$�����b��LOjJoW�̐��$�T�0���hN�5������J����u�<����N���ٟd��ɪ$�y��(�������4����k��J���$;����j^�2�w�>����$�O#�,\|XU����Z�����~�&�Z7eR��U�_�CU�┱���-� }��K��n�?yD�f���|7�Y��N��L��T��SZ��;�1�u����2V`�R'����s�������e�ǃ��Te��2��}��K�����-cϕ�Sf��s�8�g��0��sT��R~���}��^����U�w���I������x�2�^�����2���.)K-]��?�[��0ɳ2{K�m�Ҳݼ�?�Rl�Y7� p=���ƨgwB�a ���2��)�Ϣ$WW��K�_R��5�'3�k��Խ��)��@���H�� �e���O`V�]�X{�� c\8�x=�c��u�Ǐ(ӌ?���RS)�#=lD�#S�c��_��ŝ�$?�l�O�Yz>�������o�|5���>)��]�J��3R&��n��;5�}8�kg`���$X�U������-��6��0fݾ��-�I���CIVdx+�9)c�����7�F)�5�Q���$ێ���{�2�&�5���q_3�a���^?f�qb�����^���~$�e���%��$_O����M7&�\�Z�͵�7M�V�E)]ؿ�d�αR�A���T`vI������_o�k7]�'�8���o:3ɫ�l�Ғ�֔1����=0e��I��NjYʌ�W6�����R����$�I����$_�� | |
�& 0���n��q�cƯ[�g#~?SI~��:�O��P&�lz[��Li���`t��nJ�ߍ����*e�����R���NP�9'��j�8�~�3�:)�[[��Qv��|3e��]S&���6�+f�~)c��2v��Ա���d���Ҫ�W��Ǔ<.��� 0��Ω�wly���s�$whYvN�4j�ql�ƺs�פ$��Lj5S;4>�%e"���I��䞍c�$yy�`�= 0��ά��iy��R���U��,��D�mb�����4�7�ڦ�IIV�^�d���9�_5�O�SfQ�dY͖�CRf�Xc��2H�w ��2��:IN��e��-���̯Z�i�$��_���Y��ү�j2�Q�K�3��u��CU�2})�~� u��*�����MU�wNPg���|&�IiYl��3#��)W'���u�\\�{����q��N�_]��zw����5-��g���f�I������1�s�L�}�L�Orsu����cǔ٢�e����5T�`���$ok��2��l�4�űi�$�I��G�&��$�5���]I������i�V������I����<��>���&%��/%��3�O��1�s�mө׆�gٮq�����~�����<�S��nyy�&�@j딱�{O#)��cS&�j�|z�\xA��k&��U�`��-���5���2��yINMr~�ح)��/���kNJ+� }b/O��$�LK�=~E�{t�:�8I��>�W&�,%ỲS�� I=����8��S�Y�gru����{�γ��Ͽ_�j�� pRƕ�q�e)k�&��L4����UV�r�&NJ�O�|?Mr�!���ۧ�0!�uziJ�߽����V��$�tH�mG<�X�-T��n%9-�UvyJ���$'٬Q��U짶x�ǥ�1>;����$&�J�g�wl�g�����)��'�LFuCJ�� I.�<�R&��O�&�E�x}z��G�r��U��u^L�ܦ��XSm_�_9��N�>�lMm�n{6M�|�7i�l>����$g�(�u�8��Z��"���_��fuua��|��BV`m��)cd��t������{���=>�U�r˒ܱE�7T��6�8����&�g&�jH��Rfkn^��!召�~1e]�An���ɠ`"�$��$���x�F� �<9�者�d�p����T]sB������5Y�Z������i��I��-�sE�8��}�]���-�?;�����$+��?1ɒYx>�?;'�Qگ)��$ی�����2�-I>�/�mʢ��@�I���IvH�"�k��8ɗ��:���'yb�'$�;�]�l���$KS�W���)-�k���&~�BW�x�+��i.%Yn�$���]� | |
k�͒�d�${%�>ɖI����{m�sR��=!�w�\� 5��q�$�J�$�%�]���I��qc���5��Nr���ě��w��V�S��R�1?5�vc�'���W�t����R�ٕ��Ċ�?K�}��1�m��փ���?�k��p�+�H���.�����|^�� ��$Y@�� �F�dI����zyJ��S:���t��s�$9 ��7MrdJ�з�]�a�-JrL���~��Д?���ؔ�λ&�_��$yq�u:�<*�{��]�{lY�?=�Ǭ��c�����ުtN��R��a�K�$����9�/��<�G����{�ޒ;h�G&Yָvy�����۪{Bs蹙��~=Ɇc��*�O�87��?���������������ӧ��U�M'�5��2H�t�����[I���1c]�2kt���FI��Oٷ����oy��Us@�o7�\�8�nJ�ԯ�tY�9e��R��y>a� {&y��v�^��]�����F����2�҉)]\�OiE�K�3�|&�3RZ����$_J���rVu��I�=�/�\�� | |
��$g&�j��̞<��Sf_>&�o�\���vEJ��#R~�f��u����S���)����!�����"fR�9���&8�%�z�vb���_�ܻO��N���Qfy�ضIN����.��-�s�$_l��>���%ɏZ��<>�E�q[���2x"�$yH�3����I^�v��3�\�2�T��R�<� �kĽj@�a-�IY.i���k�{\1�0�қ<���g&F�c���sU�;�$Fu��k�?�Z��#�]�?���$�8��!1�Li-���5������$5���$�u�ݟgx���w�kw� �/RZ�9T������5ݟ�9)��o�s~Y�1�z����QNj���c#���_�d�y��\'����}���K��2�6��[$yEJ_�_�ǒLo��~��d���u�<0�W�r��ߵ8�o��?Jy7K�%�OJ7�f�KR� | |
�6~fz��93��|��Ior�<%qܮ*�qJ�z��A?�;�|a�-wc���98�Ó|��{~��X�QO���$�We&M��?�S��_�d�X�&���������s�U��JG{�!�w����'(���1ޒyLU��}�P�9=��E��<����&�7�-��gxk�zU�e���N�5����R�K�=gD�$ySuͳZ\3̢����$/Ϫ�ͤ ������{H���ӻ��_���5ޭ�|"����<�{!৶���5_�SfIJKr�;�dd��ɍ��ܔ2AX��{��E}^]��!eG%������$�q�V�w�:'e���u�S���l39٢$?N�8����&�s��A�.�}�����.?N��}��o�2�KfxOX�|5���~�<�{��s�n����wi�O�T'ojY��RZ�NN�qz�>e��D�w;�Z�U-�SI~=��x���6�}[ܿ9~uYƛݹ9&��LϟI�{n�>���S��a 銔.����{�f���F�l������Z=������:F�Ψ�ݾ:_O���1bυ�Y� )7(�<��oN�_��n�)۽��1�]�2}���?W�?<f�ٶ(ey����^�viJrZ��n�z��'����2vz�������q]�����p����#�A�x��N������zv���{.4�c_8�\�xI��]�V̶ �������/��Fu���>���S֚^���y����=\O�Vo��$���pߣ*{UFw��(��g�1�'V���$�����-��c��U�����DZu��p�$OL� | |
�KJ�M3��ߢ�/ | |
���/K������f�O� �����>eL�{���lק���0%)�UJ���rM�%_N�!�ؔ���u>��(�$eB����~S��9)��n�l�ܘ䠔��t�m����Y�� 0д��_�1�s�~�an��륅6Q~�t�~Q澕����2>��@���f��n������t�>4��m���giʲP�O�<5A=f�$��|�-e������MJ�w���rw}�q-OrHJ����H��G� 9�������R���l���RD����$f6l��g)K5��)�OLYS��j�y��k�7�9�Δ������L�I��IvJ�6�2�K�e�~��Һ��H��e��_��"��g�?Lo�K,�=;��O��{���~3.���W�ϯ��VK�ת�KS�QI�L��.5������A�_]�v �I�=���k)���=ӭ)k�·Q��}z���Y���V�w^�.Z���U�{g�Dq�6K�D���8-c���u�k���;�[J֮k�<$��Rƻ���2����u���I>����=L��yNY7��)��M�"�l ]�2��^�t�z��8�1�;MR��-��L�6I4����Mע��h6�1�/S�n�wOۿ�f�}��c��K�A���j�n�Wg�'W�NY'w� 2�ڻ]��$��u�_���zF���a���L�ں5���S�c����;�:1��䒔ɮf�>I2]۪ڟ�xb�͒�ë���<N�^IޑҢ��$������l�&3���ew���X���ڿ_˸��� Pi | |
�IDAT�w�f�q�V����>����&�fc�ڔ �V4��������h|�,l��)ݲ��8��cu��zR�;�,�U'�m�P�_���A���#�8f�M��c�/)�(`�vlz��Y'��2�5E�LY | |
��U���&JI�1�iۖ��M��]$IiMm&}$��*S'���}p�$N�m�ƹ-��u��A^ݲ\?K�����I���_N�H����V�]Ri��R��a6K��1oMrrc����}�5>��26|&^Y�w�(��INH�*=NO�g���daf��5ʣSƃ6'�97ɮcƹ[���8���J�W��"��3}����`�L��㿫��7vq���ػ���8���ܜ��#2�DIO���1l���$X�&lZ��2�tT��Ǖ��wwj�/���)�jT����F}��ڦ)]�����L�>h�ř>�[�{���������2}2�'���z���d�$���I�6L������s�>����6��u��꺶 �T�_�$5��5�i�({pU�������g����'��O����ν����ɨ�$�I��\Q��ʮ�2v�Y��#�(e�q�+����o��l�{���۽�Z\3��zL�<�!)�Em�U���� | |
�w�ԧU��.�{f��O�d�$rwJiEn^��� �R��~K�,K���$/J��������_��N��-����¼]��uʼ���m���OK�ؔ.�]��<.%����A�M��y)K&�)�}n���|�*wM�w��&eb�f����m�=�հ�4�u�c���~@��&�I��yu�$S�<<��q���)cɛIْ��~X��(�'��RU��$�M�u��ۧL���]\٩ۤ^���7�vK�����}��<�w}�$wNy��L���Ͳץ�����Low;9������bqkJW���JI��$��:�#�]F�KI�~ӹW]�2���6I��V8~S�G ���>�O�M������\W)�2�)�s����'���''Yo@��|Qү�L�t�n�Jii���<G��xU�.p���� K�]�ɟ��d�rL�|�4��W�$��m��%����v;3%��+��3�����F�fryX��t��e�{��dǖ��*퓗�2<Z'�DŽ�ۮKi ��$�ǃv�5ʍ�����ú7�vﷻ}+��(�"�g3^�I����Ƶ(�E��$'������vK?)���������|ж2�{�l,��tE~z��<�����RЫS�B~;e��Lp��Rf�=%��yyJ"�ɡ��k�*8b@�:�.3�N����v�_��Ɣɺ������Z�;�K���$`��tU�C��Sƒ��b����������a�dQ����1e�ڥ���t!n�i<n��ev�I�ʔ.�,J�N�������wqC�N?Li�ߣ���vL�攮�g��,O� ��.ßHy�m� | |
ϦA�`���)�}:��)?�kS��}/�e[�g��� ��2��l&��,�0k��t�;&e����"@/ 0̮c�@�@�V��V��V��V����ʿ_{�_�(IEND�B`� |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment