Data Visualization

Overview
Zepl offers a UI-driven, language agnostic visualization engine with a one single line of code:z.show(DataFrame). This reduces the number of lines of coded required for all users to easily create charts and graphs.
Supported Charting Types:
Table
Bar
Line 
Pie 
Area
Line
Scatter
Heat Map
Radar 
Sankey
Plotly Editor: Additional chart types are available through our Plotly editor
Requirements
Calling Built in Plotting Function
1.Create a tabular object in Python (Pandas DataFrame), Scala (Spark DataFrame), R (list object), or SQL
2.Use z.show(df) function to render the visualizations options
Visualization Example: OPEN IN ZEPL​
Python
Spark
R
SQL
1
%python
2
import pandas as pd
3
​
4
df = pd.read_csv("https://s3-datasource-tutorial.s3.amazonaws.com/titanic3.csv")
5
​
6
z.show(df)
Copied!
1
%spark
2
​
3
val df = spark.read.option("header",true).csv("./titanic3.csv")
4
​
5
z.show(df)
Copied!
1
%r
2
data <- read.csv("./titanic3.csv")
3
​
4
z.show(data)
Copied!
1
%datasource.DATA_SOURCE_NAME
2
​
3
SELECT * FROM sample_data_table
Copied!
Setting Plot Limits
By default, Zepl's UI Editor visualizes the first 1000 data points passed to the z.show() function. For example, if your Pandas DataFrame (df) contains 2000 rows, only the first 1000 rows will be displayed in the visualization editor. This setting can be increased by any user with the Organization Owner Security Policy. 
Increase limit
Increasing this setting may cause notebooks to load slower or crash at load time. We recommend not increasing this value beyond 5000.
If you are experiencing slow notebook load times, please contact [email protected]​
1.Navigate to Resources > Interpreters
2.Select the interpreter. This limit value is set per interpreter. For example, if the visualizations requiring additional data points are generated using Python, then select %python
3. In the text field labeled, "Max number of dataframe rows to display", enter the desired number to increase this value to
4.Select Apply
  
Plotly Charting Editor
How to access the Plotly Editor
1. Run a notebook paragraph with this function z.show(df)
2.Select the last symbol in the charting list called "Plotly Chart"  
 
3.Select the "Plotly Chart Editor" button
​
Create a Chart
1.Select the "+ Trace" button and select your trace "Type". This should show a list of charting options: 
 
2.Select the input values for your charting type. This will be the columns from the DataFrame that was passed into the z.show(df) function.
Create a Transformation
Transformations allow users to Filter, Split, Aggregate, and Sort your data.
1.Select "+ Transform" and choose your transformation
 
 
2.Next Select the "Target" or "By" value. This variable will be used to Transform the data set in you graph. 
3.Below is an example of using multiple Transformations (Filter and Split) on the same dataset:
For large datasets, Zepl recommends that users transform their data before passing their data to z.show(df).This will result in optimal performance and visualization experience.
Style Options
General:
1.Defaults: Background color, color scales, and fonts
2.Title:  Set your titles and font type here
3.Modebar
4.Size and Margins: Relative Size and Graph position
5.Interactions: Drag, Click, and Hover drill down behaviors
6.Meta Text: Pass data to your graph's titles and text outputs
Traces: The "Traces" section is specific to the type of graph selected above. Each trace will provide options specific to its corresponding trace type (Bar, line, etc...)
Axes:
1.Titles: Set the title for each axis here. This may also be done by clicking the text along each axis on the interactive graph on the right, which reads "Click to enter X axis title"
2.Range: Set the Range scale (Linear, Log, Date, Categorical, Multicategorical) and range of the axis. This is done automatically by Plotly when rendering the graph. Enable or disable Zoom.
3.Lines: Hide or Show grid Axis, Grid, or Zero Line
4.Tick Labels: Position where axis labels appear and set font size/type
5.Tick Markets: Enable or disable vertical markers for each axis label
6.Range Slider: Enables horizontal zoom. Best used for time series charts
7.Spike Lines: Show data spikes
Legend: The "Legend" section allows users to change the size, position, text font and color of the graph legend.
Annotate Options
Text: Add text based overlays on each graph
Shapes: Add colored shape based overlays on each graph
Images: Add images as an overlay on each graph
Zepl & Zeppelin Visualizations
Zepl also offers Zeppelin compatible visualizations (Table, Bar, Pie, Area, Line, and Scatter). Zepl has also expanded the capabilities from the Zeppelin notebook visualizations to support additional chart types, such as Heatmap, Radar, Sankey, and Plotly (see above).
Each Zepl and Zeppelin visualizations contains separate settings for the user to drag, drop, and select the appropriate values for the desired chart. Each chart option will contain two sections with chart specific options in each, Charts and Parameters. To access these settings, fist select a chart (Bar Chart). Then, select the Settings button.
Creating Charts
The Chart section allows users to drag and drop column names from the DataFrame that was passed into the z.show(DataFrame)function. When you expand this section you will see a list of column names and chart specific options. 
Below is an example specific to the Bar Chart chart type:
Chart specific options 
Available Columns: Drag and drop values into below boxes
XAxis: 
Specifies variable for x-axis
This can have 1 or many values
Y-Axis: Select this value to aggregate on a SUM or a COUNT of this column value
Specifies variable for y-axis
This can have 1 or many values
Category (split by): Split the Y-Axis value by this variable
Selecting Parameters
The parameters section contains individual chart parameters. Traditionally these values are configured within your code, however, this gives the user the ability to manipulate these settings through the user interface. These charting options may vary depending on the chart type selected. Below is a continued example from the Bar Chart selected above.
Frequently used parameters:
mainTitle: Set the title of this chart
xAxisName and yAxisName: Set label for x and y axis
xAxisUnit and yAxisUnit: Set a text based label to appear next to x and y axis values
colorSet: Set graph color options
enableTooltip: Display or hide interactive tooltip
Common Visualizations Libraries
Zepl supports the use of visualization libraries specific to the programming language of your choice. Each paragraph in the Zepl Notebook can render charts and graphs to the paragraph output. Below are several of the most commonly used visualization libraries for Python, Spark, and R.
All examples below can be found here: Open In Zepl​
Matplotlib
Matplotlib v3.1.1 is already installed in Zepl's General Puprose Image. Using matplotlib in the Zepl notebook is the same process as any other notebook or python environment. See the example below for using matplotlib:
Plotting Pandas DataFrame
Plotting Series
1
%python
2
# Reference Documentation: https://pandas.pydata.org/pandas-docs/stable/user_guide/visualization.html
3
import matplotlib.pyplot as plt
4
import pandas as pd
5
​
6
ts = pd.Series(np.random.randn(1000), index=pd.date_range('1/1/2000', periods=1000))
7
ts = ts.cumsum()
8
ts.plot()
Copied!
1
%python
2
# Reference Documentation: https://matplotlib.org/tutorials/introductory/pyplot.html
3
import matplotlib.pyplot as plt
4
​
5
plt.plot([1, 2, 3, 4])
6
plt.ylabel('some numbers')
7
plt.show()
Copied!
Seaborn
seaborn v0.9.0 is already installed in Zepl's General Puprose Image. Using seaborn in the Zepl notebook is the same process as any other notebook or python environment. See the example below for using seaborn:
Boxplot
Multiple Facets
1
%python
2
# Reference Documentation: https://seaborn.pydata.org/examples/grouped_boxplot.html
3
import seaborn as sns
4
# Themes are supported in later versions of seaborn (v0.11.0). If required stop your container and update seaborn `!pip install -U seaborn` 
5
# sns.set_theme(style="ticks", palette="pastel")
6
​
7
# Load the example tips dataset
8
tips = sns.load_dataset("tips")
9
​
10
# Draw a nested boxplot to show bills by day and time
11
sns.boxplot(x="day", y="total_bill",
12
            hue="smoker", palette=["m", "g"],
13
            data=tips)
14
sns.despine(offset=10, trim=True)
Copied!
1
%python
2
# Reference Documentation: https://seaborn.pydata.org/examples/many_facets.html
3
import numpy as np
4
import pandas as pd
5
import seaborn as sns
6
import matplotlib.pyplot as plt
7
​
8
sns.set_theme(style="ticks")
9
​
10
# Create a dataset with many short random walks
11
rs = np.random.RandomState(4)
12
pos = rs.randint(-1, 2, (20, 5)).cumsum(axis=1)
13
pos -= pos[:, 0, np.newaxis]
14
step = np.tile(range(5), 20)
15
walk = np.repeat(range(20), 5)
16
df = pd.DataFrame(np.c_[pos.flat, step, walk],
17
                  columns=["position", "step", "walk"])
18
​
19
# Initialize a grid of plots with an Axes for each walk
20
grid = sns.FacetGrid(df, col="walk", hue="walk", palette="tab20c",
21
                     col_wrap=4, height=1.5)
22
​
23
# Draw a horizontal line to show the starting point
24
grid.map(plt.axhline, y=0, ls=":", c=".5")
25
​
26
# Draw a line plot to show the trajectory of each random walk
27
grid.map(plt.plot, "step", "position", marker="o")
28
​
29
# Adjust the tick positions and labels
30
grid.set(xticks=np.arange(5), yticks=[-3, 3],
31
         xlim=(-.5, 4.5), ylim=(-3.5, 3.5))
32
​
33
# Adjust the arrangement of the plots
34
grid.fig.tight_layout(w_pad=1)
Copied!
Plotly
While Zepl's Plotly Charting Editor, is great for building UI driven visuals, there may be a need to programmatically generate plotly charts, themes, and parameters. Plotly v4.2.1 is already installed in Zepl's General Puprose Image.
Example of using Plotly library and displaying figures to a paragraph output:
Plotly Example - Throws Error
1
%python
2
# Reference Documentation: https://plotly.com/python/creating-and-updating-figures/
3
import plotly.graph_objects as go
4
​
5
fig = go.Figure(
6
    data=[go.Bar(x=[1, 2, 3], y=[1, 3, 2])],
7
    layout=go.Layout(
8
        title=go.layout.Title(text="A Figure Specified By A Graph Object")
9
    )
10
)
11
​
12
fig.show()
Copied!
ValueError: Mime type rendering requires nbformat>=4.2.0 but it is not installed
To resolve this error, add the following function to any notebook that needs to render plotly charts:
1
%python
2
import plotly
3
# Create plot div
4
def plot(plot_def, **kwargs):
5
    kwargs['output_type'] = 'div'
6
    plot_str = plotly.offline.plot(plot_def, **kwargs)
7
    print('%%angular <div>%s</div>' % plot_str)
Copied!
Final result would look like this:
Display Plotly Chart in Paragrph Output
1
%python
2
# Create plot div
3
def plot(plot_def, **kwargs):
4
    kwargs['output_type'] = 'div'
5
    plot_str = plotly.offline.plot(plot_def, **kwargs)
6
    print('%%angular <div>%s</div>' % plot_str)
7
    
8
# Reference Documentation: https://plotly.com/python/creating-and-updating-figures/
9
import plotly.graph_objects as go
10
​
11
fig = go.Figure(
12
    data=[go.Bar(x=[1, 2, 3], y=[1, 3, 2])],
13
    layout=go.Layout(
14
        title=go.layout.Title(text="A Figure Specified By A Graph Object")
15
    )
16
)
17
​
18
plot(fig)
Copied!
ggplot2
ggplot2 v3.3.2 is already installed in Zepl's General Puprose Image. Using ggplot2 in the Zepl notebook is the same process as any other R environment. See the example below for using ggplot2:
Scatter Plot Example
1
%r
2
#Refernce Documentation: http://r-statistics.co/Top50-Ggplot2-Visualizations-MasterList-R-Code.html#Jitter%20Plot
3
​
4
# load package and data
5
options(scipen=999)  # turn-off scientific notation like 1e+48
6
library(ggplot2)
7
theme_set(theme_bw())  # pre-set the bw theme.
8
data("midwest", package = "ggplot2")
9
# midwest <- read.csv("http://goo.gl/G1K41K")  # bkup data source
10
​
11
# Scatterplot
12
gg <- ggplot(midwest, aes(x=area, y=poptotal)) + 
13
  geom_point(aes(col=state, size=popdensity)) + 
14
  geom_smooth(method="loess", se=F) + 
15
  xlim(c(0, 0.1)) + 
16
  ylim(c(0, 500000)) + 
17
  labs(subtitle="Area Vs Population", 
18
       y="Population", 
19
       x="Area", 
20
       title="Scatterplot", 
21
       caption = "Source: midwest")
22
​
23
plot(gg)
Copied!
HTML / CSS / JavaScript
Zepl paragraphs can render any HTML, CSS, or JavaScript. This approach is commonly used to pass processed data into flexible front end charting libraries like Highcharts or D3.
Starter Code: How to render HTML / CSS / and JS in any language, use the following starter code:
Python
Scala
PySpark
Untitled
1
%python
2
print("""%html ... Your HTML / CSS / JS here ...""")
Copied!
1
%spark
2
println("""%html ... Your HTML / CSS / JS here ...""")
3
​
Copied!
1
%pyspark
2
print("""%html ... Your HTML / CSS / JS here ...""")
Copied!
1
%r
2
print('%html ... Your HTML / CSS / JS here ... ')
Copied!
Extended examples:
Highcharts
D3
1
%python
2
# Part of the code is from
3
# http://www.highcharts.com/maps/demo/map-drilldown 
4
print('''%html 
5
    <div id="highchart_container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
6
    <h6><a href="https://shop.highsoft.com/highmaps" target="_blank">highmap<a></h6>
7
    <script> 
8
    function myChartRendering() {
9
    /*
10
    TODO:
11
    - Check data labels after drilling. Label rank? New positions?
12
    - Not US Mainland text
13
    - Separators
14
    */
15
    var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
16
        // Some responsiveness
17
        small = $('#highchart_container').width() < 400;
18
        
19
        // Set drilldown pointers
20
        $.each(data, function (i) {
21
            this.drilldown = this.properties['hc-key'];
22
            this.value = i; // Non-random bogus data
23
        });
24
      
25
        // Instanciate the map
26
        Highcharts.mapChart('highchart_container', {
27
            chart: {
28
                events: {
29
                    drilldown: function (e) {
30
                        if (!e.seriesOptions) {
31
                            var chart = this,
32
                                mapKey = 'countries/us/' + e.point.drilldown + '-all',
33
                                // Handle error, the timeout is cleared on success
34
                                fail = setTimeout(function () {
35
                                    if (!Highcharts.maps[mapKey]) {
36
                                        chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
37
                                        fail = setTimeout(function () {
38
                                            chart.hideLoading();
39
                                        }, 1000);
40
                                    }
41
                                }, 3000);
42
                            
43
                            // Show the spinner
44
                            chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
45
                            
46
                            // Load the drilldown map
47
                            $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
48
                                data = Highcharts.geojson(Highcharts.maps[mapKey]);
49
                                
50
                                // Set a non-random bogus value
51
                                $.each(data, function (i) {
52
                                    this.value = i;
53
                                });
54
                             
55
                                // Hide loading and add series
56
                                chart.hideLoading();
57
                                clearTimeout(fail);
58
                                chart.addSeriesAsDrilldown(e.point, {
59
                                    name: e.point.name,
60
                                    data: data,
61
                                    dataLabels: {
62
                                        enabled: true,
63
                                        format: '{point.name}'
64
                                    }
65
                                });
66
                            });
67
                        }
68
                        
69
                        this.setTitle(null, { text: e.point.name });
70
                    },
71
                    drillup: function () {
72
                        this.setTitle(null, { text: 'USA' });
73
                    }
74
                }
75
            },
76
            
77
            title: {
78
                text: 'Highcharts Map Drilldown'
79
            },
80
            
81
            subtitle: {
82
                text: 'USA',
83
                floating: true,
84
                align: 'right',
85
                y: 50,
86
                style: {
87
                    fontSize: '16px'
88
                }
89
            },
90
            
91
            legend: small ? {} : {
92
                layout: 'vertical',
93
                align: 'right',
94
                verticalAlign: 'middle'
95
            },
96
            
97
            colorAxis: {
98
                min: 0,
99
                minColor: '#E6E7E8',
100
                maxColor: '#005645'
101
            },
102
              
103
            mapNavigation: {
104
                enabled: true,
105
                buttonOptions: {
106
                    verticalAlign: 'bottom'
107
                }
108
            },
109
            
110
            plotOptions: {
111
                map: {
112
                    states: {
113
                        hover: {
114
                            color: '#EEDD66'
115
                        }
116
                    }
117
                }
118
            },
119
         
120
            series: [{
121
                data: data,
122
                name: 'USA',
123
                dataLabels: {
124
                    enabled: true,
125
                    format: '{point.properties.postal-code}'
126
                }
127
            }],
128
            
129
            drilldown: {
130
                activeDataLabelStyle: {
131
                    color: '#FFFFFF',
132
                    textDecoration: 'none',
133
                    textOutline: '1px #000000'
134
                },
135
                drillUpButton: {
136
                    relativeTo: 'spacingBox',
137
                    position: {
138
                        x: 0,
139
                        y: 60
140
                    }
141
                }
142
            }
143
        });
144
    }
145
    jQuery.getScript('//code.jquery.com/jquery-3.1.1.min.js', 
146
        function() {
147
            $("#highchart_container").text("loadding... jquery");
148
            jQuery.getScript('//code.highcharts.com/maps/highmaps.js', 
149
            function() {
150
                $("#highchart_container").text("loadding... Highcmaps");
151
                jQuery.getScript('//code.highcharts.com/maps/modules/data.js', 
152
                function() {
153
                    $("#highchart_container").text("loadding... Highcmaps.. modules"); 
154
                    jQuery.getScript('//code.highcharts.com/maps/modules/drilldown.js', 
155
                    function() {
156
                        $("#highchart_container").text("loadding... drilldown");
157
                        jQuery.getScript('//code.highcharts.com/mapdata/countries/us/us-all.js', 
158
                        function() {
159
                            $("#highchart_container").text("loadding... us map data...");
160
                            jQuery("#highchart_container").ready,
161
                            jQuery.Deferred(function( deferred ){
162
                            $("#highchart_container").text("loadding... ready...");
163
                            jQuery( deferred.resolve );
164
                            if (!!Highcharts) {
165
                                myChartRendering();
166
                            }
167
                        })
168
                    })
169
                })
170
            })
171
        })
172
    });
173
    </script>
174
''')
Copied!
1
%python
2
# Reference Documentation: https://www.d3-graph-gallery.com/graph/ridgeline_basic.html
3
print("""%html
4
​
5
<!-- Code from d3-graph-gallery.com -->
6
<meta charset="utf-8">
7
​
8
<!-- Load d3.js -->
9
<script src="https://d3js.org/d3.v4.js"></script>
10
​
11
<!-- Create a div where the graph will take place -->
12
<div id="my_dataviz"></div>
13
​
14
<script>
15
​
16
// set the dimensions and margins of the graph
17
var margin = {top: 60, right: 30, bottom: 20, left:110},
18
    width = 460 - margin.left - margin.right,
19
    height = 400 - margin.top - margin.bottom;
20
​
21
// append the svg object to the body of the page
22
var svg = d3.select("#my_dataviz")
23
  .append("svg")
24
    .attr("width", width + margin.left + margin.right)
25
    .attr("height", height + margin.top + margin.bottom)
26
  .append("g")
27
    .attr("transform",
28
          "translate(" + margin.left + "," + margin.top + ")");
29
​
30
//read data
31
d3.csv("https://raw.githubusercontent.com/zonination/perceptions/master/probly.csv", function(data) {
32
​
33
  // Get the different categories and count them
34
  var categories = data.columns
35
  var n = categories.length
36
​
37
  // Add X axis
38
  var x = d3.scaleLinear()
39
    .domain([-10, 140])
40
    .range([ 0, width ]);
41
  svg.append("g")
42
    .attr("transform", "translate(0," + height + ")")
43
    .call(d3.axisBottom(x));
44
​
45
  // Create a Y scale for densities
46
  var y = d3.scaleLinear()
47
    .domain([0, 0.4])
48
    .range([ height, 0]);
49
​
50
  // Create the Y axis for names
51
  var yName = d3.scaleBand()
52
    .domain(categories)
53
    .range([0, height])
54
    .paddingInner(1)
55
  svg.append("g")
56
    .call(d3.axisLeft(yName));
57
​
58
  // Compute kernel density estimation for each column:
59
  var kde = kernelDensityEstimator(kernelEpanechnikov(7), x.ticks(40)) // increase this 40 for more accurate density.
60
  var allDensity = []
61
  for (i = 0; i < n; i++) {
62
      key = categories[i]
63
      density = kde( data.map(function(d){  return d[key]; }) )
64
      allDensity.push({key: key, density: density})
65
  }
66
​
67
  // Add areas
68
  svg.selectAll("areas")
69
    .data(allDensity)
70
    .enter()
71
    .append("path")
72
      .attr("transform", function(d){return("translate(0," + (yName(d.key)-height) +")" )})
73
      .datum(function(d){return(d.density)})
74
      .attr("fill", "#69b3a2")
75
      .attr("stroke", "#000")
76
      .attr("stroke-width", 1)
77
      .attr("d",  d3.line()
78
          .curve(d3.curveBasis)
79
          .x(function(d) { return x(d[0]); })
80
          .y(function(d) { return y(d[1]); })
81
      )
82
​
83
})
84
​
85
// This is what I need to compute kernel density estimation
86
function kernelDensityEstimator(kernel, X) {
87
  return function(V) {
88
    return X.map(function(x) {
89
      return [x, d3.mean(V, function(v) { return kernel(x - v); })];
90
    });
91
  };
92
}
93
function kernelEpanechnikov(k) {
94
  return function(v) {
95
    return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
96
  };
97
}
98
​
99
</script>
100
""")
101
​
Copied!
​