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
<!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>
[
{"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"}
]
gimp xcf file � x B� B� t icc-profile appl mntrRGB XYZ � acspAPPL APPL �� �-appl desc P bdscm � cprt � #wtpt � rXYZ gXYZ bXYZ 0 rTRC D aarg P vcgt p ndin � >chad � ,mmod � (bTRC D gTRC D aabg P aagg P desc Display mluc " hrHR �koKR �nbNO �id �huHU �csCZ daDK ukUA 2ar NitIT broRO vnlNL �heIL �esES vfiFI �zhTW �viVN �skSK �zhCN �ruRU $ �frFR ms .caES @thTH XesXL vdeDE denUS tptBR �plPL �elGR " �svSE �trTR �jaJP �ptPT L C D u b o j i��� L C D F a r g e - L C D L C D W a r n a S z � n e s L C D B a r e v n � L C D L C D - f a r v e s k � r m>;L>@>289 L C D L C D EDHF) L C D c o l o r i L C D c o l o r K l e u r e n - L C D L C D ������ V � r i - L C D_i�r L C D L C D M � u F a r e b n � L C D&25B=>9 -48A?;59 L C D c o u l e u r W a r n a L C D L C D e n c o l o r L C D *5 F a r b - L C D C o l o r L C D L C D C o l o r i d o K o l o r L C D������� ����� L C D F � r g - L C D R e n k l i L C D0�0�0� L C D L C D a C o r e s text Copyright Apple Inc., 2016 XYZ �R �XYZ e� < �XYZ j� �� �XYZ &[ , ��curv
# ( - 2 6 ; @ E J O T Y ^ c h m r w | � � � � � � � � � � � � � � � � � � � � � � � � �
%+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�KKSK�K�L*LrL�MMJM�M�N%NnN�O OIO�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��para ff �
Y �
vcgt VEA8
0Y �
�
a�
l�5� k�6��@ �!�#
$9%Y&k'm(\)B**�+�,�-k.=/
/�0�1�2Q3!3�4�5�6Q77�8�9x:A;
;�<�=d>,>�?�@|ABBB�C�D�E�F�G~HaI?JJ�K�L�M�N�O�P�RSTUVV�W�Y Z [\
]]�^�_�`�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����������� ndin 6 �� X� U? �� &�
P
T9 &f � :� ' 0 : D O Z f s � � � � � � � �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�stqu�wFx�z-{�} ~�����
�����j�늋�m�����햩�_��Н��G����������k�E����������C�^�`�S�?�/�)�6�n���� ܟ����|�A�����6�F�
���������������b�0�� ! * 3 = H T ` m { � � � � � � �0G_y����3Z���_��6��)��:� h�E� / �
)
�4�P�
x �!�C�w�V�}
�-�o�i�o$��X� �!d"0# #�$�%�&\'4(
(�)�*�+�,�-�.|/t0c1@22�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�������� ! + 6 C P ^ 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 ����&