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

I’ve been asked a few times how I got into coding, so I thought I’d share the story. This post is a collection of the small, sometimes messy, projects I built while learning. After struggling through countless frontend courses that didn’t quite stick, things slowly started to make sense when I dove into building my ideas.

My journey began in 2020, with bursts of energy and effort sprinkled throughout the years. It’s only now that I feel proficient enough to prototype and commit meaningful code. The journey was long, and honestly, it wasn’t until I started using ChatGPT and Copilot that things really started to click. Having a reliable companion to pair with 24/7 made a huge difference.

Along the way, many colleagues offered their support and guidance, for which I am extremely grateful. It was their help, combined with the ability to learn by building, that truly brought everything together for me. These are all the projects I can share publicly, as there are many other prototypes and projects I worked on at work that I can’t share. But the sentiment is same, just start building.

---

**[Coin Flip](https://coin-flip-options.vercel.app/)** ﻿\
Can't decide something? Let math.random decide.

One evening, my partner and I couldn't decide if we wanted Indian or Mexican food. There are plenty of coin flip apps around, but it felt like a good opportunity to learn validation. I took what I learned and applied it to my simple coffee guides.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2FhmPLUrL7vELMCn4kKi2W%2Fb8a063d3-e1b6-47a6-af7a-cbd35a9cb214.mp4?alt=media&token=6d8142fb-301f-478e-8bf7-2c1000e10b78","id":"b8a063d3-e1b6-47a6-af7a-cbd35a9cb214","width":1624,"height":1056,"filename":"coin-flip.mp4","type":"video/mp4","caption":"The form has validation so it can't be submitted if an option is empty.","border":true}]}
```

---

**[Simple Coffee Guides](http://coffee-recipe.vercel.app/)**\
A collection of guides that'll get you some smooth, well-balanced coffee to kick back with.

I wanted to create a simple website to do simplify making coffee in the morning. No ratios, just enter your cup size and number of servings and get the kettle on. Inspired by [Bread for the Busy](https://breadforthebusy.com/), [Dan Eden](https://daneden.me/) also gave some feedback about wanting to customise the cup size. Which forced me to do some maths with code, rather than the hard coded values I started with.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2FhmPLUrL7vELMCn4kKi2W%2F5ef89c37-6785-4631-a644-d675061cde39.mp4?alt=media&token=55fdf05c-0477-4c81-932a-0460acc3decf","id":"5ef89c37-6785-4631-a644-d675061cde39","width":1818,"height":1864,"filename":"Kapture 2024-09-02 at 10.49.44.mp4","type":"video/mp4","caption":"Customising the cup size and number of servings updates the ingredients and method.","border":true}]}
```

---

[Time Blocker](https://time-blocking.vercel.app/)\
A super simple way to plan your day without overwhelming your calendar.

I have always thought a lot about productivity, and am a big advocate for time blocking. In this project, I learned how to use local storage to save data in the browser.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2FhmPLUrL7vELMCn4kKi2W%2F36a13f57-e1f2-4767-ba9d-b06f9ea3e084.mp4?alt=media&token=e79de131-7a2f-4627-bb52-0382bffe6d9a","id":"36a13f57-e1f2-4767-ba9d-b06f9ea3e084","width":1996,"height":1648,"filename":"time-block.mp4","type":"video/mp4","caption":"Hourly focus time, saved in Local Storage.","border":true}]}
```

---

[Is it good design?](http://isitgood.design/)

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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb4u5tkfpIFTdLgWyReMQhNSHZww2%2FhmPLUrL7vELMCn4kKi2W%2F3c9b1424-2e38-486d-975f-cc63d7a7cfd8.mp4?alt=media&token=5c032345-0803-4c1d-9b42-c5f2f013f4a6","id":"3c9b1424-2e38-486d-975f-cc63d7a7cfd8","width":2268,"height":1820,"filename":"good-design.mp4","type":"video/mp4","caption":"Basic survey, with some maths to give yourself a score","border":true}]}
```

Learning to code with miscellaneous projects

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

Creating a collaborative environment for the worlds largest enterprises to understand their entire supply chain. From Carbon Impact to Forced Labor.

Workspaces

A hackathon project where we re imagined our platform as a connected operating system.

AtlasOS

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 collection of the small, sometimes messy, projects I built while learning to code.

Miscellaneous

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 tool for businesses and governments to interactive with the world’s most comprehensive 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

2024

2023