-
Notifications
You must be signed in to change notification settings - Fork 10
interactives
Plotting frameworks such as Bokeh, [D3.js](http://d3js.org, and Vega/Vega Lite is revolutionizing how we present and explore data of ever-increasing complexity. A huge benefit of these frameworks is that they are not frozen to PDFs nor do you have to have specialized software to view and interact with the figures. All of the aforementioned frameworks permit exporting interactive figures to HTML formats, which can be very easily embedded into your website.
To embed an HTML file, it must not have the following line at the top of the file:
<!DOCTYPE html>If you are generating figures using Bokeh, you have to manually delete this line from the top of your figure HTML file to be properly embedded.
As the data sets you may want to interact with can be sizeable, it is important to present only one interactive figure at a time such that your browser isn't bogged down and brought to a screeching halt. To that end, each interactive should get its own page. This template has one interactive figure embedded into the page page03_interactive_fig1.md. The frontmatter of this markdown file is as follows:
---
layout: page # This sets styling of the page and shouldn't be changed.
title: "Interactive Figure Title"
permalink: interactive_1 # Address for the interactive figure
sidebar: true # Boolean identifier whether a link should be included in the website navigation
interactive: filename.html # File name of the interactive figure.
---The critical field entry here is the interactive: field. This field takes the filename of the interactive figure, which lives in the interactives/ subfolder of the root directory.
Below the frontmatter of this file is some text in markdown that describes the figure (think of it as the figure caption), followed by this line:
<center>
{% include_relative interactives/{{page.interactive}} %}
</center>The tags of <center> and </center> set the position of the interactive figure on the page. These tags horizontally center the interactive figure. In between the two positioning tags is an inclusion statement written in the Liquid templating language. This defines the relative path to the figure defined in the frontmatter.