Tools & Resources for Data Visualisation
15 likes4,573 views
This document provides an overview of different tools and techniques for data visualization. It categorizes visualization tools as canvas (design every element), charting (collection of fixed charts), grammar (graphical primitives for composing graphics), and visual (flexible analysis languages). Examples of tools in each category are given along with short descriptions. Foundational works, processes, storytelling techniques, blogs, courses, and resources for data visualization are also listed.
![Processing - Pie Chart
size(400, 400);
background(255);
smooth();
noStroke();
int diameter = 200;
float[] data = {5, 25, 15, 20, 10};
int[] sat = {25, 75, 125, 175, 225};
float lastAngle = 0, sum = 0;
for (int i = 0; i < data.length; i++)
sum += data[i];
for (int i = 0; i < data.length; i++) {
fill(sat[i]);
float angle = data[i] / sum * 2 * PI;
arc(width / 2, height / 2, diameter,
diameter,
lastAngle, lastAngle + angle);
lastAngle += angle;
}
Source: Processing](https://image.slidesharecdn.com/toolsresourcesfordatavisualisation-150208230909-conversion-gate01/85/Tools-Resources-for-Data-Visualisation-5-320.jpg)
![Google Charts - Pie
Source: Google Charts Playground
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.
arrayToDataTable([
['Areas', 'Sales'],
['North', 5],
['East', 25],
['West', 15],
['South', 20],
['Central', 10]
]);
// Create and draw the visualization.
new google.visualization.PieChart
(document.getElementById
('visualization')).
draw(data, {title:"Sales by
Area"});
}](https://image.slidesharecdn.com/toolsresourcesfordatavisualisation-150208230909-conversion-gate01/85/Tools-Resources-for-Data-Visualisation-14-320.jpg)
![d3.js
Source: Data-Driven Documents
var data = [5, 25, 15, 20, 10];
var color = d3.scale.category20();
var svg = d3.select("body").append("svg")
.attr("width", 150)
.attr("height", 150);
var g = svg.append("g")
.attr("transform", "translate(75,
75)");
var arcs = g.selectAll("path")
.data(d3.layout.pie().sort(null)
(data)) .enter().append("path")
.style("fill", function(d,i) {
return color(i); })
.attr("d",d3.svg.arc()
.innerRadius(0)
.outerRadius(70));](https://image.slidesharecdn.com/toolsresourcesfordatavisualisation-150208230909-conversion-gate01/85/Tools-Resources-for-Data-Visualisation-25-320.jpg)
Tools & Resources for Data Visualisation
- 1. Amit Kapoor @amitkaps Data Visual Story * Tools & Resources for Data Visualisation
- 3. Tools Landscape Abstract, Flexible, Difficult Slow, Code, Expressive Blackbox, Limited, Simple Quick, GUI, Efficient
- 4. Tools Landscape Abstract, Flexible, Difficult Slow, Code, Expressive Blackbox, Limited, Simple Quick, GUI, Efficient Canvas Paint directly on a pixel grid. Design & manage every element of chart Processing Nodebox sketchpad Raphael.js Paper.js Processing.js
- 5. Processing - Pie Chart size(400, 400); background(255); smooth(); noStroke(); int diameter = 200; float[] data = {5, 25, 15, 20, 10}; int[] sat = {25, 75, 125, 175, 225}; float lastAngle = 0, sum = 0; for (int i = 0; i < data.length; i++) sum += data[i]; for (int i = 0; i < data.length; i++) { fill(sat[i]); float angle = data[i] / sum * 2 * PI; arc(width / 2, height / 2, diameter, diameter, lastAngle, lastAngle + angle); lastAngle += angle; } Source: Processing
- 6. Tools Landscape Abstract, Flexible, Difficult Slow, Code, Expressive Blackbox, Limited, Simple Quick, GUI, Efficient Canvas Charting Collection of fixed charts that require data to be shaped in a particular way Excel Mondrian Many Eyes Google Charts HighCharts Fusion Charts Paint directly on a pixel grid. Design & manage every element of chart Processing Nodebox sketchpad Raphael.js Paper.js Processing.js
- 7. Excel - Chart Typology
- 8. Excel - Column, Bar
- 9. Excel - Pie, Line, Area
- 10. Excel - Scatter, Others
- 11. Excel - Types, Others
- 12. Excel - Trees, Streams Source: Microsoft Research
- 13. Many Eyes Source: IBM- Many Eyes
- 14. Google Charts - Pie Source: Google Charts Playground function drawVisualization() { // Create and populate the data table. var data = google.visualization. arrayToDataTable([ ['Areas', 'Sales'], ['North', 5], ['East', 25], ['West', 15], ['South', 20], ['Central', 10] ]); // Create and draw the visualization. new google.visualization.PieChart (document.getElementById ('visualization')). draw(data, {title:"Sales by Area"}); }
- 15. Google Charts Source: Google Charts
- 16. Google Charts Source: Google Charts
- 18. Tools Landscape Abstract, Flexible, Difficult Slow, Code, Expressive Blackbox, Limited, Simple Quick, GUI, Efficient Canvas Charting Collection of fixed charts that require data to be shaped in a particular way Excel Mondrian Many Eyes Google Charts HighCharts Fusion Charts Paint directly on a pixel grid. Design & manage every element of chart Processing Nodebox sketchpad Raphael.js Paper.js Processing.js Visual Visual analysis languages allowing flexibility to design many variants Tableau Gephi raw Vega
- 19. Tableau - VizQL Source: Tableau Software Public
- 20. Gephi - Graph Viz Source: Gephi
- 21. Raw Source: Raw
- 23. Tools Landscape Abstract, Flexible, Difficult Slow, Code, Expressive Blackbox, Limited, Simple Quick, GUI, Efficient Canvas Grammar Charting Collection of fixed charts that require data to be shaped in a particular way Excel Mondrian Many Eyes Google Charts HighCharts Fusion Charts Collection of graphical primitives for composing data driven graphics R-ggplot2 SPSS plot.ly d3.js Bokeh Paint directly on a pixel grid. Design & manage every element of chart Processing Nodebox sketchpad Raphael.js Paper.js Processing.js Visual Visual analysis languages allowing flexibility to design many variants Tableau Gephi raw Vega
- 24. R - ggplot2 Source: ggplot2 areas <- c("North", "East", "West", "South", "Central") sales <- c(5, 25, 15, 20, 10) humble <- data.frame(areas, sales) ggplot(humble, aes(x = "", fill = areas, weight = sales)) + geom_bar(width = 1) + coord_polar("y")
- 25. d3.js Source: Data-Driven Documents var data = [5, 25, 15, 20, 10]; var color = d3.scale.category20(); var svg = d3.select("body").append("svg") .attr("width", 150) .attr("height", 150); var g = svg.append("g") .attr("transform", "translate(75, 75)"); var arcs = g.selectAll("path") .data(d3.layout.pie().sort(null) (data)) .enter().append("path") .style("fill", function(d,i) { return color(i); }) .attr("d",d3.svg.arc() .innerRadius(0) .outerRadius(70));
- 26. Tools Landscape Abstract, Flexible, Difficult Slow, Code, Expressive Blackbox, Limited, Simple Quick, GUI, Efficient Canvas Grammar Charting Collection of fixed charts that require data to be shaped in a particular way Excel Mondrian Many Eyes Google Charts HighCharts Fusion Charts Collection of graphical primitives for composing data driven graphics R-ggplot2 SPSS plot.ly d3.js Bokeh Paint directly on a pixel grid. Design & manage every element of chart Processing Nodebox sketchpad Raphael.js Paper.js Processing.js Visual Visual analysis languages allowing flexibility to design many variants Tableau Gephi raw Vega
- 27. Foundational Semiology of Graphics Jacques Bertin Theory Exploratory Data Analysis John Tukey EDA The Visual Display of Quantitative Information Edward Tufte Excellence The Elements of Graphing Data William Cleveland Methods The Grammar of Graphics Leland Wilkinson Grammar
- 28. Fundamentals Show Me the Numbers Stephen Few Basic Graphs Now you see it Stephen Few Exploratory Information Dashboard Design Stephen Few Dashboard Envisioning Information Edward Tufte Methods Visualising Data William Cleveland Methods
- 29. Think, Perception, Design Unfolding the Napkin / The Back of the Napkin Dan Roam Thinking The Non- Designer’s Design Book Robin Williams Graphic Design The Design of Everyday Things Donald Norman Human Object Interaction Information Visualization: Perception for Design Colin Ware Perception Visual Thinking for Design Colin Ware Visual Cognition
- 30. Process & Tools Data Visualization: A Successful Design Process Andy Kirk Approach Visualizing Data Ben Fry Processing / Approach Interactive Data Visualization Scott Murray D3.js ggplot2: Elegant Graphics for Data Analysis Hadley Wickam R: ggplot2 Data Journalism Handbook Open Knowledge Data Journalism
- 31. Storytelling Resonate Nancy Duarte Stories Slidedocs Nancy Duarte Slides + Documents Making Comics Scott McCloud Images + Words Improving your Storytelling Doug Lipman Oral Storytelling The Story Factor Annette Simmons Business Storytelling
- 32. Blogs and Links ● Guardian Data Blog ● New York Times ● Excel Charts ● Visualising Data ● Fell in Love with Data ● Flowing Data ● datavisualization.ch ● Eager eyes ● Junk Charts ● Information Aesthetics ● HBR - Persuading with Data A collection of blogs by Flowing Data
- 33. Courses ● Jeffrey Heer - CSE512 Data Visualization ● Tamara Munzer - CS533-09 Information Visualization ● Udacity - Intro to Data Science ● Udacity - Exploratory Data Analysis