{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# SVG Charts\n",
"\n",
"This is leveraging on the study done for the creation of D3.\n",
"\n",
"Epyk can directly use the SVG properties to write share and charts.\n",
"\n",
"\n",
"## Shapes"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 4,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"\n",
"rptObj.ui.charts.svg.rectangle(50, 50, 50, 50, rx=20, ry=20)\n",
"\n",
"rptObj.outs.jupyter()\n"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 7,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"\n",
"rptObj.ui.charts.svg.arrow_left(y1=40)\n",
"\n",
"rptObj.outs.jupyter()"
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 9,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"\n",
"poly = rptObj.ui.charts.svg.rectangle(50, 50, 50, 50, rx=20, ry=20)\n",
"poly[0].transform(\"transform\", \"rotate\", \"0 100 100\", \"360 100 100\")\n",
"poly.css({\"margin\": '10px', \"border\": \"1px solid black\"})\n",
"\n",
"\n",
"rptObj.outs.jupyter()"
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 10,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"\n",
"svg = rptObj.ui.charts.svg.axes()\n",
"m = svg.defs().marker(\"circle\", \"0 0 10 10\", 5, 5)\n",
"m.circle(5, 5, 5, 'red')\n",
"m.markerWidth(10).markerHeight(10)\n",
"p = svg.path(0, 0, from_origin=True).line_to(50, 100).\\\n",
" horizontal_line_to(300).\\\n",
" line_to(400, 200).smooth_quadratic_bezier_curve_to(50, 50)\n",
"p.markers(m.url)\n",
"\n",
"rptObj.outs.jupyter()\n"
]
},
{
"cell_type": "code",
"execution_count": 16,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 16,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"\n",
"defs = poly.defs()\n",
"gradients = defs.radialGradient(\"gradient_test\")\n",
"gradients.stop(\"20%\", {\"stop-color\": \"pink\", \"stop-opacity\": 1})\n",
"gradients.stop(\"95%\", {\"stop-color\": \"green\", \"stop-opacity\": 1})\n",
"poly.circle(20, 50, 3, fill=gradients.url)\n",
"\n",
"rptObj.outs.jupyter()"
]
},
{
"cell_type": "code",
"execution_count": 19,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"text/plain": [
""
]
},
"execution_count": 19,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"from epyk.core.Page import Report\n",
"\n",
"rptObj = Report()\n",
"poly.polygon([(20, 60), (40, 19), (16, 19), (100, 100)])\n",
"g = poly.g()\n",
"f = poly.foreignObject(10, 20, \"100%\", 150)\n",
"f.add([\n",
" rptObj.ui.texts.label(\"Test Label\").css({\"color\": 'red'}),\n",
" rptObj.ui.input()\n",
"]) \n",
"g.css({\"stroke\": 'blue'})\n",
"\n",
"rptObj.outs.jupyter()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Go back to the Chart Home page\n",
"
\n",
"Do not forget that this is a collaborative framework so do not hesitate to give feedbacks and like the different repository to get more visbility.\n",
"\n",
"Also any help is more than welcome !"
]
}
],
"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.8.2"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
![](\"./../../static/images/epyklogo_whole_small.png\")
\n",
" \n",
"