Data Visualization Package for Sitecore Experience Accelerator

Data Visualation Package (DatVizPack)

The Data Visualization Package (DataVizPak) for Sitecore Experience Accelerator (SXA) incorporates powerful data-driven visualizations into the standard SXA toolbox. SXA offers a wide range of components for content authors to speed up production of websites. DataVizPak extends the available components with powerful data visualizations that content editors can use to add a new dimension of content to their websites.

Dependencies

Before you can install DataVizPak, you need to install the following items:

Installation

  1. Install Sitecore package: DataVizPak-1.0.0.0.zip.
  2. Publish with subitems the following paths:
    1. /sitecore/layout/Renderings/Feature/Experience Accelerator/Data Visualizations
    2. /sitecore/system/Settings/Feature/Experience Accelerator/Data Visualizations
    3. /sitecore/templates/Branches/Feature/Experience Accelerator/Data Visualizations
    4. /sitecore/templates/Feature/Experience Accelerator/Data Visualizations

Available Visualizations

DataVizPak comes with several data visualizations out of the box, based on the popular D3.js library.

Histogram

Histograms are graphical representations of the frequency of data events, usually over a range of time.

Histogram Parameters

Histogram visualizations in DataVizPak have several fields required for configuration. These fields are available on the datasource item.

Additionally, the “Show Labels” check box is available on the component properties. If checked, the histogram will include labels of the data value on each column.

Scatter Plot

Scatter plots are plots of data points on a Cartesian graph (read more at Wikipedia).

Scatter Plot Parameters

Scatter Plot visualizations in DataVizPak have several fields required for configuration. These fields are available on the datasource item.

Sunburst

Sunbursts are a form of pie chart that use multilevel concentric circles to represent hierarchical data (read more at Wikipedia). The sunburst visualization provided in DataVizPak is interactive, allowing for zooming in and out to examine data more closely.

Sunburst Example

Sunburst Parameters

Sunburst visualizations in DataVizPak have two required for configuration. These fields are available on the datasource item.

Using DataVizPak

When creating a new site, make sure the “Data Visualizations” feature is enabled: New SXA Site - Features

N.B. If you would like to add data visualizations from DatVizPack to an existing SXA site, you need to manually update the site items in Sitecore to add the features.

DataVizPak updates the SXA toolbox with all of the new visualizations:

Toolbox

Select the datasource (or create a new one) and click “OK”.

Datasource

KNOWN ISSUE ALERT: The first visualization added to any page will not show up in experience editor, and the save button will not be enabled. To save the component, make an edit to some other part of the page and save the page. The visualization will properly appear after saving. This issue is documents as #30. This will be fixed in DataVizPak Mark II.

After inserting a data visualization component, component properties will pop up. Configure the properties for the data visualization and click “OK”.

The visualization component will be present on the page. If you created a new datasource, the visualization will be blank.

New Blank Histogram

You’ll need to update the datasource fields with the data and parameters you want.

Datasource Parameters

Save and close the datasource, and voilà, you have a visualization!

Histogram

Warning About External Data Sources

DataVizPak allows for content editors to configure visualizations to pull from data sources hosted on an external site. However, the external site must have CORS enabled or DataVizPak will not be able to load the data. To visualize data from external sites without CORS enabled, download the data from the external site and upload the data to Sitecore.

Known Issues

DataVizPak 1.0 has several known issues. The notable issues are listed below; you can find the full list at /issues:

These notable issues will be resolved in DataVizPak Mark II.

Roadmap

  1. DataVizPak 1.1:
  2. Resolve issues #28, #29, and #30.
  3. Update visualizations to act more in line with “Wireframe” theme (#24).
  4. DataVizPak 1.2:
    1. Add additional style color options (#21).
    2. Add the ability to select rolling time frames for histograms and scatter plots (#27).
  5. DataVizPak 1.3:
    1. Add new visualization types: line chart (#31) and pie chart (#32)
  6. DataVizPak 2.0:
    1. Integrate interactive visualizations with xDB (#35)

Developer Bootstrap

Want to develop for DataVizPak? Great! To get started developing for DataVizPak, you must first do some things:

Video Intro

DataVizPak Video

About the Authors

DataVizPak was created by the Velir team admin/b (Dan Solovay, Nicole Durand, Ed Schwehm) as part of 2017 Sitecore Hackathon.