#!/usr/bin/env python
# coding: utf-8

# In[1]:


from __future__ import division

import os, sys
import numpy as np
import pandas as pd
import datetime as dt
import random as rd

from IPython.display import display
from math import sin, cos, pi, sqrt

import ezvis3d as v3d


# ## Examples
# + reproduced from http://visjs.org/graph3d_examples.html
# + `plot()` has the following arguments:
#   + `save=True` and optionally `save_name` and optionally `save_path` (default='saved') will save the graph as a stand alone HTML doc under `save_path` after creating it if necessary
#   + `notebook` (default=True) will not inject `require` and `jquery` libs as they are already available in the classical notebook. Set to False to inject them.
#   + `center` (default=True) to center the plot in the output cell area

# ### Basis
# + http://visjs.org/examples/graph3d/01_basics.html

# In[2]:


def z(x, y):
    return 50+ sin(x/50) * cos(y/50) * 50

x_min = 0
x_max = 314
x_num = 50

x_rng = np.linspace(x_min, x_max, x_num)
y_rng = x_rng
li_data = [{'x': x, 'y': y, 'z': z(x, y)}
            for y in y_rng
            for x in x_rng]
df_data = pd.DataFrame(li_data)

g = v3d.Vis3d()
g.width = '600px'
g.height = '600px'
g.style = 'surface'
g.showPerspective = True
g.showGrid = True
g.showShadow = False
g.keepAspectRatio = True
g.verticalRatio = 0.7
g.cameraPosition = {'horizontal' : 0.9,
                    'vertical': 0.4,
                    'distance': 1.5
                   }

g.plot(df_data, save=True, save_path='myfolder', save_name='myplot', dated=True)


# ### Filter
# + http://visjs.org/examples/graph3d/03_filter_data.html

# In[3]:


def z(x, y):
    return 50+ sin(x/50) * cos(y/50) * 50

def f(x, y):
    v = z(x, y)
    return '67-100' if v>66 else ('0-33' if v<34 else '34-66')

x_min = 0
x_max = 314
x_num = 50

x_rng = np.linspace(x_min, x_max, x_num)
y_rng = x_rng
li_data = [{'x': x, 'y': y, 'z': z(x, y), 'filter': f(x, y)}
            for y in y_rng
            for x in x_rng]
df_data = pd.DataFrame(li_data)

g = v3d.Vis3d()
g.width = '600px'
g.height = '600px'
g.style = 'surface'
g.showPerspective = False
g.showGrid = True
g.showShadow = False
g.keepAspectRatio = True
g.verticalRatio = 0.7
g.filterLabel = 'values'
g.cameraPosition = {'horizontal' : 0.9,
                    'vertical': 0.4,
                    'distance': 1.5
                   }
g.animationInterval = 1500
g.animationPreload = True
g.animationAutoStart = True

g.plot(df_data)


# ### Animate
# + http://visjs.org/examples/graph3d/04_animation.html

# In[4]:


def z(x, y, t):
    return 50+ sin(x/50 + t/10) * cos(y/50 + t/10) * 50

x_min = 0
x_max = 314
x_num = 25
t_max = 31
x_rng = np.linspace(x_min, x_max, x_num)
y_rng = x_rng
t_rng = range(t_max)
li_data = [{'x': x, 'y': y, 'z': z(x, y, t), 'filter': t}
            for y in y_rng
            for x in x_rng
            for t in t_rng]
df_data = pd.DataFrame(li_data)

g = v3d.Vis3d()
g.width = '600px'
g.height = '600px'
g.style = 'surface'
g.showPerspective = True
g.showGrid = True
g.showShadow = False
g.keepAspectRatio = True
g.verticalRatio = 0.7
g.filterLabel = 'time'
g.cameraPosition = {'horizontal' : 0.9,
                    'vertical': 0.4,
                    'distance': 1.7
                   }
g.showAnimationControls = True
g.animationInterval = 100
g.animationPreload = True
g.animationAutoStart = True

g.plot(df_data)


# ### Line
# + http://visjs.org/examples/graph3d/05_line.html

# In[5]:


t_num = 500
t_max = 4*2*pi
t_rng = np.linspace(0, t_max, t_num)
r = 1.0
li_data = [{'x': r*sin(t), 'y': r*cos(t), 'z': t/t_max}
            for t in t_rng]
df_data = pd.DataFrame(li_data)

g = v3d.Vis3d()
g.width = '600px'
g.height = '600px'
g.style = 'line'
g.showPerspective = False
g.showGrid = True
g.keepAspectRatio = True
g.verticalRatio = 1.0
g.cameraPosition = {'horizontal' : 0.44,
                    'vertical': 0.4,
                    'distance': 1.7
                   }

g.plot(df_data)


# ### Moving Dots
# + http://visjs.org/examples/graph3d/06_moving_dots.html

# In[6]:


t_max = 2*pi
t_step = 75
t_rng = np.linspace(0, t_max, t_step)
nb_dot_pair = 1
li_data = []

for t in t_rng:
    tgroup = round(t, 2)
    li_data.append({'x': 0, 'y': 0, 'z': 0, 'style': t, 'filter': tgroup})
    for d in range(nb_dot_pair):
        t_dot = t + 2 * pi * d / nb_dot_pair
        li_data.append({'x': sin(t_dot), 'y': cos(t_dot), 'z': sin(t_dot),
                        'style': t, 'filter': tgroup})
        li_data.append({'x': sin(t_dot), 'y': -cos(t_dot), 'z': sin(t_dot+t_max/2),
                        'style': t, 'filter': tgroup})
    
df_data = pd.DataFrame(li_data)


g = v3d.Vis3d()
g.width = '600px'
g.height = '600px'
g.style = 'dot-color'
g.showPerspective = True
g.showGrid = True
g.keepAspectRatio = True
g.verticalRatio = 1.0
g.filterLabel = 'time'
g.legendLabel = 'color value'
g.cameraPosition = {'horizontal' : 2.7,
                    'vertical': 0,
                    'distance': 1.6
                   }
g.showAnimationControls = True
g.animationInterval = 70
g.animationPreload = True
g.animationAutoStart = True

g.plot(df_data)


# ### Dot Cloud Color
# + http://visjs.org/examples/graph3d/07_dot_cloud_colors.html

# In[7]:


d_max = 100
d_rng = range(d_max)
li_data = []
rd.seed(123456)

for d in d_rng:
    x, y, z = rd.random()**2, rd.random()**2, rd.random()**2
    dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2))
    li_data.append({'x': x, 'y': y, 'z': z, 'style': dist})
    
df_data = pd.DataFrame(li_data)

g = v3d.Vis3d()
g.width = '600px'
g.height = '600px'
g.style = 'dot-color'
g.showPerspective = True
g.showGrid = True
g.keepAspectRatio = True
g.verticalRatio = 1.0
g.legendLabel = 'distance'
g.cameraPosition = {'horizontal' : -0.35,
                    'vertical': 0.22,
                    'distance': 1.8
                   }

g.plot(df_data)


# ### Dot Cloud Size
# + http://visjs.org/examples/graph3d/08_dot_cloud_size.html

# In[8]:


d_max = 100
d_rng = range(d_max)
li_data = []
rd.seed(123456)

for d in d_rng:
    x, y, z = rd.random()**2, rd.random()**2, rd.random()**2
    dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2))
    li_data.append({'x': x, 'y': y, 'z': z, 'style': sqrt(2)-dist})
    
df_data = pd.DataFrame(li_data)

g = v3d.Vis3d()
g.width = '600px'
g.height = '600px'
g.style = 'dot-size'
g.showPerspective = False
g.showGrid = True
g.keepAspectRatio = True
g.verticalRatio = 1.0
g.legendLabel = 'value'
g.cameraPosition = {'horizontal' : -0.54,
                    'vertical': 0.5,
                    'distance': 1.6
                   }

g.plot(df_data)


# ### Bar Chart
# + http://visjs.org/examples/graph3d/10_styling.html

# In[9]:


def z(x, y):
    return -sin(x/pi) * cos(y/pi) * 10 + 10
                
x_max = 10
x_num = 6
x_rng = np.linspace(0, x_max, x_num)
y_rng = x_rng
li_data = [{'x': x, 'y': y, 'z': z(x, y), 'style': y-x}
            for y in y_rng
            for x in x_rng]

df_data = pd.DataFrame(li_data)

g = v3d.Vis3d()
g.width = '600px'
g.height = '600px'
g.style = 'bar-color'
g.xBarWidth = 0.6
g.yBarWidth = 0.9
g.showPerspective = True
g.showGrid = True
g.keepAspectRatio = True

g.plot(df_data)


# ### Tooltips
# + http://visjs.org/examples/graph3d/11_tooltips.html

# In[10]:


def z(x, y):
    return -sin(x/pi) * cos(y/pi) * 10 + 10
                
x_max = 10
x_num = 6
x_rng = np.linspace(0, x_max, x_num)
y_rng = x_rng
li_data = [{'x': x, 'y': y, 'z': z(x, y), 'style': y-x}
            for y in y_rng
            for x in x_rng]

df_data = pd.DataFrame(li_data)

g = v3d.Vis3d()
g.width = '600px'
g.height = '600px'
g.style = 'bar-color'
g.showPerspective = True
g.showGrid = True
g.tooltip ="""
function (point) {
    // parameter point contains properties x, y, z
    return 'value: <b>' + parseFloat(point.z.toFixed(3)) + '</b>';
}
"""

g.plot(df_data)


# ### Custom Labels
# + http://visjs.org/examples/graph3d/12_custom_labels.html

# In[11]:


def z(x, y):
    return -sin(x/pi) * cos(y/pi) * 10 + 10
                
x_max = 10
x_num = 6
x_rng = np.linspace(0, x_max, x_num)
y_rng = x_rng
li_data = [{'x': x, 'y': y, 'z': z(x, y), 'style': y-x}
            for y in y_rng
            for x in x_rng]

df_data = pd.DataFrame(li_data)
    
g = v3d.Vis3d()
g.width = '600px'
g.height = '600px'
g.style = 'bar-color'
g.showPerspective = True
g.showGrid = True
g.tooltip ="""
function (point) { return 'value: <b>' + parseFloat(point.z.toFixed(2)) + '</b>'; }
"""
g.xLabel = 'Date'
g.yLabel = 'Percentage'
g.zLabel = 'Temperature'

g.xValueLabel ="""
function(value) { return vis.moment().add(value, 'days').format('DD MMM'); }
"""
g.yValueLabel ="""
function(value) { return value * 10 + '%'; }
"""
g.zValueLabel ="""
function(value) { return value / 1000 + 'K'; }
"""

g.plot(df_data)


# ### Styles
# + http://visjs.org/examples/graph3d/10_styling.html

# In[12]:


def z(x, y):
    return -sin(x/pi) * cos(y/pi) * 10 + 10
                
x_max = 10
x_num = 6
x_rng = np.linspace(0, x_max, x_num)
y_rng = x_rng
li_data = [{'x': x, 'y': y, 'z': z(x, y), 'style': y-x}
            for y in y_rng
            for x in x_rng]

df_data = pd.DataFrame(li_data)
    
g = v3d.Vis3d()
g.width = '400px'
g.height = '400px'
g.showPerspective = True
g.showGrid = True


for s in ['bar', 'bar-color', 'bar-size', 'dot', 'dot-line',
          'dot-color', 'dot-size', 'line', 'grid', 'surface']:
    g.style = s
    display(g.plot(df_data, center=True))


# In[ ]:





# ## Direct access to vis.js Graphe3d documentation
# + Reference http://visjs.org/docs/graph3d/
# + Navigate the object property tree
# + An `info()` method gives the official help
# + The usual ? postfix gives access to the same info
# + WARNING: Once a property is set, the info method is not accessible any more

# In[13]:


g = v3d.Vis3d()

g.cameraPosition.info()
g.cameraPosition.distance.info()


# In[14]:


g = v3d.Vis3d()
g.backgroundColor.info()


# In[15]:


g = v3d.Vis3d()
get_ipython().run_line_magic('pinfo', 'g.cameraPosition')


# In[ ]: