Skip to content

Instantly share code, notes, and snippets.

@curran
Last active February 16, 2018 07:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save curran/8e7835801fc37eb3635a3e022df8cc0e to your computer and use it in GitHub Desktop.
Save curran/8e7835801fc37eb3635a3e022df8cc0e to your computer and use it in GitHub Desktop.
General Update Pattern with Text
license: mit
<!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>
�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�פ��&2n pR��v��m��kB pR��=����-���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]�An���ɠ`"�$��$���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��U׽s@�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���9޴8�Ó|��{~��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�6I 4����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��V 8~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