{ "cells": [ { "cell_type": "code", "execution_count": 1, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "from __future__ import division\n", "\n", "import os, sys\n", "import numpy as np\n", "import pandas as pd\n", "import datetime as dt\n", "import random as rd\n", "\n", "from IPython.display import display\n", "from math import sin, cos, pi, sqrt\n", "\n", "import ezvis3d as v3d" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Examples\n", "+ reproduced from http://visjs.org/graph3d_examples.html\n", "+ `plot()` has the following arguments:\n", " + `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\n", " + `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.\n", " + `center` (default=True) to center the plot in the output cell area" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Basis\n", "+ http://visjs.org/examples/graph3d/01_basics.html" ] }, { "cell_type": "code", "execution_count": 2, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "execution_count": 2, "metadata": {}, "output_type": "execute_result" } ], "source": [ "def z(x, y):\n", " return 50+ sin(x/50) * cos(y/50) * 50\n", "\n", "x_min = 0\n", "x_max = 314\n", "x_num = 50\n", "\n", "x_rng = np.linspace(x_min, x_max, x_num)\n", "y_rng = x_rng\n", "li_data = [{'x': x, 'y': y, 'z': z(x, y)}\n", " for y in y_rng\n", " for x in x_rng]\n", "df_data = pd.DataFrame(li_data)\n", "\n", "g = v3d.Vis3d()\n", "g.width = '600px'\n", "g.height = '600px'\n", "g.style = 'surface'\n", "g.showPerspective = True\n", "g.showGrid = True\n", "g.showShadow = False\n", "g.keepAspectRatio = True\n", "g.verticalRatio = 0.7\n", "g.cameraPosition = {'horizontal' : 0.9,\n", " 'vertical': 0.4,\n", " 'distance': 1.5\n", " }\n", "\n", "g.plot(df_data, save=True, save_path='myfolder', save_name='myplot', dated=True)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Filter\n", "+ http://visjs.org/examples/graph3d/03_filter_data.html" ] }, { "cell_type": "code", "execution_count": 3, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "execution_count": 3, "metadata": {}, "output_type": "execute_result" } ], "source": [ "def z(x, y):\n", " return 50+ sin(x/50) * cos(y/50) * 50\n", "\n", "def f(x, y):\n", " v = z(x, y)\n", " return '67-100' if v>66 else ('0-33' if v<34 else '34-66')\n", "\n", "x_min = 0\n", "x_max = 314\n", "x_num = 50\n", "\n", "x_rng = np.linspace(x_min, x_max, x_num)\n", "y_rng = x_rng\n", "li_data = [{'x': x, 'y': y, 'z': z(x, y), 'filter': f(x, y)}\n", " for y in y_rng\n", " for x in x_rng]\n", "df_data = pd.DataFrame(li_data)\n", "\n", "g = v3d.Vis3d()\n", "g.width = '600px'\n", "g.height = '600px'\n", "g.style = 'surface'\n", "g.showPerspective = False\n", "g.showGrid = True\n", "g.showShadow = False\n", "g.keepAspectRatio = True\n", "g.verticalRatio = 0.7\n", "g.filterLabel = 'values'\n", "g.cameraPosition = {'horizontal' : 0.9,\n", " 'vertical': 0.4,\n", " 'distance': 1.5\n", " }\n", "g.animationInterval = 1500\n", "g.animationPreload = True\n", "g.animationAutoStart = True\n", "\n", "g.plot(df_data)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Animate\n", "+ http://visjs.org/examples/graph3d/04_animation.html" ] }, { "cell_type": "code", "execution_count": 4, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "execution_count": 4, "metadata": {}, "output_type": "execute_result" } ], "source": [ "def z(x, y, t):\n", " return 50+ sin(x/50 + t/10) * cos(y/50 + t/10) * 50\n", "\n", "x_min = 0\n", "x_max = 314\n", "x_num = 25\n", "t_max = 31\n", "x_rng = np.linspace(x_min, x_max, x_num)\n", "y_rng = x_rng\n", "t_rng = range(t_max)\n", "li_data = [{'x': x, 'y': y, 'z': z(x, y, t), 'filter': t}\n", " for y in y_rng\n", " for x in x_rng\n", " for t in t_rng]\n", "df_data = pd.DataFrame(li_data)\n", "\n", "g = v3d.Vis3d()\n", "g.width = '600px'\n", "g.height = '600px'\n", "g.style = 'surface'\n", "g.showPerspective = True\n", "g.showGrid = True\n", "g.showShadow = False\n", "g.keepAspectRatio = True\n", "g.verticalRatio = 0.7\n", "g.filterLabel = 'time'\n", "g.cameraPosition = {'horizontal' : 0.9,\n", " 'vertical': 0.4,\n", " 'distance': 1.7\n", " }\n", "g.showAnimationControls = True\n", "g.animationInterval = 100\n", "g.animationPreload = True\n", "g.animationAutoStart = True\n", "\n", "g.plot(df_data)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Line\n", "+ http://visjs.org/examples/graph3d/05_line.html" ] }, { "cell_type": "code", "execution_count": 5, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "t_num = 500\n", "t_max = 4*2*pi\n", "t_rng = np.linspace(0, t_max, t_num)\n", "r = 1.0\n", "li_data = [{'x': r*sin(t), 'y': r*cos(t), 'z': t/t_max}\n", " for t in t_rng]\n", "df_data = pd.DataFrame(li_data)\n", "\n", "g = v3d.Vis3d()\n", "g.width = '600px'\n", "g.height = '600px'\n", "g.style = 'line'\n", "g.showPerspective = False\n", "g.showGrid = True\n", "g.keepAspectRatio = True\n", "g.verticalRatio = 1.0\n", "g.cameraPosition = {'horizontal' : 0.44,\n", " 'vertical': 0.4,\n", " 'distance': 1.7\n", " }\n", "\n", "g.plot(df_data)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Moving Dots\n", "+ http://visjs.org/examples/graph3d/06_moving_dots.html" ] }, { "cell_type": "code", "execution_count": 6, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "execution_count": 6, "metadata": {}, "output_type": "execute_result" } ], "source": [ "t_max = 2*pi\n", "t_step = 75\n", "t_rng = np.linspace(0, t_max, t_step)\n", "nb_dot_pair = 1\n", "li_data = []\n", "\n", "for t in t_rng:\n", " tgroup = round(t, 2)\n", " li_data.append({'x': 0, 'y': 0, 'z': 0, 'style': t, 'filter': tgroup})\n", " for d in range(nb_dot_pair):\n", " t_dot = t + 2 * pi * d / nb_dot_pair\n", " li_data.append({'x': sin(t_dot), 'y': cos(t_dot), 'z': sin(t_dot),\n", " 'style': t, 'filter': tgroup})\n", " li_data.append({'x': sin(t_dot), 'y': -cos(t_dot), 'z': sin(t_dot+t_max/2),\n", " 'style': t, 'filter': tgroup})\n", " \n", "df_data = pd.DataFrame(li_data)\n", "\n", "\n", "g = v3d.Vis3d()\n", "g.width = '600px'\n", "g.height = '600px'\n", "g.style = 'dot-color'\n", "g.showPerspective = True\n", "g.showGrid = True\n", "g.keepAspectRatio = True\n", "g.verticalRatio = 1.0\n", "g.filterLabel = 'time'\n", "g.legendLabel = 'color value'\n", "g.cameraPosition = {'horizontal' : 2.7,\n", " 'vertical': 0,\n", " 'distance': 1.6\n", " }\n", "g.showAnimationControls = True\n", "g.animationInterval = 70\n", "g.animationPreload = True\n", "g.animationAutoStart = True\n", "\n", "g.plot(df_data)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Dot Cloud Color\n", "+ http://visjs.org/examples/graph3d/07_dot_cloud_colors.html" ] }, { "cell_type": "code", "execution_count": 7, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "execution_count": 7, "metadata": {}, "output_type": "execute_result" } ], "source": [ "d_max = 100\n", "d_rng = range(d_max)\n", "li_data = []\n", "rd.seed(123456)\n", "\n", "for d in d_rng:\n", " x, y, z = rd.random()**2, rd.random()**2, rd.random()**2\n", " dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2))\n", " li_data.append({'x': x, 'y': y, 'z': z, 'style': dist})\n", " \n", "df_data = pd.DataFrame(li_data)\n", "\n", "g = v3d.Vis3d()\n", "g.width = '600px'\n", "g.height = '600px'\n", "g.style = 'dot-color'\n", "g.showPerspective = True\n", "g.showGrid = True\n", "g.keepAspectRatio = True\n", "g.verticalRatio = 1.0\n", "g.legendLabel = 'distance'\n", "g.cameraPosition = {'horizontal' : -0.35,\n", " 'vertical': 0.22,\n", " 'distance': 1.8\n", " }\n", "\n", "g.plot(df_data)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Dot Cloud Size\n", "+ http://visjs.org/examples/graph3d/08_dot_cloud_size.html" ] }, { "cell_type": "code", "execution_count": 8, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "execution_count": 8, "metadata": {}, "output_type": "execute_result" } ], "source": [ "d_max = 100\n", "d_rng = range(d_max)\n", "li_data = []\n", "rd.seed(123456)\n", "\n", "for d in d_rng:\n", " x, y, z = rd.random()**2, rd.random()**2, rd.random()**2\n", " dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2))\n", " li_data.append({'x': x, 'y': y, 'z': z, 'style': sqrt(2)-dist})\n", " \n", "df_data = pd.DataFrame(li_data)\n", "\n", "g = v3d.Vis3d()\n", "g.width = '600px'\n", "g.height = '600px'\n", "g.style = 'dot-size'\n", "g.showPerspective = False\n", "g.showGrid = True\n", "g.keepAspectRatio = True\n", "g.verticalRatio = 1.0\n", "g.legendLabel = 'value'\n", "g.cameraPosition = {'horizontal' : -0.54,\n", " 'vertical': 0.5,\n", " 'distance': 1.6\n", " }\n", "\n", "g.plot(df_data)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Bar Chart\n", "+ http://visjs.org/examples/graph3d/10_styling.html" ] }, { "cell_type": "code", "execution_count": 9, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "execution_count": 9, "metadata": {}, "output_type": "execute_result" } ], "source": [ "def z(x, y):\n", " return -sin(x/pi) * cos(y/pi) * 10 + 10\n", " \n", "x_max = 10\n", "x_num = 6\n", "x_rng = np.linspace(0, x_max, x_num)\n", "y_rng = x_rng\n", "li_data = [{'x': x, 'y': y, 'z': z(x, y), 'style': y-x}\n", " for y in y_rng\n", " for x in x_rng]\n", "\n", "df_data = pd.DataFrame(li_data)\n", "\n", "g = v3d.Vis3d()\n", "g.width = '600px'\n", "g.height = '600px'\n", "g.style = 'bar-color'\n", "g.xBarWidth = 0.6\n", "g.yBarWidth = 0.9\n", "g.showPerspective = True\n", "g.showGrid = True\n", "g.keepAspectRatio = True\n", "\n", "g.plot(df_data)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Tooltips\n", "+ http://visjs.org/examples/graph3d/11_tooltips.html" ] }, { "cell_type": "code", "execution_count": 10, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "execution_count": 10, "metadata": {}, "output_type": "execute_result" } ], "source": [ "def z(x, y):\n", " return -sin(x/pi) * cos(y/pi) * 10 + 10\n", " \n", "x_max = 10\n", "x_num = 6\n", "x_rng = np.linspace(0, x_max, x_num)\n", "y_rng = x_rng\n", "li_data = [{'x': x, 'y': y, 'z': z(x, y), 'style': y-x}\n", " for y in y_rng\n", " for x in x_rng]\n", "\n", "df_data = pd.DataFrame(li_data)\n", "\n", "g = v3d.Vis3d()\n", "g.width = '600px'\n", "g.height = '600px'\n", "g.style = 'bar-color'\n", "g.showPerspective = True\n", "g.showGrid = True\n", "g.tooltip =\"\"\"\n", "function (point) {\n", " // parameter point contains properties x, y, z\n", " return 'value: ' + parseFloat(point.z.toFixed(3)) + '';\n", "}\n", "\"\"\"\n", "\n", "g.plot(df_data)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Custom Labels\n", "+ http://visjs.org/examples/graph3d/12_custom_labels.html" ] }, { "cell_type": "code", "execution_count": 11, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "execution_count": 11, "metadata": {}, "output_type": "execute_result" } ], "source": [ "def z(x, y):\n", " return -sin(x/pi) * cos(y/pi) * 10 + 10\n", " \n", "x_max = 10\n", "x_num = 6\n", "x_rng = np.linspace(0, x_max, x_num)\n", "y_rng = x_rng\n", "li_data = [{'x': x, 'y': y, 'z': z(x, y), 'style': y-x}\n", " for y in y_rng\n", " for x in x_rng]\n", "\n", "df_data = pd.DataFrame(li_data)\n", " \n", "g = v3d.Vis3d()\n", "g.width = '600px'\n", "g.height = '600px'\n", "g.style = 'bar-color'\n", "g.showPerspective = True\n", "g.showGrid = True\n", "g.tooltip =\"\"\"\n", "function (point) { return 'value: ' + parseFloat(point.z.toFixed(2)) + ''; }\n", "\"\"\"\n", "g.xLabel = 'Date'\n", "g.yLabel = 'Percentage'\n", "g.zLabel = 'Temperature'\n", "\n", "g.xValueLabel =\"\"\"\n", "function(value) { return vis.moment().add(value, 'days').format('DD MMM'); }\n", "\"\"\"\n", "g.yValueLabel =\"\"\"\n", "function(value) { return value * 10 + '%'; }\n", "\"\"\"\n", "g.zValueLabel =\"\"\"\n", "function(value) { return value / 1000 + 'K'; }\n", "\"\"\"\n", "\n", "g.plot(df_data)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Styles\n", "+ http://visjs.org/examples/graph3d/10_styling.html" ] }, { "cell_type": "code", "execution_count": 12, "metadata": { "scrolled": false }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "def z(x, y):\n", " return -sin(x/pi) * cos(y/pi) * 10 + 10\n", " \n", "x_max = 10\n", "x_num = 6\n", "x_rng = np.linspace(0, x_max, x_num)\n", "y_rng = x_rng\n", "li_data = [{'x': x, 'y': y, 'z': z(x, y), 'style': y-x}\n", " for y in y_rng\n", " for x in x_rng]\n", "\n", "df_data = pd.DataFrame(li_data)\n", " \n", "g = v3d.Vis3d()\n", "g.width = '400px'\n", "g.height = '400px'\n", "g.showPerspective = True\n", "g.showGrid = True\n", "\n", "\n", "for s in ['bar', 'bar-color', 'bar-size', 'dot', 'dot-line',\n", " 'dot-color', 'dot-size', 'line', 'grid', 'surface']:\n", " g.style = s\n", " display(g.plot(df_data, center=True))\n" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "scrolled": true }, "outputs": [], "source": [] }, { "cell_type": "markdown", "metadata": { "collapsed": true }, "source": [ "## Direct access to vis.js Graphe3d documentation\n", "+ Reference http://visjs.org/docs/graph3d/\n", "+ Navigate the object property tree\n", "+ An `info()` method gives the official help\n", "+ The usual ? postfix gives access to the same info\n", "+ WARNING: Once a property is set, the info method is not accessible any more" ] }, { "cell_type": "code", "execution_count": 13, "metadata": {}, "outputs": [ { "data": { "text/html": [ "

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.

    " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "

    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.

    " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "g = v3d.Vis3d()\n", "\n", "g.cameraPosition.info()\n", "g.cameraPosition.distance.info()" ] }, { "cell_type": "code", "execution_count": 14, "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/html": [ "

    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.

    " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "g = v3d.Vis3d()\n", "g.backgroundColor.info()" ] }, { "cell_type": "code", "execution_count": 15, "metadata": { "scrolled": true }, "outputs": [], "source": [ "g = v3d.Vis3d()\n", "g.cameraPosition?" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "scrolled": true }, "outputs": [], "source": [] } ], "metadata": { "kernelspec": { "display_name": "Python 3", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.6.3" } }, "nbformat": 4, "nbformat_minor": 1 }