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/76a970616923968b4d7cf9a5ab07cb5e to your computer and use it in GitHub Desktop.
Save curran/76a970616923968b4d7cf9a5ab07cb5e to your computer and use it in GitHub Desktop.
Render Function Concept
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){
selection.selectAll('text').data(data)
.text(textValue)
.enter().append('text')
.style('font-size', '32pt')
.style('font-family', 'Sans-Serif')
.attr('x', 250)
.attr('y', (d, i) => 50 + verticalSpacing * i)
.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);
</script>
</body>
</html>
�PNG

IHDR��X���IDATx���w�mY]��o� :�CF�Fr0"�#Ȁd1�FGq�ra`FT� �
�
"� �� � "� �Ml��?vռS�ݪ��{Uݟ�Zgq�9���>��z�_�T{٣�+�u�r[.q.s����v0!<P]cA����<k�XϚՓ`\�H��T�s�mmO���q�� b�.� ���Ӫ�U/��W}�:sr�}է�7VO�n��g|}���˪�T_�ίή���aXu��`�[��� ���N���WO��-��߆@W�r#]�]lt���������/^2��_��݅��7�K�_�øWh��o'=��)>�zi������&� ש���<�&+u��\�^�����I�@����]=��u���+���A���э�q��V�ݤ�x>fr���VΝ39���-���F�}��3�Xݱ:��V��ՏUo�����6\�M{�?]�uR���}�$����
չ�����N�� ��;�W��<�)�:ol�?ZS���/W�.�Z��``#'V5)?x�q�[�v����vҨ}���I��cI�2>^�{v�'g��U��?ߘ��� �h��}�,��l��"6r��/&�U߲�8j�6V���@/�����������6c]sV���R�ߕϟh��<�9�M��W�I'��4�TO��Ŷ� ;6rB��F�w��s?Z�a 1��0)�E�&�{ѽC�W}��ScX�v\4+����������-� 󀿦��Ҳ�څ��yz���_�����ʻ�类�����X{}��o����#�i$��Ȁ��ߵ�j�^�/W�m���z��^mV��֛��I���_��|Ju�-�����o���Nݽ��yϫËϭ�R��㾺���ztu��� �V��/l�N�8``3�4��N�������ś�ps/�j�����{5VSީ/UO��O[�����v!�v�T=������ý.�� hl�S�'w��ō��7���=gwpn�f�Xo�e�ڭm�N��6�~Qc���t�굳v�.h,�� ڷNh|��Z�R�n���v�%���^|Rck���D�i����{->��������m��=�wh"<=�]�Vu��6�z�wm�V?�QA���z p�ᱫ�?�� ��87�\�k �g�~a���-�j̭�b'��_�������T?�^_�Rj��6�k߳A�3'��<����3g矴�;'Tw�~���'���em}��z������J;{��e����k/X'�eZ;���g��J��s���.���I[~�zSc.�<a�d��}Y��n���釫���ߡ��gW߶ ��/l�?br��\1y�N�:_�N�]� �#[�LϽ�����P_����3�m�[����S����~�:}�q�$ �[��꼕�'V�[Pg����n,����Fcܩ�V?sڲ�OU�^ݬ�{cu���B���1�s�V��ø{�تs�M��=�O��9)?�h{V��{k����'T�>����Y���B�]v)���M����^{�}O l�3&�oY�bR���V?U�^��j�6<��mk{}OX9�az��6���77�U��a[V]�زjձ�f�K 0����;v�'�0��G�y�{��j�c~Zc���ӫ����Ә���F{�b�3�<M�/S]����w���Ϟ������m``;�vh�����;���ŭ� �^�����+W��_��ޮoo�����im��q���ӓϯk�~g��Ս�{��g��:�=N l�5�話:�-�{M��]k��u�����w���������T'm#��[;7� ��o�ս���
>��-��/H����x��I����'彺��F^�HNW����x�m����F��W/����w�~gR�j�g���V��Ֆ�}���,���C�.$��NL�߭����Q��oήx\��I�fՓw!��{���꽍���H@���i�74�b�������|f��I�������M�^ϝ;t���6��ᱍ9���6�{\��Y��S6yƓf���a}��5Թά�z�5��Qbx�F?���!����q�s��:�o]}yV������7j��ͫ�^� ����"]��V�_��$�f�ܳ�����i,�S׮^ܡ��2ǿW��$�ݪ/n3�Z�\" ��|5�4V"��^�ڡ�W��������������U_h�Q�7Vu~{�{�=�3�n�%խ���B�.�����y?-\�#[��1gv��[��~�����f�=~����Qm�}��E��|E#��|ua�7��՟7˺�.< ��� 0�@p�p��nk|�zU����~�o��:�m8�.s�G��K��vp��n�=�/q)u|u���۫�Tt�7��:�zw���ձ[|�1�]�߯�Q}z�_�>T�����Z;{��O�?ݧ�p[�]�[}ےϸC��%�^T�Auʎ� �0��?�����W'�/ܠ��n�GVo���wV_�+o �C��{�3���B���B u���I���o����-�ׯ\{h���{���n�r����ͪ�,x�}�ߘ�����k�OU'U7�~�1�z�MW�r�-��a6����6������iv}�m�N������3�?���N��~u�m�_#��s�-��!�?Ni����.���>��V�\�j�����������BX����}�d�#�6H�^r��'Iև ٗ� ?���I��6���%��H��\}�:��*�k���N�ԝ'~7�$�UW������g�#�:�zU��խ�h粮��d�u[�����5Vq~ck��Z;���W��f�9+�j�m8�V�]I�F *�ט�Zu�ٵ�m����<�m��7����ٵ3։}l���.6���7��6�>�q�Y�Eب��k��~���5����׎8qֶ�,y�s4�;�v����ӍU�?>;��F�<=�� ⟹ �ō����[�z�+��=����^'��։��FO�;t>�F�Z����[;�/��,>\����}�|6�R�t|��&�[&͇
ߴz����;8w���:��С��TךԹL# �����^���E=���Ф�~�J]c��{Wo���:mފ�"X��Ϯ����v=�>`)G:��ξ��W��&���~p�����{��O�ްN�E��/�\?����k�������P���yq���9�u��'���}G��K9� �Gf��l����b�{u%�ם�9�17u#ש�]Q����7lw����VO�`��O�������e>� ���'�}oc�4��2O�w�x�:Ϻ���l�|��z ��gu~m��OYQ<M�ߵd��呍�7�Ϊ��zpu��Ԏ���G����Y;r$���=~�6W�=�wQ<��{�%�ߢC�aQ��Y��=��ꍭ��j�����j��Ļl�g{����K�vݑL�� Y=` �\]k��5�:�ZPg�c����]�?tV����^��u���;t�����w��yW�����;� �������zZ�����:�� @}t 1����M�L�hl�����n�I�g6�c�u�|��!+�'�W���XY�Hz������U/n Q�]��vՍm���"][u��כ����ۈp��E��?{�m�p�#ۼ�����n�m/n��+;�Vua��~�1��[l�N-Z���vM� �5��>��{|q��;n5�a�[���r��y[��K[�����Ư���#���V�Z��uC��Y�Uu�۳��\�Ic���^�'�|��1�!�/�.�r���<���;��]`�h:V>~ �^~�*k�o%����S�Tu�FO��sb/XP�n���w:�v��o���ɹ�,q�)�$���p�!��Z��n6`7I���i>,��-�{���{�w#�"��4zGo�X�n�sZ� }�F/�V�y=�ݼʺ�R�ݤ|��*��������ׯh$����vv`�h:gV^o��"7�b�c�۲n���9�zic��6�Zu��Ƿ�֍��on�����q�=�����p�F��-&�^ݹCK�=G M��O_��4����7���dݭ�`cѨ�s��f��Uo$��7�ڮ�N>�Gc!��S��W�09���� ��y`�hzϬ|�%�sc�����%��HD�M�k̕�Ĥ|���?�du�êl#��wO�oXP��bYӞ�G5V�ط��6H'�v ����0�c�7u�6C��A��Y��/ѦkT�_ޮ�wp���wp1����w~��-�6~�C��Z� Ҫ3���b|߂������v�f�=�H&�5z����M�?y��<I]�[�5��� b_�1�uQ�y�S��ޤݫ~rv�×�o��=��xV�HdO��4��յ+=?����޿_����E�������e{,�K��V�����X�x7|���8u������y�/U���aufu��s��O�\���� ��S�oO�4���In������f���~dr�UWڿ�r+�r�ɹ�5�zmkW�>v�=�HBW�O���N��rcn�-w�F"�=������\xP��ڎv�;8��=��y<k�g��u��zk��ɹ�����]�\��� b_P��z[c.�����믴u��o��� ��է �gV�<�snu�uڼU��~����V��5� p܂�WZy���� �8j�F\c^酛���ƞ��|\c���Z�}o��*��$�5zp_������7n�����F� ���4���^�H����ehu���{H��}�h%�5� ?�zg�W��F�����)���ž��v����7znϫ>V������m}�,��n�����j,Fun������+���ƢTG�F�`mF ��Lk�������r���`' 0�%��<���ڳ�gc��5����� ������S�h�d�;&��Z�g��Wn��}��O�n2)�m�{���U�c��?͆\������a��^�[�vx�+7����+�ί��D�������`shm�����6�Jc���=?�A�g���Yc_��ܨ��j� �A���Hz�I�����'�.Wݫ��Y�7��t��U_�������T=���ūǓw�r0u��"V���9�1����>^}�����=�/Z�����_U�� ����kZ~OٗWW�B��R}h���U����嘣�����[}Su�Ɯ� C�?X��za��m�>��Gu���ի+T_��i �~u��F�0�n�Y�^���jSIEND�B`�
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment