iiinova — where your digital self keeps evolving

Joey Cherdarchuk - Obumbratta @obumbratta.com · 28/09/2026

This chart for instance. I'm almost certain this was just placeholder data that they forgot to replace. If the text above it is to be believed "Learning new tools" is 79% and "too much effort on non-viz activity" is 20%. What's the hierarchy even represent? Why does everything look the same size?

A colourful treemap where every 1st level of the hierarchy is roughly the same size. There is no way to tell what the second level of the hierarchy means. It does not appear to have any relation to any real data.

120

Joey Cherdarchuk - Obumbratta @obumbratta.com · 22/09/2026

Built a visualization for @yalehealthlab.bsky.social to support the release of their paper examining the rising cost health premiums. premiums.healthcareaffordabilitylab.org

2102

Joey Cherdarchuk - Obumbratta @obumbratta.com · 09/07/2026

Curious about the makeup of the US Supreme Court? Here's a look at it's history usafacts.org/articles/the...

000

Joey Cherdarchuk - Obumbratta @obumbratta.com · 19/06/2026

A look a midterm election voting patterns for @usafacts.org usafacts.org/articles/who...

010

Joey Cherdarchuk - Obumbratta @obumbratta.com · 06/06/2026

It handles diverging scales automatically. Just put three colours in and make sure the lightest (or darkest) is in the middle .

Screenshot of colour tool with three colours as input (dark magenta, light yellow, dark blue) and an interpolation between those colours with 11 colours going from magenta through orange to light yellow then through green to dark blue

030

Joey Cherdarchuk - Obumbratta @obumbratta.com · 06/06/2026

10 or 15 years ago I built something for water quality data. It shows median when zoomed out and all the tests clustered when zoomed in. Hovering over any point gives you the line chart for the site. aephin.alberta.ca/water/water-...

Total dissolved solids map with cluster of colored dots at each of the testing sites.

010

Joey Cherdarchuk - Obumbratta @obumbratta.com · 19/03/2026

One of the fun parts of my job is working with @amberthomas.bsky.social to make visuals for USAFacts. Here are two I've recently worked on usafacts.org/articles/con... usafacts.org/articles/how... I'm on the lookout for new projects if you want to create a visualization or interactive data tool

A visual featuring calendars for the house and senate coloured to represent the length of a session on that day.

Title: Explore daily time in session for the House and Senate from 2016 to March 2026.

Subtitle :Net time in session by first day of the session

Selected year is 2025

Annotated text:

Feb 5 marked the Senate’s longest 2025 session, as Democrats held the floor overnight over Russell Vought’s OMB nomination

Both the House and Senate typically break over August. During election years they break over October as well.

The government shutdown lasted from Oct 1 to Nov 12. The House held only brief sessions during this time while the Senate met regularly

A visual featuring ribbons representing how long different groups spend in the different phases of the citizenship process

Title: Spouses of US citizens can become citizens themselves decades before siblings receive green cards

Subtitle: Time to citizenship by applicant’s country of citizenship and relationship to a US citizen, FY 2025

Steps shown:

File petition: US citizen applies to sponsor
Visa wait: Wait until a visa slot opens
Apply for residency:Apply for a green card
Resident: Green card approved; now a resident
Apply for citizenship: Apply to become a US citizen
Citizenship: Take oath; become a US citizen

Note: Timelines reflect the length of each step under FY 2025 conditions. Wait times are historical, not predictive, and shown sequentially for clarity. Immediate relatives include parents and children younger than 21. Citizens from countries highlighted separately experience longer waits due to the per-country visa cap. “Apply for residency” processing times reflect adjusting status in the US; comparable data for consular processing are not published.

Source: US Citizenship and Immigration Services & 2 more

010

Joey Cherdarchuk - Obumbratta @obumbratta.com · 27/02/2026

This collection of free and useful tools is so wonderful tools.rmv.fyi

Illustration of an individual wearing glasses comfortably leaning back on a cushion. Text reads: DELPHI TOOL. simple handmade conveniences. A collection of small, low stakes and low effort tools. No logins, no registration, no data collection. I can't believe I have to say that. Long live the handmade web.

083

Joey Cherdarchuk - Obumbratta @obumbratta.com · 21/01/2026

Each month I receive this email from TransUnion and each month I have to struggle to determine if everything is okay. Intentional information design can make it better. #unsolicitedRedesign

Before and after redesign of a credit monitoring email showing how intentional information design can make it easier for the reader to understand, with specific annotations describing the changes.

030

Joey Cherdarchuk - Obumbratta @obumbratta.com · 21/01/2026

Annotating points of interest can provide crucial context and meaning, bringing the story of your chart alive to viewers. #VizTips

The same two line charts showing City of Edmonton water usage during the 2010 Winter Olympic men’s gold medal hockey game. Each compares water usage with the previous day’s. The second however, annotates the chart showing how the peaks in water usage coincide with the ends of periods and thw valleys coincide with period starts and Canada’s winning goal along with the medal ceremony.

180

Joey Cherdarchuk - Obumbratta @obumbratta.com · 21/01/2026

It is fine to start your line chart axes at something other than zero, especially when small variations are important. You can give hints that your axis doesn’t start at zero by placing additional space below the data, removing the baseline, and/or adding a broken axis symbol. #VizTips

The same two line charts showing a facetious data set of butternut squash data which hovers around 210K from 2018 to 2022 then sees a drop from 2023 to 2024 down to around 130K then returning to previous levels. The second chart gives viewers hints that the axis doesn’t start at zero by placing additional space below the data, removing the baseline, and adding a broken axis symbol to the y-axis.

120

Joey Cherdarchuk - Obumbratta @obumbratta.com · 21/01/2026

Using dots instead of bars can reduce the heaviness of a chart with many items. #VizTips

Before and after visuals of data using a bar chart to compare 70+ values vs using a dot plot to compare those same visuals.

120

Joey Cherdarchuk - Obumbratta @obumbratta.com · 21/01/2026

Stacked charts can obscure patterns in data. Only the first series and total afford easy interpretation. Unless those two are more important than the rest, consider breaking things up into multiple smaller charts to understand both proportions and patterns for each of your series. #VizTips

A stacked area chart of viking revenue streams vs six separate area charts and a stacked bar chart of the same data. Patterns hidden in the stacked area chart are more easilly seen in the smaller area charts

120

Joey Cherdarchuk - Obumbratta @obumbratta.com · 21/01/2026

Horizontal bar charts provide room for longer titles and keep your audience from having to tilt their heads. #VizTips

A vertical bar chart next to a horizontal bar chart. Both show the same set of data (McDonalds Burger Calorie Counts), but the horizontal chart’s bar labels are easier to read because the text reads left to right like normal, rather than each one tilted a ta 45 degree angle like in the the veritical bar chart.

160

Joey Cherdarchuk - Obumbratta @obumbratta.com · 21/01/2026

Your map’s legend can be turned into a histogram, helping your audience understand the distribution in addition to decoding the colours. #VizTips

Two maps of US unemployment rates by county. They are identical except that the legend in the second has been converted into a histogram.

1131

Joey Cherdarchuk - Obumbratta @obumbratta.com · 21/01/2026

Direct labeling makes it easier to quickly interpret the visuals, allowing the viewer to find the information they need right where they need it. #VizTips

Two charts showing population over time for 3 age groups (0.24, 25-64, 65+). The first uses a legend to show what the lines mean while the second puts the labels directly on the lines

150

Joey Cherdarchuk - Obumbratta @obumbratta.com · 21/01/2026

Maps are for context. Simplified, desaturated maps pushed to the background allow your data points to pop. #VizTips

two maps, side by side, showing the same 3 locations near the Edmonton river valley. The first map has full colour satelite imagery in the background which makes the locations harder to locate and distinguish. The second has a desaturated simplified base map in the background making the locations much easier to distinguish from the background.

140

Joey Cherdarchuk - Obumbratta @obumbratta.com · 21/01/2026

Sorting by the data values instead of alphabetically creates a cleaner chart and makes rankings immediately apparent. #VizTips

An image showing two bar charts of Automobile Units Sold in 2019 by automaker. The left image sorts automakers alphabetically while the right sorts the automakers by the number of units sold.

140

Joey Cherdarchuk - Obumbratta @obumbratta.com · 21/01/2026

A thread with all my data visualization tips and redesigns. Mainly for my own convenience.

two images of a man’s back. the first, labelled ‘before’, is very hairy. The second, labelled ‘After’, is not hairy.

2252

Joey Cherdarchuk - Obumbratta @obumbratta.com · 08/01/2026

Thanks to chroma.js it looks like the answer to the first question is yes

A screenshot of the color tool showing oklch inputs of colour that look blue and pink and the resulting interpolation between them

130

Joey Cherdarchuk - Obumbratta @obumbratta.com · 07/01/2026

And sample UI gives you a dynamic chart and some generic app ui examples.

151

Joey Cherdarchuk - Obumbratta @obumbratta.com · 07/01/2026

Sample visuals lets you see your colours in data viz action.

A screenshot of the tool with 'sample visuals' selected. Four charts show at the bottom, a chorpleth map, an area chart, a chord diagram, and a stacked bar, each using the resulting colour palette.

150

Joey Cherdarchuk - Obumbratta @obumbratta.com · 07/01/2026

Contrast ratios give you contast for each colour against white, your lightest colour, your darkest colour, and black, letting you know which combinations don't pass WCAG guidelines. Clicking on any one will take you to my favourite two-colour contrast ratio tool with those colours pre-input.

A screenshot of the tool with 'contrast ratios' button selected. Below the larger colour swatches are four rows of smaller swatches showing contrast ratios against white, the lightest colour, the darkest colour, and black. Three icons show next to the ratio.
A circle with a check - above 4.5, good
A diamond with an asterisk - above 3, good for headlines and icons but not body text
A warning triang - below 3, fails accesibility standards

290

Joey Cherdarchuk - Obumbratta @obumbratta.com · 07/01/2026

Colour blindness does its best to simulate the deficiencies. Warnings pop up on the items where the colours are "significantly" less discernible than they are in the non-colourblind set, but beware the thresholds are kind of arbitrary, so use your best judgement.

A screenshot of the colour tool showing a red, yellow, and green as input. The output shows the interpolated colours bigger in the top row, then three smaller rows below simulating deutan, protan, and tritan forms of colour blindness. Warning triangles show on some of the colour that are particularly concerning as being too similar

120

Joey Cherdarchuk - Obumbratta @obumbratta.com · 07/01/2026

In addition to perceptual lightness there are a few other things you can view. The most ambitious (and experimental) of which is the colour plot.

340

Joey Cherdarchuk - Obumbratta @obumbratta.com · 07/01/2026

You can drag the input swatches around to reorder them. Or click on them to adjust their colours in a colour picker, or quickly delete one.

140

Joey Cherdarchuk - Obumbratta @obumbratta.com · 07/01/2026

I imagine you'll find a lot that it doesn't handle, but it should manage comma or space delimiting (but not both at once), with or without quotes and #'s and even full CSS vars.

140

Joey Cherdarchuk - Obumbratta @obumbratta.com · 07/01/2026

If you give it just one colour, it'll give you a tailwind style set of colours to fill the selected number of colours. It defaults to 11 colours which I find is perfect. Swapping colour spaces will change them slightly.

image of the colour tool with 'dodgerblue' as the only input. The output shows 11 colour swatches all different shades of blue from light to dark

140

Joey Cherdarchuk - Obumbratta @obumbratta.com · 07/01/2026

Like it's inspiration, it will interpolate between any number of colours, the main difference being you can now choose your colour space rather than always using LAB. This gives you some options to choose from and can steer you around some of the desaturated colours you might get in one space.

150

Joey Cherdarchuk - Obumbratta @obumbratta.com · 07/01/2026

New Year, New Colour Tool for you data visualizers and maybe the odd designer obumbratta.com/colour

826264

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

The list is by no means exhaustive, HOPs, horizon charts and I'm sure other charts can be and have been used to show distributions. But attached is a handy one pager to summarize all the methods discussed here

Plotting distributions. 16 different ways to visualize one data set.

1101

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Quantile Plot These can feel less cluttered than ranked bars, but can be harder to highlight a single data point. You usually plot each of the 100 percentiles rather than plotting every point in your data. Great for answering "what percent of my values are below/above a certain threshold?"

100

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

OECD Better Life Index by @moritzstefaner.bsky.social, @do.minik.us & Raureif (current tool not working so here is Moritz's post) truth-and-beauty.net/projects/oec... Darkhorse Analytics on Alberta school grades grades.dha.io Density Design ranks cesarean sections www.flickr.com/photos/densi...

OECD Better Life Index Ranked Bars for country comparisons across a number of indicators

W.H.O.'s caesarean section ranking by country

120

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Ranked Bars Great to communicate a single distribution while highlighting a particular data point. People love to rank things so it’s easy to interpret. It behaves in almost the opposite manner to a histogram in that flat areas represent clusters of data whereas with a histogram it is the peaks.

110

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

We are back to plotting all the data, but this time we use one axis to plot the values and another to plot the ranking. This gives a different perspective on the shape of the data. These are excellent at providing context for where one data point fits in among many. Not great for comparing >1 dist.

110

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Seth Kadish visualizes charity ratings vizual-statistix.tumblr.com/post/1207793... I rework social media demographics www.darkhorseanalytics.com/blog/divergi... (I've since learned to have better contrast)

Charity Navigator ratings: 4,3,2,1,0 stars and donor advisory ratings for different charity categories.

Social media platforms, gender, age, education, and income breakdowns.

110

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Stacked Bar This plot involves a change in perspective. It has a much smaller number of bins and shows the proportion of the data that fits in each. It will provide a very coarse look at the shape of the data but is quite easy to interpret. It is most effective with a small number of categories.

110

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

FiveThirtyEight with a story on name based age estimates fivethirtyeight.com/features/how... @flowingdata.com plots 10th, Median, & 90th percentiles of salaries across industries projects.flowingdata.com/2014/industry/ Flourish looks at the ages of olympians flourish.studio/blog/visuali...

Median ages for females with the 25 most common names among Americans estimated to be alive as of Jan 1, 2014. Emily skews young, while Dorthy much older

Portion of interactive chart showing salary ranges for four industries

From 12 to 72: Ages of Olympians since 1896

110

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Range Plot The ends of the line (usually) show the min and max of your data and the dot shows the average, or really any three metrics you find most useful. If the range of the data is the most important thing or your audience my struggle to interpret the other plots, this is nice and simple.

110

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

FiveThirtyEight looks at the Red Sox roller coaster fivethirtyeight.com/features/the... Washington Post - Ivy League Grad Income www.washingtonpost.com/news/wonk/wp... Marcus Beck analyzes dissertation & thesis lengths beckmw.wordpress.com/2014/07/15/a...

Red Sox Actual vs. projected number of wins 1999-2014

Ivy League educations pay off. Actual earnings distributions, 10 years after starting school. Ivy League distribution is significantly higher than All schools distribution

Summary of page lengths of masters theses by major, sorted and color-coded by median. Boxes represent the median, 25th and 75th percentiles, 1.5 times the interquartile range as whiskers, and outliers beyond the whiskers. Number of records for each major are in parentheses.

120

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Box Plot Box Plots focus on the min, 25th percentile, median, 75th percentile and max. Many will explicitly plot outliers and exclude them from the min-max

110

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

You can also simplify the distribution by focusing on a few key aspects of the data, usually some measure of central tendency plus some measure of range. The following visuals give less detail but may make comparisons simpler.

110

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Nick Berry analyzes 4-digit PINs www.datagenetics.com/blog/septemb... Seth Kadish shows chess board utilization vizual-statistix.tumblr.com/post/7882178... Matt Styles looks at the distribution of birthdays www.themarginalian.org/2013/10/08/b...

4-digit pin number combinations heatmap, columns are the first two digits, rows are the next two digits.

Utilization of chess board squares by Chess Masters

Which birth dates are most common? July, Aug, Sep births are most common, along with some spikes after Christmas and dips on the 4th and 5th of July.

120

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Heatmaps Heatmaps are extremely compact and excellent for looking for patterns across many distributions. They use variation in colour to show the counts and, as such, they are not very precise, only giving a crude sense of the data’s shape

110

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Japanese train departures en.wikipedia.org/wiki/Stem-an...

110

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Stem & Leaf Plot So awesome, so rare. It’s a sideways histogram, but with all the data encoded in it. Once you know how to read it, it is quite powerful, but possibly too much information for many audiences.

151

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Periscopic looking at grant distributions medium.com/@Periscopic/... @experimental361.com shows Premier League age profiles. The page for this visual seems to have disappeared CJ Mayes compare life expectancy over time and continents cj-mayes.com/2022/05/24/v...

Comparing the grant dollar distributions of Old, Special Projects, Performing Arts, Environment, Education, and some other unnamed categories of grants.

Squad age profiles: Premier League, 21 May 2017

Violin Plot comparison of life expectancy on the different continents. Africa's life expectancy has shifted up significantly between 1997 and 2020

110

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Bean / Violin Plot Like the area chart except symmetrical and often more compressed. Useful when comparing >1 distributions where a sense of the shape is important. Sometimes superimposed with: a box plot that makes them look like a violin, or a rug plot that makes them look nothing like a bean

100

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

OkCupid exposes lies about height among other things theblog.okcupid.com/the-big-lies... The Financial Times compares the time of day distribution of devices browsing their site aboutus.ft.com/press_releas... D3 visualizing some pulsar data à la Joy Division observablehq.com/@d3/psr-b191...

Comparison of the average Male height distribution in the US vs reported heights on OKCupid. People are about two inches shorter than they say they are.

Comparison of Desktop, Tablet, and Smartphone browsing times on the FT site in 2011. Smartphone and tablet browsing are more common in the early morning and late at night. Desktop more common in the day.

Visualization of pulsar data. Honestly I don't understand it well enough to even begin to explain what it is showing.

120

Joey Cherdarchuk - Obumbratta @obumbratta.com · 16/07/2025

Line Chart Like the area chart but not filled under the line. Line charts can be useful when you want to accurately compare a few distributions to one another.

110