Skip to content

Instantly share code, notes, and snippets.

@hkmoon

hkmoon/translation_from_Python.ipynb

Created February 24, 2020 16:03
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 hkmoon/8bbb650103eb3c7cd7a09fbecd27cd62 to your computer and use it in GitHub Desktop.
Save hkmoon/8bbb650103eb3c7cd7a09fbecd27cd62 to your computer and use it in GitHub Desktop.
Download ZIP
Translation python data to javascript to visualize
Display the source blob
Display the rendered blob
Raw
translation_from_Python.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [],
"source": [
"from beakerx.object import beakerx"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [],
"source": [
"from random import random\n",
"import math\n",
"\n",
"data = []\n",
"\n",
"for i in range(0, 20):\n",
" data.append({\"category\": str(i), \"value\": round(random() * 100.)})\n",
"\n",
"beakerx.data = {'data': data};\n",
"# print(data)"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
"require.config({\n",
" paths: {\n",
" d3: '//d3js.org/d3.v4.min',\n",
" amchart_core: '//www.amcharts.com/lib/4/core',\n",
" amchart_charts: '//www.amcharts.com/lib/4/charts',\n",
" 'amcharts4/themes/animated': '//www.amcharts.com/lib/4/themes/animated',\n",
" },\n",
" shim: {\n",
" amchart_core: {\n",
" init: function () {\n",
" return window.am4core;\n",
" }\n",
" },\n",
" amchart_charts: {\n",
" deps: ['amchart_core'],\n",
" exports: 'amchart_charts',\n",
" init: function () {\n",
" return window.am4charts;\n",
" }\n",
" },\n",
" 'amcharts4/themes/animated': {\n",
" deps: ['amchart_core'],\n",
" init: function () {\n",
" return window.am4themes_animated;\n",
" }\n",
" }\n",
" }\n",
"});\n",
"\n",
"element.append('<div id=\"chartdiv\" style=\"height:500px;\"></div>')\n",
"\n",
"require(['amchart_core', 'amchart_charts', 'amcharts4/themes/animated'], function (am4core, am4charts, am4themes_animated) {\n",
" am4core.useTheme(am4themes_animated);\n",
" \n",
" // Create chart instance\n",
" var chart = am4core.create(\"chartdiv\", am4charts.RadarChart);\n",
"\n",
" chart.scrollbarX = new am4core.Scrollbar();\n",
"\n",
" let data = beakerx.data.data;\n",
" \n",
" chart.data = data;\n",
" chart.radius = am4core.percent(100);\n",
" chart.innerRadius = am4core.percent(50);\n",
"\n",
" // Create axes\n",
" let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\n",
" categoryAxis.dataFields.category = \"category\";\n",
" categoryAxis.renderer.grid.template.location = 0;\n",
" categoryAxis.renderer.minGridDistance = 30;\n",
" categoryAxis.tooltip.disabled = true;\n",
" categoryAxis.renderer.minHeight = 110;\n",
" categoryAxis.renderer.grid.template.disabled = true;\n",
" \n",
" //categoryAxis.renderer.labels.template.disabled = true;\n",
" let labelTemplate = categoryAxis.renderer.labels.template;\n",
" labelTemplate.radius = am4core.percent(-60);\n",
" labelTemplate.location = 0.5;\n",
" labelTemplate.relativeRotation = 90;\n",
"\n",
" let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\n",
" valueAxis.renderer.grid.template.disabled = true;\n",
" valueAxis.renderer.labels.template.disabled = true;\n",
" valueAxis.tooltip.disabled = true;\n",
"\n",
" // Create series\n",
" let series = chart.series.push(new am4charts.RadarColumnSeries());\n",
" series.sequencedInterpolation = true;\n",
" series.dataFields.valueY = \"value\";\n",
" series.dataFields.categoryX = \"category\";\n",
" series.columns.template.strokeWidth = 0;\n",
" series.tooltipText = \"{valueY}\";\n",
" series.columns.template.radarColumn.cornerRadius = 10;\n",
" series.columns.template.radarColumn.innerCornerRadius = 0;\n",
"\n",
" series.tooltip.pointerOrientation = \"vertical\";\n",
"\n",
" // on hover, make corner radiuses bigger\n",
" let hoverState = series.columns.template.radarColumn.states.create(\"hover\");\n",
" hoverState.properties.cornerRadius = 0;\n",
" hoverState.properties.fillOpacity = 1;\n",
"\n",
"\n",
" series.columns.template.adapter.add(\"fill\", function(fill, target) {\n",
" return chart.colors.getIndex(target.dataItem.index);\n",
" })\n",
"\n",
" // Cursor\n",
" chart.cursor = new am4charts.RadarCursor();\n",
" chart.cursor.innerRadius = am4core.percent(50);\n",
" chart.cursor.lineY.disabled = true;\n",
"}, function (err) {\n",
" console.log(err);\n",
"});\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"\n",
"require.config({\n",
" paths: {\n",
" d3: '//d3js.org/d3.v4.min',\n",
" amchart_core: '//www.amcharts.com/lib/4/core',\n",
" amchart_charts: '//www.amcharts.com/lib/4/charts',\n",
" 'amcharts4/themes/animated': '//www.amcharts.com/lib/4/themes/animated',\n",
" },\n",
" shim: {\n",
" amchart_core: {\n",
" init: function () {\n",
" return window.am4core;\n",
" }\n",
" },\n",
" amchart_charts: {\n",
" deps: ['amchart_core'],\n",
" exports: 'amchart_charts',\n",
" init: function () {\n",
" return window.am4charts;\n",
" }\n",
" },\n",
" 'amcharts4/themes/animated': {\n",
" deps: ['amchart_core'],\n",
" init: function () {\n",
" return window.am4themes_animated;\n",
" }\n",
" }\n",
" }\n",
"});\n",
"\n",
"element.append('<div id=\"chartdiv\" style=\"height:500px;\"></div>')\n",
"\n",
"require(['amchart_core', 'amchart_charts', 'amcharts4/themes/animated'], function (am4core, am4charts, am4themes_animated) {\n",
" am4core.useTheme(am4themes_animated);\n",
" \n",
" // Create chart instance\n",
" var chart = am4core.create(\"chartdiv\", am4charts.RadarChart);\n",
"\n",
" chart.scrollbarX = new am4core.Scrollbar();\n",
"\n",
" let data = beakerx.data.data;\n",
" \n",
" chart.data = data;\n",
" chart.radius = am4core.percent(100);\n",
" chart.innerRadius = am4core.percent(50);\n",
"\n",
" // Create axes\n",
" let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\n",
" categoryAxis.dataFields.category = \"category\";\n",
" categoryAxis.renderer.grid.template.location = 0;\n",
" categoryAxis.renderer.minGridDistance = 30;\n",
" categoryAxis.tooltip.disabled = true;\n",
" categoryAxis.renderer.minHeight = 110;\n",
" categoryAxis.renderer.grid.template.disabled = true;\n",
" \n",
" //categoryAxis.renderer.labels.template.disabled = true;\n",
" let labelTemplate = categoryAxis.renderer.labels.template;\n",
" labelTemplate.radius = am4core.percent(-60);\n",
" labelTemplate.location = 0.5;\n",
" labelTemplate.relativeRotation = 90;\n",
"\n",
" let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\n",
" valueAxis.renderer.grid.template.disabled = true;\n",
" valueAxis.renderer.labels.template.disabled = true;\n",
" valueAxis.tooltip.disabled = true;\n",
"\n",
" // Create series\n",
" let series = chart.series.push(new am4charts.RadarColumnSeries());\n",
" series.sequencedInterpolation = true;\n",
" series.dataFields.valueY = \"value\";\n",
" series.dataFields.categoryX = \"category\";\n",
" series.columns.template.strokeWidth = 0;\n",
" series.tooltipText = \"{valueY}\";\n",
" series.columns.template.radarColumn.cornerRadius = 10;\n",
" series.columns.template.radarColumn.innerCornerRadius = 0;\n",
"\n",
" series.tooltip.pointerOrientation = \"vertical\";\n",
"\n",
" // on hover, make corner radiuses bigger\n",
" let hoverState = series.columns.template.radarColumn.states.create(\"hover\");\n",
" hoverState.properties.cornerRadius = 0;\n",
" hoverState.properties.fillOpacity = 1;\n",
"\n",
"\n",
" series.columns.template.adapter.add(\"fill\", function(fill, target) {\n",
" return chart.colors.getIndex(target.dataItem.index);\n",
" })\n",
"\n",
" // Cursor\n",
" chart.cursor = new am4charts.RadarCursor();\n",
" chart.cursor.innerRadius = am4core.percent(50);\n",
" chart.cursor.lineY.disabled = true;\n",
"}, function (err) {\n",
" console.log(err);\n",
"});"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"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.8"
},
"toc": {
"base_numbering": 1,
"nav_menu": {},
"number_sections": false,
"sideBar": false,
"skip_h1_title": false,
"title_cell": "Table of Contents",
"title_sidebar": "Contents",
"toc_cell": false,
"toc_position": {},
"toc_section_display": false,
"toc_window_display": false
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment