User:Wingoli/SparqlCharts

The Sparql Charts extension allows to query SPARQL endpoints and display the query result in different formats.

Download
You can download the extension [TODO:Link here].

Installation

 * 1) Unzip the downloaded zip file. Put the folder 'SparqlCharts' into your wikis extension folder.
 * 2) Include the following line at the end of your LocalSettings.php:
 * 3) You can use the extension now! (There are no other extensions required as prerequisites and there is no setup procedure needed.)

Usage
This is a brief introduction on how to use the SparqlCharts extension.

Basic usage
After successful installation, you can execute a SPARQL query and display the results of that query by using the following pattern:

In the pattern, replace  with your SPARQL query and   with the endpoint you want to send your query to. A simple query could look like this:

Since we did not define a format by setting the format parameter, the query result gets displayed as the default format, which is a table. To display the results in a format other than a table, add the line  and replace   by any value listed below. Each format provides several parameters, to change it's visual appearance such as  or.

All available formats are listed below.

TODO: Explain xaxis, yaxis etc. bzw. bei boxplot: boxplot1...

TODO: welche werte kann man bei color eintragen

Parameters to manipulate SPARQL result table
Every format has certain parameters to select the very parts from the SPARQL query's result table that should be displayed in the chart.

Parameter, ,
Let be the result table of the SPARQL query with  rows and  columns and let  be the cell of  in row  and column. Most of the chart formats display 2-tuples of the form, which means every element of one tuple corresponds to the same row in the table. With the parameter  you can chose the column  for the first element of the 2-tuple by setting the   parameter to the name of the SPARQL query's result variable that corresponds to the column.

For the bar chart format, as shown in the image below, every bar corresponds to a 2-tuple, where the first element of the tuple becomes the x-axis value of the bar, representing the "name" of the bar, and the second element becomes the y-axis value, representing the height of the bar (hence the naming of the parameters).



The charts listed in the table all work after this logic.

xaxis                              yaxis                                         zaxis bar chart: name of bars on xaxis,  height of bars (=y-axis value) line chart: x-value of point,             y-value of point pie chart: x

multi-bar chart: x=x, y=y, z=z pie chart: xaxis=name of slices, yaxis=size of slices stacked-area chart: x=x, y=y, z=z

Parameter ,
At the current state of implementation, you can only use the parameters,   etc. and respectively  ,



Simple Bar Chart
Click on "Expand" to see details about this format.



Mandatory parameters:,.

Used JavaScript library: D3.js

See HERE (TODO: Link) for a explanation of the parameters  and.

Click on "Expand" to see an example of the "bar chart" format.



The chart depicted in this screenshot has been created by the following code:

Multi-Bar Chart
Click on "Expand" to see details about this format.



Mandatory parameters:,.

Used JavaScript libraries: D3.js,  NVD3.js

See HERE (TODO: Link) for a explanation of the parameters,    and.

Click on "Expand" to see an example of the "mulit-bar chart" format.



The chart depicted in this screenshots has been created by the following code:

Pie Chart / Donut Chart
Click on "Expand" to see details about this format.



Mandatory parameters:,. (Note: For using the donut chart, you need to set  . As per default, this format is a pie chart.)

Used JavaScript libraries: D3.js,  NVD3.js

See HERE (TODO: Link) for a explanation of the parameters  and.

Click on "Expand" to see an example of the "donut chart" format.



The chart depicted in this screenshot has been created by the following code:

Simple Line Chart
Click on "Expand" to see details about this format.



Mandatory parameters:,.

Used JavaScript libraries: D3.js,  NVD3.js

See HERE (TODO: Link) for a explanation of the parameters  and.

Click on "Expand" to see an example of the "simple line-chart" format.



The chart depicted in this screenshot has been created by the following code:

Stacked Area Chart
Click on "Expand" to see details about this format.



Mandatory parameters:,.

Used JavaScript libraries: D3.js,  NVD3.js

Modes: Stacked, Stream, Expanded

See HERE (TODO: Link) for a explanation of the parameters,    and.

Boxplot
Click on "Expand" to see details about this format.



Mandatory parameters:,.

Used JavaScript libraries: D3.js

Outlier-Switch erklären: 0=keine outlier werden angezeigt

Click on "Expand" to see an example of the "bar chart" format.



The chart depicted in this screenshot has been created by the following code:

Force Directed Graph
Click on "Expand" to see details about this format.



Click on "Expand" to see an example of the "bar chart" format.

400px|SparqlCharts extension (boxplot format)

The chart depicted in this screenshot has been created by the following code:

Displaying annotations
To display annotations that you have created, click on the button View Annotations. Every annotation is represented by a horizontal line on the left side of the article's text. You can view the information which belong to an annotation by moving your mouse cursor over the respective horizontal line.

Changing and deleting annotations
When you select an annotation via mouseover you can press the button Change Annotation to change the values of the semantic properties that belong to the observed annotation. By clicking  Delete Annotation the annotation will be deleted.

Query annotations
You can query annotated text passages that have been given a certain value in one of its semantic properties. For example you can query all annotations where the value "King_Speech_Annotation " has been attached to the property "STAannotationType" and that where made by the user "Olutzi" by using the following syntax:

In the screenshot, the resulting annotations are ordered by the date of their creation.



How it works
The Semantic Text Annotator defines a custom namespace for annotations (TextAnnotation:). Each annotation is stored as a unique page in this namespace. The information of an annotation are stored in semantic properties on this page. Some property values are defined by the user through the pop up form window. By default there are two properties the user can define himself:
 * STAannotationType
 * Can be used to categorize the selected text passage.

STAcomment
 * Can be used to briefly describe the selected text passage within its category.

Semantic Text Annotator also defines a few custom properties that are added to an annotation page that are necessary to correctly store and retrieve annotations.
 * STAannotationSerialNumber
 * An unique number to identify every annotation.


 * STAarticleName
 * The name of the article the annotated text passage belongs to.


 * STAannotationDate
 * The date the annotation has been created or changed.


 * STAcreatedBy
 * The user that created the annotation.

Future development
Chart-Vorlagen, die man mit ins Programm aufnehmen könnte:

- NVD3 Scatter/Bubble Chart TODO: Screenshot

- NVD3 Multi-Line Chart with focus TODO: Screenshot

- NVD3 Horizontal Multi-Bar Chart TODO: Screenshot

The Semantic Text Annotator is still under heavy development. Feedback, bug reports and feature requests are therefore very welcome!

Charts nebeneinander anzeigen können (->bisher nur untereinander)

Planned features

 * 1) Executability of the extension on articles containing all possible syntax
 * 2) Customizable structure of the user-defined semantic properties
 * 3) Possibility to change the position of an annotated text passage ex post by dragging start and end of the selected area

Known issues

 * Filter statements in SPARQL that use the pipe symbol for logical OR statements (the || symbol) will not work with the MediaWiki parser. To fix this, you need to create a template, such as the Template:! which contains the pipe character, and then include this template within your queries.
 * Will not work: FILTER(?x = 3 || ?x = 4)
 * Works: filter(?x = 3 || ?x = 4)

Credits
The SparqlCharts extension is (to some degree) based on the "SparqlExtension" by [mailto:a.chmieliauskas@tudelft.nl Alfredas Chmieliauskas], [mailto:c.b.davis@tudelft.nl Chris Davis], which provides similiar functionality.