Skip to content

Instantly share code, notes, and snippets.

@tgsuarez
Created September 30, 2017 18:20
Show Gist options
  • Save tgsuarez/7bed2ca68bb21e7256bb7484b9293a76 to your computer and use it in GitHub Desktop.
Save tgsuarez/7bed2ca68bb21e7256bb7484b9293a76 to your computer and use it in GitHub Desktop.
Data join with array of objects
license: gpl-3.0
height: 170
border: no
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Data join with array of objects</title>
</head>
<style>
circle {
fill: #ddd;
}
</style>
<body>
<svg width="760" height="140">
<g transform="translate(70, 70)">
<circle />
<circle />
<circle />
<circle />
<circle />
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var cities = [
{ name: 'London', population: 8674000},
{ name: 'New York', population: 8406000},
{ name: 'Sydney', population: 4293000},
{ name: 'Paris', population: 2244000},
{ name: 'Beijing', population: 11510000}
];
var s = d3.selectAll('circle');
s.data(cities);
s.attr('r', function(d) {
var scaleFactor = 0.000005;
return d.population * scaleFactor;
})
.attr('cx', function(d, i) {
return i * 120;
});
</script>
</body>
</html>
�PNG

IHDR��T�bY IDATx���m�\Wy/�g�9�,aWX�R���g�+`�TR����"U�����-���~����*�Z��@�n�Jqy �("$A8��W
�0D>�g|\U�\!��HֱϬ���m�I��3s��3��G'���g����k�@ۥ�5���s>�s�����SJ{#�'"bW�yGDDJ�|D�����9�N)}7��)��n�����h6(b8>'"��s�*"�WD�ӷx��F�#�͔҃��^���� ��P��mQ�����u)�k"�E�w�n}:"��s�/�toUUǷ�4� ������N��ꈸ!"�[:��7"�3����+++�J�`�(��T圗F��#��s�/,��ɤ���v�I)m���l)��T�u�?"~7"�۷�yZNGć"�UU�,��P��-9~�xoii�����;>����C� K`�`ಌF��nll�IJ�����B��=KKK��J�C6m8�5�|[�o��f�N)�����_:[��l4=?��M?�j�RJ�������~�t.� \���o��[K�(�֪�n+�ˣO���C�����t���/"�RU���A�xB���u)�GĞ�Y�L��M�~����p�:��T��-)�O���x���>1�@Kx|ǎ۹gϞ�^__ߗRڛs�;'y=�t6�|z�Ν�Μ9��^/����뿍�7������7K������F�����G��"�9�8��ˬEķ"⡈�z����n�{j�I���s ;#"���zJ)����F�Ѯ�x��xE�,-sW��yu��=W:Ol� �`0����+s�ץ����=r�����9�����,���[[[;���~U��yVJ��s>�"�i���ߋ�S)����`<k�Ν8p��vg���~x��ݻ?�h�8�����gϞ���+�<]: �o! �ɓ'���Ͽ!"^+�|�Ո���;>���z�p�^�9�,"�M)� "�N�ҧs�_���)����Z��u�ݤ�ޕs���Y�,��ogϞ}� �L U����;��[rί)�%""�t�x<�`���R�,��ĉϸp�)��D���t�r�w.//9x��w��[6�v����w:RJ������y�����/+�� ܝs~�"�u���9�"���Q������z_)����\x�w�ꕥC���<y��p��m9��e蒤��,//�bk���u}m��RJח��X9�{RJYU���Y�Ӟg��� 3�x8�#"n�9��[�)�qD�����]:K�����ظ�)�ڟHJ�Υ����4������1�n����!���+�'N�x�����#���Y������[<���A����[#��96鶪��a(n0�.���9A��W���'K�`�
�`0xCJ鎈�U:˔��9����?Z:H��F������;�j��t:o�v�_+XLu]���{JgYg"�g��:^:��k���'S��;SJ�S~#"v������w�����m�������q�x<��`0x[� ���`(��iO�p�6x8~,"n.�c�n��Z]��Rzo�ӒRzo]�]:�X&��^S:��f2{
j��cǎ�ܵk�g���7���ϝ;w��Ç�K�N�<�Ȟ���O5��i�9�s�…�^q�gJg��h4z�x<���9Y����n����9Uk�O���cq�oD��v����cǎ�,d��8q�;v��⼖߈����;v���'�Q: 0�r�Q:â�e��O�������q���>�N�8񌍍��G����TWoll|^ fe8�5����9]������s,�Vn���9�X:GI)�#�^��J瘕Gydώ;��Q~���Ͽ�vh`�F��S���0"���BDD��t:�n����AM��u��E/�9���t����O��߈��'�w�������P~�d�dM�f�z<���ߕ��$9�ߘ��ONF��t���wJ�����㽥���t������СC��9Ik��8q�)�;J�h���'N�xf��2�6߈��|'����������6ۯ5O���b,�W��hUU/)b�F��ώ�c��x�N���n����9�v��zD�����:PU���!E+���w���d��̨�����Jgh3��wKࢬ�6j|>y�d�����Of�Ju]��y���\=� ��䜗"�ͥspQo��۠�[�}��ҵ��Hkkk�/\����9�lyy��8V:G[ ��+s����ɜ���و�ϔҠ��=\6!L�p8���K���RJo��z��t�E��< ^�R��t�6�9_����T:�f ��O�_S:G������z�-��-VWW���/G��)�_����G�s�����qeeʼn���p8�r����spq)��{�ދJ�X�.�u]>"^V:G��]U��K��Tu]__,��%^RU���!�luu��)��K)�j+��96��W+++_�V6�N����;���5-2�����b���5���`��P~/��&�k������f�Ć�ᕃ���:�ν[-�)�Wu:�{��? ��+���S��yu� l�5��-��N�-�3�U[f7_�R��t��H)]?_P:G� �w��F��q)�W� �?e��sC�l�5��,�'O���z�rίiÉ�9�Jgh3�Qu]I)�k��I)����#��LC]ׇ"⹥s�iϝ�3��|���7���vM��'�N�޼'�[h�N�z�`08�������`p�ԩSO��{¦圯+���c�f��8"^_:�h� /\���^&��8{��gSJ�l�}SJל={���}_،��`:���5��_����9���d���R���2-��&۞��!1�t���4��鴗�������+Kg�M�e]�+qu�-v�d� gr�vn{~"��`,�h8>'"����e�;YCf�q��/���Y�}�j�q������8��R����I�2�u�����7��S��J`ˬ!� -��X��h�x<��t�y�R�j4��v��Jg�1ז0���������񟥔J������"�J�Xdu]�""nL)�4���G=����{9�/Dđ���*�r���h�YC��j���x��3̛&�4��[�[�h3\]]}�,��U)�W�����t�E4y�{4">�l�}���^����h]׋�d�٥�e�`�U�ö�Yh�L�����Ӧa�d� !��{�3<�&g�Wu]�fD<�9 횈x`��γ+J`ˬ!� 5�;�a�5���u[��dQf���Z5���&O���9Ť���.�7�Z�G��S#��s�eO��%3д����P�f��t���e�)�_.��bڐqL�0o��>�o�q;t�yQ��;�`vS��;�3"��Lf�)�~� �b�fy}��� ��� �V#��t��Z�Nc
�={~�t�yդ�����,�,SJ�X:�Ŵ!c�MN{��;�s��s#�l�󜰖�Ә�����t�yհ�6)K���,'��m��'��7�g�Ɩ\����焵���`�������|���6���9�f�w���QJiꟛ��5 ����k 0#�)�9�ݥ3̫��6�"�)�s̑�Lf:�~�t�MhS�V��;�[�s~�p8��W v���XK�iL�vlsl�F�v04"�<���6�7��MY�f��C�ӻ�9��30�`v�T�`f�T��K�c��m��oD�y2�3M)�-��R�)kۤ����ko������k 0;�)���8;M�mJ)G�J�#?��t��g��Ц������RJߛ�uSJ���zkӾnA�J`j�%��4��O��0�6۩�!v���,SJ��.U���Q�� m�fa�U:Sc-f�1x�Ν�Jg�W �m�����ϲ��= ��듬�Α�\������-���Ә|�̙/�a^5i�)�y�nXԢ�2��ϥ3\L2�]UUwE�}S��}�k΍yz�y�YK��iL>|��zD,����d���s�MtJh���p ڐq���k5BJ�?Jg`:�%��4�O|�t�9Ԩ����F�i�E�e��Kg��6d�UU}="~k
���ɵ�ʢ�
Y�`v�V�*`5j�;w�|�t�y�(�\YY�sΟ-���?���R�α(�����Z ���5�N���~D�:�~ߝ�%3д<w?�o�F�����"��[wz2˅�s����H��ͫI��:6�N�}q�����x�t���P�
p������Mg�s�J� m�h3\YY�B�O���ۧtZ����WUumD�2">�x� ����#�UU];�۞�7K`ˬ!� -��X�n��`0x0�tU�,� ��`��m�r�FīJ�h���l�N��9�F�{��t��t�E79������px ���������=ʔ҃9��1؂��B��PJ�
pDDJ�ވP��`2��I)��-���&3\(�^���`��)�w���s�ê�|��A&�w�J�Y������P��@GD�?W:üh�,��Z��J�h�&3\8�~����sD�?L�@��z���9 mvz���H�
p�����X�?�O��d���s��t��Z��UUuc�y3�MU�����n,u�_.��f�f�qx��́F�pyy�H� mev�w�~U��s�o��ݍz~\��5�`�Y�w�����ڮ�3<x��w"b��e82��B۷o�������ۡ����_�o߾l�=aӚz�g�f��x���uJi��ynEJ�����ץs\LJ�����~�d;���>��l{���:�(��M��d���F����x���ڪ-���z_�9�S:G[����z ���K���ߝRz�,��s�lJ�9���>S:�f��Ac p���RD,ܧ^�����Z!����3��Y=�^��p�����x|�4�p�������~��K�^ϧ�h��x����k�=R�Of0�8��@�M�9_Ӧ1?�s~M�M�R���뽶t��X]]�RJ�ק�~1"v^�Y�9�sDܓs�Ǖ��ƿB3��s~a�\\J��^����9A� pD�p8�X�ٻw� �t����Z�����v�… �,��ɖ���}���c�s��p8�2�܏���9H)����L) <�e ����9�t..���^���K�X�/�'O��.\�p<�����M�R///j��W����[#��9궪�n-h����p8����t���^���RJ��,�Ɨ�I���t�����7"bR�(���P~��1)T*������ �}_�#"z�޻#�h� vt2�V�t:o+��i�آ��EY#�mԊ����ֈ8W:G��̦�����rο_:GS����~�t����:
V�}`�Fl����~;�|S�M�s������.�cZ����"��9���,�dcc�=�3��� ��kM��������K�h��'3�+UU�N����9J�9�SU���̇C� sΊV���s�Сa���U8"���?N))����ґ����t�Y�p��kc1�z`�{�����?��ӥs����� ۬u8"b�ۻK�(��6~�w3���3KKK7D�7Jg�F�XZZ��+�8S:0_����SJ>5�)�[����K�XD�,��Ν�!�d裓���;x��w���^��$������<x�;�����?�t��.�t��{����������Ν{y,֓�ϝ;��Ç���]<����Ͽd�� �9�s����(�������t�Eg �J�L�p8�X����9f)�td޷=_L]��v���S]׷Dĭ�s,�[����t�E68"���wF�ͥs����|��f �����[:�4�ߧ���>הα`���!]k�@�����8��q�t�):�s� �������u:��G�� ~���<_�
zKD8po�������� �N�8�̍���GD��ztii��v� MU���ѶSMo����C���`��'J�X9�_����,��9,����sέzʝRG�ͽ^�ݥ������ፍ�[rί)��ɤ��\ZZ�����Jgx������~dn pD�ɓ'� .�֖�RJG���oٿ]:K��u}m��RJח��X9�{RJYU�"~� h����6"�X:ǜ�HUU�Y:�m� ����SJ������9�����t���/�9���q$�tG���J�U���"��s̙���ze����(�� /�t:oi�vٔҝ��������8q�.\�1�����z�n�@������#�� ��h4ڕs�7����Y�AJ����u�nw��� U�u�������o���G��6�~5">�cǎ���=�^�9�,"�M)� "�N�ҧs�_���)����Z��u���?�w���w��t�6K)��ٳg_q�W�.���i! �c �_H)�2�|]J�Y�#��`J�ޜ��������\��������Wu:�g���9��/"�O�����8�RZ�9���v������y3)���$���?{�� �/@s-|~��h�o<�|D</"�ϊ����ZD|+"���w:��v�����Y�9��`�3"��ﯧ�r�L�i4��ǟ�o�]�N�ն=4�|ǎ۹gϞ�^__ߗRڛs�;'y=�t6�|z�Ν�Μ9��^/����Л�g��P����;���w~ZD��`0x]J����t��9�s~S���d� \�N�@sM
��D�}��4�}�3�/@�x \[�#–g�VS��K6���s��E�TRJ����u�ݯ����S��M�o�9�{Kg���)�[z���K`�`ಌF��nll�IJ�����B��=KKK��v�_: ӡ[r��������#�wKg��lll��СC��A�.������K�}[�OGć"�UU�,��P����9/�F�7Fį7���������n�#)���y�-�����ÝN��qCD<�t��oD�g���WVV����Q��mQ�����u)�k"�E�}ۤOGės������6���Q��"���s"�y9�"��qED<}���nD<�L)=_��zm�� h��h�Ԝ��O土�R�?�r�;""RJ�#�\D�W��tJ�)��H)��d�#�pkIDAT@��?3`3��k�IEND�B`�
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment