Structuring My Path to Custom Components

A step-by-step guide through the process of designing bespoke elements

Screenshots with two matrices intersection on different UI themes

When working with data and data representation in applications that are created for business, often we find that we need custom made charts or visualisations to best represent our data points and specific use cases. In order not to succumb to chaos while doing so — especially when using a new tool or other new technology — I’ve found it helpful to create a working flow.

To better describe the process I will use my latest React component, a matrix intersection, as an example. I am a newbie in React world (only one month into it), so many concepts are still new and fresh to me. But that’s why this example works best for the purpose of this article.

DEFINE YOUR WHYs

for building it: your use case, a description and mandatory features included.

Start with a name, a description and/or a sketch of your component.
Write down a description of why you’re creating this chart, why you’re selecting this particular data to use, and why this component will help your users make an informed decision. If you can’t answer all of these questions yet, keep working in the sketch phase until you have “the best” representation of your responses.

First sketches of the new chart

The starting point for this chart was the use case of a retail company with different size matrices per product. But this can really be applied to any matrix intersection. Include as much information as possible on the documentation page.

DEFINE WHAT

is going to be developed in each release.

1. Use a project management tool (I used github’s) and split your story into features and tasks. The smaller the better! This will help you manage your time and also give you a better sense of progress. Breaking big user stories into small tasks also helps in assessing your knowledge level, making it easier to see what you don’t know, what is missing, or what else can be done.
2. Use as many hashtags and labels as you can or wish so you can analyse that data latter on. (#enhancement #documentation #bug #code-review , etc.)
3. Implement deadlines for each task, either by timeframes or by task dependencies. It will help you assess and measure your newly acquired skill sets.
4. Change priorities if a certain feature requires further technical debt and skill development.
5. Iterate on features and tasks — maybe some of them are no longer needed or their use case has changed.
6. Do releases, even though the “perfect” version is not ready yet.

Simplest project management page.

DEFINE YOUR HOWs

Whether you decide on using a tool like Tableau, or libraries like seaborn, D3, or simple heatmaps for your use cases, your tool needs to integrate with the existing applications in the company. Choose your framework, programming language, and all dependencies needed. Assess your knowledge and decide on best approach.

Example :
1. This is a new React chart type with enhanced user interaction.
or
2. We need a particular library to use for tooltips data, etc.

Usually all dependencies are included in a package file.

START YOUR IMPLEMENTATION

… and minimize all the unplanned work

Begin with a github (gitlab, etc.) repository and as much as possible keep it in sync with your tasks from your project management tool.

• Github repository for matrix intersection.
• Create a list (page) with issues (bugs, exceptions ) you will most definitely find some in your development phase, decide when to tackle those and if they need more clarity, iterate if needed on the sketch and analysis phase.
• Create a list of Features to be developed.
• and a Documentation page.

1. Search for helpful resources, talk to other developers, be part of online communities that can provide feedback and support.
   Look for inspiration and templates on structuring your code. Try to find resources that will make your chart stand out and easy to replicate. Seek feedback and guidance from colleagues and other external developers.
2. Expect the unexpected You might encounter new requests from business users, a drop off of the project, or different constraints that you need to tackle before your deadline. You never know what’s coming, but try to remain flexible and prepared to deviate from the plan.
3. Technical debt and skill development
   In the development phase, include tasks for technical debt and learning tutorials — especially if you are a newbie in the field. I found that a time constraint is helpful after a certain “mastery” of the subject is obtained.

In my matrix example, I started implementation without considering a legend for the chart. After some thought I concluded that actually a legend is a mini-project by itself. I had to think about what I need to include, whether to show the colour of the intersection or not, what position I wanted the legend to be displayed, whether I wanted a title or not, where the custom settings for the legend were stored, etc.

After implementing the legend I found this Nightingale article summarizing a data visualisation panel with Nadieh Bremer, Jill Hubley and Shirley Wu. In it Nadieh discusses her data visualisations and I learned that she actually starts them with … the legend, which is a small representation of her viz. Per authors Katherine Mello and Ripley Cleghorn, Nadieh “…remarked that she takes a different approach; she generally tries to tackle other design aspects of the visualization, like the legend, and says that that usually helps her realize what is missing from the piece.

TEST AND GET FEEDBACK

… and iterate.

1. Test your chart with multiple datasets and edge use cases.
2. If your chart has user interaction, even though I am not a big fan of modifying source datasets with user aleatory decisions, if business asks for it make sure it is versioned and tracked.
3. Get feedback from your end users and from people that are not familiar with your use cases.
4. Make it replicable and easy to implement by other developers with fewer technical skills.
5. Iterate, do code review, and refactor.

A good visualisation is one that is easily read and understood, and checks all boxes (or most of them) from your business users.

Tips and tricks

In my search for templates, other examples or how to better structure my code I found Dave’s articles very helpful for my start.

In design, grouping elements to apply mutual transformations is a must, I found below articles a good start for doing this. Also, if you have the user in mind — may it be another developer or a business user — think about creating custom UI themes for your component.
Thinking with joins in D3 and DOM
Group your elements

SHARE YOUR CHART!

The simplest way you can help other developers with the same business use cases is by sharing your knowledge and (if possible) your code for the component.

You can find matrix intersection code here, and live version here.

There is also a page for issues, features and documentation, feel free to contribute!

Credit also goes to Data Visualisation Society, for all the insightful discussions!