Describe an interaction that could be built using data that tells a story. This does not have to be one you are able to implement. The subject matter can be based on the examples given in class, or anything of interest to you. The interaction graphic should be conveyed using three panels from left to right.
Be sure to use complete sentences, and you can reference your image above. The explanation should be short but compete, no more than 100 words.
Also update both images keeping their original sizes: preview.jpg (960x500) and thumbnail.png (230x120).
<head>
<style> body {padding: 0; margin: 0;} </style>
</head>
<body style="background-color:white">
<img src="preview.jpg" width="960" height="500"/>
</body>
���� JFIF �� C
�� C �� ��" ��
�� � } !1AQa"q2���#B��R��$3br�
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������
�� � w !1AQaq"2�B���� #3R�br�
$4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������� ? �H��+���( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*���X� ��ɋ�K� �7��,�l?��1=�� {� &/����?�x������%�����O��� �������i����EV#
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
�c�
�� &/�/����x������*���Ŀ����ʶ�� ���?����b�
?�3� ������X� �^� ɋ�4� ����/k�z1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*(��� Ƈ�����%�����O��� �������1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��?�_�b� � �
� ��*(��� Ƈ�����%�����O��� �������1Ɵ���lQEb0��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��( ��(��
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
<script language="javascript" type="text/javascript" src="clock.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</head>
<body style="background-color:white">
<div class="outer">
<div class="inner">
<div id="canvasContainer"></div>
</div>
</div>
</table>
</body>
var canvasWidth = 960;
var canvasHeight = 500;
function setup () {
// create the drawing canvas, save the canvas element
var main_canvas = createCanvas(canvasWidth, canvasHeight);
main_canvas.parent('canvasContainer');
// this means draw will only be called once
noLoop();
}
// draw five colors and then five glyphs
function draw () {
background(255, 255, 220);
stroke(0);
strokeWeight(4);
line(320, 0, 320, canvasHeight);
line(640, 0, 640, canvasHeight);
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}