This help isn’t complete. It may even look terrible. If you want to work on it, see How to Contribute. You can also ask for help in the Juice Slack #documentation channel.

A custom slice allows you to create a slice using any d3 code.

Custom config

Custom slices support the Common configuration options for all slices. Additional options are: None right now.


The plugin code must be wrapped in a function(){} that provides a namespace and returns a “chart”. This “chart” object must provide an interface for allowing the view to give it the current list of selections and for updating the visual appearance of the selected items.

// Manage our own namespace to avoid polluting the global
// one.
function module() {

  // Object to be Returned
  // ---------------------

  // Create a closure to manage the public attributes
  // and methods we want to expose. This function (which
  // will be the the return value for our component) is
  // the main function that callers will use to create a chart.
  function chart(container, data, selectionChangedCallback) {

  // Chart getter and setters
  // ------------------------

  chart.currentSelections = function(_a) {
    if (!arguments.length) return currentSelections;
    currentSelections = _a;
    return chart;

  // Selections
  // -----------

  // Update the state of the selected items in the UI.
  chart.updateSelections = function() {
    // Update the appearance of the currently selected items stored in `currentSelections`.

  // Return the public attributes and methods.
  return chart;

The chart object will receive 3 arguments:

  • The DOM container that will hold the visualization
  • The data
  • A callback to call when it needs to perform any selection.
function chart(container, data, selectionChangedCallback) {}

The plugin will never update any selection attribute of any data item. When it needs to perform a selection, it will use the callback provided to it and pass it a list of items whose selections will be toggled.