# Creating a Customizable Open Source Dataverse Widget for Website Integration

Dataverse community meeting - June 2022

Baptiste Rouxel, CDSP, Sciences Po & CNRS
[baptiste.rouxel@sciencespo.fr](mailto:baptiste.rouxel@sciencespo.fr)
# Context

## Center for Socio-Political Data (CDSP)

* Created in 2006

* Part of Sciences Po & the CNRS

* Based in Paris

## Timeline

* 2006-2020: Nesstar

* 2017: current CDSP's website

* 2020: data.sciencespo (Dataverse)

<figure><img src="image_1.png" /></figure>

Datasets showcase page on the current CDSP's website
# The problem

* Efficiency and workflow issue: each dataset entry are manually created

* Redundancy: content from our website and our Dataverse is similar

* High maintenance cost & not motivating / rewarding
# The vision

* Easy way to integrate data from a Dataverse instance

* Adapt it to your usage and webpage design language (customization: style, features)

* Use cases examples:

* Research center

* Personal page (researcher or other)

* Display datasets in a collection or with a common theme
# Prototype demo & use case example

https://github.com/CDSP-SCPO/dataverse-feed

## Dataverse Feed

This is an example page using [CDSP-SCPO/dataverse-feed](https://dataverse-feed) with the [data.sciencesp](https://dataverse-feed) Dataverse instance. Here are the datasets from the [CDSP](https://dataverse-feed) collection:

Search...

Search

Publication Year

<figure><img src="image_2.png" /></figure>

Topic Classification Term

<figure><img src="image_3.png" /></figure>

Author Name

<figure><img src="image_4.png" /></figure>

Subject

<figure><img src="image_5.png" /></figure>

Keyword Term

<figure><img src="image_6.png" /></figure>

Time Period Covered Start

<figure><img src="image_7.png" /></figure>

Time Period Covered End

<figure><img src="image_8.png" /></figure>

Geographic Coverage Country / Nation

<figure><img src="image_9.png" /></figure>

Language

<figure><img src="image_10.png" /></figure>

359 items

### Connaissance et perception des questions démographiques (2018)

De Luca Barrusse, Virginie; Andro, Armelle; Avdeev, Alexandre; Dejoux, Virginie; Lefevre, Cécile; Orain, Renaud; Scodellaro, Claire; Veron, Jacques, 2020, "Connaissance et perception des questions démographiques (2018)", https://doi.org/10.21410/7E4/GVFUER, data.sciencesp, V6, UNF:6:UyHfvYGxHDxxVbqgEEM/xA== [fileUNF]

L'enquête Connaissance et perception des questions démographiques (POP-AWARE) vise à interroger les connaissances et la perception des questions démographiques de la population générale et à prendre en considération ce qu'elles doivent à leur vulgarisation. Il s'agit de mesurer la convergence d'opinions et d'informations qui produisent un ensemble d'idées et qui conduisent à la compréhension plus...

View

doi:10.21410/7E4/GVFUER
# How to use & current features

* Add the widget to any webpage in a few lines of code

* Search

* Facets

* Pagination

* Customization

* Search API parameters support:

* Query, number of items per page, collection, ordering

* Show/hide search field

* Show/hide facets

* Support for styling

```html
<script type="module" defer>
import createFeed from "/PATH_TOhtaJS";
createFeed(
  document.getElementById('ELEMENT_ID'),
  {
    domain: "DATAVERSE_URL",
    params: {}
  },
);
</script>
```
# Current limitations & possible improvements

* Multilingualism

* Older browsers

* Support for more search API parameters

* Support for other item types (collections, files)

* Add different ways to display the list and items (templates)

* Un-bootstrap it

* ...
Thank you!

Baptiste Rouxel, CDSP, Sciences Po & CNRS
[baptiste.rouxel@sciencespo.fr](mailto:baptiste.rouxel@sciencespo.fr)