Design Principles in Data Visualisation
& Data Visualisation Tools
JAYASHREE R
SRI RAMAKRISHNA COLLEGE OF ARTS & SCIENCE
Design Principles in Data Visualisation
 Visualizations are an essential tool for effectively communicating complex
information to a wide range of audiences
 effective visualizations can help to distill complex information into clear
and compelling messages
 Principles includes:
 Color Theory
 Typography
 Layout
Color Theory
 An essential component of data visualization design
 Use of color can help to highlight important information and create visual
interest.
 it is crucial to use color appropriately to avoid confusing or misleading the
audience
 The first principle of color theory is to choose a color palette that is
appropriate for the data being visualized
Example
 Use a color scheme with distinct colors for the categorical data
 Gradient color scheme can be used to show the range of values for the
continues data
 Some major color palettes used in data visualization:
 Sequential palettes
 Diverging palettes
 Categorical palettes
 Heatmap palettes
Typography
 Critical component of data visualization design.
 The use of appropriate typography can help to improve the readability and
visual appeal of the visualization.
 The first principle of typography is to choose a font that is easy to read.
 Avoid using overly decorative fonts that can be difficult to read, especially
at small sizes. Sans-serif fonts are often the best choice for data
visualizations.
Some commonly used sans-serif fonts
for data visualisation include:
 Arial
 Helvetica
 Open Sans
 Roboto
 Lato
 PT Sans
 Raleway
Layout
 The layout of a data visualization can significantly impact its effectiveness.
 A well-designed layout can help to improve the clarity and organization of
the information being presented.
What Are Data Visualization Tools?
 Data visualization tools provide data visualization designers with an easier way
to create visual representations of large data sets.
 When dealing with data sets that include hundreds of thousands or millions of
data points, automating the process of creating a visualization, at least in part,
makes a designer’s job significantly easier.
 These data visualizations can then be used for a variety of purposes:
-dashboards, annual reports, sales and marketing materials, investor slide decks,
and virtually anywhere else information needs to be interpreted immediately.
 Data visualization tools are software applications that render information
in a visual format such as a graph, chart, or heat map for data analysis
purposes.
 Such tools make it easier to understand and work with massive amounts of
data.
 With effective data visualization tools, people can make data-driven
decisions without having to spend valuable time trying to wrangle raw
data into an interpretable format
Tableau (and Tableau Public)
 Tableau has a variety of options available, including a desktop app, server and hosted
online versions, and a free public option.
 There are hundreds of data import options available, from CSV files to Google Ads and
Analytics data to Salesforce data
 The public version of Tableau is free to use for anyone looking for a powerful way to
create data visualizations that can be used in a variety of settings.
 From journalists to political junkies to those who just want to quantify the data of their
own lives, there are tons of potential uses for Tableau Public
 Tableau is a great option for those who need to create maps in addition to other types
of charts. Tableau Public is also a great option for anyone who wants to create public-
facing visualizations.
Infogram
 Infogram is a fully-featured drag-and-drop visualization tool that allows
even non-designers to create effective visualizations of data for marketing
reports, infographics, social media posts, maps, dashboards, and more.
 Finished visualizations can be exported into a number of formats: .PNG,
.JPG, .GIF, .PDF, and .HTML
 Infogram also offers a WordPress plugin that makes embedding
visualizations even easier for WordPress users.
ChartBlocks
 ChartBlocks claims that data can be imported from “anywhere” using their API,
including from live feeds.
 While they say that importing data from any source can be done in “just a few
clicks,”
 it’s bound to be more complex than other apps that have automated modules
or extensions for specific data sources.
 Designers can create virtually any kind of chart, and the output is responsive—
a big advantage for data visualization designers who want to embed charts
into websites that are likely to be viewed on a variety of devices
Datawrapper
 Datawrapper was created specifically for adding charts and maps to news
stories.
 The charts and maps created are interactive and made for embedding on news
websites.
 Their data sources are limited, though, with the primary method being
copying and pasting data into the tool.
 Once data is imported, charts can be created with a single click. Their
visualization types include column, line, and bar charts, election donuts, area
charts, scatter plots, choropleth and symbol maps, and locator maps, among
others.
D3.js
 D3.js is a JavaScript library for manipulating documents using data.
 D3.js requires at least some JS knowledge, though there are apps out there
that allow non-programming users to utilize the library
 Those apps include NVD3, which offers reusable charts for D3.js; Plotly’s
Chart Studio, which also allows designers to create WebGL and other
charts; and Ember Charts, which also uses the Ember.js framework
Google Charts
 Google Charts is a powerful, free data visualization tool that is specifically for creating
interactive charts for embedding online.
 It works with dynamic data and the outputs are based purely on HTML5 and SVG, so they
work in browsers without the use of additional plugins.
 Data sources include Google Spreadsheets, Google Fusion Tables, Salesforce, and other
SQL databases.
FusionCharts
 FusionCharts is another JavaScript-based option for creating web
and mobile dashboards.
 It includes over 150 chart types and 1,000 map types
 Because FusionCharts is aimed at creating dashboards rather than just
straightforward data visualizations it’s one of the most expensive options
included in this article.
 But it’s also one of the most powerful.
Chart.js
 Chart.js is a simple but flexible JavaScript charting library.
 It’s open source, provides a good variety of chart types (eight total), and
allows for animation and interaction.
 Chart.js uses HTML5 Canvas for output, so it renders charts well across all
modern browsers.
 Charts created are also responsive, so it’s great for creating visualizations
that are mobile-friendly.
Grafana
 Grafana is open-source visualization software that lets users create
dynamic dashboards and other visualizations.
 It supports mixed data sources, annotations, and customizable alert
functions, and it can be extended via hundreds of available plugins.
 That makes it one of the most powerful visualization tools available.
Chartist.js
 Chartist.js is a free, open-source JavaScript library that allows for creating
simple responsive charts that are highly customizable and cross-browser
compatible.
 The entire JavaScript library is only 10KB when GZIPped.
 Charts created with Chartist.js can also be animated, and plugins allow it
to be extended.
Sigmajs
 Sigmajs is a single-purpose visualization tool for creating network graphs.
 It’s highly customizable but does require some basic JavaScript knowledge
in order to use.
 Graphs created are embeddable, interactive, and responsive.
Polymaps
 Polymaps is a dedicated JavaScript library for mapping.
 The outputs are dynamic, responsive maps in a variety of styles, from
image overlays to symbol maps to density maps.
 It uses SVG to create the images, so designers can use CSS to customize
the visuals of their maps.
Design Principles in Data Visualization and Tools

Design Principles in Data Visualization and Tools

  • 1.
    Design Principles inData Visualisation & Data Visualisation Tools JAYASHREE R SRI RAMAKRISHNA COLLEGE OF ARTS & SCIENCE
  • 2.
    Design Principles inData Visualisation  Visualizations are an essential tool for effectively communicating complex information to a wide range of audiences  effective visualizations can help to distill complex information into clear and compelling messages  Principles includes:  Color Theory  Typography  Layout
  • 3.
    Color Theory  Anessential component of data visualization design  Use of color can help to highlight important information and create visual interest.  it is crucial to use color appropriately to avoid confusing or misleading the audience  The first principle of color theory is to choose a color palette that is appropriate for the data being visualized
  • 4.
    Example  Use acolor scheme with distinct colors for the categorical data  Gradient color scheme can be used to show the range of values for the continues data  Some major color palettes used in data visualization:  Sequential palettes  Diverging palettes  Categorical palettes  Heatmap palettes
  • 5.
    Typography  Critical componentof data visualization design.  The use of appropriate typography can help to improve the readability and visual appeal of the visualization.  The first principle of typography is to choose a font that is easy to read.  Avoid using overly decorative fonts that can be difficult to read, especially at small sizes. Sans-serif fonts are often the best choice for data visualizations.
  • 6.
    Some commonly usedsans-serif fonts for data visualisation include:  Arial  Helvetica  Open Sans  Roboto  Lato  PT Sans  Raleway
  • 7.
    Layout  The layoutof a data visualization can significantly impact its effectiveness.  A well-designed layout can help to improve the clarity and organization of the information being presented.
  • 8.
    What Are DataVisualization Tools?  Data visualization tools provide data visualization designers with an easier way to create visual representations of large data sets.  When dealing with data sets that include hundreds of thousands or millions of data points, automating the process of creating a visualization, at least in part, makes a designer’s job significantly easier.  These data visualizations can then be used for a variety of purposes: -dashboards, annual reports, sales and marketing materials, investor slide decks, and virtually anywhere else information needs to be interpreted immediately.
  • 9.
     Data visualizationtools are software applications that render information in a visual format such as a graph, chart, or heat map for data analysis purposes.  Such tools make it easier to understand and work with massive amounts of data.  With effective data visualization tools, people can make data-driven decisions without having to spend valuable time trying to wrangle raw data into an interpretable format
  • 10.
    Tableau (and TableauPublic)  Tableau has a variety of options available, including a desktop app, server and hosted online versions, and a free public option.  There are hundreds of data import options available, from CSV files to Google Ads and Analytics data to Salesforce data  The public version of Tableau is free to use for anyone looking for a powerful way to create data visualizations that can be used in a variety of settings.  From journalists to political junkies to those who just want to quantify the data of their own lives, there are tons of potential uses for Tableau Public  Tableau is a great option for those who need to create maps in addition to other types of charts. Tableau Public is also a great option for anyone who wants to create public- facing visualizations.
  • 12.
    Infogram  Infogram isa fully-featured drag-and-drop visualization tool that allows even non-designers to create effective visualizations of data for marketing reports, infographics, social media posts, maps, dashboards, and more.  Finished visualizations can be exported into a number of formats: .PNG, .JPG, .GIF, .PDF, and .HTML  Infogram also offers a WordPress plugin that makes embedding visualizations even easier for WordPress users.
  • 14.
    ChartBlocks  ChartBlocks claimsthat data can be imported from “anywhere” using their API, including from live feeds.  While they say that importing data from any source can be done in “just a few clicks,”  it’s bound to be more complex than other apps that have automated modules or extensions for specific data sources.  Designers can create virtually any kind of chart, and the output is responsive— a big advantage for data visualization designers who want to embed charts into websites that are likely to be viewed on a variety of devices
  • 16.
    Datawrapper  Datawrapper wascreated specifically for adding charts and maps to news stories.  The charts and maps created are interactive and made for embedding on news websites.  Their data sources are limited, though, with the primary method being copying and pasting data into the tool.  Once data is imported, charts can be created with a single click. Their visualization types include column, line, and bar charts, election donuts, area charts, scatter plots, choropleth and symbol maps, and locator maps, among others.
  • 18.
    D3.js  D3.js isa JavaScript library for manipulating documents using data.  D3.js requires at least some JS knowledge, though there are apps out there that allow non-programming users to utilize the library  Those apps include NVD3, which offers reusable charts for D3.js; Plotly’s Chart Studio, which also allows designers to create WebGL and other charts; and Ember Charts, which also uses the Ember.js framework
  • 20.
    Google Charts  GoogleCharts is a powerful, free data visualization tool that is specifically for creating interactive charts for embedding online.  It works with dynamic data and the outputs are based purely on HTML5 and SVG, so they work in browsers without the use of additional plugins.  Data sources include Google Spreadsheets, Google Fusion Tables, Salesforce, and other SQL databases.
  • 22.
    FusionCharts  FusionCharts isanother JavaScript-based option for creating web and mobile dashboards.  It includes over 150 chart types and 1,000 map types  Because FusionCharts is aimed at creating dashboards rather than just straightforward data visualizations it’s one of the most expensive options included in this article.  But it’s also one of the most powerful.
  • 24.
    Chart.js  Chart.js isa simple but flexible JavaScript charting library.  It’s open source, provides a good variety of chart types (eight total), and allows for animation and interaction.  Chart.js uses HTML5 Canvas for output, so it renders charts well across all modern browsers.  Charts created are also responsive, so it’s great for creating visualizations that are mobile-friendly.
  • 26.
    Grafana  Grafana isopen-source visualization software that lets users create dynamic dashboards and other visualizations.  It supports mixed data sources, annotations, and customizable alert functions, and it can be extended via hundreds of available plugins.  That makes it one of the most powerful visualization tools available.
  • 28.
    Chartist.js  Chartist.js isa free, open-source JavaScript library that allows for creating simple responsive charts that are highly customizable and cross-browser compatible.  The entire JavaScript library is only 10KB when GZIPped.  Charts created with Chartist.js can also be animated, and plugins allow it to be extended.
  • 30.
    Sigmajs  Sigmajs isa single-purpose visualization tool for creating network graphs.  It’s highly customizable but does require some basic JavaScript knowledge in order to use.  Graphs created are embeddable, interactive, and responsive.
  • 32.
    Polymaps  Polymaps isa dedicated JavaScript library for mapping.  The outputs are dynamic, responsive maps in a variety of styles, from image overlays to symbol maps to density maps.  It uses SVG to create the images, so designers can use CSS to customize the visuals of their maps.