You can choose different types of jewellery, different diamond material and metal material.

Led the end-to-end development of the WebGL website and data viz dashboard

The site was presented in the Olympoic Venue and highlighted in multiple media reports

<p>This piece of visualization work is a submission for <mark><a href="https://wdvp.worldgovernmentsummit.org">
World Data Visualization Prize</a></mark> hold by World Government Summit. This prize in the year of 2019, in partnership with <a href="https://informationisbeautiful.net/" target="_blank">Information is Beautiful</a>, focuses on how governments are improving citizens' lives, and the innovations - seen and unseen - that drive and measure success in this REALM. This could cover the environment, happiness, employment, technology, agriculture or any other area of government support.</p>

<h4>Brief</h4>
<h5>Smaller? Better? More Productive?</h5>
<p>Nations vary in shapes and sizes, but all of them tell compelling stories. What interesting trends and discoveries can you reveal about various countries around the world?</p>

<h4>Result</h4>
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584275843/small-but-beautiful/full.png">
<p>The model shows the pattern of overall performance of small countries in different continents, by categorizing various indicators under five topics: civil life, economics situation, government performance, law system and migration.  See the code and steps here </p>

<h4>Process</h4>

<h5>Code</h5>
<p>The dataset given is Excel and all the work is done in Python. We used <mark>sklearn</mark> and <mark>pandas</mark> for data processing. For visualization, we use <mark>seaborn</mark>, <mark>plotly</mark> and <mark>matplotlib</mark>. The code is tested in jupyter notebook.</p>
<p>See step-by-step code here.</p>
<p><a href="https://nbviewer.jupyter.org/github/Prudenceyyx/WDVP/blob/master/WDVP_prst.ipynb" target="_blank">https://nbviewer.jupyter.org/github/Prudenceyyx/WDVP/blob/master/WDVP_prst.ipynb</a></p>

<h5>Data cleaning</h5>
<p>See the link for details. In short, it turned out that normalization (linearly from 0 to 1) isn't good for a dataset like this for too many outliers. We switch to standarization</p>

<h5>Kick off</h5>
<p>To get a big picture of the dataset, we first visualize the correlation between each pair of indice in a heapmap.</p>
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/v1585059922/small-but-beautiful/heatmap.png" />

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/v1585059939/small-but-beautiful/k-means-cluster.png" />

<h5>Polar chart</h5>
<p>Polar chart is what we decide to do. All the data features are rescaled to meet standrad distribution, where the mean is 0 and the standard deviation is 1. Accordingly, score 0 represents the median. Scores from -3 to 3 represents 75% of all data. Therefore, a score higher than 3 suggests that a country achieves better than 75% of the small countirein the corresponding category.</p>

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/v1585059194/small-but-beautiful/coordinate.png">/
<p>With all scores of one country marked on the polar chart, a spline line chaines them together. The line's smoothness turns out to reflect a country's balance among all indicators.</p>

<p>In previous trial and error, we have the viz same color. The result turned out hard to tell part as following.</p>
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/v1585060717/small-but-beautiful/archived/1.png" />

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/v1585060717/small-but-beautiful/archived/2.png" />

<h5>Beautify</h5>
<p>It's hard to tell the difference between continents and between categories. We apply a color to each area, the visualization transforms to the below.</p>

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/v1584279684/small-but-beautiful/thumb.png" />
<p>In order to make it look clear, we omit all the legends in the final entry. Take one continent as example.</p>

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/v1585058743/small-but-beautiful/asia.png" />

<p>Here is an overview of all 5 continents.</p>
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/v1585059193/small-but-beautiful/5-continents.png" />

<div class="iframe-container">
  <iframe
    src="https://player.vimeo.com/video/270018907"
    frameborder="0"
    allowfullscreen="allowfullscreen"
  ></iframe>
</div>


In Greek Mythology, three goddess, known as <mark>the Fates</mark>, control the thread of
life of every mortal from birth to death. In this modern age, data could be
considered the thread of one’s life. Collecting an individual's data on the
mundane action they perform, one could weave a tapestry representing their
live, from what websites they browse to which subway they take.
<mark><i>Live knitter</i> is a data-driven installation that brings together data,
life and thread. It converts the real-time data of the world-wide birth and
death statistics into knitted fabrics.</mark>

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_50,w_470/v1584448556/live-knitter/fates_goddess.gif" />

What viewers encounter first is a stacked bar chart updated in real time. The
whole width of each horizontal bar represents the number of  births in one
minute. The black segment represents deaths, thus the white segment amounts to
net growth. A complete visualization image takes 24 hours to generate, ending
up with 1440-pixel height－the number of total minutes in one day.

<img
  src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584450080/live-knitter/Final-Presentation.006.jpg"
/>


Consequently, the installation takes the same time to knit the pattern
accordingly. It works in a fully automatic fashion, symbolizing that there
should be no human intervention in the natural process of the life cycle.


<mark>If data is the thread of life, who takes the goddesses’ place to spin the
thread?</mark> The average person may be unaware when governments and companies are
widely collecting personal information. Nonetheless, their decisions based on
the data would exert real impact on our lives and society.
<i>Live knitter</i> serves an analogy to the data-based decision-making cycle
in reality. When transforming data to fabrics, it turns the digital into
physical objects, and entitles the invisible to a tangible form. The project
strives to raise viewers’ attention to the close relationship between data and
life in an artistic practice.


<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584451206/live-knitter/live_knitter_5.jpg" />

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_50,w_470/v1584275843/live-knitter/thumb.jpg" />

<h5>Research</h5>
<h6>Why choose the number of birth and deaths as data?</h6>
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_20,w_470/v1584455964/live-knitter/Final-Presentation.003.jpg" />


When I started to develop my Capstone, I immediately identified two
questions what data and what form? I would like the data to be real-time
updated and demographical. By demographical I mean that it is generated by
peoples’ mundane actions, rather than by nature. Social media data is a good
example. However, not everyone uses the same platform. So I turned to
statistics of worldwide births and deaths because the topic is universally
relatable to everyone.


###### Control a knitting machine produced 30 years ago
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_20,w_470/v1584455941/live-knitter/Final-Presentation.004.jpg" />

This project is technically based on one of them called AYAB. AYAB allows a
knitting machine to receive patterns from a computer. Without it, a machine
only supports built-in patterns or patterns marked by punch cards. AYAB
provides the schematic of a customized Arduino shield. The hacking is done
by reconnect the machines wires to Arduino with the shield.


###### Tailor an open-source project: AYAB
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_20,w_470/v1584456073/live-knitter/Final-Presentation.008.jpg" />

My project does not copy AYAB unmodified. Remember that in order to knit in
realtime, pixels are generated every minute, adding to the pattern which the
machine is knitting. I tailored the software by identifying the key
functions that handle the image and communication, and cutting off the GUI
module and the rest. Also it is necessary to change part of the settings in
Arduino firmware.


###### Make it work automatically

Most knitting machines in the market are for home use. They need people to
move the carriage back and forth. Live Knitter turns the machine into a
fully automatic fashion because the process of birth and death should not be
interfered by human force. Live Knitter automatizes the machine by tying the
carriage to the slider on a linear guide rail, and controlling the rail with
another Arduino.

<img src="https://res.cloudinary.com/djbqu5ifh/video/upload/c_scale,f_auto,q_20,w_470/v1584450697/live-knitter/IMG_8177-353.gif" />

before

<img src="https://res.cloudinary.com/djbqu5ifh/video/upload/c_scale,f_auto,q_20,w_470/v1584455894/live-knitter/auto.gif" />

after

###### Where to get the data?

A more serious problem is that the data I used for now is fake, The software
now randomly generates data, instead of requesting from the data api. The
ironic part of this project is that fake data does not visually or
conceptually influence the output because later I figured out that the data
api, though titled worldwide births and death, is not real it self. It is a
simulator based on the current population and birth rate. Although we’ve
heard of the age of Big data for many times, we might underestimate the
difficulty for government and organizations to put together data from
different sources, not to mention their willingness.

Ferrofluid x Neural Architecture
an OpenBCI project
##### Concept

A ferrofluid based neural visualization generating a possible architecture. Exploring brain signals and visual communication/learning processes in humans and cephalopods. 

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1585062652/neuromachina/diagram/neurosketch.jpg">

##### Components

FerroFluid
Magnets
Glass surface/enclosure
Projector 
OpenBCI
Powerbands


##### Mechanism
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584275843/neuromachina/diagram/flow.png" />

<h5>Reference</h5>
<p>Ferrofluid -- liquids made of magnets</p>
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_30,w_470/v1585062358/neuromachina/reference/giphyfluid.gif" />
<p><i>giphy</i></p>

<p>Chromatophore Patterning via Neural Control</p>

##### Goal
<p>
-Visual Cortex + Alpha wave + Electromagnetic field + FerroFluid Patterns

-To generate a visual representation of brain activity and possible interaction

-Simulate and explore neural activity associated with camouflage system and pattern recognition in Cephalopods.

-By manipulating layers of FerroFluid in a Hele-Shaw cell environment with electrical input from EEG brain activity , replicating the epidermis and cellular structure of cephalopods.

</p>
<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584275843/neuromachina/thumb.jpg" />

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_30,w_470/v1584275843/neuromachina/gif_1.gif" />
<p><i>this gif takes some time to load</i></p>

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_30,w_470/v1584275843/neuromachina/gif_2.gif" />
<p><i>this gif takes some time to load</i></p>

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584275843/neuromachina/full.jpg" />

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584275843/neuromachina/diagram/physics.png" />

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584275843/neuromachina/1.jpg" />

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584275843/neuromachina/6.jpg" />

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584275843/neuromachina/5.jpg" />

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584275843/neuromachina/diagram/code.png" />

<img src="https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_auto,w_470/v1584275843/neuromachina/diagram/schema.png" />

<h5>Reference</h5>
<p>Here are some tutorials we referred to.
Communicate between arduino and electromagnetic
http://www.instructables.com/id/How-to-Control-an-Electromagnet-with-an-Arduino/

https://www.youtube.com/watch?v=Rr86wsf7NcM

How to DIY Ferrofluid
http://www.popsci.com/diy/article/2009-09/making-ferrofluids-work-you

</p>

<p><strong>Prototype documentation</strong></p>
<div class="iframe-container">
  <iframe
    src="https://player.vimeo.com/video/307655525"
    frameborder="0"
    allowfullscreen="allowfullscreen"
  ></iframe>
</div>

<p><strong>Software simulation documentation</strong></p>
<div class="iframe-container">
  <iframe
    src="https://player.vimeo.com/video/307655742"
    frameborder="0"
    allowfullscreen="allowfullscreen"
  ></iframe>
</div>

<p>The controller system adjusts AC's motor power to the temperature and pressure, according to a pre-defined set of logic that performs differently under the 4 modes of the system: Auto, Manm, Vent and Test. </p>
<p>Input: temperature and pressure from the AC's bumper</p>
<p>Output: the resistance of digital potentiometers</p>
<p>The system reports the parameters in real time on the screen. It also allows mode-switching through the screen. Some buttons, toggles, and text boxes are available only under certain mode. If temperature or pressure reaches abnormal level, the system also reports error statement on the screen, and triggers auto adjustment.</p>
<p>All the data and operation are saved to a SD card at the frequency of minute.</p>

<h5>Tech Rider</h5>
<ul>
  <li>Arduino Mega</li>
  <li>7" LCD Touch Screen (<a href="https://www.buydisplay.com/default/serial-spi-arduino-7-inch-tft-lcd-touch-shield-ra8875-for-mega-due-uno">link</a>)
  </li>
  <li>Temperature sensor, Pressure sensor, Digital Potentiometer, SD card</li>
</ul>
<p>Programming:</p>
<ul>
  <li>Arduino(C++)</li>
  <li>Processing(Java) as Simulation</li>
</ul>

<img src="http://pru-yao.com/wp-content/uploads/2018/12/1-1024x768.jpeg" alt="1" srcset="http://pru-yao.com/wp-content/uploads/2018/12/1-1024x768.jpeg 1024w, http://pru-yao.com/wp-content/uploads/2018/12/1-300x225.jpeg 300w, http://pru-yao.com/wp-content/uploads/2018/12/1-768x576.jpeg 768w, http://pru-yao.com/wp-content/uploads/2018/12/1.jpeg 1440w" sizes="(max-width: 1024px) 100vw, 1024px" />

<img src="http://pru-yao.com/wp-content/uploads/2018/12/3-1024x768.jpeg" alt="3" srcset="http://pru-yao.com/wp-content/uploads/2018/12/3-1024x768.jpeg 1024w, http://pru-yao.com/wp-content/uploads/2018/12/3-300x225.jpeg 300w, http://pru-yao.com/wp-content/uploads/2018/12/3-768x576.jpeg 768w, http://pru-yao.com/wp-content/uploads/2018/12/3.jpeg 1440w" sizes="(max-width: 1024px) 100vw, 1024px" />

<img src="http://pru-yao.com/wp-content/uploads/2018/12/ACsystem_bb-1024x897.png" alt="ACsystem_bb" srcset="http://pru-yao.com/wp-content/uploads/2018/12/ACsystem_bb-1024x897.png 1024w, http://pru-yao.com/wp-content/uploads/2018/12/ACsystem_bb-300x263.png 300w, http://pru-yao.com/wp-content/uploads/2018/12/ACsystem_bb-768x673.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" /> 

 <h5>Smart-AC Controller Documentation</h5> 
<a href="https://vimeo.com/307655525">https://vimeo.com/307655525</a>

Registration, Photo Booth, Lottery and Interactive Message Installation

<video width="1920" height="1080" mp4="http://pru-yao.com/wp-content/uploads/2017/11/group1-video.mp4"></video>

![](https://res.cloudinary.com/djbqu5ifh/image/upload/c_scale,f_auto,q_50,w_470/v1585049261/zhu/doc_1.jpg)