Visualization

The YDS Library includes a number of visualization components ranging from map, line and bar charts to pie and grid widgets. In the following paragraphs, we present thoroughly each component along with the available customization options.

1. Heat Map Component:

The 'Heat Map' component is based on the Highmaps visualization library. It is a map component which allows users to depict countries with different colors depending on the data provided for each country. The developers are able to define the range of countries or continents shown inside the map as well as the color range which will be used throughout the map.

Example Usage:

<yds-heatmap
    project-id="http://linkedeconomy.org/resource/AidActivity/NL-1-PPR-25961">
</yds-heatmap>

Input Values:

Screenshot:

2. Map Component:

The 'Map' component is based on the Leaflet JavaScript library , an open-source library for mobile-friendly interactive maps. It is a map component which can be used in order to display a specific route on a map. The displayed route is being retrieved through a REST API by declaring its unique identifier in the corresponding attribute of the component. The user is able to zoom to a specific portion of the map as well as to navigate to other locations. Moreover, the map component allows users to embed it on their own websites using an iframe element.

Example Usage:

<yds-map
    project-id="http://linkedeconomy.org/resource/Subsidy/519339"
    lang="en"
    embeddable="true"
    popover-pos="left">
</yds-map>

Input Values:

Screenshot:

3. Line Chart Component:

The 'Line Chart' component is based on the Highstock visualization library. It consists of a 2D plot of time - series data. The library can zoom into predefined time periods, or into custom time periods by means of the two date boxes on the top right corner. The zoom can also be altered graphically, by dragging the bottom right navigation bar left or right. The plot may be persisted using the two different buttons on the top right corner. On the right side, there is the ‘extract’ button, which provides the option to extract the plot in various image formats, or print the plot directly. On the left of this button is the ‘embed’ button, which provides embedding functionality of the component.

Example Usage:

<yds-line
    project-id="http://linkedeconomy.org/resource/AidActivity/NL-1-PPR-25961"
    view-type="aidactivity.transactions.amount.over.date"
    lang="en"
    element-h="350"
    show-navigator="false"
    add-to-basket="true">
</yds-line>

Input Values:

Screenshot:

4. Bar Chart Component:

The 'Bar Chart' component is based on the Highcharts library. It is a highly customizable chart library with the following features:

• HTML formatted title and subtitle
• HTML formatted tooltip
• Customizable padding and width
• Customizable colors on each bar group
• Directly printable document via a menu selection
• Directly exportable document as an image via a menu selection

The library is extended in the context of the YDS platform to support embed functionality, via a menu selection.

Example Usage:

<yds-bar
    project-id="none"
    view-type="aidactivity.benefactor.countries.all"
    add-to-basket="true"
    embeddable="true"
    element-h="460">
</yds-bar>

Input Values:

Screenshot:

5. Pie Chart Component:

The 'Pie Chart' component is based on the Highcharts JavaScript library, a library for creating pie plots for visualizing data. A pie chart is a circular chart divided into sectors which is proportional to the quantity it represents. The library comes with a handful of visualization features, such as:

• Configuration of colors, margins, paddings of the plot
• Ability to easily render plots from large datasets, with a highly configurable API
• HTML configurable title and tooltip

The component is extended in the context of the YDS platform to support embed functionality.

Example Usage:

<yds-pie
    project-id="http://linkedeconomy.org/resource/AidActivity/NL-1-PPR-28181"
    view-type="aidactivity.activity.per.sector"
    show-legend="true"
    embeddable="false"
    add-to-basket="false">
</yds-pie>

Input Values:

Screenshot:

6. Grid Component:

The 'Grid' component is based on the ag-Grid JavaScript library , a powerful library for creating data grids with large volumes of data. Users are able to navigate with ease through the displayed data by using its pagination features. They can also sort the displayed data (ascending/descending) based on a specific column of the table by clicking on the header of the corresponding column. Moreover, users have the ability to reorder and resize the columns of the grid according to their needs.

Example Usage:

<yds-grid
    project-id="http://linkedeconomy.org/resource/AidActivity/NL-1-PPR-25961"
    view-type="aidactivity.aidactivities.between.countries"
    sorting="true"
    lang="en"
    filtering="true"
    quick-filtering="true"
    col-resize="true"
    paging="false">
</yds-grid>

Input Values:

Screenshot:

7. Scatter Chart Component:

The scatter chart component is based on the Highcharts visualization library. It works in a similar way to the line chart component, but instead of displaying the data as a line, it is shown as individual points.

Example Usage:

<yds-scatter
    project-id="http://linkedeconomy.org/resource/AidActivity/NL-1-PPR-25961"
    view-type="aidactivity.transactions.amount.over.date"
    lang="en"
    element-h="350"
    show-navigator="false">
</yds-scatter>

Input Values:

Screenshot:

8. Bubble Chart Component:

The Bubble Chart component is based on the Highcharts visualization library. It shows a type of chart that can display data with 3 dimensions via each data point's x, y axis positions and its size.

Example Usage:

<yds-bubble
    project-id="http://linkedeconomy.org/resource/Contract/AwardNotice/6723325"
    view-type="contract.listitems.for.buyer.and.seller"
    element-h="450"
    lang="en">
</yds-bubble>

Input Values:

Screenshot:

9. Tree Map Component:

The tree map component displays each point of data as a rectange. Each rectangle's size represents the size of its value relative to the other data points. This component also has drill-down functionality for data with multiple levels.

Example Usage:

<yds-tree-map
    project-id="none"
    view-type="contract.seller.countries.all"
    element-h="460">
</yds-tree-map>

Input Values:

Screenshot: