Quick.Work

(very sort 5 minutes presentation)

Tableau is a data visualization tool (software) to provide actionable insights, the result may be used for simple education/presentation or for BI (Business Intelligence) analytic report for BA (Business Analyst), stakeholders, etc.

This short article is a brief introduction ('Quick Start') of how to use Tableau, Tableau has many functions but only 3 main functions are covered in this article.

1. Connect to data source (Tableau has many built-in libraries to connect and parse various data sources):
   • Local FILE: MS Excel, Text file, JSON, PDF, etc.
   • Remote server: Tableau server, MS SQL Server, Oracle, MySQL, Web Data Connector (WDC, to connect to custom API through http, this is quite important feature), etc.
2. Define data types and value (from the data source): this is optional, tableau able to automatically parse and extract the data from excel columns, DB tables, etc.
   • Tableau provide a way to create custom SQL query, tableau can not automatically parse everything we want so we can create new custom dataset from data source, eg: query join multiple tables, get aggregated values of sum(), avg(), etc. (see: https://onlinehelp.tableau.com/current/pro/desktop/en-us/calculations_calculatedfields_aggregate_create.htm)
3. Visualize the data (show output): show graphic charts, eg: simple table, horizontal/vertical bar, pie chart, line chart, maps, etc.

---

When we open Tableau then the first step is to connect to our data, a screenshot example to connect data source, select 'Microsoft excel'


Sample excel file content, data title: Player Sport Points

Date	Player name	Sport name	Point
2019-03-01	George	Swimming	13
2019-03-02	George	Bicycling	9
2019-03-03	George	Tennis	17
2019-03-01	Mike	Boxing	18
2019-03-02	Mike	Badminton	19
2019-03-03	Brandon	Running	20
2019-03-05	Brandon	Bicycling	24
2019-03-04	Harry	Archery	8
2019-03-06	Harry	Long Jump	5
2019-03-05	Sandy	Wrestling	17
2019-03-04	George	Tennis	24
2019-03-05	George	Tennis	31
2019-03-05	Harry	Swimming	10
2019-03-06	Harry	Swimming	14

With the above simple data, we don't need to define custom data type or aggregated value because Tableau is smart enough to parse all columns and values automatically.

To visualize the data, we need to define our data into 2 categories:

• Dimension: qualitative value, something that can not be measured/calculated, such as: person name, color, taste, etc., normally Dimension is used to define LABEL or COLOR in chart.
• Measure: quatitative value, something that can be aggregated or calculated, such as: score, point, age, length, etc.

Some example charts output

Tableau has reactive chart UI which can use mouse to see chart movements, below is JavaScript code to show 'similar' reactive Pie chart, please use mouse to hover any slice of the pie to highlight it.

Tableau also can create a presentation (slides) to tell story (storytelling) with the data, storytelling is very important to create a success presentation, it brings data to life and this is allowing the viewer to make personal connection to the information, for more information about 'story-telling' please follow this link Tableau - story telling

Tableau is useful to quickly visualize data, by only knowing these 3 main functions then anytime there is a sudden need during meeting to show data chart from current active remote database then we can open Tableau to connect to the remote database and show the chart to others. Hope this brief presentation can provide understanding of how easy to use Tableau and how powerful it is.

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  /* make table has horizontal scroller */
  display: block;
  overflow-x: auto;
  /*white-space: nowrap; */
}

/* use CSS variable for EDGE > 15, absolute not for IE, if want to support more browser then do not use var() */
:root {
  --responsive-table-total-header: 4;
  --responsive-table-cell-height: 40px;
  --responsive-table-cell-width: 150px;
}

table.table-fixed-header {
  width: auto; /* reset, to center and see responsive in action */
}

/* each cell width and height */
.table-fixed-header th,
.table-fixed-header td {
  color: #fff;
  background-color: #000;
  border: 1px solid #ccc;
  width: var(--responsive-table-cell-width); /* important to set width for cell, so all same width */
  height: var(--responsive-table-cell-height);

  /* centered content */
  text-align: center;
  vertical-align: middle;
}

/* after set style for all cells above then define table header cell style again here */
.table-fixed-header th {
  background-color: #555;
  color: #fff;
}

/* because we use static width/height, so we make every thing in BLOCK */
.table-fixed-header thead,
.table-fixed-header tbody,
.table-fixed-header tr {
  display: block;
}

.table-fixed-header tbody {
  /* limit height, to see the effect of vertical scrollable */
  /* height: calc(3.5 * var(--responsive-table-cell-height)); */

  /* total header (column) 5 * each cell width (150px) = 750px + 20px vertical scrollbar */
  width: calc((var(--responsive-table-total-header) * var(--responsive-table-cell-width)) + 20px);
  /* no vertical scrollbar BECAUSE we show all data */
  /* width: calc((var(--responsive-table-total-header) * var(--responsive-table-cell-width)) + 0); */
  overflow: auto;

  /* make bottom border because we limit height, so add a bottom line to show end of body content */
  /* no vertical scrollbar, so no need to display border-bottom */
  /* border-bottom: 1px solid #ccc; */
}

/* optional, make tbody to have foreground shadow (on top of text) IF scrolling */
/* .table-fixed-header tbody {
  background:
    linear-gradient(to right, rgba(0,0,0,.3), rgba(0,0,0,0)),
    linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.7)) 0 100%,
    radial-gradient(farthest-side at 0% 50%, rgba(255,0,0,.4), rgba(255,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(255,0,0,.2), rgba(255,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
} */

/* total column = 5 * each cell width (150px) = 750px + 50px (for scrollbar + margin/padding) */
/* 20190307: media query using calc() is not working in Chrome/Firefox, so use hardcoded value */
/* @media screen and (max-width: calc((var(--responsive-table-total-header) * var(--responsive-table-cell-width)) + 50px)) { */
@media screen and (max-width: 660px) {

  table.table-fixed-header {
    display: flex;
  }

  .table-fixed-header tbody {
    display: flex;

    position: relative;

    /* display horizontal scroller */
    overflow-x: auto;
    overflow-y: hidden; /* hide Y axis */

    /* static height, total column = 5 * each cell height (40px) = 200px + 25px */
    height: calc((var(--responsive-table-total-header) * var(--responsive-table-cell-height)) + 20px); /* +20px for horizontal SCROLLBAR at the bottom */

    /* 100vw = 100% view port width - (thead's width + padding/margin) */
    width: calc(100vw - (var(--responsive-table-cell-width) + 30px));
  }

  .table-fixed-header th,
  .table-fixed-header td {
    display: block;
  }
}

.responsive-img {
  display: block;
  max-width: 100%;
  height: auto;
}