4. Add a D3 visualization

In this step, we'll branch out from the built-in Splunk charts and try the Sankey diagram from the D3 Gallery to show artist downloads per mobile device. The code to make this visualization work is a little more advanced, but we've got a helper JavaScript file to abstract away some of the complexity.

  1. Create an /appserver/static directory (for static assets) in your app under
    $SPLUNK_HOME/etc/apps/musicdashboardtutorial.
  2. Download a copy of the sankey-helper.js file and save it to
    $SPLUNK_HOME/etc/apps/musicdashboardtutorial/appserver/static/.
  3. Define a new search to provide the data for the new diagram. Add this code to the end of the //SEARCH MANAGERS section, just above the //SPLUNK HEADER AND FOOTER section:
  4.         // Artist Downloads per Mobile Device search
            var sankeysearch = new SearchManager({
                "id": "sankeysearch",
                "earliest_time": "0",
                "latest_time": "$latest$",
                "cancelOnUnload": true,
                "status_buckets": 0,
                "search": '| inputlookup musicdata.csv | stats count by artist_name, eventtype | where (eventtype="ua-mobile-android" OR eventtype="ua-mobile-ipod" OR eventtype="ua-mobile-blackberry" OR eventtype="ua-mobile-iphone" OR eventtype="ua-mobile-ipad")', 
                "app": utils.getCurrentApp(),
                "auto_cancel": 90,
                "preview": true,
                "runWhenTimeIsUndefined": false
            }, {tokens: true, tokenNamespace: "submitted"});
  5. Let's put the D3 component on a new row in the dashboard. Find this code in the layout section:
  6. <!-- End first row -->

    Insert this code below it:

        <!-- Second row -->
        <div class="dashboard-row">
            <div class="dashboard-cell" style="width: 100%;">
               <div class="dashboard-panel">
                    <div class="panel-element-row">
                        <div class="dashboard-element">
                            <div class="panel-head">
                                <h3>Artists Downloaded to Devices</h3>
                            </div>
                            <div class="panel-body">
                                <!-- Sankey Chart -->
                                <p id="chart"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End second row -->

    Notice the <p id="chart"></p> tag, which is where the Sankey diagram will be displayed.

  7. Now that we have added the diagram to the layout, let's also add some styles to display it nicely. Add the following code to the <style> section:
  8.         #chart {
              height: 500px;
            }
            .node rect {
              cursor: move;
              fill-opacity: .9;
              shape-rendering: crispEdges;
            }
            .node text {
              pointer-events: none;
              text-shadow: 0 1px 0 #fff;
            }
            .link {
              fill: none;
              stroke: #000;
              stroke-opacity: .2;
            }
            .link:hover {
              stroke-opacity: .5;
            }
  9. Let's wire up the JavaScript. First, we'll need to add more references to the D3 and Sankey libraries. Find this code:
  10.     paths: {
            'jquery-ui': 'http://code.jquery.com/ui/1.10.0/jquery-ui'
        },
        shim: {
            'jquery-ui': {
                deps: ['jquery']
            }
        }

    Replace it with the following code:

    paths: {
            'jquery-ui': 'http://code.jquery.com/ui/1.10.0/jquery-ui',
            'd3': 'http://d3js.org/d3.v2.min',
            'sankey': 'http://bost.ocks.org/mike/sankey/sankey',
            'sankey-helper': '{{SPLUNKWEB_URL_PREFIX}}/static/app/musicdashboardtutorial/sankey-helper'
        },
        shim: {
            'jquery-ui': {
                deps: ['jquery']
            },
            'sankey': {
                deps: ['d3']
            },
            'sankey-helper': {
                deps: ['sankey']
            }
        }

    Find this code:

        "jquery-ui"
        ],

    Replace it with this code:

        "jquery-ui",
        "sankey-helper"
        ],
  11. And now for the code that works with the Sankey data. After our Sankey search gets data, we format it for the Sankey diagram, then we render the diagram. Note that we don't have to make a custom Splunk Web Framework component for this diagram to work—everything is wired up using typical web programming patterns.
  12. Find this code:

    // Initialize time tokens to default

    Insert the following code above it:

            //
            // SANKEY CODE
            //
            var sankeyHelper = window.MusicDashboard.SankeyHelper;
            var setup = sankeyHelper.setupSankey();
            var data = sankeysearch.data("results", {
                output_mode: "json_rows",
                count: 0 // get all results
            });
            var formatResults = function(results) {
                if (!data.hasData()) {
                    return;
                }
                // Format Splunk data for Sankey
                var collection = results.collection().toJSON();
                var nodesList = _.uniq(_.pluck(collection, "artist_name").concat(_.pluck(collection, "eventtype")));
                var links = _.map(collection, function(item) {
                    return {
                        source: nodesList.indexOf(item.artist_name),
                        target: nodesList.indexOf(item.eventtype),
                        value: parseInt(item.count)
                    }
                });
                var nodes = _.map(nodesList, function(node) { return { name: node } });
                // Put data into Sankey diagram
                sankeyHelper.renderSankey(nodes, links, setup.svg, setup.sankey, setup.path);
            };
            data.on("data", formatResults);
    

    And that's it. The code here, while more advanced than the previous example, is still basic web programming.

  13. Save your file, restart Splunk Enterprise (this restart is necessary to pick up the sankey-helper.js file), then take a look at the Sankey diagram.
  14. App with a Sankey diagram

Continue to 5. Make it interactive.