{ "cells": [ { "cell_type": "code", "execution_count": 19, "metadata": { "collapsed": false }, "outputs": [], "source": [ "# import libraries (including our short d3_lib script)\n", "from IPython.core.display import HTML" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "scriptタグのsrc属性指定では、うまくd3.v3.min.jsを読み込めないみたい" ] }, { "cell_type": "code", "execution_count": 20, "metadata": { "collapsed": false }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "\n", "
" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "\n", "
\n", "\n", "
" ] }, { "cell_type": "code", "execution_count": 21, "metadata": { "collapsed": false }, "outputs": [ { "data": { "text/html": [ "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%html\n", "" ] }, { "cell_type": "code", "execution_count": 22, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "d3.select(\"#someDiv\").style(\"border\", \"5px darkgray dashed\");\n", "d3.select(\"#someDiv\").attr(\"id\", \"newID\");\n", "d3.select(\"#someCheckbox\").property(\"checked\", true);" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "d3.select(\"#someDiv\").style(\"border\", \"5px darkgray dashed\");\n", "d3.select(\"#someDiv\").attr(\"id\", \"newID\");\n", "d3.select(\"#someCheckbox\").property(\"checked\", true);" ] }, { "cell_type": "code", "execution_count": 23, "metadata": { "collapsed": false }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "
\n", "
\n", "" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%HTML\n", "\n", "
\n", "
\n", "
\n", "" ] }, { "cell_type": "code", "execution_count": 24, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "d3.csv(\"data/cities.csv\",function(error,data) {dataViz(data)});\n", "function dataViz(incomingData) {\n", " d3.select(\"#Test1\").selectAll(\"div.cities\")\n", " .data(incomingData)\n", " .enter()\n", " .append(\"div\")\n", " .attr(\"class\",\"cities\")\n", " .html(function(d,i) {return d.label})\n", "}" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "d3.csv(\"data/cities.csv\",function(error,data) {dataViz(data)});\n", "function dataViz(incomingData) {\n", " d3.select(\"#Test1\").selectAll(\"div.cities\")\n", " .data(incomingData)\n", " .enter()\n", " .append(\"div\")\n", " .attr(\"class\",\"cities\")\n", " .html(function(d,i) {return d.label})\n", "}" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "console.logの代わりにelement.textを使うと出力をjupyterに表示することができるみたい。\n", "\n", "コンソール出力の方が中身が見れるので強力です。" ] }, { "cell_type": "code", "execution_count": 25, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "element.text('Hi');" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "element.text('Hi');" ] }, { "cell_type": "code", "execution_count": 32, "metadata": { "collapsed": false }, "outputs": [ { "data": { "application/javascript": [ "var pieChart = d3.layout.pie();\n", "var yourPie = pieChart([1,1,2]);\n", "console.log(yourPie);\n", "element.text(yourPie);" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "%%javascript\n", "var pieChart = d3.layout.pie();\n", "var yourPie = pieChart([1,1,2]);\n", "console.log(yourPie);\n", "element.text(yourPie);" ] }, { "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.10" } }, "nbformat": 4, "nbformat_minor": 0 }