OrigamiFrontend Components & Services

Origami data visualisation#

Posted on by Akaki Mikaia.

TL;DR: Racing bar charts that tell a story of Origami component development over time

It’s Origami’s 10 year anniversary and we wanted to celebrate it with a data visualisation that measures the growth of the project over time. This particular visualisation shows releases over time for the 10 most actively maintained components.

It’s interesting to see quick iteration on existing components over the years, punctuated by big new additions entering the scene. In more recent years watch out for the 2019 major cascade; the impact of losing headcount between 2020-2022; checkout the flurry of activity to support FT Professional’s rebrand recently; and the tail off as we focus our efforts on planing for Origami For Everyone! We’re going to see lots of fast iteration again as those plans translate into new, multi-brand first components 🎉.

Ranking algorithm

This was maybe the funnest and hardest part of building this racing bar chart. The idea is to rank the components based on their popularity in a given time. The popularity is calculated by the number of releases for each component. First we decided what to factor in the ranking algorithm.

Factors

Formula

To rank components we would need to calculate some points based on the vesrion of the component that shoould drive components popularity higher. And use decay to decrease the popularity.

const points = Nj + 0.25Ni + 0.1Np

This forumla considers major releases as very important. While decreasing value of minor and patch release while calculating the points. To reduce this points we can devide it up decay.

const decay = 1 + Math.pow(Tc, 1,8) - Math.pow((Tc - Tr), 2)

After certain days the popularity of the componet shoould start decreasing and reflect teams current interests a little bit better.