notebook.community

Edit and run 





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





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)



    


















    
Out[2]:

Filter





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)



    


















    
Out[3]:

Animate





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)



    


















    
Out[4]:

Line





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)



    


















    
Out[5]:

Moving Dots





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)



    


















    
Out[6]:

Dot Cloud Color





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)



    


















    
Out[7]:

Dot Cloud Size





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)



    


















    
Out[8]:

Bar Chart





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)



    


















    
Out[9]:

Tooltips





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)



    


















    
Out[10]:

Custom Labels





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)



    


















    
Out[11]:

Styles





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()



    


















    







 Documentation for 'cameraPosition' 

  • Type 
    • Object

  • Default 
    • {horizontal: 1.0, vertical: 0.5, distance: 1.7}

  • Description 
    • Set the initial rotation and position of the camera. The object cameraPosition contains three parameters: horizontal, vertical, and distance. Parameter horizontal is a value in radians and can have any value (but normally in the range of 0 and 2*Pi). Parameter vertical is a value in radians between 0 and 0.5*Pi. Parameter distance is the (normalized) distance from the camera to the center of the graph, in the range of 0.71 to 5.0. A larger distance puts the graph further away, making it smaller. All parameters are optional.

    

    


    


    

    
    




    

     Documentation for 'cameraPosition.distance' 

  • Type 
    • number

  • Default 
    • 1.7

  • Description 
    • Parameter distance is the (normalized) distance from the camera to the center of the graph, in the range of 0.71 to 5.0. A larger distance puts the graph further away, making it smaller. This parameter is optional.

    

    


    


    

    


    

    

    In [14]:
    

    
    
    

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

    

    
    

    

    


    


    

    



    

    
    




    

     Documentation for 'backgroundColor' 

  • Type 
    • string or Object

  • Default 
    • {fill: 'white', stroke: 'gray', strokeWidth: 1}

  • Description 
    • The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00', or an object with the following properties.

    

    


    


    

    


    

    

    In [15]:
    

    
    
    

    g = v3d.Vis3d()
g.cameraPosition?

    

    
    

    

    


    

    

    In [ ]:

    Content source: oscar6echo/ezvis3d

    Similar notebooks:

    notebook.community | gallery | about