%python
# Reference Documentation: https://pandas.pydata.org/pandas-docs/stable/user_guide/visualization.html
import matplotlib.pyplot as plt
import pandas as pd
​
ts = pd.Series(np.random.randn(1000), index=pd.date_range('1/1/2000', periods=1000))
ts = ts.cumsum()
ts.plot()

%python
# Reference Documentation: https://seaborn.pydata.org/examples/grouped_boxplot.html
import seaborn as sns
# Themes are supported in later versions of seaborn (v0.11.0). If required stop your container and update seaborn `!pip install -U seaborn` 
# sns.set_theme(style="ticks", palette="pastel")
​
# Load the example tips dataset
tips = sns.load_dataset("tips")
​
# Draw a nested boxplot to show bills by day and time
sns.boxplot(x="day", y="total_bill",
            hue="smoker", palette=["m", "g"],
            data=tips)
sns.despine(offset=10, trim=True)

%python
# Reference Documentation: https://plotly.com/python/creating-and-updating-figures/
import plotly.graph_objects as go
​
fig = go.Figure(
    data=[go.Bar(x=[1, 2, 3], y=[1, 3, 2])],
    layout=go.Layout(
        title=go.layout.Title(text="A Figure Specified By A Graph Object")
    )
)
​
fig.show()

%python
# Create plot div
def plot(plot_def, **kwargs):
    kwargs['output_type'] = 'div'
    plot_str = plotly.offline.plot(plot_def, **kwargs)
    print('%%angular <div>%s</div>' % plot_str)
    
# Reference Documentation: https://plotly.com/python/creating-and-updating-figures/
import plotly.graph_objects as go
​
fig = go.Figure(
    data=[go.Bar(x=[1, 2, 3], y=[1, 3, 2])],
    layout=go.Layout(
        title=go.layout.Title(text="A Figure Specified By A Graph Object")
    )
)
​
plot(fig)

%r
#Refernce Documentation: http://r-statistics.co/Top50-Ggplot2-Visualizations-MasterList-R-Code.html#Jitter%20Plot
​
# load package and data
options(scipen=999)  # turn-off scientific notation like 1e+48
library(ggplot2)
theme_set(theme_bw())  # pre-set the bw theme.
data("midwest", package = "ggplot2")
# midwest <- read.csv("http://goo.gl/G1K41K")  # bkup data source
​
# Scatterplot
gg <- ggplot(midwest, aes(x=area, y=poptotal)) + 
  geom_point(aes(col=state, size=popdensity)) + 
  geom_smooth(method="loess", se=F) + 
  xlim(c(0, 0.1)) + 
  ylim(c(0, 500000)) + 
  labs(subtitle="Area Vs Population", 
       y="Population", 
       x="Area", 
       title="Scatterplot", 
       caption = "Source: midwest")
​
plot(gg)

%python
# Part of the code is from
# http://www.highcharts.com/maps/demo/map-drilldown 
print('''%html 
    <div id="highchart_container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
    <h6><a href="https://shop.highsoft.com/highmaps" target="_blank">highmap<a></h6>
    <script> 
    function myChartRendering() {
    /*
    TODO:
    - Check data labels after drilling. Label rank? New positions?
    - Not US Mainland text
    - Separators
    */
    var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
        // Some responsiveness
        small = $('#highchart_container').width() < 400;
        
        // Set drilldown pointers
        $.each(data, function (i) {
            this.drilldown = this.properties['hc-key'];
            this.value = i; // Non-random bogus data
        });
      
        // Instanciate the map
        Highcharts.mapChart('highchart_container', {
            chart: {
                events: {
                    drilldown: function (e) {
                        if (!e.seriesOptions) {
                            var chart = this,
                                mapKey = 'countries/us/' + e.point.drilldown + '-all',
                                // Handle error, the timeout is cleared on success
                                fail = setTimeout(function () {
                                    if (!Highcharts.maps[mapKey]) {
                                        chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
                                        fail = setTimeout(function () {
                                            chart.hideLoading();
                                        }, 1000);
                                    }
                                }, 3000);
                            
                            // Show the spinner
                            chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
                            
                            // Load the drilldown map
                            $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
                                data = Highcharts.geojson(Highcharts.maps[mapKey]);
                                
                                // Set a non-random bogus value
                                $.each(data, function (i) {
                                    this.value = i;
                                });
                             
                                // Hide loading and add series
                                chart.hideLoading();
                                clearTimeout(fail);
                                chart.addSeriesAsDrilldown(e.point, {
                                    name: e.point.name,
                                    data: data,
                                    dataLabels: {
                                        enabled: true,
                                        format: '{point.name}'
                                    }
                                });
                            });
                        }
                        
                        this.setTitle(null, { text: e.point.name });
                    },
                    drillup: function () {
                        this.setTitle(null, { text: 'USA' });
                    }
                }
            },
            
            title: {
                text: 'Highcharts Map Drilldown'
            },
            
            subtitle: {
                text: 'USA',
                floating: true,
                align: 'right',
                y: 50,
                style: {
                    fontSize: '16px'
                }
            },
            
            legend: small ? {} : {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            
            colorAxis: {
                min: 0,
                minColor: '#E6E7E8',
                maxColor: '#005645'
            },
              
            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },
            
            plotOptions: {
                map: {
                    states: {
                        hover: {
                            color: '#EEDD66'
                        }
                    }
                }
            },
         
            series: [{
                data: data,
                name: 'USA',
                dataLabels: {
                    enabled: true,
                    format: '{point.properties.postal-code}'
                }
            }],
            
            drilldown: {
                activeDataLabelStyle: {
                    color: '#FFFFFF',
                    textDecoration: 'none',
                    textOutline: '1px #000000'
                },
                drillUpButton: {
                    relativeTo: 'spacingBox',
                    position: {
                        x: 0,
                        y: 60
                    }
                }
            }
        });
    }
    jQuery.getScript('//code.jquery.com/jquery-3.1.1.min.js', 
        function() {
            $("#highchart_container").text("loadding... jquery");
            jQuery.getScript('//code.highcharts.com/maps/highmaps.js', 
            function() {
                $("#highchart_container").text("loadding... Highcmaps");
                jQuery.getScript('//code.highcharts.com/maps/modules/data.js', 
                function() {
                    $("#highchart_container").text("loadding... Highcmaps.. modules"); 
                    jQuery.getScript('//code.highcharts.com/maps/modules/drilldown.js', 
                    function() {
                        $("#highchart_container").text("loadding... drilldown");
                        jQuery.getScript('//code.highcharts.com/mapdata/countries/us/us-all.js', 
                        function() {
                            $("#highchart_container").text("loadding... us map data...");
                            jQuery("#highchart_container").ready,
                            jQuery.Deferred(function( deferred ){
                            $("#highchart_container").text("loadding... ready...");
                            jQuery( deferred.resolve );
                            if (!!Highcharts) {
                                myChartRendering();
                            }
                        })
                    })
                })
            })
        })
    });
    </script>
''')