Predict physical features from autosomal DNA and render an avatar

For convenience a copy of the deployed instance of the React app that renders the avatars has been included. To change the URL will require re-building using npm

/my-app/src contains the source of the React app that renders a face using our modified avataaars library /node-modules/avataaars/dist contains the modifications to avataaars that handles more phenotypes (freckles, eye color, eye lashes, custom shirt) phenotypeToAvatar.js has methods for creating tables, generating random avatars, generating probabilities of phenotypes by autosomal SNPs from a hirisplex public template, taking the complete set of phenotype probabilities and applying an additional layer of logic mapping those phenotypes to the set of avatar phenotypes, and returning the URL to the corresponding avatar package.json contains version numbers of node modules skin_color_aggregate_data.tsv contains raw data from a scientific study conducted among Poles by Zaorska, Zawierucha and Nowicki in 2019

The React app is accessed by the front end and references a modified version of avataaars by Fang-Pen Lin to render the avatars. The deployed instance of the modified avataaars was initially created using yarn to get the original version: yarn add avataaars Then I added new facial features to my local version /node_modules/avataaars/dist I created the React app by modifying the boilerplate generated by: yarn add create-react-app

If you make changes to avataaars or the React app that references it, you must rebuild

In the package.json change the home directory to the desired production URL. Make the corresponding change to the js that returns avatar URLs

from my-app directory, npm run build

This will build the React app and place it in default directory /my-app/build

Next, replace the old production instance with the new instance:

rm -rf dev-build (or new location) cp -r my-app/build dev-build (or new location)

1. you only need to change the files in the /node_modules/avataaars/dist folder
2. go to directory above your component (i.e. Face) and add required path for your component and creation of component specifying default class in index.js
3. create directory for your component and copy boilerplate index.js and index.d.ts files you find in other components, replacing component class names
4. add your component option classes, make sure an entry for each exists in the index.js
5. add corresponding code for your component to piece.js
6. in /dist/options add an entry to index.js for the next component option. The class name used for the option class should match what you have declared in step 3