Chord chart Luca Rossato 2014/01/17 17:36
Table of Contents 1 Introduction... 3 2 Dataset... 4 2.1 Filtered Dataset... 4 2.2 Dataset As-is... 4 3 Template... 5 4 Documents... 6 Page 2 - last modified by Luca Rossato on 2014/01/17 17:36
1 Introduction 2 Dataset 2.1 Filtered Dataset 2.2 Dataset As-is 3 Template 4 Documents 1 Introduction D3 library allows users to produce several charts, Chord is one of these; see https://github.com/mbostock/d3/wiki/chord- Layout for more information on the diagram. Chord diagrams show relationships among a group of entities. For example, consider a hypothetical population of people with different hair colors: black, blonde, brown and red. Each person in this population has a preferred hair color for a dating partner; of the 29,630 (hypothetical) people with black hair, 40% (11,975) prefer partners with the same hair color. This preference is asymmetric: for example, only 10% of people with blonde hair prefer black hair, while 20% of people with black hair prefer blonde hair. If you create a chord chart representing these facts you will obtain a diagram like this: A chord diagram visualizes these relationships by drawing quadratic Bézier curves between arcs. The source and target arcs represents two mirrored subsets of the total population, such as the number of people with black hair that prefer blonde hair, and the number of people with blonde hair that prefer black hair. The chart aspect will change depending on the dataset you specify and the configuration you provide through the template xml file. This chart shows directed relationships among a group of entities, so it expect a square matrix as data input. Page 3 - last modified by Luca Rossato on 2014/01/17 17:36
2 Dataset This chart obtain data through a SpagoBI dataset; there are two different ways to use it: 2.1 Filtered Dataset As long as a dataset can contain several columns and rows, you can specify (in the template file) the source column, the target column and the value column to be used in order to create the directed relationships among the entities. In the example provided (hair color) in the xml template file the filters are expressed as: <FILTERS value='true'> <COLUMNSOURCE name= "SOURCE"/> <COLUMNTARGET name= "TARGET"/> <COLUMNVALUE name= "VALUE"/> </FILTERS> In the filters tag the value property to "true" indicates that the dataset has to be filtered using the provided criteria. The filters that must be provided are the name of the source, target and value column as shown in the above code. 2.2 Dataset As-is The SpagoBI dataset can be used as-is. If you want to use the dataset without specifying which column to use you must edit the template as: <FILTERS value='false' /> An example of a SpagoBI dataset used as-is can be obtained using the data from the sql script attached to this page (Haircolor.sql) combined with a pivot transformation that provides the data as a square matrix with "target" as column header: Page 4 - last modified by Luca Rossato on 2014/01/17 17:36
obtaining a result set as: 3 Template In the xml template is possible to configure several chart features as: title subtitle entities colors <TITLE text='d3 Chord graph Test'> <STYLE color='#003366' fontweight='bold' fontsize='16px' /> </TITLE> <SUBTITLE text='hair Color'> <STYLE color='#8c4a4a' fontweight='bold' fontsize='14px' /> </SUBTITLE> <ELEMENTS size='4'> Page 5 - last modified by Luca Rossato on 2014/01/17 17:36
<COLOR_LIST> <COLOR value='#000000' /> <COLOR value='#ffdd89' /> <COLOR value='#957244' /> <COLOR value='#f26223' /> </COLOR_LIST> </ELEMENTS> In the "ELEMENT" tag the user must specify the number of entities he is going to represent in the chart whilst inside "COLOR_LIST" tag he must provide all the colors code to use for each element. For both title and subtile the user can customize color, font weight and size as shown in the previous example. 4 Documents In this page as attached documents are provided all the database scripts for table creation and data insertion, and xml templates in oreder to run the example: Haircolor.sql TemplateChord.xml TemplateChordPIVOT.xml Page 6 - last modified by Luca Rossato on 2014/01/17 17:36