block by micahstubbs a98418db846e7e5560f8b7c8b8224564

d3 blocks on a-boxes 6

Full Screen

block a-boxes in a semicircle droppped from a lower height so that they bounce less and stack neatly

data-driven positions using the index value of the datum in the blocks data


all the blocks with thumbnail images created during the 2016 #d3unconf

here we use aframe’s a-boxes, which are kind of like SVG rects

a fork of aframe + d3 + bl.ocks from @donrmccurdy

falling blocks brought to you by the aframe-physics-system, also from @donrmccurdy

inspired by the conversations at the 3d and VR 11am session in the Alcatraz Room at the 2016 d3 unconference

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame / Bl.ocks / D3</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.js"></script>
    <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v1.0.3/dist/aframe-physics-system.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-plane static-body color="#CCCCCC" height="100" width="100" rotation="-90 0 0"></a-plane>
    </a-scene>
    <script>
      function render () {
        d3.json('blocks.json', function(blocks) {
          // in radians
          const arcScale = d3.scaleLinear()
            .domain([0, blocks.length])
            .range([Math.PI,  2 * Math.PI]);

          const r = 2;
          d3.select('a-scene')
            .append('a-entity')
              .attr('id', 'blocks')
            .selectAll('.block')
              .data(blocks)
              .enter()
              .append('a-box')
                .attr('class', 'block')
                .attr('scale', {x: 0.96, y: 0.5, z: 0.05})
                .attr('position', (d, i) => ({
                  // x: Math.random() * 5 - 2.5,
                  x: (6.5 - (2 * Math.PI)) + (r * Math.cos(arcScale(i))),
                  // y: Math.random() * 5,
                  // y: 5,
                  y: ((blocks.length - i) / 10) + 0,
                  // z: Math.random() * -5
                  z: (-0.5 * Math.PI) + (r * Math.sin(arcScale(i)))
                }))
                .attr('dynamic-body', '')
                // .attr('material', (d) => ({src: `url(//bl.ocks.org/${d.owner.login}/raw/${d.id}/${d.sha}/thumbnail.png)`}));
                .attr('material', (d) => ({src: `url(//bl.ocks.org/${d.owner.login}/raw/${d.id}/thumbnail.png)`}));
        });
      }

      var sceneEl = document.querySelector('a-scene');
      if (sceneEl.hasLoaded) {
        render();
      } else {
        sceneEl.addEventListener('loaded', render);
      }
    </script>
  </body>
</html>

blocks.json

[
  {"id":"3757fe53ea94da4100db2e5071ea8289","owner":{"login":"micahstubbs"},"description":"d3 blocks on a-boxes"},
  {"id":"e70e14483fe01eb0a3ea7d1d46a30571","owner":{"login":"vasturiano"},"description":"Musical Hexagons"},
  {"id":"0ba5ee8bd3773d70462523679d4ef5a4","owner":{"login":"erlenstar"},"description":"Delaunay Force Mesh II"},
  {"id":"de2b023d968abb7276b894409efdac56","owner":{"login":"enjalot"},"description":"merging selections"},
  {"id":"7d3f8beb9faa183fc8d4fe3fd1610e00","owner":{"login":"enjalot"},"description":"d3 yoga"},
  {"id":"57fbb830ba7e62caa46a82891168bc29","owner":{"login":"veltman"},"description":"CMYK zoom"},
  {"id":"e8ccca52559796be775553b467593a9f","owner":{"login":"syntagmatic"},"description":"Continuous Legend"},
  {"id":"6c73711f8f24af9808a9031a69f75b18","owner":{"login":"erlenstar"},"description":"Stereographic"},
  {"id":"a1eb3bdecd2ab1be1de2425a260cc0f7","owner":{"login":"EfratVil"},"description":"Spirograph Geometric Flowers"},
  {"id":"8c5a0e697673fd676be6823589e1ce31","owner":{"login":"jermspeaks"},"description":"stroke-dash-array"},
  {"id":"b04d673fbfc665f2c98f382e2c79a9ad","owner":{"login":"git-ashish"},"description":"Voronoi Tessellation"},
  {"id":"1fd92b8c309a0fdc71b0a64c788a70e7","owner":{"login":"git-ashish"},"description":"Canvas Voronoi"},
  {"id":"6a6c2f11f9493adba658003a5a18a107","owner":{"login":"git-ashish"},"description":"Voronoi Labels"},
  {"id":"a5d147cd45c624e8811238f0a5480439","owner":{"login":"LuisSevillano"},"description":"Comunidad Valenciana population(d3v4)"},
  {"id":"cd0c38a20141e997e926592264067db3","owner":{"login":"ericsoco"},"description":"cluster force"},
  {"id":"50a350e86de82278ffb2df248499d3e2","owner":{"login":"veltman"},"description":"CMYK halftone printing"},
  {"id":"32f369bb437d7c23198b9b9ccc8d4751","owner":{"login":"micahstubbs"},"description":"d3.unconf 2016, v11"},
  {"id":"a7495ca3d5b322a6697530feb62fceef","owner":{"login":"Fil"},"description":"Painting Manhattan-distance Voronoi"},
  {"id":"99767e64051096388078913afca3ff4e","owner":{"login":"schnerd"},"description":"Choropleth with d3-cluster-scale"},
  {"id":"82144236b9a920f77e3af1776d265c57","owner":{"login":"sxywu"},"description":"d3.unconf 2016, v10"}
]

thumbnail.xcf

gimp xcf file�xB�B�ticc-profileapplmntrRGB XYZ �acspAPPLAPPL���-appldescPbdscm�cprt�#wtpt�rXYZgXYZbXYZ0rTRCDaargP vcgtpndin�>chad�,mmod�(bTRCDgTRCDaabgP aaggP descDisplaymluc"hrHR�koKR�nbNO�id�huHU�csCZdaDKukUA2arNitITbroROvnlNL�heIL�esESvfiFI�zhTW�viVN�skSK�zhCN�ruRU$�frFRms.caES@thTHXesXLvdeDEdenUStptBR�plPL�elGR"�svSE�trTR�jaJP�ptPTLCD u boji��� LCDFarge-LCDLCD WarnaSz�nes LCDBarevn� LCDLCD-farvesk�rm>;L>@>289 LCD LCD EDHF)LCD coloriLCD colorKleuren-LCD LCD ������V�ri-LCD_i�r LCDLCD M�uFarebn� LCD&25B=>9 -48A?;59LCD couleurWarna LCDLCD en colorLCD *5Farb-LCDColor LCDLCD ColoridoKolor LCD������� ����� LCDF�rg-LCDRenkli LCD0�0�0� LCDLCD a CorestextCopyright Apple Inc., 2016XYZ �R�XYZ e�<	�XYZ j����XYZ &[,��curv
#(-26;@EJOTY^chmrw|�������������������������
%+28>ELRY`gnu|����������������&/8AKT]gqz������������!-8COZfr~���������� -;HUcq~���������
+:IXgw��������'7HYj{�������+=Oat�������2FZn�������		%	:	O	d	y	�	�	�	�	�	�

'
=
T
j
�
�
�
�
�
�"9Qi������*C\u�����


&
@
Z
t
�
�
�
�
�.Id����	%A^z����	&Ca~����1Om����&Ed����#Cc����'Ij����4Vx���&Il����Ae����@e���� Ek���*Qw���;c���*R{���Gp���@j���>i���  A l � � �!!H!u!�!�!�"'"U"�"�"�#
#8#f#�#�#�$$M$|$�$�%	%8%h%�%�%�&'&W&�&�&�''I'z'�'�(
(?(q(�(�))8)k)�)�**5*h*�*�++6+i+�+�,,9,n,�,�--A-v-�-�..L.�.�.�/$/Z/�/�/�050l0�0�11J1�1�1�2*2c2�2�3
3F33�3�4+4e4�4�55M5�5�5�676r6�6�7$7`7�7�88P8�8�99B99�9�:6:t:�:�;-;k;�;�<'<e<�<�="=a=�=�> >`>�>�?!?a?�?�@#@d@�@�A)AjA�A�B0BrB�B�C:C}C�DDGD�D�EEUE�E�F"FgF�F�G5G{G�HHKH�H�IIcI�I�J7J}J�KKSK�K�L*LrL�MMJM�M�N%NnN�OOIO�O�P'PqP�QQPQ�Q�R1R|R�SS_S�S�TBT�T�U(UuU�VV\V�V�WDW�W�X/X}X�YYiY�ZZVZ�Z�[E[�[�\5\�\�]']x]�^^l^�__a_�``W`�`�aOa�a�bIb�b�cCc�c�d@d�d�e=e�e�f=f�f�g=g�g�h?h�h�iCi�i�jHj�j�kOk�k�lWl�mm`m�nnkn�ooxo�p+p�p�q:q�q�rKr�ss]s�ttpt�u(u�u�v>v�v�wVw�xxnx�y*y�y�zFz�{{c{�|!|�|�}A}�~~b~�#��G���
�k�͂0����W�������G����r�ׇ;����i�Ή3�����d�ʋ0�����c�ʍ1�����f�Ώ6����n�֑?����z��M��� �����_�ɖ4���
�u���L���$�����h�՛B��������d�Ҟ@��������i�ءG���&����v��V�ǥ8��������n��R�ĩ7�������u��\�ЭD���-�������u��`�ֲK�³8���%�������y��h��Y�ѹJ�º;���.���!������
�����z���p���g���_���X���Q���K���F���Aǿ�=ȼ�:ɹ�8ʷ�6˶�5̵�5͵�6ζ�7ϸ�9к�<Ѿ�?���D���I���N���U���\���d���l���v��ۀ�܊�ݖ�ޢ�)߯�6��D���S���c���s����
����2��F���[���p������(��@���X���r������4���P���m��������8���W���w����)���K���m��paraff�
Y�
vcgtVEA8
0Y	�
�
a�
l�5�k�6��@ �!�#
$9%Y&k'm(\)B**�+�,�-k.=/
/�0�1�2Q3!3�4�5�6Q77�8�9x:A;
;�<�=d>,>�?�@|ABBB�C�D�E�F�G~HaI?JJ�K�L�M�N�O�P�RSTUVV�W�YZ	[\
]]�^�_�`�a�b�c�d�eyfggThBi4j*k!lmnn�o�p�q�r�s�tu�v�xyez�|}&~:I�[�u�����{�4�㆏�P�%�����(�>�N�W�Z�Z�X�V�T�Q�N�K�G�B�>�9�3�-�*�0�K����I�����%�1�;�D�M�W�_�h�p�w�~�������������������ſ�����¯�f���Ŗ�w�f�]�W�Q�K�G�H�T�qР����/�C�I�E�8�%���������ޣ߃�g�U�N�M�O�O�J�9�����4����z�H���G����x�^�O�M�j�������D��VE1����	6
h��*w�y�2��5��X �!�"�#�$�%�&�'�(r)>**�+�,j-5-�.�/�0W11�2�3v4=55�6�7O88�9�:[;;�<�=\>>�?�@[A&A�B�C�D�EeF<GG�H�I�JvKeLbMhNoOmPbQOR;S*TUVV�W�X�Y�Z�[�\�]z^i_X`Da/bcc�d�e�f�g�h�i�jokYl@m'n
n�o�p�q�s!t_u�v�w�x�y�z�|}~( ��߁����r�^�U�X�i���������������������������������y�o�g�i�����)���'���ӥ����#�*�1�7�>�D�M�Y�l�������Ѷ޷����+�;�@�7�!�����õħśƐDž�z�r�tˉ̼��}����?�T�fրץ������-�L�pߗ�����������9�����0�5�&��������������V�'�����z�;��D����V.��^)����	�
%
AZ����%Ej��������x B �!�"K"�#�$'$�%^%�&�'0'�(g))�*H*�+�,(,�-c..�/</�0u11�2L2�3�44�5R5�6�77�8P8�9::�;A;�<c<�={>>�?4?�@zAA�BOB�ChC�D�EPF	F�G|H4H�I�J\KK�L�MSNN�O�P;P�Q�RkS'S�T�U]VV�W�XHX�Y�Zl[$[�\�]N]�^�_%_�`A`�axb"b�c�dheGf7g9hIiajmkal?mm�n�omp5p�q�r�sPtt�u�vdw&w�x�yEy�zl{{�|�}�~�À��������o�[�E�*��ԉ��Z�$�����͎����~�[�:����֕������������Ɯ؝���
� �3�H�\�o�~�������a�7���������2�P�{�����9�p���������ɿ��G¹�S��ǖ�3��̍�`�I�A�B�l�����������ndin6��X�U?��&�
P
T9&f�:�'0:DOZfs��������1G_w����(Ls���8v��G��3��:��a�7�		�

�
��
4
�=�8�H�t�D�T�O�_��=�}�^	�v4�� r!5!�"�#�$h%<&&�'�(�)b*A+&,,�-�.�/�0�1{212�3�454�5�6�7y8d9L:0;<=.>�@+A�B�C�EFGHI$J4KNLqM�N�O�Q#RWS�T�VWDX�Y�[\b]�^�`abb�c�d�e�ghKi�j�l<m�n�pJq�stqu�wFx�z-{�} ~�����
�����j�늋�m�����햩�_��Н��G����������k�򫐭E����������C�^�`�S�?�/�)�6�n����	ܟ����|�A�����6�F�
���������������b�0��!*3=HT`m{�������0G_y����3Z���_��6��)��:�h�E�	/	�
)
�4�P�
x	�!�C�w�V�}
�-�o�i�o$��X� �!d"0##�$�%�&\'4(
(�)�*�+�,�-�.|/t0c1@22�3�4K55�6�7�8�9�:�;z<v=�>�?�A3BdC�D�E�F�G�H�I�J�LM*NVO�P�Q�S$T_U�V�X"YjZ�\]W^�_�`�a�b�c�dieRfHgYh�i�k
lbm�opzq�sBt�vwpx�z!{v|�~5�����
�{��a��z�0��ݒ��v�4�򙱛u�:�����2����'�h������=�����9�εa�����Q����L��Ÿ�b�:�!����v�Њ�Ӣ�_�M�lۧ����P�����&������I�2��������	!+6CP^m}������&@]{���	3a��e���Y�C�=�L�	s

�V�
q1���uYIJQJ7)5_ytbTN M!M"L#M$R%_&s'�(�)�*�,
-7.f/�0�23d4�5�7P8�:�<Y>?�@�BKC�D�E�F�G�H�I�KKL�N.O�Q.R�TCU�WmY
Z�\V^`b_d[e�g;h�i�kRl�nMo�q[r�t{vw�y�{�}�U�����V��������f�G��˔f��������6�͟f����8�էu��Ȭ�G�/�F������Y��׿��Y�ĥ�4ǻ�E���x�/�������ב�'ڝ���Eފ����U����1�k��������0�D�W�a�d�P�"��������9�����W����r�����@������S������@�x�����!�Y�������1�d�������1�e������sf32B����&�������������lmmod��˸��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)
icc-profile-nameICC Profile�F��3*Screen Shot 2016-10-20 at 12.07.27 PM.png�	

��3�F�F��3�'g2z?c���9���������8�����7������6������0������������-���������,������+������*������*�����"�����������"�������u��贀����� ������������������������������������ݮ��������������������������������p��������wh�����������������ɛ������Ȫ���沽�����������������z������������ֱ��������������������Φ�������������`�پ���������������������������������������������	�������������������%��Ķ������&��ө�������	����������۩���������	����������𫟱�������������������������f�����������������	�����������������������������
�������������������
��˥�����������������������ɢ�������������������������������������������
���������������������������
���ϱ����������͹��������
��并���������ø������������	��ϳ���������ɻ����������Ҧ���	����9���������8�����7������6�����������/�����������������-�����
�-������+������*������*�����"�����������"�������������������۩����� ���������������������������������������������������������������������������׹���⃪������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������笝�����ø������������ѫ�������	��������������٩��������	����������﫡��������������������������������������������
���������������������������
��������������������̧������������������������ɥ������������������������������������������������������������������������������ߧ���������
�����������鴐�������������	�����������£�~���������٥���	����9���������8�����7������6�����������/�����������������-�����
�-������+������*������*�����"�����������"�������������������w����� ���������������������ژ������������܅��������������������������������~���맻���������Bu•ѕ����������������������u����̮�����������������^Qȩ�ә�������������������������������������������������Ov��ö}�Թ������������������������ؐ�����������������������������������ų�����������~d{����°����������Ы�������	��������������ת���������	����������﬜�������'��������������������������������
�����������������������������
����������������̪�����������������˜�������������嗢������������������������������
������������������� �����������
��������������������������	�������������������������թ���	�����	��.�������������������������$������������	������������������������ྶ�Β�������������������������������g��������䳗��g�������������������������������sbQ?7]e��������༷����������
�������������������������������۾�������챢�����������������������������������ٛ|��������������������������������������������������������ɺ����������
�������¹���������o���������눽��������������������
��f6���������������������������β���������������������H#����٠����������������������ϴ������������������|�E#��������������k��������������������������������E������8B������r������������������pJ��������������������Е����h������������������������������u������������������������5_�����̻�� ��������������������ӽ������%�����������Ĩ�'��������������'�
����������,�	�����������,�	��������.��������������.��������������.���������������0�����������4�������ۻ�6���֘�����6���������7���������8���������8������������	��,���������������������������#������������	������������������������������������������������������������g������������������������������������������������sbQ?7]e���������������������
���x�����H��������v����������������������������xsryrlwtw�u����������[��������������ՠ�������������������xmhhujr}tuxupwnjuu�������������������������������
�����������}rwvwsX�����������������������������
���������uo�nf������������������۽���������������������ړk~qjq���������������������������������������Й������������vuwpP������������������������������졂�����������vssxN����������������������wzn{b������������~�֊zsowN����������~��__ajR�������������ܾ��� ����������&����������ߴ�'�������������(�
����������,�	�����������,�	��������.��������������.��������������.���������������0�����������4�������ۻ�6���֜�����6���������7���������8���������8������������	��,���������������������������#����������������������������������������������������������g�������������������������������������������sbQ?7]e�������������������
���������������������������������������������������������������������������������������������������������������������������������������������������������
����������������������������������������������
�����������������������������������������
��̸���������Ϣ�����������������������������������з�����������������������������������������ֱ���������������������������������������˭����������Ὥ�ֻ���ڌ����������������������Π���	����������������������� ���������������������&������������'��������������'�
����������,�	�����������,�	��������.��������������.��������������.���������������0�����������4�������ۻ�6���Ґ�����6���������7���������8���������8��������������������7������������3������������������+���������������#���������������"�����������������������������������QW��Ἀ�����ڻ���������������������������ǫ��������������������������������Ⱓ��������������������������������������������ь�����������������������������������������������������������������������v��ԍ��������������������Œ��������������������������ݴ��϶��ַ��������������춍������������w�������������ۋkklt������������������������������������jm�����mmp���������������󟋝�������������������s�lq��䩑�����������������ꡎ��������ҡ����Խ������|��}��׿�������������꜋�������п�������������������
����������������������얊�u����������������������������������������Lmj��ڦ���֤���{���������ֶ���������1��������Ĵ��_��������ƿ��������)5g�ŭ�����̘{fz���������������@?4�ݫ����إ����$��罸������������������������&�����������������&�����԰���������������'������迡�����)������Ÿ�����������-�������������.��������������/��������������1����������2���������������6�������8�������8�������:�������:������<�����=����=����������������7������������3����������������������*����ҽ�ص�������#�������ʾ��L���~63������������"�����ٯ����������C�����������������Ǣ��������������ѥ������������������������������
��������������O�������������������ڇ����������������������������\b������	�������������������������������������똔����������������ª��������������������}t���
�������������������������������Ч~�˽������bKT����	��������������������鍩os�����޹������������wkJI��������������������͈���������^j��������������YWy����������������������oy���䐰�OCTy�rny���������ɳ�����������������r[Yrm����������
�����������������tkQuj������ƾ��������������������znqF_��������������������ۡ��������讅DV������^x�����������׽���������ʹ���Y�����f������������ô���������o��s������|�n�������������$���i�������������������������%���r��������������&���puid���������}����'��㢾�������������)��������������������-�������������.��������������0�������������1����������3������������7������8������8�������:�������:������<�����<����=����������������7������������3������������������������)�
���դ���Qjk�����#������Ÿ�jB>8 ' u�������"���QfC1"%(&%#(+.,Qo�������������HX("+v������������������������������R0.()e����������������������������������:$$'*X������������������������������������������5$5CBg������������������������������������������$$$"m����ظ����������������{��������������������m..-/Y����ٸ�����������������������������â�������
���J5EX����������������������������Ʀ�˼H;-89;E�������	����������������������������ہGFWHHC;=T,%$$4<<?Tu´�����������������������j���trfk���bEV@IT>Y���?S��������������¿���������d�ޙs����虎�����8x���{}��������������������pm��}��������������
���������������`e�����������
�����������}bUy�����������������������������ޅeTu�����骾�����������������~iKT�����������������������lsGM������̭�����������$���esMe����������������������%���j��������������&���f��j����������������'��㖻���������)��������������������.������������0���������1�������������1����������3����������7�������8�������9�������;�������;������<�����=����=�������������"������� ������������������������������n����������Zl������������������	���������������������������������������������������И���[E��������������������������������������������������
�����������������������	������������������������������Ʃ⛀����������������������������Ţ����ɂ����������������|~��������ꊦ�����������������������������������Ĝݬ���������������ʿ�����˪���ִ�Ԝ�����������������������ʂ|�������缉T^i������������������Բ�������¸ݻ��������������������5@����������������������������������������������������������������������������������������"������� ������������������������������������������������������������	����������������׻���������������������������������������������������������̧��������������ò�����������������
�����������������������	��n����������������������������������˭���������������������ݢ�Ҩ�����ݴ�������������������瞙��ԫ��ź�¢�����Ϟ��������������˂�ؘʓ�޴�������������������������˼��ޓ������Ե����ǩ�Đ�ӱ��������������|��������ո���������ٿ����������a墆�������ʱIJ��������������������ޘ�����������������������������������������������������������������������������������������"������� ���������������������������������������������������	��������������������������������������������������������|��܍�������������ǟ���������������k�����������
�������������������	��ξ�������������������򾞾�������л������������������İ�����������������������蟤����������������������������������������������������������������������������������������������������������������������������������˵����������m��������������������،��ʶ�������������������������������������������������������������������������������s9�xLayer�	

Gh�xG�H0H<�xG�G�G�G�G�HHH ������������	��	��	��	��������������P�P�P�P�s<9