Image for post
Image for post

A random sentence generator that tells you what not to be and how to fix it.

Some results so far:

Don’t be a banjo make a centimeter with a yard in it and leave a fifth up its apparatus.

Don’t be a punch put a sailor and balance a soap on its bumper.

Don’t be a belt become a home and do a chive down its computer.

Don’t be a tuna take away the treatment on it and balance a parrot in its barometer.

Choose your interface with the project — we have either:

And it’s all hosted with Now which meant all these things were built and deployed to production in one evening 👌

Razzle, Now, React, sentencer, random-fullName are awesome.


A new module was just released in the Potion library for generating color palettes for data visualization that automatically look good with any number of nodes.

It is difficult to find good examples of large color palettes or even good advice as to how to go about creating your own color palettes online. The vast majority of palettes have a maximum of 5 colors and when creating bigger palettes the general consensus is that you should pay attention to several factors and use your best judgement — good luck.

A common result is that when creating a large palette you tend to just pick a random set of colors and hope that they look well together when displayed together in the visualization. For some people this is an easier task than others. I, for one, struggle to match colors well together and so I wondered whether there was an easier, more automatic way to tackle the problem. …


Last week I was lucky to be interviewed by Sev from the Dataviz Catalogue who asked me about my work and future plans. I spoke about Potion.js — my React + D3 graphics library and color utilities that works on the web and in React Native — as well as the Number Picture project and how it aims to enrich our visual vocabulary by discovering all charts in existence among other things.

Let me know what you think about it!

Heres a breakdown of the topics:

Introduction — 00:00
What got you into dataviz — 01:47
Moving to Sofia, Bulgaria — 03:55
JS Charting Library Potion.js — 11:15
Number Picture — 18:25
450+ charts discovered and book — 22:00
Why to focus on visual variables — 31:00
Chart fatigue — 32:25
Universal chatting principles? — 34:55
Future plans — 37:24

Image for post
Image for post


Image for post
Image for post
Potion — React Native Screenshot

Potion — Low-level building blocks for constructing animated visualizations with React & D3 — now supports React Native out of the box.

With minimal configuration you are able to render SVG visualizations in React Native without changing any logic or component structures.

Read the integration guide here and happy coding.


Image for post
Image for post

I was invited last month to the React Amsterdam meetup to speak about my experience integrating React with D3. Over the past decade I’ve been visualizing data in various ways and recently I started to experiment with ways to do it with React. This article will take you through all the various approaches I tried and in the end show you the best way that I have found to combine React with D3.

TLDR: scroll to the bottom to see the best approach for animating D3 with React that enables animation, decoupling of chart elements and is elegant and performant.

As part of the Number Picture project I discovered and invented more than 450 different chart types with up to three visual variables each. …


I spend a lot of time thinking about charts. One thing I’ve realized is that charts can be logically separated into parts. This enables you to decouple the elements of visualizations and compose varying charts from their atomic parts.

Elegant design requires us to think about a theory of graphics, not charts. — Leland Wilkinson, The Grammar of Graphics,

There are 3 logical parts that I think charts can be separated into. Nodes, Layouts and Extras.

Nodes are the actual shapes and elements that get rendered to the screen/paper. Think circles, rectangles, groups and lines.

Layouts refer to the components that map abstract data to visual variables. Given an input data structure that are able to transform it and add meaningful metadata that can map the data to the visual realm. Think pie, tree, stack…


I make a lot of SVG charts. I’m trying to make more than 450 charts as part of my project Number Picture. I often ask myself why am I doing this — but that is a discussion for another day…

Quite often in charts you need to perform SVG transformations on elements. For example you might need to translate a shape from one position to another, or rotate an element. There are others as well: scale, matrix, skewX, skewY.

Sometimes, you might need to perform complex transformations on elements — ie more than one. …


We have added 2 new features to the Potion library — React components for declaratively composing animated, interactive visualizations — patterns and gradients.

Shapes can now be declaratively filled with many patterns using the textures.js library and gradients from uiGradients.

Image for post
Image for post

With some exciting new developments on the NumberPicture.js project we have decided to give it a new name: Potion.

We refactored the library out into several submodules: @potion/element for shapes and elements, @potion/layout for visualization layouts, @potion/extra for extras like patterns, gradients and axes and @potion/util for utility functions used when constructing visualizations.

You can find the new docs at: http://numberpicture.com/build


Quite often I find myself needing to check whether a variable is neither null nor undefined. I see a lot of people doing it in the following way:

if (myVar) {
// myVar is not null or undefined
}

However, you could theoretically get a false negative doing it this way because myVar could be equal to false or 0.

I do these checks in the following way:

if (typeof myVar !== 'undefined' && myVar!== null) {
// myVar is not null or undefined
}

Which is quite verbose. So I abstracted it out into an npm module called its-set. …

About

Number Picture

Explore the world of charts & graphs. Build your own. http://numberpicture.com — thoughts by Finn Fitzsimons — https://potion.js.org/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store