Forked from chriddyp/Pandas Widget - Time Series, Search, and Filtering.ipynb
Last active
March 6, 2023 19:36
-
-
Save bgruening/16f3882e9e014d4d6e6f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "metadata": { | |
| "name": "", | |
| "signature": "sha256:d52e61de6e36eebafb15f06d10fb94fa0958223fdf94e6a869d61c8e2f429a73" | |
| }, | |
| "nbformat": 3, | |
| "nbformat_minor": 0, | |
| "worksheets": [ | |
| { | |
| "cells": [ | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "# Etch A Sketch\n", | |
| "#### Plotly and IPython Notebook Widgets" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "from IPython.display import Image\n", | |
| "Image(url='http://i.imgur.com/5Y6fZNC.gif')" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "html": [ | |
| "<img src=\"http://i.imgur.com/5Y6fZNC.gif\"/>" | |
| ], | |
| "metadata": {}, | |
| "output_type": "pyout", | |
| "prompt_number": 7, | |
| "text": [ | |
| "<IPython.core.display.Image at 0x1076d7b50>" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 7 | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "from plotly.widgets import GraphWidget\n", | |
| "\n", | |
| "from IPython.html import widgets \n", | |
| "from IPython.display import display, clear_output" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "output_type": "stream", | |
| "stream": "stderr", | |
| "text": [ | |
| "/Users/chris/anaconda/lib/python2.7/site-packages/pandas/computation/expressions.py:21: UserWarning: The installed version of numexpr 2.0.1 is not supported in pandas and will be not be used\n", | |
| "The minimum supported version is 2.1\n", | |
| "\n", | |
| " \"version is 2.1\\n\".format(ver=ver), UserWarning)\n" | |
| ] | |
| }, | |
| { | |
| "javascript": [ | |
| "window.genUID = function() {\n", | |
| " return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n", | |
| " var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);\n", | |
| " return v.toString(16);\n", | |
| " });\n", | |
| "};\n", | |
| "\n", | |
| "require([\"widgets/js/widget\"], function(WidgetManager){\n", | |
| "\n", | |
| " var GraphView = IPython.DOMWidgetView.extend({\n", | |
| " render: function(){\n", | |
| "\n", | |
| " console.log('render!');\n", | |
| "\n", | |
| " var that = this;\n", | |
| "\n", | |
| " var graphId = window.genUID();\n", | |
| " var loadingId = 'loading-'+graphId;\n", | |
| "\n", | |
| "\n", | |
| " var _graph_url = that.model.get('_graph_url');\n", | |
| "\n", | |
| " // variable plotlyDomain in the case of enterprise\n", | |
| " var url_parts = _graph_url.split('/');\n", | |
| " var plotlyDomain = url_parts[0] + '//' + url_parts[2];\n", | |
| "\n", | |
| " if(!('plotlyDomains' in window)){\n", | |
| " window.plotlyDomains = {};\n", | |
| " }\n", | |
| " window.plotlyDomains[graphId] = plotlyDomain;\n", | |
| "\n", | |
| " // Place IFrame in output cell div `$el`\n", | |
| " that.$el.css('width', '100%');\n", | |
| " that.$graph = $(['<iframe id=\"'+graphId+'\"',\n", | |
| " 'src=\"'+_graph_url+'.embed\"',\n", | |
| " 'seamless',\n", | |
| " 'style=\"border: none;\"',\n", | |
| " 'width=\"100%\"',\n", | |
| " 'height=\"600\">',\n", | |
| " '</iframe>'].join(' '));\n", | |
| " that.$graph.appendTo(that.$el);\n", | |
| "\n", | |
| " that.$loading = $('<div id=\"'+loadingId+'\">Initializing...</div>')\n", | |
| " .appendTo(that.$el);\n", | |
| "\n", | |
| " // initialize communication with the iframe\n", | |
| " if(!('pingers' in window)){\n", | |
| " window.pingers = {};\n", | |
| " }\n", | |
| "\n", | |
| " window.pingers[graphId] = setInterval(function() {\n", | |
| " that.graphContentWindow = $('#'+graphId)[0].contentWindow;\n", | |
| " console.log('posting ping: ', plotlyDomain);\n", | |
| " that.graphContentWindow.postMessage({task: 'ping'}, plotlyDomain);\n", | |
| " }, 200);\n", | |
| "\n", | |
| " // Assign a message listener to the 'message' events\n", | |
| " // from iframe's postMessage protocol.\n", | |
| " // Filter the messages by iframe src so that the right message\n", | |
| " // gets passed to the right widget\n", | |
| " if(!('messageListeners' in window)){\n", | |
| " window.messageListeners = {};\n", | |
| " }\n", | |
| "\n", | |
| " window.messageListeners[graphId] = function(e) {\n", | |
| " console.log('message: ', e.data);\n", | |
| " if(_graph_url.indexOf(e.origin)>-1) {\n", | |
| " var frame = document.getElementById(graphId);\n", | |
| "\n", | |
| " if(frame === null){\n", | |
| " // frame doesn't exist in the dom anymore, clean up it's old event listener\n", | |
| " window.removeEventListener('message', window.messageListeners[graphId]);\n", | |
| " clearInterval(window.pingers[graphId]);\n", | |
| " } else if(frame.contentWindow === e.source) {\n", | |
| " // TODO: Stop event propagation, so each frame doesn't listen and filter\n", | |
| " var frameContentWindow = $('#'+graphId)[0].contentWindow;\n", | |
| " var message = e.data;\n", | |
| "\n", | |
| " if('pong' in message && message.pong) {\n", | |
| " $('#loading-'+graphId).hide();\n", | |
| " clearInterval(window.pingers[graphId]);\n", | |
| " that.send({event: 'pong', graphId: graphId});\n", | |
| " } else if (message.type==='hover' ||\n", | |
| " message.type==='zoom' ||\n", | |
| " message.type==='click' ||\n", | |
| " message.type==='unhover') {\n", | |
| "\n", | |
| " // click and hover events contain all of the data in the traces,\n", | |
| " // which can be a very large object and may take a ton of time\n", | |
| " // to pass to the python backend. Strip out the data, and require\n", | |
| " // the user to call get_figure if they need trace information\n", | |
| " if(message.type !== 'zoom') {\n", | |
| " for(var i in message.points) {\n", | |
| " delete message.points[i].data;\n", | |
| " }\n", | |
| " }\n", | |
| " that.send({event: message.type, message: message, graphId: graphId});\n", | |
| " }\n", | |
| " }\n", | |
| " }\n", | |
| " };\n", | |
| "\n", | |
| " window.removeEventListener('message', window.messageListeners[graphId]);\n", | |
| " window.addEventListener('message', window.messageListeners[graphId]);\n", | |
| "\n", | |
| " },\n", | |
| "\n", | |
| " update: function() {\n", | |
| " // Listen for messages from the graph widget in python\n", | |
| " var jmessage = this.model.get('_message');\n", | |
| " var message = JSON.parse(jmessage);\n", | |
| "\n", | |
| " // check for duplicate messages\n", | |
| " if(!('messageIds' in window)){\n", | |
| " window.messageIds = {};\n", | |
| " }\n", | |
| "\n", | |
| " if(!(message.uid in window.messageIds)){\n", | |
| " // message hasn't been received yet, do stuff\n", | |
| " window.messageIds[message.uid] = true;\n", | |
| "\n", | |
| " var plot = $('#'+message.graphId)[0].contentWindow;\n", | |
| " plot.postMessage(message, window.plotlyDomains[message.graphId]);\n", | |
| " }\n", | |
| "\n", | |
| " return GraphView.__super__.update.apply(this);\n", | |
| " }\n", | |
| " });\n", | |
| "\n", | |
| " // Register the GraphView with the widget manager.\n", | |
| " WidgetManager.register_widget_view('GraphView', GraphView);\n", | |
| "});\n", | |
| "\n", | |
| "//@ sourceURL=graphWidget.js\n" | |
| ], | |
| "metadata": {}, | |
| "output_type": "display_data", | |
| "text": [ | |
| "<IPython.core.display.Javascript at 0x107644b50>" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 1 | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "g = GraphWidget('https://plot.ly/~chris/4103')\n", | |
| "\n", | |
| "class xydata:\n", | |
| " def __init__(self):\n", | |
| " self.x = [0]\n", | |
| " self.y = [0]\n", | |
| " \n", | |
| " def on_x_change(self, name, old_value, new_value):\n", | |
| " self.x.append(new_value)\n", | |
| " self.y.append(self.y[-1])\n", | |
| " self.replot()\n", | |
| " \n", | |
| " def on_y_change(self, name, old_value, new_value):\n", | |
| " self.x.append(self.x[-1])\n", | |
| " self.y.append(new_value)\n", | |
| " self.replot()\n", | |
| " \n", | |
| " def replot(self):\n", | |
| " g.restyle({\n", | |
| " 'x': [self.x],\n", | |
| " 'y': [self.y]\n", | |
| " })\n", | |
| "\n", | |
| "\n", | |
| "x_slider = widgets.FloatSliderWidget()\n", | |
| "x_slider.description = 'X Value'\n", | |
| "x_slider.value = 0\n", | |
| "y_slider = widgets.FloatSliderWidget()\n", | |
| "y_slider.description = 'Y Value'\n", | |
| "y_slider.value = 0\n", | |
| "\n", | |
| "xystate = xydata()\n", | |
| "x_slider.on_trait_change(xystate.on_x_change, 'value')\n", | |
| "y_slider.on_trait_change(xystate.on_y_change, 'value')\n", | |
| "\n", | |
| "shake = widgets.ButtonWidget()\n", | |
| "def on_shake(widget):\n", | |
| " g.restyle({'x': [[]], 'y': [[]]})\n", | |
| " xystate.x = [x_slider.value]\n", | |
| " xystate.y = [y_slider.value]\n", | |
| "\n", | |
| "shake.on_click(on_shake)\n", | |
| "shake.description = 'Shake'" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [], | |
| "prompt_number": 2 | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "display(x_slider)\n", | |
| "display(y_slider)\n", | |
| "display(shake)\n", | |
| "display(g)" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [], | |
| "prompt_number": 3 | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "# CSS styling within IPython notebook - feel free to re-use\n", | |
| "from IPython.core.display import HTML\n", | |
| "import urllib2\n", | |
| "\n", | |
| "HTML(urllib2.urlopen('http://bit.ly/1Bf5Hft').read())" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "html": [ | |
| "<style>\n", | |
| "\n", | |
| "html {\n", | |
| " font-size: 62.5% !important; }\n", | |
| "body {\n", | |
| " font-size: 1.5em !important; /* currently ems cause chrome bug misinterpreting rems on body element */\n", | |
| " line-height: 1.6 !important;\n", | |
| " font-weight: 400 !important;\n", | |
| " font-family: \"Raleway\", \"HelveticaNeue\", \"Helvetica Neue\", Helvetica, Arial, sans-serif !important;\n", | |
| " color: #222 !important; }\n", | |
| "\n", | |
| "div{ border-radius: 0px !important; }\n", | |
| "div.CodeMirror-sizer{ background: rgb(244, 244, 248) !important; }\n", | |
| "div.input_area{ background: rgb(244, 244, 248) !important; }\n", | |
| "\n", | |
| "div.out_prompt_overlay:hover{ background: rgb(244, 244, 248) !important; }\n", | |
| "div.input_prompt:hover{ background: rgb(244, 244, 248) !important; }\n", | |
| "\n", | |
| "h1, h2, h3, h4, h5, h6 {\n", | |
| " color: #333 !important;\n", | |
| " margin-top: 0 !important;\n", | |
| " margin-bottom: 2rem !important;\n", | |
| " font-weight: 300 !important; }\n", | |
| "h1 { font-size: 4.0rem !important; line-height: 1.2 !important; letter-spacing: -.1rem !important;}\n", | |
| "h2 { font-size: 3.6rem !important; line-height: 1.25 !important; letter-spacing: -.1rem !important; }\n", | |
| "h3 { font-size: 3.0rem !important; line-height: 1.3 !important; letter-spacing: -.1rem !important; }\n", | |
| "h4 { font-size: 2.4rem !important; line-height: 1.35 !important; letter-spacing: -.08rem !important; }\n", | |
| "h5 { font-size: 1.8rem !important; line-height: 1.5 !important; letter-spacing: -.05rem !important; }\n", | |
| "h6 { font-size: 1.5rem !important; line-height: 1.6 !important; letter-spacing: 0 !important; }\n", | |
| "\n", | |
| "@media (min-width: 550px) {\n", | |
| " h1 { font-size: 5.0rem !important; }\n", | |
| " h2 { font-size: 4.2rem !important; }\n", | |
| " h3 { font-size: 3.6rem !important; }\n", | |
| " h4 { font-size: 3.0rem !important; }\n", | |
| " h5 { font-size: 2.4rem !important; }\n", | |
| " h6 { font-size: 1.5rem !important; }\n", | |
| "}\n", | |
| "\n", | |
| "p {\n", | |
| " margin-top: 0 !important; }\n", | |
| " \n", | |
| "a {\n", | |
| " color: #1EAEDB !important; }\n", | |
| "a:hover {\n", | |
| " color: #0FA0CE !important; }\n", | |
| " \n", | |
| "code {\n", | |
| " padding: .2rem .5rem !important;\n", | |
| " margin: 0 .2rem !important;\n", | |
| " font-size: 90% !important;\n", | |
| " white-space: nowrap !important;\n", | |
| " background: #F1F1F1 !important;\n", | |
| " border: 1px solid #E1E1E1 !important;\n", | |
| " border-radius: 4px !important; }\n", | |
| "pre > code {\n", | |
| " display: block !important;\n", | |
| " padding: 1rem 1.5rem !important;\n", | |
| " white-space: pre !important; }\n", | |
| " \n", | |
| "button{ border-radius: 0px !important; }\n", | |
| ".navbar-inner{ background-image: none !important; }\n", | |
| "select, textarea{ border-radius: 0px !important; }\n", | |
| "\n", | |
| "</style>" | |
| ], | |
| "metadata": {}, | |
| "output_type": "pyout", | |
| "prompt_number": 8, | |
| "text": [ | |
| "<IPython.core.display.HTML at 0x1076d7dd0>" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 8 | |
| } | |
| ], | |
| "metadata": {} | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment