block by dribnet 99fa8145eb757042fca7396efbd9a1ce

17.1.MDDN242 PS4

Full Screen

PS4 MDDN 242 2017

Data Story

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).

index.html

<head>
    <style> body {padding: 0; margin: 0;} </style>
</head>
<body style="background-color:white">
<img src="preview.jpg" width="960" height="500"/>
</body>

preview.jpg

����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��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��

sketch.html

<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>

sketch.js

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);
  }
}