Sgvizler has moved to github. This site and its repository will no longer be maintained.
wiki:Sgvizler/0.5/DesigningQueries

Version 1 (modified by martin, 4 years ago) (diff)

--

Designing Queries for Sgvizler 0.5

When designing your SPARQL query for visualization in Sgvizler order and the datatypes of the variables in the SELECT block is crucial for successful results. If the received data does not fit the required format, then, depending on the browser, an explanation of why the chart does not appear will be given. Sgvizler sets the datatype for each column by looking at the first row of results. Datatypes are decided only on the basis of the XSD datatype of the values. xsd:int, xsd:long, xsd:integer, xsd:float, xsd:double, xsd:decimal are types as "number"; xsd:boolean as "boolean"; xsd:date as "Date" object: xsd:dateTime as "Date" object; and xsd:time as "timeofday" Array. The rest, especially string, untyped literals and resources, are typed as "string".

The order of variables decides how the information in the diagram is grouped. The first variable becomes the first column, and so on. Generally, the first column specifies the category in which the other columns are grouped, i.e. the first column is the x-axis, and the remaining columns give different series on the y-axis. However, there are variations between diagram; see below for details.

Available chart types

NameId
Line Chart gLineChart
Area Chart gAreaChart
Area Chart gSteppedAreaChart
Column Chart gColumnChart
Bar Chart gBarChart
Sparkline gSparkline
Scatter Chart gScatterChart
Bubble Chart gBubbleChart
Pie Chart gPieChart
Candlestick Chart gCandlestickChart
Gauge gGauge
Org Chart gOrgChart
Tree Map gTreeMap
Motion Chart gMotionChart
Timeline gTimeline
Geo Chart gGeoChart
Geo Map gGeoMap
Map gMap
Map+ sMap
Table gTable, sTable
Force-directed Graph dForceGraph
Graph rdGraph
List sList
Definition List sDefList
Text sText

Line Chart, Area Chart, Stepped Area Chart, Column Chart, Bar Chart

source:misc/image/screenshot/thumb/gLineChart.png.thumb.jpg

Format: 2--N columns:

  • The category label, i.e. the x-axis. Any datatype(?)
  • 2nd.--Nth. column: each column represents a separate y-axis series. Datatype: number.

These chart types are very similar and have the same data format requirements. Line charts represents the relationship between the x-series and each y-series as a line. An area chart colors the area below this line. A column chart represents the relationship with vertical bars, and bar charts using horizontal bars. Scatter charts, shown below, are also similar to these chart types.

Sparkline

source:misc/image/screenshot/thumb/gSparkline.png.thumb.jpg

Format: 1--N columns: each column represents a separate y-axis series. Datatype: number.

Minimalistic line chart showing only the line, no labels or axis. Rendered as an image.

Scatter Chart

source:misc/image/screenshot/thumb/gScatterChart.png.thumb.jpg

Format: 2--N columns: ( Google's description)

  • The x-axis. Datatype: number.
  • 2nd.--Nth. column: each column represents a separate y-axis series. Datatype: number.

Use scatter charts to plot a set of single data instances (i.e. not aggregate data) and find trends.

Bubble Chart

source:misc/image/screenshot/thumb/gBubbleChart.png.thumb.jpg

See  Google's description.

Pie Chart

source:misc/image/screenshot/thumb/gPieChart.png.thumb.jpg

Format: 2 columns: ( Google's description)

  • The pie slice label. Datatype: any?
  • The pie slice value. Datatype: number.

Candlestick Chart

There is no example of the this chart type yet. See the  description at Google for the data format description and an example.

Gauge

source:misc/image/screenshot/thumb/gGauge.png.thumb.jpg

Format: 2 columns: ( Google's description)

# Name of gauge. Datatype: string. # Value of gauge. Datatype: number.

Org Chart

source:misc/image/screenshot/thumb/gOrgChart.png.thumb.jpg

Format: 1--3 columns: ( Google's description)

  • ID of node. Datatype: any.
  • ID of parent. Datatype: any.
  • Tool-tip text to show, when a user hovers over this node.

Draws trees representing the the child-parent relation. See also Tree Map if you want to represent values of your node, and draw a box and not trees.

Tree Map

source:misc/image/screenshot/thumb/gTreeMap.png.thumb.jpg

Format: 3--4 columns: ( Google's description)

  • ID of node. Datatype: string.
  • ID of parent. Datatype: string.
  • A value which determines the size of the node. Datatype: number, must be positive.
  • A value which determines the color of the node. Datatype: number.

Draws a tree structure as a partitioned box. The size of the box is determined by the value of the third argument. The color of the box of the fourth argument. Only the values of child nodes matter. Parents get the value of their children. Zoom in with left-clicks, out with right-clicks. See Org Chart if you want trees and not boxes.

Motion Chart

source:misc/image/screenshot/thumb/gMotionChart.png.thumb.jpg

Format: 3--N columns: ( Google's description)

  • ID of the thing. Datatype: string.
  • Timestamp for value. Datatype: different time formats, see Google's page.
  • 3rd--Nth. column: Values. Datatype: string or number.

A complex chart type with animation and contains many different charts in one. Shows values for things over time. Value series can be turned on or off. Sometimes series switch places.

Timeline

source:misc/image/screenshot/thumb/gTimeline.png.thumb.jpg

Draws an interactive diagram with dates or timestamps on the x-axis and the y-axis series as line diagrams. Can scroll back and forth in time and zoom in time. Somewhat difficult data format, see  Google's description for a description. Drawn using Flash. Requires that the size of the html container element is explicitly set, which may not be the case for the site where the example runs on.

Geo Chart

Not tested. I have no good data for this in my dataset, so see  Google's description for more information.

Geo Map

source:misc/image/screenshot/thumb/gGeoMap.png.thumb.jpg

Format: 2--4 columns: ( Google's description)

  • Latitude. Datatype: number.
  • Longitude. Datatype: number.
  • Value to display at the given position. Datatype: number.
  • Label for the position. Datatype: string.

Draws a map and lays out the values of the 3rd column as circles of size and color according to the size of the value. This chart offers little zooming and panning options, and are not at all implemented by Sgvizler. Also the map region available for the dataset is not a good match as my things are in the middle of the sea outside of Norway; the map for Norway is too small and the map of Northern Europe is too big. Which is sad because this could make a great chart type. Also there seems to be no easy way to change the color of the map; on the screenshot it looks like Mr. Sgvizler has been sunburned, but its only me who has turned up the contrast.

Map

Format: 1--3 columns, the two first columns specify a geographical point, the optional third a name for the point. (See  Google's description for details.) See also the chart type Map+ below. Displays markers on a Google Map. Max. 400 markers.

Map+

source:misc/image/screenshot/thumb/sMap.png.thumb.jpg

This is a custom-made function which produces nicely formatted html boxes to place on the markers of a Google Map Chart. If there are less than four columns this chart behaves just like Map. All options are passed through to Google's Map Chart, so Map+ takes all options Map takes, except Map+ operates only in dataMode=markers mode.

Format 2--6 columns:

  • Latitude. Datatype: number.
  • Longitude. Datatype: number.
  • Heading. Datatype: any.
  • Paragraph text. Datatype: any.
  • Link. Datatype: any, but should be a URL.
  • Image. Datatype: any, but should be a link to a small image.

Table

source:misc/image/screenshot/thumb/gTable.png.thumb.jpg

The gTable is a table with all the results returned by the query, formatted to a table by Google's functions. Rows can be sorted by clicking on columns. ( Google's description).

There is also a simple Sgvizler-made html table, sTable, which renders to the usual html table using plain <table>, <tr>, <th>, <td>.

Force-directed Graph

source:misc/image/screenshot/thumb/dForceGraph.png.thumb.jpg

Format 2--4 columns:

  • ID of source. Datatype: any.
  • ID of target. Datatype: any.
  • A value which determines the size of the node. Datatype: number, must be positive.
  • A value which determines the color of the node. Datatype: any.

This chart type function is written with the  D3 JavaScript? library. There are tons of possibilities for formatting the graph with this library, but few currently available through Sgvizler, as there is no consenus of what options to include. However, it is easy to extend the core to include other options. The code is found in  src/chart/dForceGraph.js. If you do have opinions, or make your own better version of this or other graph visualizations, please share them with the Sgvizler mailinglist.

Graph

source:misc/image/screenshot/thumb/rdGraph.png.thumb.jpg

Format 4--7 columns:

  • ID of source. Datatype: any, should be a URL.
  • Label of source.
  • ID of target. Datatype: any, should be a URL.
  • Label of target.
  • Label of edge between source and target. Multiple edges between same source and target are concatinated.
  • Color of source node.
  • Color of target node.

List

source:misc/image/screenshot/thumb/sList.png.thumb.jpg

This is a custom-made function which produces a simple html list. It can be either numbered or bullets.

Format is any number of columns. All columns are treated as text.

Chart options:

Name Default Description
list ul Specifies the listtype, should be either ul (unordered/bullets) or ol (ordered/numbered).
cellSep , The glue between cells in each row. Can be html.
rowPrefix (empty string) String to prefix each row with. Can be html.
rowPostfix (empty string) String to postfix each row with. Can be html.

Definition List

source:misc/image/screenshot/thumb/sDefList.png.thumb.jpg

Similar to List, but creates a html definition list.

Format two or more columns. All columns are treated as text. First column contains the terms to be defined, the rest contains the definition.

Chart options:

Name Default Description
cellSep , The glue between cells in each row. Can be html.
termPrefix (empty string) String to prefix each term with. Can be html.
termPostfix : String to postfix each row with. Can be html.
definitionPrefix (empty string) String to prefix each definition with. Can be html.
definitionPostfix (empty string) String to postfix each definition with. Can be html.

Text

source:misc/image/screenshot/thumb/sText.png.thumb.jpg

A generic text producer.

Any number of columns. The default treats the results as a block of text, each cell is a sequence of words, each row a paragraph.

Chart options:

Name Default Description
cellSep , The glue between cells in each row. Can be html.
cellPrefix (empty string) String to prefix each cell with. Can be html.
cellPostfix (empty string) String to postfix each cell with. Can be html.
rowPrefix <p> String to prefix each row with. Can be html.
rowPostfix </p> String to postfix each row with. Can be html.
resultsPrefix <div> String to prefix the whole results with. Can be html.
resultsPostfix </div> String to postfix the whole results with. Can be html.