SQL-Graphs is an Axional Studio Form Component to create interactive data visualizations. SQL-Graphs uses D3 open-source library for creating in web browsers using HTML, CSS and SVG.

Basically, SQL-Graphs main features are:

• Data representation
• Data comparison
• Data interaction

SQL-Graphs requires an Axional Studio Form Object to be put in.

We will proceed to explain briefly how to create each of the SQL-GRAPH objects commenting on possible problems that may be encountered. As you can see in all cases, it is a matter of making only one SQL statement that obtains the necessary information in each case to paint the corresponding graph.

SQL-Graph is basically defined by a representation type and a data source, generally obtained via an SQL Statement or an XSQL-Script. The following sections show how to create and execute different graphs step by step.

A network can be represented by an adjacency matrix, where each cell ij represents an edge from vertex i to vertex j.

The columns name of select has to be:

• x_name: Name of the elements that make up the X axis in the chart.
• x_group: Group name of the elements (Elements of the same group are painted the same color).
• y_name: Name of the elements that make up the Y axis in the graph.
• value: Value of the relationship between each element of the X axis with each element of the Y axis.

The SQL statement to execute:

<select>
    <columns>
        store.store_name <alias name='x_name' />, 
        store.store_country <alias name='x_group' />,
        promotion.media_type <alias name='y_name' />, 
        SUM(sales_fact_1998.store_sales)  <alias name='value' />
    </columns>
    <from table='sales_fact_1998'>
        <join table='store'>
            <on>sales_fact_1998.store_id = store.store_id</on>
        </join>
       <join table='promotion'>
            <on>sales_fact_1998.promotion_id = promotion.promotion_id</on>
        </join>
    </from>
    <group>1,2,3</group>
    <order>2</order>
</select>

In this example, the x axis represents the different stores located in different countries. On y axis we have some media types for advertising. Each colored cell represents the sales of store by promotion media type; darker cells indicate high value of column value (in this case, sales).

We can use drop-down menu to reorder the matrix by name store, by value or by family group.

Sankey diagrams visualize the directed flow between nodes in an acyclic network.

The columns name of select has to be:

• source: Name of the issuer.
• target: Receiver name.
• value: Amount of value that is transmitted between source and target .

The SQL statement to execute:

<select>
    <columns>
        x_name <alias name='source' />, 
        y_name <alias name='target' />,
        value
    </columns>
    <from table='studio_d3_sankey'/>
</select>

This Sankey diagram shows the greenhouse gas production in 2005: which activity is what produces the greenhouse production on the left, and which gases produce it on the right. The thickness of each link encodes the amount of flow from source to target.

The Chord graph, visualize relationships or network flow with an aesthetically-pleasing circular layout.

Chord diagrams present information using two sets of the SVG elements: one a set of arcs around the outside of the diagram and other a set of chords or ribbons on the inside. The arcs are referred to as "groups" in the D3 code and their arc length (how much of the circle they occupy) is determined by aggregating one complete row of the matrix. Thus, the circumference of the circle represents the sum of the entire matrix (in whatever units it is expressed in) and is sub-divided into arcs for each of its rows. The chords on the other hand show relations between elements in the matrix. Their width on either end is determined by a location in the matrix.

The columns name of select has to be:

• x_name: Elements of the X axis (Source)
• y_name: Y axis elements (Target)
• value: Relationship between these two elements.

The SQL statement to execute:

<select>
    <columns>
         store_type x_name, 
         item       y_name,
         sales      value
    </columns>
    <from table='studio_d3_chord'/>
</select>

In our sample, we have some different stores types (supermarket, small grocery, gourmet supermarket, deluxe supermarket, ...) and it shows the total sales of (food, drink or non-consumable) for each type of store.

A hierarchy chart is an abstract layout which is generated from data with a clearly defined parent-child relationship

• id: Identifier of the element.
• name: Element name.
• parent_id: Identifier of the parent father. If you do not have a parent, this field will be empty.

The SQL statement to execute:

<select>
    <columns>
        id, 
        name,
        parent_id
    </columns>
    <from table="studio_d3_hierarchy_tree"/>
</select>

In this example, we create a company organizational chart with the name of employees.

The crossfilter graphic type shows a data table allowing varying filters by the user in an interactive way.

The columns name of select has to be:

• the_date: Timestamp with the date
• unit1: Units corresponding to the value 1.
• unit2: Units corresponding to the value 2.
• unit3: Units corresponding to the value 3.
• unit4: Units corresponding to temporary dates.
• Extra values: Extra values with the desired name. They will only be displayed in the table. (in our example: extra1, extra2 and extra3).
• value1: it will be used to filter the information.
• value2: it will be used to filter the information.
• value3: it will be used to filter the information.

The SQL statement to execute, in this case:

<select first='10000'>
    <columns>
        the_date            "the_date",
        "day of month"      "unit1",
        "delay (min)"       "unit2",
        "distance (mi.)"    "unit3",
        "date"              "unit4",

        
        <!-- filters -->
        DAY(the_date)       'value1',
        delay               'value2',
        distance            'value3'
        
    </columns>
    <from table='studio_d3_crossfilter'/>
</select>

This example show a ten thousand flights from early 2017. The table beneath shows the twenty most recent flights that match the current filters; these are the details on demand.

If you want to add extra columns in the table.

<select first='10000'>
    <columns>
        the_date            "the_date",
        "day of month"      "unit1",
        "delay (min)"       "unit2",
        "distance (mi.)"    "unit3",
        "date"              "unit4",
        <!-- extra values -->
        name1               'Aeroports',
        name2               'Sortides',
        "Description 1"     'extra1',
        "name2 description" 'extra2',
        "name3 description" 'extra3',
        
        <!-- filters -->
        DAY(the_date)       'value1',
        delay               'value2',
        distance            'value3'
        
    </columns>
    <from table='studio_d3_crossfilter'/>
</select>

In this image we can see that data table has more columns.

A d3 timeseries is a series of data points indexed (or listed or graphed) in time order. Most commonly, a time series is a sequence taken at successive equally spaced points in time. Thus it is a sequence of discrete-time data.

The columns name of select has to be:

• the_date: Timestamp with the date
• data_name: Name.
• value: value.
• category: Category, mark the colors of the graph.

The SQL statement to execute, in this case:

<select>
    <columns>
        studio_d3_time_by_day.the_datetime      'the_date',
        studio_promotion.promotion_name         'data_name', 
        sum(studio_sales_fact_1998.unit_sales)  'value',
        media_type                              'category' 
        
    </columns>
    <from table='studio_sales_fact_1998' >
        <join table='studio_promotion'>
            <on>studio_sales_fact_1998.promotion_id = studio_promotion.promotion_id</on>
        </join>
        <join table='studio_d3_time_by_day'>
            <on> studio_sales_fact_1998.time_id = studio_d3_time_by_day.time_id</on>
        </join>        
    </from>

    <group>1,2,4</group>
</select>

This d3 Timeseries chart represents the total sales of Store by promotion media type. Large words indicate high values of column value (in this case, sales).

We can use drop-down menu to change the data time range.

The top three charts on the left display three different variables over time. At the bottom we have another chart that compare two variables over the same time period. On the right, a scatter plot shows the data of bottom chart. In the bottom right are the details of the currently focused data point.

The columns name of select has to be:

• date: Timestamp with the dates
• value1: Value of series 1 in that Timestamp.
• value2: Value of series 2 in that Timestamp.
• value3: Value of series 3 in that Timestamp.
• value4: Value of series 4 in that Timestamp.
• value5: Value of series 5 in that Timestamp.
• value1_name: Name of the series 1.
• value2_name: Name of the series 2.
• value3_name: Name of the series 3.
• value4_name: Name of the series 4.
• value5_name: Name of the series 5.

<union type="all">
    <select>
        <columns>
            invoice.invoiceDate <alias name='date'/>,
            sum(invoice.total) <alias name='value1'/>,
            0 <alias name='value2'/>,
            0  <alias name='value3'/>,
            sum(invoice.total) <alias name='value4'/>,
            0 <alias name='value5'/>,
            'Jane'  <alias name='value1_name'/>,
            'Margaret'  <alias name='value2_name'/>,
            'Steve'  <alias name='value3_name' />,
            'Jane'  <alias name='value4_name'/>,
            'Mean'  <alias name='value5_name' />
        </columns>    
        <from table='invoice'>
            <join table='customer'>
                <on>customer.customerid = invoice.customerid</on>
            </join>
        </from>
        <where>customer.supportrepid = 3</where>
        <group>1</group>
    </select>
    
    <select>
        <columns>
            invoice.invoiceDate <alias name='date'/>,
            0 <alias name='value1'/>,
            sum(invoice.total) <alias name='value2'/>,
            0 <alias name='value3'/>,
            0 <alias name='value4'/>,
            0 <alias name='value5'/>,
            'Jane'  <alias name='value1_name'/>,
            'Margaret'  <alias name='value2_name'/>,
            'Steve'  <alias name='value3_name' />,
            'Jane'  <alias name='value4_name'/>,
            'Mean'  <alias name='value5_name' />
        </columns>    
        <from table='invoice'>
            <join table='customer'>
                <on>customer.customerid = invoice.customerid</on>
            </join>
        </from>
        <where>customer.supportrepid = 4</where>
        <group>1</group>
    </select>
    
    <select>
        <columns>
            invoice.invoiceDate <alias name='date'/>,
            0 <alias name='value1'/>,
            0 <alias name='value2'/>,
            sum(invoice.total) <alias name='value3'/>,
            0 <alias name='value4'/>,
            0 <alias name='value5'/>,
            'Jane'  <alias name='value1_name'/>,
            'Margaret'  <alias name='value2_name'/>,
            'Steve'  <alias name='value3_name' />,
            'Jane'  <alias name='value4_name'/>,
            'Mean'  <alias name='value5_name' />
        </columns>    
        <from table='invoice'>
            <join table='customer'>
                <on>customer.customerid = invoice.customerid</on>
            </join>
        </from>
        <where>customer.supportrepid = 5</where>
        <group>1</group>
    </select>
    
    <select>
        <columns>
            invoice.invoiceDate <alias name='date'/>,
            0 <alias name='value1'/>,
            0 <alias name='value2'/>,
            0 <alias name='value3'/>,
            0 <alias name='value4'/>,
            sum(invoice.total)/3 <alias name='value5'/>,
            'Jane'  <alias name='value1_name'/>,
            'Margaret'  <alias name='value2_name'/>,
            'Steve'  <alias name='value3_name' />,
            'Jane'  <alias name='value4_name'/>,
            'Mean'  <alias name='value5_name' />
        </columns>    
        <from table='invoice'>
            <join table='customer'>
                <on>customer.customerid = invoice.customerid</on>
            </join>
        </from>
        <group>1</group>
    </select>
</union>

In our case, we have 3 different people where it represents the total invoices over the time. At the bottom chart, represents the average of total invoices and the Jane's invoices.

We can use drop-down menu to change the data time range.

The 'Circle Pack' feeds on the same data that the hierarchy chart does, that is, nodes that are connected between them through parent-children relations. The main difference between these is that the 'Circle Pack' uses a bidimensional circular layout to display this data, which requires an extra field in the hierarchical structure containing an integer value (that can be revenue, size, magnitude...) Therefore, its main advantage over the simple hierarchical tree is its easies and faster visualization of differences between nodes, or which is the same, branches of the hierarchical tree.

Unlike the rest of charts, the 'Circle Pack' belongs to a group of charts (along with Sunburst, Bilevel and Treemap) for which the columns do not need a specified name but rather a specified order. This order is selecting first the parent columns followed after by the children columns ending with the value column. In a family-like structure, that would mean : ... > grandparent > parent > son > ... > value.

This is clearly exemplified in the next SQL statement to execute:

<select>
     <columns>
        state,
        city,
        company,
        value
    </columns>
    <from table='studio_d3_hierarchy' />
</select>

The resulting chart of this select would be :

The 'Treemap' chart displays hierarchical data in the same way that the 'Circle Pack' does but in a rectangular layout. It also belongs to general hierarchy group, meaning that the structure of the data needed for this chart is the same as for the others (Circle Pack, Sunburst and Bilevel) :

<select>
     <columns>
        state,
        city,
        company,
        value
    </columns>
    <from table='studio_d3_hierarchy' />
</select>

The resulting chart would be :

The 'Bilevel' chart displays hierarchical data in the same way that the hierarchy tree chart does, but in a circular way, which allows for a better comparison between nodes in case these have a value associated. It belongs to the general hierarchy group (along with Circle Pack, Treemap and Sunburst), which means that the data required by the select requires only parent-children order from left to right and a final integer column :

<select>
     <columns>
        state,
        city,
        company,
        value
    </columns>
    <from table='studio_d3_hierarchy' />
</select>

This results in :

The data representation of the 'Sunburst' chart is the same that of the 'Bilevel', with its main difference being the interactivity, since 'Sunburst' displays all the data directly. Since the 'Sunburst' chart also belongs to the general hierarchy group, the select requires a certain order of columns, with the first being the parents and the last the children, with a last column consisting of an integer value :

<select>
     <columns>
        state,
        city,
        company,
        value
    </columns>
    <from table='studio_d3_hierarchy' />
</select>

The result would be :

The organizational chart displays hierarchical data in the same way that the hierarchy tree chart does, but in a vertical way.

<select>
    <columns>
        id, 
        name,
        parent_id
    </columns>
    <from table="studio_d3_hierarchy_tree"/>
</select>

The result is a company organizational chart with the name of employees:

If we want to change the background color and the font color of nodes, we have only to add the bgcolor and color columns to the select. In this case, if a node has children would be red if not orange. And we choose white to the font color.

<select>
  <columns>
        id, 
        name,
        parent_id,
        'white' color,   
        CASE WHEN (EXISTS (SELECT a.parent_id
                            FROM studio_d3_hierarchy_tree a
                           WHERE studio_d3_hierarchy_tree.id = a.parent_id))
            THEN 'red'
            ELSE 'orange'
        END bgcolor
  </columns>
  <from table="studio_d3_hierarchy_tree"/>
</select>

A timeline is a visualization of events over time. Event types are shown as individual rows on the timeline. Each occurrence of an event is displayed on the associated row by a shape/icon and color. The most common use case for a timeline is to show a timeline of events associated with a specific object.

The columns name of select has to be:

• name: Name of event type.
• time_event: Time of event.
• text_event: Description of event.

<select>
    <columns>
        studio_departments.dept_name name, 
        studio_employees.hire_date time_event, 
        studio_employees.first_name text_event, 
        studio_dept_emp.dept_no
    </columns>
    <from table='studio_employees'>
         <join table='studio_dept_emp'>
            <on>studio_employees.emp_no = studio_dept_emp.emp_no</on>
        </join>
        <join table='studio_departments'>
            <on>studio_dept_emp.dept_no = studio_departments.dept_no</on>
        </join>
    </from>
</select>

The result is a time events chart with the hire date of employees grouped by departments:

1. Horizontal Axis Labels: The horizontal axis labels display time.
2. Verrtical Axis Labels: The vertical axes labels represent the event type being displayed in that row. The label can optionally include the total number of event indications in the specified timeline.
3. Hover Indicator: When hovering over the timeline, a grey vertical line is displayed with a tooltip indicating the date and time of that point on the timeline.
4. Events: Clicking on an event a tooltip will display details of event.
5. Interactive Chart:
   • Click and drag the chart left or right to navigate backwards or forward in time.
   • Use the mouse wheel to zoom in and out of the time range.
   • Note: The view context in the navigation viewport (7) automatically adjusts its size and position to match the data shown.
6. Navigation Viewport : The navigation viewport shows the available time range of the data to be viewed.
7. View Context :
   • Drag it left/right to scroll through the data on the main chart.
   • Click and drag the left and right edges to increase/decrease the amount of data shown.
   • Click off of the view context in the viewport to show the full data set in the main chart.
   • Click and drag on the viewport to create a new view context.