Skip to content

Instantly share code, notes, and snippets.

@moorepants

moorepants/javascript_viz_test.ipynb

Created June 24, 2017 16:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save moorepants/f558a3cd47a90f07e67a5be1203e6b78 to your computer and use it in GitHub Desktop.
Save moorepants/f558a3cd47a90f07e67a5be1203e6b78 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
javascript_viz_test.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 3,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"require.config({\n",
" paths: {\n",
" chartjs: '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js'\n",
" }\n",
"});"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"require.config({\n",
" paths: {\n",
" chartjs: '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js'\n",
" }\n",
"});"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"require(['chartjs'], function(chartjs){\n",
" var ctx = document.getElementById(\"myChart\");\n",
" console.log(ctx);\n",
" var myChart = new chartjs.Chart(ctx, {\n",
" type: 'bar',\n",
" data: {\n",
" labels: [\"Red\", \"Blue\", \"Yellow\", \"Green\", \"Purple\", \"Orange\"],\n",
" datasets: [{\n",
" label: '# of Votes',\n",
" data: [12, 19, 3, 5, 2, 3],\n",
" backgroundColor: [\n",
" 'rgba(255, 99, 132, 0.2)',\n",
" 'rgba(54, 162, 235, 0.2)',\n",
" 'rgba(255, 206, 86, 0.2)',\n",
" 'rgba(75, 192, 192, 0.2)',\n",
" 'rgba(153, 102, 255, 0.2)',\n",
" 'rgba(255, 159, 64, 0.2)'\n",
" ],\n",
" borderColor: [\n",
" 'rgba(255,99,132,1)',\n",
" 'rgba(54, 162, 235, 1)',\n",
" 'rgba(255, 206, 86, 1)',\n",
" 'rgba(75, 192, 192, 1)',\n",
" 'rgba(153, 102, 255, 1)',\n",
" 'rgba(255, 159, 64, 1)'\n",
" ],\n",
" borderWidth: 1\n",
" }]\n",
" },\n",
" options: {\n",
" scales: {\n",
" yAxes: [{\n",
" ticks: {\n",
" beginAtZero:true\n",
" }\n",
" }]\n",
" }\n",
" }\n",
" });\n",
"});\n",
"element.append(\"<canvas id='myChart' width='400' height='400'></canvas>\");"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"require(['chartjs'], function(chartjs){\n",
" var ctx = document.getElementById(\"myChart\");\n",
" console.log(ctx);\n",
" var myChart = new chartjs.Chart(ctx, {\n",
" type: 'bar',\n",
" data: {\n",
" labels: [\"Red\", \"Blue\", \"Yellow\", \"Green\", \"Purple\", \"Orange\"],\n",
" datasets: [{\n",
" label: '# of Votes',\n",
" data: [12, 19, 3, 5, 2, 3],\n",
" backgroundColor: [\n",
" 'rgba(255, 99, 132, 0.2)',\n",
" 'rgba(54, 162, 235, 0.2)',\n",
" 'rgba(255, 206, 86, 0.2)',\n",
" 'rgba(75, 192, 192, 0.2)',\n",
" 'rgba(153, 102, 255, 0.2)',\n",
" 'rgba(255, 159, 64, 0.2)'\n",
" ],\n",
" borderColor: [\n",
" 'rgba(255,99,132,1)',\n",
" 'rgba(54, 162, 235, 1)',\n",
" 'rgba(255, 206, 86, 1)',\n",
" 'rgba(75, 192, 192, 1)',\n",
" 'rgba(153, 102, 255, 1)',\n",
" 'rgba(255, 159, 64, 1)'\n",
" ],\n",
" borderWidth: 1\n",
" }]\n",
" },\n",
" options: {\n",
" scales: {\n",
" yAxes: [{\n",
" ticks: {\n",
" beginAtZero:true\n",
" }\n",
" }]\n",
" }\n",
" }\n",
" });\n",
"});\n",
"element.append(\"<canvas id='myChart' width='400' height='400'></canvas>\");"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"from IPython.display import Javascript"
]
},
{
"cell_type": "code",
"execution_count": 13,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"$.getScript(\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js\", function () {\n",
"\n",
" var ctx = document.getElementById(\"myChart\");\n",
" console.log(ctx);\n",
" var myChart = new Chart(ctx, {\n",
" type: 'bar',\n",
" data: {\n",
" labels: [\"Red\", \"Blue\", \"Yellow\", \"Green\", \"Purple\", \"Orange\"],\n",
" datasets: [{\n",
" label: '# of Votes',\n",
" data: [12, 19, 3, 5, 2, 3],\n",
" backgroundColor: [\n",
" 'rgba(255, 99, 132, 0.2)',\n",
" 'rgba(54, 162, 235, 0.2)',\n",
" 'rgba(255, 206, 86, 0.2)',\n",
" 'rgba(75, 192, 192, 0.2)',\n",
" 'rgba(153, 102, 255, 0.2)',\n",
" 'rgba(255, 159, 64, 0.2)'\n",
" ],\n",
" borderColor: [\n",
" 'rgba(255,99,132,1)',\n",
" 'rgba(54, 162, 235, 1)',\n",
" 'rgba(255, 206, 86, 1)',\n",
" 'rgba(75, 192, 192, 1)',\n",
" 'rgba(153, 102, 255, 1)',\n",
" 'rgba(255, 159, 64, 1)'\n",
" ],\n",
" borderWidth: 1\n",
" }]\n",
" },\n",
" options: {\n",
" scales: {\n",
" yAxes: [{\n",
" ticks: {\n",
" beginAtZero:true\n",
" }\n",
" }]\n",
" }\n",
" }\n",
" });\n",
"element.append(\"<canvas id='myChart' width='400' height='400'></canvas>\");\n",
"});\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"execution_count": 13,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"Javascript(\n",
"\"\"\"\n",
" var ctx = document.getElementById(\"myChart\");\n",
" console.log(ctx);\n",
" var myChart = new Chart(ctx, {\n",
" type: 'bar',\n",
" data: {\n",
" labels: [\"Red\", \"Blue\", \"Yellow\", \"Green\", \"Purple\", \"Orange\"],\n",
" datasets: [{\n",
" label: '# of Votes',\n",
" data: [12, 19, 3, 5, 2, 3],\n",
" backgroundColor: [\n",
" 'rgba(255, 99, 132, 0.2)',\n",
" 'rgba(54, 162, 235, 0.2)',\n",
" 'rgba(255, 206, 86, 0.2)',\n",
" 'rgba(75, 192, 192, 0.2)',\n",
" 'rgba(153, 102, 255, 0.2)',\n",
" 'rgba(255, 159, 64, 0.2)'\n",
" ],\n",
" borderColor: [\n",
" 'rgba(255,99,132,1)',\n",
" 'rgba(54, 162, 235, 1)',\n",
" 'rgba(255, 206, 86, 1)',\n",
" 'rgba(75, 192, 192, 1)',\n",
" 'rgba(153, 102, 255, 1)',\n",
" 'rgba(255, 159, 64, 1)'\n",
" ],\n",
" borderWidth: 1\n",
" }]\n",
" },\n",
" options: {\n",
" scales: {\n",
" yAxes: [{\n",
" ticks: {\n",
" beginAtZero:true\n",
" }\n",
" }]\n",
" }\n",
" }\n",
" });\n",
"element.append(\"<canvas id='myChart' width='400' height='400'></canvas>\");\n",
"\"\"\", lib=['https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js'])"
]
}
],
"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.1"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment