Part 1 - Getting to know Juicebox

Juicebox Basics

Juicebox apps are subdivided into stacks that are made up of one or more slices. Below is an image of The NFL App that we’re building in this tutorial as a finished product, with its one stack and four slices labeled.

Stacks

Often in Juicebox apps we want to tell more than one story with the data we have, or even a new story with a whole new dataset. In Juicebox we separate our stories into stacks. The stacks are usually accessible by clicking on the tabs at the top of the page. In the app we’re building, there will only be one stack called NFL Contracts.

Slices

Slices are the building blocks of stacks, and their content can range from being a section of guiding text to a complex data visualization. The nice thing about Juicebox slices is that they make data visualization incredibly easy – you just need to feed in the data. In the NFL app there are 4 slices (Even though it may look like less).

Tip

Selections that are made in a slice will filter the slices below it, as well. This means that if you find an aspect of the data that interests you, you can focus on that aspect.

The Free Form Slice

A free form slice is for displaying text, and are often used as headers. This one says “Show me the money!”

The Option Chooser Slice

The option chooser slice is used to allow a user to make a selection (usually allowing the user to specify a particular way of looking at the data). Here we are using it to display interesting calculations about the data (total number, average age, etc.).

The Distribution Slice

The distribution slice does exactly what it implies; it shows the distribution of a certain population across various identifying groups. Here we have NFL players divided into 5 categories based on salary. When a distribution ‘bucket’ is selected (or item within a bucket) the slices that follow will filter their data accordingly.

The Card Slice

A card slice shows a detailed list of the data. In this case, each card represents a player’s name, position, and contract details. Notice you have several options to sort the cards as well: Player Name, Team, Total Dollars, Length.

For more on these slices and the others that are built into Juicebox, see our slice reference.

Global Filters

Global filters are filters that the user selects that are applied to the entire stack. For instance, in the global filter menu shown below, player position is selected as the filter and defensive tackle (DT) is the chooser option. This means every slice will only look for data about DTs and ignore every other position.

Global filters help the user simplify the dataset they are working with.

Juicebox Architecture

Juicebox is a web-based front end that interacts with hosted data services. Each slice calls a data service that is designed specifically to answer whatever question that slice is asking. At the heart of every slice is a SQL query, and the code in each data service is responsible for creating that query.

In the figure below, you can see that the slices use data services to communicate with the database. The slices only know how to display the data that is provided to them; a slice relies on its respective data service to gather the data that it needs.

The conversation between the slice, data service and database goes a little bit like this:

• The slice sends a request to the data service asking for data to display.
• The data service looks at the request to see what the slice wants and then translates that request into a SQL statement that is then sent to the database.
• The database responds to the data service and the results are transformed into a response that the slice can read.
• Finally, the slice will visualize that response in the app.

Continue onward to Part 2 - Folder Structure & App Configuration