Here's a quick walkthrough of how I prototyped a React Avatar component with the goal of generating hundreds of thousands of unique avatars.

To begin, I defined four shape components: `TopLeft`, `TopRight`, `BottomLeft`, and `BottomRight`, each shape essentially represents a pixel with one rounded corner. These components are organized within an array called `shapeComponents`.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Faltana-avatars%2F5d32de03-ec19-4e86-b658-235b956722df.mp4?alt=media&token=2923075c-ebf3-48ed-a6ed-cbc945f8c9ea","id":"5d32de03-ec19-4e86-b658-235b956722df","width":3000,"height":1678,"filename":"pixel-rounding.mp4","type":"video/mp4","caption":"Each pixel, has one corner with a rounded radius.","border":false}]}
```

Next, I created an array called `colors` containing Altana's brand palette. These will be used later to customize the avatar colors.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Faltana-avatars%2F5c7a16c5-f54b-40b7-8081-1f586cc1ff61.png?alt=media&token=aef59be0-033d-48f2-a4ce-9cb644a0135a","id":"5c7a16c5-f54b-40b7-8081-1f586cc1ff61","width":2058,"height":1158,"filename":"colors.png","type":"image/png","caption":"Altana's brand accent colors","border":false}]}
```

Now, the Avatar is ready to be constructed, comprising of 9 `shapeComponents` arranged in a 3x3 grid pattern, randomly chosen using a `shuffleArray` function.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Faltana-avatars%2F358acb4e-9a4d-4a14-a2c5-23cc7a234c0e.png?alt=media&token=4ada8983-fa3b-41ef-ad73-59607593ef8f","id":"358acb4e-9a4d-4a14-a2c5-23cc7a234c0e","width":2744,"height":1128,"filename":"shape.png","type":"image/png","caption":"A 3x3 grid of pixels","border":false}]}
```

It then selects three random pixels on the grid and assigns them an accent color, which can also be user-defined if desired.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Faltana-avatars%2F84a04370-6642-4574-8fe7-0f7967009b44.png?alt=media&token=607331c4-db13-4e10-873a-4afe41decc9b","id":"84a04370-6642-4574-8fe7-0f7967009b44","width":2744,"height":1128,"filename":"random-colors.png","type":"image/png","caption":"Assign an accent color to 3 of the pixels ","border":false}]}
```

The Avatar can now be rounded off and will generate a unique pattern and color combination. The result? An Altana-branded avatar ready to represent each user with a touch of individuality.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Faltana-avatars%2F72a70dd9-9103-40ad-8190-63162dc145c5.mp4?alt=media&token=561ad9e9-85c9-4c07-a7fa-61f18cc530da","id":"72a70dd9-9103-40ad-8190-63162dc145c5","width":2144,"height":1470,"filename":"final-result.mp4","type":"video/mp4","caption":"The final avatar component","border":false}]}
```

> [Here is a link](https://codesandbox.io/p/devbox/eloquent-panna-wyl7j2?file=/app/Avatar.js:107,1) to the 'final' code, please note this is not production ready! just a quick and dirty prototype to test the concept, I'd love to hear how you might improve it.

Generating Unique Avatars

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Fexe3KxuNEqCxtn7pFtjd%2F4584ecc0-0baa-4d06-a65c-80f2425cd39e.png?alt=media&token=2155935b-b12e-4be2-97d5-984f2a5d2193","id":"4584ecc0-0baa-4d06-a65c-80f2425cd39e","width":2032,"height":1460,"filename":"Screenshot 2024-05-02 at 14.19.25.png","type":"image/png","caption":"","border":false}]}
```

While conditional formatting is a familiar tool for improving table-based presentations of data, its application within a Node and Edge interface introduces some increased complexity. The sheer volume of data can easily result in clutter that obscures vital patterns and trends. Therefore, enhancing the usability of data visualisations without compromising their accuracy and clarity poses a significant challenge.

### **Attempt #1 Scaling**

For the first attempt, I generated a colour in hexadecimal format based on a given value relative to a maximum value (defaulting to 9999 but this would need to be dynamic based on the actual data). \
\
It calculates a scale from 0 to 1 based on where the value falls between a fixed minimum value of 1 and the maximum value. It then uses this scale to determine the red component (increasing with value) and the green component (decreasing with value), setting the blue component to a constant 50. The resulting RGB values are converted to a hexadecimal string and returned as the color code.

```javascript
export function getColorBasedOnValue(value, maxValue = 9999) {
  const minValue = 1;
  const scale = (value - minValue) / (maxValue - minValue);
  const red = Math.min(255, Math.floor(255 * scale));
  const green = Math.max(0, Math.floor(200 * (1 - scale)));
  const blue = 50;
  return `#${red.toString(16).padStart(2, "0")}${green
    .toString(16)
    .padStart(2, "0")}${blue.toString(16).padStart(2, "0")}`;
}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Fexe3KxuNEqCxtn7pFtjd%2Fce4c2257-48f6-4019-b78a-b59634471b12.png?alt=media&token=92aa79b9-0bb4-4a8d-b365-8214f71a54f7","id":"ce4c2257-48f6-4019-b78a-b59634471b12","width":2536,"height":2588,"filename":"Color Palette Extension.png","type":"image/png","caption":"Result of Attempt #1","border":false}]}
```

This worked as a POC, but we really wanted to have a selection based on the brand colours rather than just red, green divergence.

## **Generating the colour pallets**

Selecting the ideal shades required some going back and forth testing at different scale of data.. Ultimately, I opted for simplicity, adjusting the colours in 20% increments to create distinct layers of dark and light. This method ensures that each colour variation is both noticeable and harmonious, enhancing the overall clarity of the visualisation. I found [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic?tab=readme-ov-file) and [ColorBrewer](https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3)'s tooling really helpful inspiration for the project.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Fexe3KxuNEqCxtn7pFtjd%2F108598ba-dc8c-45a6-83a1-1cc3cc3402a2.png?alt=media&token=4ee2625b-a22a-460a-bdc7-66a45c264ec7","id":"108598ba-dc8c-45a6-83a1-1cc3cc3402a2","width":1694,"height":1461,"filename":"3f60f997-400c-4653-83b7-85c7ffb61f96.png","type":"image/png","caption":"Extened brand pallete","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Fexe3KxuNEqCxtn7pFtjd%2Ff54daf0c-0812-4b25-8877-9d13fcd2d117.png?alt=media&token=d09699b0-0a3c-4f72-b691-86f62072a16c","id":"f54daf0c-0812-4b25-8877-9d13fcd2d117","width":1694,"height":728,"filename":"a062d3cb-9d96-4340-a608-285a10de9f8d.png","type":"image/png","caption":"Shade generating","border":false}]}
```

## **Result**

The function I ended up with selects a colour from the predefined palettes based on a given minimum and  maximum value. It calculates an index into the `selectedPalette` array by dividing the range of possible values into segments corresponding to the number of colours in the palette. This index is based on where the value falls within these segments. It then ensures this index is within the bounds of the array to avoid errors. The function finally returns the hexadecimal colour code from the palette corresponding to the calculated index.

```javascript
export function getColorBasedOnValue(value, maxValue = 9999, selectedPalette) {
  const hexValues = selectedPalette;

  // Calculate the index for the hex value based on the input value
  const segment = (maxValue - 1) / (hexValues.length - 1);
  let index = Math.min(hexValues.length - 1, Math.floor((value - 1) / segment));

  // Ensure index is within the bounds of the hexValues array
  index = Math.max(0, Math.min(index, hexValues.length - 1));

  // Return the hex value corresponding to the calculated index
  return hexValues[index];
}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2Fexe3KxuNEqCxtn7pFtjd%2F17831753-ea55-46b5-b4b4-bfadbf26844b.mp4?alt=media&token=869c4844-9e19-41b0-ab3d-92fec877b1df","id":"17831753-ea55-46b5-b4b4-bfadbf26844b","width":2000,"height":1350,"filename":"attempt-2.mp4","type":"video/mp4","caption":"Final Result","border":false}]}
```

Experimenting with conditional formatting in a node and edge interface

Product Designer

Altana using AI to map and analyze global supply chain with launch of next-gen Atlas

Customs and Border Protection Agents are using Altana's software to track down the precursor chemicals used in fentanyl production in Mexico, to help stop the drug from ever being created.

U.S. Border Patrol is using AI to crack down on fentanyl trafficking

Building a platform for the worlds largest enterprises, government agencies and logistic service providers to explore the global supply chain.

Search & Explore

Designing and implementing the design system that powers interfaces at Altana.

Cargo

Building a large language model-informed assistant that responds to questions posed in plain language.

Voayger

Dabbling with some generative data to test designs at scale

Graph Highlighting

A super simple way to plan your day without overwhelming your calendar.

Time Blocker

A cathartic experiment that encourages people to let go of negative thoughts through  guided breathing.

Negative Thoughts

Can't decide something? Let math.random decide

Coin Flip

An afternoon project, prototyping how might we generate branded, unique avatars for users.

Avatars

A collection of guides that'll get you some smooth, well-balanced coffee to kick back with.

Simple Coffee Guides

A little tool that helps you benchmark a design against Dieter Rams’ ten principles of good design.

Is it good design?

Building a Universal Map of the Global Supply Chain

Senior Product Designer

A design studio for zero to one companies

An agency designing websites and brand identities

Nathan Dorney

Work Experience

Projects

Side Projects

Education

Features

Teams

Contact