Created
May 25, 2015 07:16
Revisions
-
dandelin created this gist
May 25, 2015 .There are no files selected for viewing
This file contains hidden or 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,323 @@ { "cells": [ { "cell_type": "code", "execution_count": 1, "metadata": { "collapsed": false }, "outputs": [ { "data": { "text/html": [ "\n", "<style>\n", ".hello-world{\n", " border: 1px solid black; \n", " width: 300px; \n", " height: 50px; \n", " font-size: 2em; \n", " padding: 0.3em;\n", "}\n", "</style>\n", "\n", "<div class='hello-world'>\n", "Hello ,html magic!\n", "</div>" ], "text/plain": [ "<IPython.core.display.HTML object>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "\n", "<style>\n", ".hello-world{\n", " border: 1px solid black; \n", " width: 300px; \n", " height: 50px; \n", " font-size: 2em; \n", " padding: 0.3em;\n", "}\n", "</style>\n", "\n", "<div class='hello-world'>\n", "Hello ,html magic!\n", "</div>" ] }, { "cell_type": "code", "execution_count": 2, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "window.get_element = function(el){\n", " if(el){ $(el).html('') }\n", " return (el !== undefined) ? el[0] : $('script').last().parent()[0];\n", "};\n", "\n", "element = undefined;" ], "text/plain": [ "<IPython.core.display.Javascript object>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "\n", "window.get_element = function(el){\n", " if(el){ $(el).html('') }\n", " return (el !== undefined) ? el[0] : $('script').last().parent()[0];\n", "};\n", "\n", "element = undefined;" ] }, { "cell_type": "code", "execution_count": 3, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "var target = get_element(element)\n", "$(target).append('<div class=\"hello-world\">Hello, js magic!</div>')" ], "text/plain": [ "<IPython.core.display.Javascript object>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "\n", "var target = get_element(element)\n", "$(target).append('<div class=\"hello-world\">Hello, js magic!</div>')" ] }, { "cell_type": "code", "execution_count": 4, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "require.config({\n", " paths: {\n", " d3: \"http://d3js.org/d3.v3.min\"\n", " }\n", "});" ], "text/plain": [ "<IPython.core.display.Javascript object>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "\n", "require.config({\n", " paths: {\n", " d3: \"http://d3js.org/d3.v3.min\"\n", " }\n", "});" ] }, { "cell_type": "code", "execution_count": 5, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "(function(){\n", " var targetElement = get_element(element);\n", " require(['d3'], function(){\n", " $(targetElement).append($('<p>' + d3 + '</p>'))\n", " });\n", "})();" ], "text/plain": [ "<IPython.core.display.Javascript object>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "\n", "(function(){\n", " var targetElement = get_element(element);\n", " require(['d3'], function(){\n", " $(targetElement).append($('<p>' + d3 + '</p>'))\n", " });\n", "})();" ] }, { "cell_type": "code", "execution_count": 6, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "(function(){\n", " var targetElement = get_element(element);\n", " require(['d3'], function(){\n", " $(targetElement).append($('<p>' + d3.max([3,91,82,34,19]) + '</p>'))\n", " });\n", "})();" ], "text/plain": [ "<IPython.core.display.Javascript object>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "\n", "(function(){\n", " var targetElement = get_element(element);\n", " require(['d3'], function(){\n", " $(targetElement).append($('<p>' + d3.max([3,91,82,34,19]) + '</p>'))\n", " });\n", "})();" ] }, { "cell_type": "code", "execution_count": 7, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "\n", "(function(){\n", " var targetElement = get_element(element);\n", " require(['d3'], function(){\n", " var data = [1, 2, 3, 4, 5, 6, 10]\n", " var svg = d3.select(targetElement).append('svg')\n", " .attr('width', '350px')\n", " .attr('height', '100px')\n", " .style('border', '1px solid lightgray');\n", " \n", " svg.selectAll('circle')\n", " .data(data)\n", " .enter()\n", " .append('circle')\n", " .style('fill', 'skyblue')\n", " .attr('cx', function(d, i){ return i * (350/data.length) + 15})\n", " .attr('cy', '50px')\n", " .attr('r', function(d){ return d * 3})\n", " });\n", "})();" ], "text/plain": [ "<IPython.core.display.Javascript object>" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "\n", "(function(){\n", " var targetElement = get_element(element);\n", " require(['d3'], function(){\n", " var data = [1, 2, 3, 4, 5, 6, 10]\n", " var svg = d3.select(targetElement).append('svg')\n", " .attr('width', '350px')\n", " .attr('height', '100px')\n", " .style('border', '1px solid lightgray');\n", " \n", " svg.selectAll('circle')\n", " .data(data)\n", " .enter()\n", " .append('circle')\n", " .style('fill', 'skyblue')\n", " .attr('cx', function(d, i){ return i * (350/data.length) + 15})\n", " .attr('cy', '50px')\n", " .attr('r', function(d){ return d * 3})\n", " });\n", "})();" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [] } ], "metadata": { "kernelspec": { "display_name": "Python 2", "language": "python", "name": "python2" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 2 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython2", "version": "2.7.6" } }, "nbformat": 4, "nbformat_minor": 0 }