CSc4730/6730 Scientific Visualization Lecture 06 Creating Basic Data Visualization with MS Excel and Google Chart API Ying Zhu

MS Excel One of the most commonly used tool for creating data visualization Supported chart types Bar chart Pie chart Line chart Scatter plot Stock Other types: Area, surface, doughnut, bubble, and radar

Create chart Select a column or a row of data In the “Insert” tab, select a chart type In the “Design” tab, click on “Select Data” Can add, edit or remove data columns or rows Can change horizontal axis labels Can quickly change chart type

Change chart design In the “Design” tab, can choose different chart style Can choose different chart layouts Can cut and paste the chart as a picture

MS Excel Simple to use Many chart types, styles, and layouts to choose from Limitations: Does not support map Can just easily create bad designs (e.g. 3D bar chart, 3D pie chart, etc.)

Case study http://www.earth-policy.org/Books/PB3/data.htm Download one of the Excel files and create charts

Google Chart API Google Chart API allows you to easily embed a chart in your web page Available since December 2007 http://code.google.com/apis/chart/ You create an URL that includes the data and the formatting parameters Insert the URL in the appropriate place of your HTTP file When the web page is viewed by the browser, Google Chart API returns PNG image of the chart in response to that URL If you type the URL in the browser’s address bar, an image of the chart is also displayed

Google Chart API More difficult to use than Excel, but very convenient and flexible for web design No need to have a separate picture for your chart The chart is encoded in a URL. Just send one line of URL to another team and he/she can include the chart in their web page. Minor changes to data set is very convenient

Supported chart types Line charts Bar charts Pie charts Venn diagrams Scatter plots Radar charts Maps Google-o-meters QR codes See http://code.google.com/apis/chart/types.html for examples

URL format Google Chart API URLs must be in the following format http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n> No limit on the number of parameters Can list parameters in any order

Required parameters Chart size chs=<width in pixels>x<height in pixels> E.g. chs=33x200 The maximum map size is 440x220

Line Chart Chart type cht=<line chart style> cht=lc: typical line chart, one data per data point cht=ls: sparklines, no axis lines, one data per data point cht=lxy: need to specify x and y for each data point

Bar Chart Bar chart cht=<bar chart style> cht=bhs: horizontal bar chart, with stacked bars cht=bvs: vertical bar chart, with stacked bars cht=bhg: horizontal bar chart, with grouped bars cht=bvg: vertical bar chart, with grouped bars

Scatter plots Scatter plots cht=s At least two data sets should be supplied. The first data set specifies x-coordinates, and the second data set specifies y-coordinates.

Maps Maps cht=t, chtm=<geographical area> <geographical area> include: Africa Asia Europe middle_east South_america Usa World http://chart.apis.google.com/chart?cht=t&chs=440x220&chd=s:_&chtm=world

Maps Color coding countries or states chco=<default color>,<start of gradient>,<end of gradient> http://code.google.com/apis/chart/colors.html#rgb Chld=<country or state codes> http://code.google.com/apis/chart/isocodes.html http://code.google.com/apis/chart/statecodes.html Chd=<color levels> Specify color levels for each country

Google-o-meter Specify chart type Specify data Specify label cht=gom chd=t:<number> Specify label chl=<label>

Data formats Specify data with chd=<data type>:<data> Supported data types Text encoding: Text encoding with data scaling Simple encoding Extended encoding:

Text encoding floating point numbers 0 – 100 chd=t: 0.2,0.9,12.5 Nothing below 0 or above 100 Don’t insert space between a number and a ‘,’

Text encoding with data scale No default range limit, but you have to specify data rang for each data set with chds=<min>,<max> chd=t: -20.5, 98.3, 11.2&chds=-30.0, 60.0

Simple encoding Integer values 0 – 61, encoded by a single alphanumerical character chd=s:BTb19_,Mn5tzb is equivalent to chd=t:1,19,27,53,61,-1|12,39,57,45,51,27 Generate a short URL But a little hard to use and read by the developer

Extended encoding Specify integer values from 0—4095, inclusive, encoded by two alphanumeric characters chd=e:BaPoqM-A,-A__RMMg is equivalent to chd=t:90,1000,2700,3500|3968,-1,1100,250

Multiple data sets To draw multiple lines, or sets of bars, on a chart, specify multiple data series Use | for Text Encoding or Text Encoding with Data Scaling Use , for Simple Encoding or Extended Encoding

Color Specify chart colors with a 6-letter string of hexadecimal values in the format RRGGBB FF0000 = red 00FF00 = green 0000FF = blue 000000 = black FFFFFF = white

Chart Color Use chco=<color>,<color>,<color> to specify color for each data set One color code for one data set

Chart title and legend Use chtt=<chart title> to specify title Use + to add space between words Use chdl=<label 1>|<label 2> to specify legend One label for one data set

Axis type Specify multiple axes with chxt=<axis 1>,<axis 2>, … x = bottom x-axis t = top x-axis y = left y-axis r = right y-axis

Axis label Specify label with chxl=<axis index>:|label 1|label 2| … Axis index is the index number of the axis specified with chxt Labels are separated by |

Axis range Specify axis range with chxr=<axis index>,<start>, <end>, <interval>|…

Bar width and spacing chbh=<bar width>,<space between bars>, <space between groups> Chbh=10,5,10 Automatic setting the bar width with chbh=a

Line styles Chls=<data set 1 line thickness>, <length of line segment>, <length of blank segement>| …

Other styling options Grid lines chg= Shape markers chm=