✚ How I Made That: Network Diagrams of All the Household Types

With visualization, there’s a lot of filtering and aggregation so that it’s easier to see general patterns. But lately I’ve been more curious about what we can see from visualizing everything. So I made network diagrams for 4,708 household types in the United States.

Here’s how I made them using Python and R.

Become a member for access to this — plus tutorials, courses, and guides.

✚ How to Make Alluvial Diagrams

An alluvial diagram is a type of flow chart that is useful to show change over time. You see how individual categories and how the composition of the categories shift.

Incorporate ranking into the mix at each time segment, and you get a good idea of how order changes over time too. The geometry is like a combination of a stacked bar chart and a bump chart.

I made a set of them to show how food consumption changed, based on data from the United States Department of Agriculture. For example, here’s meat and protein consumption from 1970 through 2019:

Each band represents pounds per year per capita over time. See the full set here.

In this tutorial, I describe not only how to make a basic chart, but how you get from raw data all the way through the design process, to clear and readable graphics, and to the finished project.

Because chart generation is the easy part. Everything before and after is what makes the charts better.

Become a member for access to this — plus tutorials, courses, and guides.

✚ Process 123 – Cleaning Up Graphs in Illustration Software

I make most of my static charts in R, but I always bring them into Illustrator for polish, layout, and readability. Here's my process. Read More

Datylon Graph is a visualization extension for Illustrator

Adobe Illustrator has charting functions that can be useful if you’re on a deadline. Make a quick chart, design, and publish. However, if you want to reuse the chart with new data or need to use a more complex chart type, it’s usually been better to use different software and then come back to Illustrator to adjust.

Datylon Graph is an extension that aims to make it easier to stay in Illustrator for your full workflow. It promises reusable charts, collaborative tools, and a growing visualization library.

It currently starts at €7.50 per month with a 14-day free trial. I’m skeptical about working completely in Illustrator, but I’ll have to kick the tires on this soon.

Tags: ,

Members Only: How to Edit R Charts in Adobe Illustrator

A detailed guide for R users who want to polish their charts in the popular graphic design app for readability and aesthetics. Read More

Convert Adobe Illustrator files to HTML and CSS

For the folks who have to make graphics for all devices under the sun, any time that can be saved is worth saving. The Illustrator script ai2html, from New York Times graphics editor Archie Tse, converts Illustrator files to HTML and CSS.

In case you're wondering why:

Text in images and SVGs scale as you scale the image — so your text becomes unreadable pretty quickly as the artwork scales down, or looks hilariously large as it scales up. By rendering the text as html, we can scale the "graphic" up and down, but keep the text readable at the same font-size and line-height. This is important because we are trying to reduce the number of versions of the artwork that we have to create in order to accommodate viewports that range from mobile phones up to giant desktop monitors.

There are plenty of examples of the script in use by NYT.

Saving for later.

Tags: ,