Visualization Resources

A collection of tools, plugins and pages that help me create data visualizations

This page combines several of my most often used visualization resources (besides stackoverflow). They fall into several categories such as plugins, web apps, tools and sites that showcase other people’s work. There are also two lists that function more as inspiration on Explorable Explanations and Storytelling with Data

This list of far from complete, but merely represents where I often find myself on the web during a project. If you have any good links / advice to add to anything to the lists on this page, please let me know in the comments and I’ll check it out!

Icon explanations


Added bonus if you’re a D3.js user


You might need a subscription to view all content / courses

Collections & Catalogues

The two lists below are both about collections and catalogues. The first is a set of websites that regularly post about unique and beautiful data visualization projects done by others. I wasn’t quite sure how to call them, the best thing I came up with was “showcasers”. The other lists collections, galleries or catalogues of data visualizations, tools and programs. The examples on these lists can either help during the creation of a data visualization or provide inspiration

View data visualization showcasers
  • Visualizing Data

    I love it when Andy Kirk appears on the Data Stories episodes (amazing accent). He owns a great website on which he posts interesting visualization projects. But there’s a lot more, such as visualization resources and a monthly digest of the best on data visualization

  • Dashing D3.js Newsletter (and archive) ♦

    Every week/month several very interesting articles on both Data Visualization in general and D3.js are gathered in this newsletter / collection. There are already more than 100 newsletters you can browse and each newsletter has some real gems in terms of tools, plugins and short tutorials

  • The Kantar Information is Beautiful Awards

    Besides the wonderful yearly awards and challenges they also post about really wonderful projects. I feel these are a bit more aimed towards infographics and very unique pieces

  • Visualoop.org

    I don’t know how they keep on finding all of the entries in their collections, but I feel that they post visualization related collections almost daily. They are aimed more towards infographics and visualizations that you can find in scientifically aimed magazines I think. However, they also post more than often enough about data visualization: collections, interviews, guest blogs and more

  • Flowing Data

    Probably the most well know site on this list and I’m guessing everybody reading this will know it. Besides visualization projects it also has tutorials (and a membership section with even more tutorials)

View data visualization catalogues
  • Visualising Data Resources

    An exceptionally big list of all kinds of data visualization tools or websites that function as tools. It has a useful category filtering option at the top

  • datavisualization.ch

    This one has been around for some time I believe, not sure if it’s still being updated. It is similar to the Visualising Data Resources list above, but with less entries. Although the ones in here are really good ones a long list

  • Data journalism collection

    A collection of interactive graphic works of the Guardian and the New York Times. Not all their works are collected here and it hasn’t seen any new entries since December 2014. Nonetheless, a very nice list of examples. Also with useful filters

  • D3 galleries ♦

    There are several D3 galleries out there. Also not hard to find if you Google on D3 gallery, but just for completeness here are a few big ones

    • blockbuilder.org: One of my favorite places to go to. It’s both a searchable collection of almost all the blocks out there, but you can also start coding and adjusting or forking any block to experiment with yourself
    • D3 gallery: The “official” gallery on Mike Bostock’s GitHub. A very nice list. I love the small thumbnails which make browser very quick
    • Christophe Viau’s gallery: A list of almost 2500 examples with thumbnails and filtering options. A goldmine of the fabulous and crazy things that are possible with D3.js

Color

I find color to be one of the most difficult aspects/settings/design choices to set on a project. It can mean all the difference and it can take me quite some time before I settle on a final palette. That’s why I created a whole section just for colors. I’ve broadly sorted the color resources to groups of similar or connected sites and in the order of what I use most

View color resources
  • Grey shades

    A collection of about 100 different shades of grey between black and white in hexadecimal color codes. I think this is the color page I visit most consistently, and very often actually. I don’t think I ever use black. I read somewhere that nothing in nature is truly black so it’s better to use dark shades of grey in designs

  • Colorbrewer

    I don’t think this needs any introduction since it’s on every color list

  • Chroma.js Color Scale Helper ♦

    An amazing page / tool to create well balanced color schemes or “mastering multi-hued, multi-stops color scales” according to the creator Gregor Aisch. You do need to know what hues you want to step between. Don’t forget to also check the diverging version of the site and the brilliant explanation of the motivations behind the calculations in his blog Mastering Multi-hued Color Scales and How To Avoid Equidistant HSV Colors

  • Colorpicker for data

    An easy tool built on top off the Chroma.js tool described above which lets you try search color spaces in search for good color schemes. As an added bonus it lets you see the chosen color scheme on a choropleth map with just one click (and in this tool you do not need to supply hues which is needed for the Chroma.js page). It’s difficult to create an ugly scheme with this tool

  • Color Blender

    A simple site that let’s you blend from one color to any another in how many steps you might like

  • Lch and Lab colour and gradient picker

    This is a colour picker and gradient creation tool that uses a variety of colour spaces for choosing and interpolating gradients. The most exotic of these are Lab and Lch, which are perceptually uniform colour spaces that are designed to match the human eye’s nonlinear response to colour input

  • The d3.interpolate plugin ♦

    That sort of naturally brings me to a specific and very useful D3 plugin (that is connected to the above two links through this article by Gregor Aisch) that easily calculates a “perceptually-motivated color interpolation” between two colors. So you only have to supply the minimum and maximum of the domain and the start and end color and let the interpolation do the rest.

var color = d3.scale.linear()
		.domain([min, max])
		.range(["#FDFFCB", "#232942"])
		.interpolate(d3.interpolateHcl);

Resulting color scheme

  • Color shades and tints
    • Colllor: I often use this really simple looking page. Useful functionality that if you click on a color the hex code is copied to your clipboard
    • Colorhexa: Basically the first hit on Google when you search for a specific hex color. It offers several other useful comparisons, not just shades
    • 0to255: Really simple page that gives you all shades between white, your chosen color and black. Also copies the color hex code on a click
  • Color scheme inspirations
    • Adobe Color: Browse the most popular set of 5 color schemes or search for tags. You can tweak any scheme that you like
    • Colour Lovers: Many different 5 color schemes and also the option to search for tags
    • • Color Hunt: The same idea as above, but all palettes have 4 colors. There are beautiful palettes in here, but I wish you could search for tags
    • Coolors: Quickly switch between color schemes and fix certain colors while the rest keep on changing
  • Subtleties of Color

    A really good series of small blogs about the best practices of color by Robert Simmon. Using many beautiful and clear examples (and some using a non-effective color palette) and his experience this quickly explains several of the most important rules to follow in good color use

  • Color Theory

    I came across this site about color theory some time ago. I haven’t actually read a whole lot of it yet, started with the “Color theory (concepts)”, but it seems very extensive with many examples. I do wish the text was written in wider format for easier reading (and the page seems endless now)

Typography

Although sometimes forgotten, good use of typography can really be the icing on the charting cake. You can find all sites I’ve come across that might help you pick out good font combinations or learn about type below

View typography resources
  • Typography made easy

    Select a starting font and see a collection of fonts that work well with it. Doesn’t have a huge collection of fonts but the most important ones are there

  • Type anything

    Easily set up the font styles of your h1, h2, h3 & p and then generate the css for it

  • 50 Design Terms Explained Simply For Non-Designers

    Explained in just a few sentences and with handy images to show what their talking about when they say things like kerning, leading and tracking

  • Typesource

    Another website that suggests good font combinations, this one focuses on Google’s web fonts and shows how these might look when used in a Graphic Design piece

  • Typography handbook

    An online “book” of sorts that concisely explains the best practices of typography on the web

  • Speedball lettering (1957)

    A wonderful and old book on lettering. I’d suggest mainly going here for inspiration :)

Useful charting tools, apps & plugins

If you’re not looking for custom made, the charting tools in the lists below can create beautiful and elegant charts for you with no or minimal coding. Also, some other apps or tools that I find very handy while creating visualizations and that are not on the usual lists

View D3.js based charting tools or plugins
  • RAW ♦

    You can’t really get any less coding than this web based app. With it you can easily create custom vector-based visualizations through a simple interface. The data is not uploaded to any server, only processed by your web browser. One downside I think is the fact that you can only download a PNG or SVG, not the D3 code itself to make some final tweaks

  • MetricsGraphics.js ♦

    Such a beautiful charting tool. Especially the interactivity of rollovers and connected charts. Not sure how much you can still alter to a chart, but if you need beautiful, useful and simple line charts really quickly, these would be perfect

  • Crossfilter & dc.js ♦

    Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. It supports extremely fast interaction with coordinated views, even with datasets containing a million or more records. And it works very well with D3.js charts on top, just look at the examples. dc.js is a javascript charting library with native crossfilter support and allowing highly efficient exploration on large multidimensional dataset

  • Function plot ♦

    Function Plot is a plotting library built on top of D3.js used to render functions with little configuration. The library currently supports interactive line charts and scatterplots, whenever the graph scale is modified the function is evaluated again with the new bounds

  • d3.legend ♦

    A useful d3 plugin that creates legends for you in kinds of shapes and sizes and a lot of options to style it to your wishes

  • d3.annotation ♦

    An extremely useful plugin that makes it super easy to create annotations for your data visualizations

  • D3 Deconstructor ♦

    A Google Chrome extension for extracting data from D3.js visualizations. Really easy to use (if you have Chrome) and very handy if you want to get your hands on the data of another D3 plot

  • D3 Awesome ♦

    A list of interesting D3js libraries, plugins and utilities

View other charting tools, apps or plugins
  • SVG Crowbar 2

    A Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file. I use this a lot actually to create static images / thumbnails in Illustrator to accompany my web browser based projects. Developed by the NY Times. PS use the newer SVG Crowbar 2 which saves more styles in the SVG

  • SVG2D3 ♦

    A really useful web application that turns an SVG into D3.js code

  • Intro.js

    A JavaScript library that you can use to introduce the viewer to your page, explain the different elements in several steps. You can see an example of intro.js in use on the Urban Layers page (which is an amazing visualization, worth a look even if you’re not interested in Intro.js). I haven’t actually used this library yet, but when a good opportunity presents itself, I definitely will

  • Vector Polygonal Backgrounds

    A tool and tutorial in one. This tool let’s you create polygonal backgrounds based on an image, so you only have to find an image with a nice color palette. You have a lot of freedom to define where the vertices should lie. You can save the final polygonal shape as SVG and import into Illustrator for further use. I’ve used it a few times now and like the ease and nice results. There is also another web app that does the same thing, but with a few small changes: Kubist

  • Trianglify

    Create gorgeous backgrounds of low-poly generated gradients. Not sure if I’ll ever really use it, but it looks amazing

  • SVG to PNG converter

    Since everything you make with d3.js is an SVG this little webapp is super handy for when I quickly want to turn an SVG into an image (without the need of Illustrator). I first convert my d3.js visual to an SVG with SVG Crowbar 2 and then drop it here.

  • Classy name generator

    Because sometimes you just need some dummy (but classy) names in your data. For more fantastical names you can also trie Noemata’s random name generator

  • ai2html

    For those who prefer to work in Illustrator (or take their rough d3.js work into Illustrator to add some pizzazz and then want it to go back on the web), you can use this handy open-source script for Adobe Illustrator that converts your Illustrator documents into html and css

Scrollers

I feel like Scrollers are being used more and more to tell a story through (interactive) data visualization. I still haven’t made one, but I hope to very soon because I love them!

View Scroller tutorials

Explorable explanations

I’m so enthusiastic about Explorable Explanations since reading about them in Maarten Lambrechts’ post that I wanted to give these a separate section. There not really resources, but just amazing uses of visualization (usually) and interactivity. Most of the links below are in Maarten Lambrecht’s post, but I’ll continue to add new examples that I come across

View Explorable Explanation examples
  • Explorable explanation

    The first example, Reactive Documents, actually doesn’t use any visualization at all, but playing around with all the sliders and options to make the text in the end portion change and trying to find all the different types of texts that would appear just made me giddy

  • Visualizing Algorithms

    There aren’t any sliders or buttons on this page besides “play” buttons, so I’m not sure if it officially falls into the explorable explanations, but the visualizations on Mike Bostock’s post about are exceptionally effective nonetheless. My favorites are the visualizations of shorting algorithms. After watching these visual explanations you can’t not know how the Quicksort or Mergesort work

  • How to integrate text and images interactively

    At the bottom of the page there is a nice example of using text together with charts. Certain sections of the text can be clicked after which the chart updates. I actually/accidentally used the same idea in my Babynames project in the text below the visual

  • Explained Visually

    What better way to explain difficult mathematical concepts than by doing it visually with sliders and buttons to play around with it yourself and see what the impact is of each change. Also nicely designed

  • Conditional Probability explained

    Actually part of the Explained Visually group above, but I just love how well this page explains conditional probability, not a term you come across often

  • Parable of the Polygons

    A very cute site explaining how a small bias of wanting to life around people who are like you can lead to a segregated society. Using yellow triangles and blue squares it starts with small easy examples and moving on to more complex situations in clear steps. I like that they also show that a small anti-bias can fix things

  • Simpson’s Paradox

    Using data from the actual case of the law suit against the University of California-Berkeley about sex discrimination in 1973. It appeared that graduate schools were accepting more men than women. However, deeper analysis actually revealed something else, which this page explains. Very good use of a clustered force diagram to show the paradox

  • Gridlock vs. Bottlenecks

    Creating your own traffic jams to understand how congestion works is so much better than being in one. I also very much like the simple flat design

  • The world’s most unfair election system

    A small post from the Guardian about the election system in Turkey and showing what the parliaments would look like if the same system would be applied to other countries.