General resources

# Data sources

A great visualisation relies on interesting, topical and informative data, so here are a few sources I work with. visualizing.org is an excellent data viz community site that compiles and releases open data sets relevant to today’s pressing issues.

The Guardian Data Blog is an excellent resource for topical datasets, and their interactive visualisations are a good place for inspiration while you're there.

Ipsos MORI is one of the leading political, social and business research companies in the UK and Ireland, and they have a large amount of publically available data in their research archive.

The United Nations' Development Programme, is an organization advocating for change and connecting countries to knowledge, experience and resources to help people build a better life. The UNDP's data sets are publically available and extensive

# Prototypying environments

Before embarking on a full data visualisation build it's a good idea to build some prototypes for proof of concept as well as creating a live web link for troubleshooting, sharing and collaborating. A rapid prototyping environment is what you need, and you're in luck, there are a good few to choose from. A prototyping environment combines HTML, CSS, and JavaScript code editors in your browser with an instant preview of the code.

Here are some of the most popular:
JSFiddle | JSBin | CodePen | Plunker

Tributary is an experimental environment, specifically for rapidly prototyping visualization code.

# Beginners CSS, HTML and JS

The tutorials on this site need you to know a bit about HTML and CSS, as well as some JS. If you're starting from scratch in any or all of these languages there are thousands of options available to you but I recommend Code Academy highest of all because its interactive and enjoyable.

If you want to read rather than do exercises then Shay Howe's Learn HTML and CSS is a great place to start and when you're done you can follow it on to the next level with the elegant Learn CSS Layout tutorial.

# SVG resources

SVG stands for scaleable vector graphics. It is an image type for the web that can be rescaled to any size and maintain its quality and because it is an XML markup element in itself its file size is minimal in comparison to bitmap imagery. SVG is used widely throughout data visualisation online due to its ability to be animated and manipulated to become interactive.

If you’re creating SVGs in a desktop design application like Illustrator Peter Collingridge's svg editor is a great way of clearing out the unnecessary code generated in the SVG and optimising it for use on the web. If you are using an SVG image online it is worth having a fallback option for older browsers that don't support them. Ben Howdle's SVGeezy is a simple JavaScript plugin which detects SVG images on your website, and automatically replaces it with your image fallback for those older, less capable browsers.

Enjalot, the creator of Tributary, has a number of d3 tutorial videos online at dot enter covering d3 colour scales, basic d3 circles, d3 path, simple d3 transition and d3 stacked bars. He also has the sister site dot append covering d3 drag behaviour, d3 brush, crossfilter and reusable bar charts. I do find some of them hard to follow because of the background music but they are a useful resource..

# Data viz blogs

My favourite data viz blog is The Why Axis, edited by Bryan Connor, which documents the rise of data visualization in the digital age.

Andy Kirk is a UK-based freelance data visualisation consultant, trainer, author, speaker, researcher and editor of visualisingdata.com. It provides readers with a variety of content that charts the development of the data visualisation field.

# Data viz tools

There are many different online data visualisation tools available but these are the ones I intend to cover on this site.

D3.js is a data driven javascript library, visit the D3 Resources page for more information. Flotcharts is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. Highcharts are a simple yet flexible charting API. And finally, Raphaël is a small JavaScript library to simplify your work with vector graphics on the web.