a curated guide to the best tools, resources and technologies for data visualization

Design Tools

VisMe

An interactive design tool for charts, presentations, infographics, etc.

Coggle

Coggle

Coggle is an easy-to-use and beautiful web app for designing complex static image diagrams and network flows.

Visage

Visage

Visage was created because we believe that good design should be available to everyone, not just organizations that can afford design agency premiums. It was born out of Column Five, an industry-leading information design agency founded in 2009, with offices in Newport Beach, California, and Brooklyn, New York.

Visgif

Visgif

For lo-fi animated work how about combining data visualization + animated gifs! This experiment investigates the use of animated GIF to better communicate Information Visualization techniques, insights or projects. We provide you with a Google Chrome extension to quickly capture and share the image as a GIF: what can you do with it? n Examples/references: Collection, Tumblr

Variance

Variance

Build powerful data visualizations for the web – without writing JavaScript. Variance empowers engineers, designers, journalists, scientists, and analysts to build elegant bespoke data graphics for the web, using only HTML & CSS. Our intuitive, markup-based grammar emphasizes clear, practical graphics and serves as the foundation for a wide range of visualizations.

The Noun Project

The Noun Project

The Noun Project offers an expansive collection of free or low-cost SVG vector icons for use in almost any project.

Hype3

Hype3

Hype is a software program that allows you to create interactive HTML5 animations and graphics – like a modern-day successor to Adobe Flash.

Sketch

Sketch

Professional digital design for Mac. Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design. Sketch is built for modern graphic designers, and it shows in every fibre of the app. From a flexible workflow with support for Multiple Pages and Artboards. Powerful features like Symbols and Shared Styles are there to make reusing elements quick and easy. Easily create complex shapes with our state-of-the-art vector boolean operations and take advantage of our extensive layer styles. Sketch’s fully vector-based workflow makes it easy to create beautiful, high-quality artwork from start to finish.

Sankey Diagram

Sankey Diagram

Professional drawing tool to create Sankey Diagrams. These diagrams show flows, where the width is proportional to the rate of flow. The diagrams can be created interactively, adding flow sources and sinks, moving nodes and flows around, editing colors, and more.

Scriptographer

Scriptographer

Scriptographer is a scripting plugin for Adobe Illustrator. It gives the user the possibility to extend Illustrator’s functionality by the use of the JavaScript language. The user is no longer limited to the same tools that are used by most graphic designers around the globe.

Paper Js

Paper Js

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface. Paper is the successor or (perhaps better) the alternative to Scriptographer for working with Adobe CS6 onwards. n Examples/references: Examples, Time Machine

Piktochart

Piktochart

Piktochart helps you to create infographics, share and get results in 3 easy steps: No design experience required!

Pixcone

Pixcone

PixCone: The first web app for data driven infographics creation. Offering a powerful web editor to create engaging Infographics total freedom. Arrange images, charts, shapes on the canvas. Use built-in images, or add yours. Add text with multiple fonts and size.

Infogram

Infogram

Infogram lets you illustrate your data, offering more than 30 chart types from bubble charts and treemaps to simple pie charts to create infographic images.

Infographics Presence

Infographics Presence

Create your infographics with our 100% Live editor. The unique technology driving our infographics creator means no need to refresh, preview or reload. You see the changes you make to your content and layout live on the page. Choose from a variety of built-in infographics elements and create your infographics the easy way. With our infographics creator the sky is the limit. From the get-go, we built Infographics Presence with high-resolution graphical elements so that you can create beautiful infographics that attract viewers.

Datylon

Datylon

Datylon helps designers to easily create beautiful artwork with on-brand charts and maps. Data analysts can focus on their work and deliver their data insights in formats that can be readily used in story templates. The resulting data stories can be shared and embedded on the web or in applications whereby developers can add interactivity.

Easeljs

Easeljs

EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas.

Easelly

Easelly

Easelly lets you create and share visual ideas online via ‘vhemes’, visual themes. Drag and drop a vheme onto your canvas for easy creation of your visual idea! n Examples/references: Examples, Video

Adobe Edge

Adobe Edge

In response to the mentioned restrictions involving developing projects using Flash, Adobe has responded with its own range of tools for creating next-generation HTML5 projects and designed to “set the benchmark for standards-based web creation”. Of these, Edge Animate is the most interesting offering, designed to “create animated, interactive content for the modern web”, providing an alternative for projects that previously required Flash. n Examples/references: Showcase

Adobe Illustrator

Adobe Illustrator

Like much of the Creative Suite software, Adobe Illustrator is the industry standard application for creating incredible electronic illustrations. Whilst most of us think of creating graphs using statistical software, like many of those listed above, its huge depth of features and capabilities make it the ideal accompaniment tool to take the graphic composition to the next level. Illustrator gives you the complete control you require to polish existing graphs, creating new ones or combine separate elements into an inspiring, customised and hand-crafted infographic design. n Examples/references: Literary Organism, Visualisations tagged with Adobe Illustrator, Billion-Dollar-A-Gram

Affinity Design

Affinity Design

Affinity Designer for the Mac is the fastest, smoothest, most precise vector graphic design software available. Whether you’re working on graphics for marketing materials, websites, icons, UI design or just like creating cool concept art, Affinity Designer will revolutionise how you work.

Ai2HTML

Ai2HTML

ai2html is an open-source script for Adobe Illustrator that converts your Illustrator documents into html and css.