Integrating content

When editing your page in expert mode, you are able to integrate other content directly in your page.

Embedding an OpenDataSoft visualization

When you are browsing a visualization on an OpenDataSoft portal (including your own), you can see below a few options to share the content, including “Embed”, which will provide you with a little HTML code that you can paste in your page. By doing so, you will embed the visualization inside your page.

../_images/integrate_map--en.png

Embedding a Twitter timeline

If you have an account on Twitter, you can create Twitter “widgets” from your Twitter account page, which are designed to be integrated in other websites (like a blog). When you create a widget, Twitter provides you with a little “code” to paste in your HTML code. Due to security concerns, JavaScript is blocked in OpenDataSoft pages editor, so you can’t directly use the code provided by Twitter. However, we provide an OpenDataSoft widget to achieve this instead.

First, you need to capture the “Widget ID”, which is present in the first line of the code, in the data-widget-id attribute:

<a class="twitter-timeline" data-dnt="true" href="**https://twitter.com/hashtag/opendata**" data-widget-id="12341234123412341234">My tweets</a>

In this example, the Widget ID is “12341234123412341234”.

Then, add this widget in your page, using your Widget ID in the widget-id attribute:

<ods-twitter-timeline widget-id=""12341234123412341234></ods-twitter-timeline>

Embedding other third-party content

Services like YouTube often provides ways to embed their content into other websites, under the form of a pastable code. Due to security concerns, we don’t allow users to write JavaScript into pages, and some of these embed codes may be done in JavaScript, which would therefore not work on our pages; but most services provide a code based on “iframes” which is fine. Working embeds include YouTube, Vimeo, or Dailymotion.

Using widgets

When editing your page content in expert mode, you may want to use the ODS-Widgets library, which is a set of components, available as HTML elements, allowing you to natively integrate data visualizations in your page code, and building interactive pages by combining widgets together.

The ODS-Widgets library is an open source, AngularJS-based framework developed and maintained by OpenDataSoft on GitHub. It comes with a complete and comprehenseive online documentation.

It can be used directly in your domain’s content pages, or in third party Web sites as a standalone toolkit.

Note

Despite being based on AngularJS, the ODS-Widgets is designed to be used as a set of HTML elements, and are therefore entirely used in HTML code, with no JavaScript to write. It is therefore usable by anyone with a few notions of HTML, and doesn’t require development skills. Moreover, many visualizations from OpenDataSoft provide the equivalent widgets code in real time when you use them from the portal, so you can learn by starting from the result of a visualization and iterate from there.

On top of all the widgets offered by the ods-widgets library, a few additional directives are available for use within the content pages on the platform. Contrary to the widgets, these cannot be used on third-party websites for they are tightly coupled with the platform.

Widgets list

odsAggregation

  • This widget exposes the results of an aggregation function on a dataset field. Can be used for example to expose the average temperature of a weather dataset. The result is exposed into a new variable that you can use in other widgets or directly in your HTML.
  • Full documentation

odsAnalysis

  • This widget exposes the results of multiple aggregation based on an axis. Like for a chart, for each value of the X axis, it computes aggregation functions. It can be used with AngularJS’s ngRepeat to simply build a table of analysis results.
  • Full documentation
  • Linked to odsAnalysisSerie

odsBreezometer

  • Integrates a Breezometer “widget” using the widget key provided by Breezometer
  • Full documentation

odsCalendar

  • This widget can take any dataset containing at least two datetime fields and a text field and use it to display a calendar. It can load at most 1000 events (records) at once.
  • Full documentation

odsCatalogContext

  • A “catalog context” represents the entire catalog (list) of datasets from a given domain, and a set of parameters used to query this catalog.
  • Full documentation

odsChart

  • This widget is the base widget allowing to display charts from OpenDataSoft datasets. A Chart is defined by one or more series that get there data from form one or more dataset represented by an Dataset Context, a type of chart and multiple parameters to fine tune the appearance of chart.
  • Full documentation
  • Linked to odsChartQuery and odsChartSerie

odsClearAllFilters

  • This widget displays a button which will clear all active filters in the given context.
  • Full documentation

odsDatasetCard

  • If you wrap this directive around an element or a set of element, it will display an expandable card above it to show the title and description of the dataset, along with a link to the portal that shows the dataset, and the license attached to the data.
  • Full documentation

odsDatasetContext

  • A “dataset context” represents a dataset, and a set of parameters used to query its data. A context can be used by one or more directives, so that they can share information (generally the query parameters).
  • Full documentation

odsDatetime

  • Get the ISO local datetime and store it into a variable (into the scope).
  • Full documentation

odsDisqus

  • This widget shows a Disqus panel where users can comment the page.
  • Full documentation
  • More information about Configuring disqus /!to be written

odsDomainStatistics

  • This widget enumerates statistic values for a given catalog and injects them as variables in the context.
  • Full documentation

odsFacetResults

  • This widget fetches the results of enumerating the values (“categories”) of a facet, and exposes it in a variable available in the scope. It can be used with AngularJS’s ngRepeat to simply build a list of results.
  • Full documentation

odsFacets

  • This widget displays filters (facets) for a dataset or a domain’s catalog of datasets, allowing the users to dynamically “refine” on one or more categories for the context.
  • Full documentation

odsFilterSummary

  • This widget displays a summary of all the active filters on a context: text search, refinements...
  • Full documentation

odsGauge

  • This widget displays a gauge in one of the two following modes: circle or horizontal bar. The widget relies on CSS3 and SVG and as a result is entirely customizable in CSS.
  • Full documentation

odsGeoSearch

  • This widget displays a mini map with a draw-rectangle tool that can be used to search through a catalog.
  • Full documentation

odsGeotooltip

  • This directive, when used to surround a text, displays a tooltip showing a point and/or a shape in a map.
  • Full documentation

odsHubspotForm

odsInfiniteScrollResults

  • This widget displays the results of a query inside an infinite scroll list. It uses the HTML template inside the widget tag, and repeats it for each result.
  • Full documentation

odsLastDatasetsFeed

  • This widget displays the last datasets of a catalog (default is last 5), based on the modified metadata.
  • Full documentation

odsLastReusesFeed

  • This widget displays last reuses published on a domain (5 by default).
  • Full documentation

odsMap

  • This widget allows you to build a map visualization and show data using various modes of display using layers. Each layer is based on a Dataset Context, a mode of display (clusters...), and various properties to define the display itself, such as colors.
  • Full documentation

odsMediaGallery

  • This widget displays an image gallery of a dataset containing media with thumbnails (images, pdf files...) with infinite scroll.
  • Full documentation

odsMostPopularDatasets

  • This widget displays the top datasets of a catalog (default is the 5 top datasets), based on the number of downloads.
  • Full documentation

odsMostUsedThemes

odsPicto

  • This widget displays a “picto” specified by a url and force a fill color on it. This element can be styled (height, width...), especially if the picto is vectorial (SVG).
  • Full documentation

odsPlumeAirQuality

odsRecordImage

odsRedirectIfNotLoggedIn

  • This widget forces a redirect to the login page of the domain if the user is not logged in.
  • Full documentation

odsResultEnumerator

  • This widget enumerates the results of a search (records for a Dataset Context, datasets for a Catalog Context) and repeats the template (the content of the directive element) for each of them.
  • Full documentation

odsResults

  • This widget exposes the results of a search (as an array) in a variable available in the scope. It can be used with AngularJS’s ngRepeat to simply build a list of results.
  • Full documentation

odsReuses

  • This widget displays all reuses published on a domain, in a infinite list of large boxes that presents them in a clear display. The lists show the more recent reuses first.
  • Full documentation

odsSearchbox

  • This widget displays a wide searchbox that redirects the search on the Explore homepage of the domain.
  • Full documentation

odsSocialButtons

  • This widget displays a share button that on hover will reveal social media sharing buttons.
  • Full documentation

odsSpinner

  • This widget displays the custom OpenDataSoft spinner. Its size and color match the current font’s.
  • Full documentation

odsTable

  • This widget displays a table view of a dataset, with infinite scroll and an ability to sort columns (depending on the types of the column).
  • Full documentation

odsTagCloud

  • This widget displays a “tag cloud” of the values available in a facet (either the facet of a dataset, or a facet from the dataset catalog).
  • Full documentation

odsTextSearch

  • This widget displays a search box that can be used to do a full-text search on a context.
  • Full documentation

odsThemeBoxes

  • This widget enumerates the themes available on the domain, by showing their pictos and the number of datasets they contain.
  • Full documentation

odsThemePicto

odsTimerange

  • This widget displays two fields to select the two bounds of a date and time range.
  • Full documentation

odsTimescale

  • Displays a control to select either: last day, last week, last month or last year
  • Full documentation

odsTopPublishers

odsTwitterTimeline

  • Integrates a Twitter “widget” using the widget ID provided by Twitter.
  • Full documentation

Filters

In addition to AngularJS filters, OpenDataSoft widgets library includes some additional that can be used in custom pages :
capitalize, fieldsFilter, firstValue, imageify, imageUrl, isAfter, isBefore, isDefined, isEmpty, join, keys, moment, momentadd, momentdiff, nofollow, normalize, numKeys, shortSummary, slugify, split, stringify, themeColor, themeSlug, thumbnailUrl, timesince, toObject, truncate, values, videoify

Creating dashboards

A step by step tutorial to create a simple dashboard with data visualization, filters, and counters.