Skip to content

Instantly share code, notes, and snippets.

@kvedala

kvedala/Wiki plots in simple SVG.ipynb

Last active July 29, 2023 12:38
Show Gist options
  • Save kvedala/dd3dae956165eb632eb732b187f5457b to your computer and use it in GitHub Desktop.
Save kvedala/dd3dae956165eb632eb732b187f5457b to your computer and use it in GitHub Desktop.
Download ZIP
Generate SVG graphs using linear, quadratic and cubic Bezier curve interpolation.
Display the source blob
Display the rendered blob
Raw
notebook.ipynb
{
"nbformat": 4,
"nbformat_minor": 0,
"metadata": {
"_draft": {
"nbviewer_url": "https://gist.github.com/dd3dae956165eb632eb732b187f5457b"
},
"gist": {
"id": "dd3dae956165eb632eb732b187f5457b",
"data": {
"description": "use dictionary ",
"public": true
}
},
"hide_input": false,
"kernelspec": {
"name": "python3",
"display_name": "Python 3",
"language": "python"
},
"language_info": {
"name": "python",
"version": "3.7.7",
"mimetype": "text/x-python",
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"pygments_lexer": "ipython3",
"nbconvert_exporter": "python",
"file_extension": ".py"
},
"nbTranslate": {
"hotkey": "alt-t",
"sourceLang": "en",
"targetLang": "fr",
"displayLangs": [
"*"
],
"langInMainMenu": true,
"useGoogleTranslate": true
},
"toc": {
"nav_menu": {},
"number_sections": true,
"sideBar": true,
"skip_h1_title": false,
"base_numbering": 1,
"title_cell": "Table of Contents",
"title_sidebar": "Contents",
"toc_cell": false,
"toc_position": {},
"toc_section_display": true,
"toc_window_display": false
},
"varInspector": {
"window_display": true,
"cols": {
"lenName": 16,
"lenType": 16,
"lenVar": 40
},
"kernels_config": {
"python": {
"library": "var_list.py",
"delete_cmd_prefix": "del ",
"delete_cmd_postfix": "",
"varRefreshCmd": "print(var_dic_list())"
},
"r": {
"library": "var_list.r",
"delete_cmd_prefix": "rm(",
"delete_cmd_postfix": ") ",
"varRefreshCmd": "cat(var_dic_list()) "
}
},
"types_to_exclude": [
"module",
"function",
"builtin_function_or_method",
"instance",
"_Feature"
]
},
"colab": {
"name": "dd3dae956165eb632eb732b187f5457b",
"provenance": [],
"collapsed_sections": [],
"include_colab_link": true
}
},
"cells": [
{
"cell_type": "markdown",
"metadata": {
"id": "view-in-github",
"colab_type": "text"
},
"source": [
"<a href=\"https://colab.research.google.com/gist/kvedala/dd3dae956165eb632eb732b187f5457b/notebook.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
]
},
{
"cell_type": "markdown",
"metadata": {
"id": "CN9jR_Z_2PUy",
"colab_type": "text"
},
"source": [
"Create simplified SVG graphs for Wikimedia by converting functions into [bezier curves](https://en.wikipedia.org/wiki/Bézier_curve). \n",
"Examples:\n",
"* [Non solvable quintic](https://commons.wikimedia.org/wiki/File:Non_solvable_quintic.svg)\n",
"* [Hyper elliptic curve](https://commons.wikimedia.org/wiki/File:Hubbert_curve.svg)"
]
},
{
"cell_type": "code",
"metadata": {
"trusted": true,
"id": "iKS41ICI2PU4",
"colab_type": "code",
"colab": {}
},
"source": [
"import numpy as np\n",
"import numba\n",
"from typing import Callable\n",
"from IPython.display import SVG, display"
],
"execution_count": 0,
"outputs": []
},
{
"cell_type": "code",
"metadata": {
"trusted": true,
"id": "jxjX4pw-2PVR",
"colab_type": "code",
"colab": {}
},
"source": [
"class get_bezier(object):\n",
" def __init__(self, func: Callable, Nsteps: int, X: list, scale=[100,-100]):\n",
" self.__steps = Nsteps\n",
" self.__X = np.array(X)\n",
" self.__scale = np.array(scale)\n",
" self.__f = func\n",
" self.__linearQ = None\n",
" self.__quadQ = None\n",
" self.__cubicQ = None\n",
" self.__xmin = 0\n",
" self.__ymin = 0\n",
" self.__xmax = 0\n",
" self.__ymax = 0\n",
" self.__width = 0\n",
" self.__height = 0\n",
" \n",
" # Generate and store SVG paths\n",
" self.__svg_txt = {\n",
" 'linear': self.linear(),\n",
" 'quadratic': self.quadratic(),\n",
" 'cubic': self.cubic()\n",
" }\n",
" \n",
"# @property\n",
"# def linear_svg(self):\n",
"# return self.__txt_strings[0]\n",
" \n",
"# @property\n",
"# def quad_svg(self):\n",
"# return self.__txt_strings[1]\n",
" \n",
"# @property\n",
"# def cubic_svg(self):\n",
"# return self.__txt_strings[2]\n",
" \n",
" def linear(self):\n",
" \"\"\"\n",
" Compute linear SVG path segments. \n",
" Returns SVG text with path element approximating given \n",
" function with linear bezier curves.\n",
" \"\"\"\n",
" step = (self.__X[1] - self.__X[0]) / self.__steps\n",
" Q = np.multiply([self.__X[0], self.__f(self.__X[0])], self.__scale[1])\n",
"\n",
"# print(\"\\n Linear:\")\n",
" out_txt = \"\\nM%.4g,%.4g L\" % (Q[0], Q[1])\n",
" # print(out_txt)\n",
" if self.__xmin > Q[0]:\n",
" self.__xmin = Q[0]\n",
" if self.__xmax < Q[0]:\n",
" self.__xmax = Q[0]\n",
" self.__width = self.__xmax - self.__xmin\n",
" if self.__ymin > Q[1]:\n",
" self.__ymin = Q[1]\n",
" if self.__ymax < Q[1]:\n",
" self.__ymax = Q[1]\n",
" self.__height = self.__ymax - self.__ymin\n",
"\n",
" XX = np.linspace(self.__X[0], self.__X[1], self.__steps + 1)\n",
" # XX = np.logspace(np.log10(self.__X[0]),np.log10(self.__X[1]), Nsteps+1)\n",
"\n",
" for i in range(self.__steps):\n",
" x2 = XX[i]\n",
" y2 = self.__f(x2)\n",
" Q = np.multiply([x2, y2], self.__scale)\n",
"\n",
" if self.__xmin > Q[0]:\n",
" self.__xmin = Q[0]\n",
" if self.__xmax < Q[0]:\n",
" self.__xmax = Q[0]\n",
" self.__width = self.__xmax - self.__xmin\n",
" if self.__ymin > Q[1]:\n",
" self.__ymin = Q[1]\n",
" if self.__ymax < Q[1]:\n",
" self.__ymax = Q[1]\n",
" self.__height = self.__ymax - self.__ymin\n",
"\n",
" out_txt += \" %.4g,%.4g\" % (Q[0], Q[1])\n",
" # print(\" %.4g,%.4g\" % (Q[0], Q[1]))\n",
" # print(\"\\n\")\n",
"# print(out_txt)\n",
" return out_txt\n",
"\n",
"\n",
" def quadratic(self):\n",
" \"\"\"\n",
" Compute quadratic SVG path segments. \n",
" Returns SVG text with path element approximating given \n",
" function with quadratic bezier curves.\n",
" \"\"\"\n",
" step = (self.__X[1] - self.__X[0]) / self.__steps\n",
" Q = np.multiply([self.__X[0], self.__f(self.__X[0])], self.__scale[1])\n",
" n = 2\n",
"\n",
"# print(\"\\n Quadratic:\")\n",
" out = \"\\nM%.4g,%.4g Q\" % (Q[0], Q[1])\n",
" # print(out)\n",
" if self.__xmin > Q[0]:\n",
" self.__xmin = Q[0]\n",
" if self.__xmax < Q[0]:\n",
" self.__xmax = Q[0]\n",
" self.__width = self.__xmax - self.__xmin\n",
" if self.__ymin > Q[1]:\n",
" self.__ymin = Q[1]\n",
" if self.__ymax < Q[1]:\n",
" self.__ymax = Q[1]\n",
" self.__height = self.__ymax - self.__ymin\n",
"\n",
" XX = np.linspace(self.__X[0], self.__X[1], self.__steps + 1)\n",
" # XX = np.logspace(np.log10(X[0]),np.log10(X[1]), Nsteps+1)\n",
"\n",
" for i in range(self.__steps):\n",
" x0 = XX[i]\n",
" x2 = XX[i + 1]\n",
" xx1 = (x0 + x2) * 0.5\n",
" y0 = self.__f(x0)\n",
" yy1 = self.__f(xx1)\n",
" y2 = self.__f(x2)\n",
" x1 = (xx1 - .25 * (x0 + x2)) * 2\n",
" y1 = (yy1 - .25 * (y0 + y2)) * 2\n",
" Q1 = np.multiply([x1, y1], self.__scale)\n",
" Q2 = np.multiply([x2, y2], self.__scale)\n",
" \n",
" if self.__xmin > Q1[0]:\n",
" self.__xmin = Q1[0]\n",
" if self.__xmax < Q2[0]:\n",
" self.__xmax = Q2[0]\n",
" self.__width = self.__xmax - self.__xmin\n",
" if self.__ymin > Q1[1]:\n",
" self.__ymin = Q1[1]\n",
" if self.__ymax < Q2[1]:\n",
" self.__ymax = Q2[1]\n",
" self.__height = self.__ymax - self.__ymin\n",
"\n",
" out += \" %.4g,%.4g %.4g,%.4g\" % (Q1[0], Q1[1], Q2[0], Q2[1])\n",
" # print(\" %.4g,%.4g %.4g,%.4g\" % (Q1[0], Q1[1], Q2[0], Q2[1]))\n",
" # print(\"\\n\")\n",
"# print(out)\n",
" return out\n",
"\n",
"\n",
" def cubic(self):\n",
" \"\"\"\n",
" Compute cubic SVG path segments. \n",
" Returns SVG text with path element approximating given \n",
" function with cubic bezier curves.\n",
" \"\"\"\n",
" step = (self.__X[1] - self.__X[0]) / self.__steps\n",
" Q = np.multiply([self.__X[0], self.__f(self.__X[0])], self.__scale[1])\n",
" n = 3\n",
"\n",
" A = np.array([[.75, .25], [.25, .75]])\n",
" A2 = np.linalg.inv(A)\n",
"\n",
"# print(\"\\n Cubic:\")\n",
" out = \"\\nM%.4g,%.4g C\" % (Q[0], Q[1])\n",
" # print(out)\n",
"\n",
" XX = np.linspace(self.__X[0], self.__X[1], self.__steps + 1)\n",
" # XX = np.logspace(np.log10(X[0]),np.log10(X[1]), Nsteps+1)\n",
"\n",
" for i in range(self.__steps):\n",
" x0 = XX[i]\n",
" x3 = XX[i + 1]\n",
" step = (x3 - x0) * 0.25\n",
" xx1 = x0 + step\n",
" xx2 = x0 + step * 3\n",
" y0 = self.__f(x0)\n",
" yy1 = self.__f(xx1)\n",
" yy2 = self.__f(xx2)\n",
" y3 = self.__f(x3)\n",
"\n",
" a1 = (xx1 - (.75**3) * x0 - (.25**3) * x3) / (3 * .75 * .25)\n",
" a2 = (xx1 - (.25**3) * x0 - (.75**3) * x3) / (3 * .75 * .25)\n",
" a = np.matmul(A2, [a1, a2])\n",
" x1, x2 = a[0], a[1]\n",
"\n",
" a1 = (yy1 - (.75**3) * y0 - (.25**3) * y3) / (3 * .75 * .25)\n",
" a2 = (yy1 - (.25**3) * y0 - (.75**3) * y3) / (3 * .75 * .25)\n",
" a = np.matmul(A2, [a1, a2])\n",
" y1, y2 = a[0], a[1]\n",
"\n",
" Q1 = np.multiply([x1, y1], self.__scale)\n",
" Q2 = np.multiply([x2, y2], self.__scale)\n",
" Q3 = np.multiply([x3, y3], self.__scale)\n",
"\n",
" out += \" %4.4g,%4.4g %4.4g,%4.4g %4.4g,%4.4g\" % (Q1[0], Q1[1], Q2[0],\n",
" Q2[1], Q3[0], Q3[1])\n",
" # print(\" %.4g,%.4g %.4g,%.4g %.4g,%.4g\" %\n",
" # (Q1[0], Q1[1], Q2[0], Q2[1], Q3[0], Q3[1]))\n",
"# print(out)\n",
" return out\n",
"\n",
"\n",
" def generate_svg(self, out_type='linear', saveas=None, axes='on', grid='on'):\n",
" txt = \"\"\"<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>\n",
"<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n",
" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \n",
" width=\"50%%\" height=\"50%%\" viewBox=\"%.4g %.4g %.4g %.4g\">\\n\"\"\" % (\n",
" self.__xmin, self.__ymin, self.__width, self.__height)\n",
" \n",
" out_type = out_type.lower()\n",
" axes = axes.lower()\n",
" grid = grid.lower()\n",
" \n",
" assert out_type in ['linear', 'quadratic', 'cubic'], \"Unknown option.\\n\\tAccepted values: 'linear','quad','cubic'\"\n",
" assert axes in ['on', 'off'], \"Unknown option.\\n\\tAccepted values: 'on','off'\"\n",
" assert grid in ['on', 'off'], \"Unknown option.\\n\\tAccepted values: 'on','off'\"\n",
" \n",
" data = self.__svg_txt[out_type]\n",
"\n",
" if grid == 'on':\n",
" txt += \"\"\"<defs>\n",
" <pattern id=\"grid\" width=\"25\" height=\"25\" stroke-width=\".5\" patternUnits=\"userSpaceOnUse\">\n",
" <path d=\"M0,25v-25h25v25h-25\" fill=\"none\" stroke-dasharray=\"5,3\" stroke=\"#555\"/>\n",
" </pattern>\n",
" <pattern id=\"ticks\" width=\"10\" height=\"10\" stroke-width=\".5\" patternUnits=\"userSpaceOnUse\">\n",
" <path d=\"M0,0h10 M0,0v10\" fill=\"none\" stroke=\"#000\"/>\n",
" </pattern>\n",
"</defs>\n",
"<rect x=\"%.4g\" y=\"%.4g\" width=\"%.4g\" height=\"%.4g\" fill=\"url(#grid)\"/>\n",
"\"\"\" % (self.__xmin, self.__ymin, self.__width, self.__height)\n",
"\n",
" if axes == 'on':\n",
" txt += \"\"\"<path stroke=\"black\" fill=\"none\" stroke-width=\".75\" d=\"M0,%.4g V%.4g M%.4g,0 H%.4g\"/>\n",
"\"\"\" % (self.__ymin, self.__ymax, self.__xmin, self.__xmax)\n",
" \n",
" txt += \"\"\"<path stroke=\"blue\" fill=\"none\" stroke-width=\"1\" d=\"%s\"/>\"\"\" %(data)\n",
"\n",
" txt += \"</svg>\"\n",
" display(SVG(txt))\n",
" \n",
" if saveas is not None:\n",
" try:\n",
" with open(saveas, \"wt+\") as fp:\n",
" fp.write(txt)\n",
" except Exception as e:\n",
" print(\"Exception! \", e)\n",
" \n",
" return txt\n",
"\n",
"# def (Nsteps, X, scale=[1, 1]):\n",
"# lin_txt = self.linear(Nsteps, X, scale)\n",
"# quad_txt = self.quadratic(Nsteps, X, scale)\n",
"# cube_txt = self.cubic(Nsteps, X, scale)\n",
"# # generate_svg(lin_txt)"
],
"execution_count": 0,
"outputs": []
},
{
"cell_type": "code",
"metadata": {
"trusted": true,
"id": "I_5CVkDE2PVw",
"colab_type": "code",
"colab": {}
},
"source": [
"def myfunction(x: float):\n",
" return np.exp(-0.5 * x * x) * np.sin(2 * np.pi * x * 4)"
],
"execution_count": 0,
"outputs": []
},
{
"cell_type": "code",
"metadata": {
"scrolled": false,
"trusted": true,
"id": "bxQatZHK2PV-",
"colab_type": "code",
"colab": {
"base_uri": "https://localhost:8080/",
"height": 692
},
"outputId": "bd86d75f-ec6d-4f02-97a6-586cdc2e5419"
},
"source": [
"b = get_bezier(myfunction, 55, [0,4], [55,-50])\n",
"svg = b.generate_svg('quadratic', saveas='spectral_radius.svg')\n",
"print(svg)"
],
"execution_count": 4,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"<IPython.core.display.SVG object>"
],
"image/svg+xml": "<svg height=\"50%\" version=\"1.1\" viewBox=\"0 -61.21 220 106.7\" width=\"50%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n<defs>\n <pattern height=\"25\" id=\"grid\" patternUnits=\"userSpaceOnUse\" stroke-width=\".5\" width=\"25\">\n <path d=\"M0,25v-25h25v25h-25\" fill=\"none\" stroke=\"#555\" stroke-dasharray=\"5,3\"/>\n </pattern>\n <pattern height=\"10\" id=\"ticks\" patternUnits=\"userSpaceOnUse\" stroke-width=\".5\" width=\"10\">\n <path d=\"M0,0h10 M0,0v10\" fill=\"none\" stroke=\"#000\"/>\n </pattern>\n</defs>\n<rect fill=\"url(#grid)\" height=\"106.7\" width=\"220\" x=\"0\" y=\"-61.21\"/>\n<path d=\"M0,-61.21 V45.44 M0,0 H220\" fill=\"none\" stroke=\"black\" stroke-width=\".75\"/>\n<path d=\" M-0,-0 Q 2,-55.02 4,-48.23 6,-26.75 8,24.33 10,67.69 12,35.01 14,-8.021 16,-41.04 18,-61.21 20,-13.19 22,38.13 24,45.44 26,38.86 28,-9.948 30,-54.75 32,-37.34 34,-9.063 36,27.29 38,54.46 40,20.75 42,-18.22 44,-34.53 46,-39.94 48,-1.95 50,35.3 52,31.34 54,18.15 56,-13.14 58,-39.22 60,-20.84 62,2.959 64,20.97 66,31.89 68,7.824 70,-17.39 72,-21.15 74,-18.42 76,3.282 78,22.82 80,15.79 82,4.488 84,-9.86 86,-20.42 88,-8.171 90,5.721 92,11.5 94,13.51 96,1.242 98,-10.54 100,-9.477 102,-5.698 104,3.257 106,10.59 108,5.759 110,-0.3898 112,-4.979 114,-7.745 116,-2.105 118,3.685 120,4.58 122,4.06 124,-0.4488 126,-4.431 128,-3.106 130,-0.9964 132,1.65 134,3.57 136,1.488 138,-0.8259 140,-1.782 142,-2.127 144,-0.2768 146,1.466 148,1.334 150,0.8291 152,-0.3689 154,-1.333 156,-0.7391 158,0.002854 160,0.5491 162,0.8765 164,0.2588 166,-0.3627 168,-0.4615 170,-0.4165 172,0.02147 174,0.401 176,0.2842 178,0.1004 180,-0.1277 182,-0.2909 184,-0.1255 186,0.05459 188,0.1284 190,0.1561 192,0.02557 194,-0.09494 196,-0.08732 198,-0.05596 200,0.01894 202,0.0782 204,0.04408 206,0.002264 208,-0.02811 210,-0.04623 212,-0.0146 214,0.01656 216,0.02164 218,0.01988 220,6.573e-17\" fill=\"none\" stroke=\"blue\" stroke-width=\"1\"/></svg>"
},
"metadata": {
"tags": []
}
},
{
"output_type": "stream",
"text": [
"<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>\n",
"<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\n",
" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \n",
" width=\"50%\" height=\"50%\" viewBox=\"0 -61.21 220 106.7\">\n",
"<defs>\n",
" <pattern id=\"grid\" width=\"25\" height=\"25\" stroke-width=\".5\" patternUnits=\"userSpaceOnUse\">\n",
" <path d=\"M0,25v-25h25v25h-25\" fill=\"none\" stroke-dasharray=\"5,3\" stroke=\"#555\"/>\n",
" </pattern>\n",
" <pattern id=\"ticks\" width=\"10\" height=\"10\" stroke-width=\".5\" patternUnits=\"userSpaceOnUse\">\n",
" <path d=\"M0,0h10 M0,0v10\" fill=\"none\" stroke=\"#000\"/>\n",
" </pattern>\n",
"</defs>\n",
"<rect x=\"0\" y=\"-61.21\" width=\"220\" height=\"106.7\" fill=\"url(#grid)\"/>\n",
"<path stroke=\"black\" fill=\"none\" stroke-width=\".75\" d=\"M0,-61.21 V45.44 M0,0 H220\"/>\n",
"<path stroke=\"blue\" fill=\"none\" stroke-width=\"1\" d=\"\n",
"M-0,-0 Q 2,-55.02 4,-48.23 6,-26.75 8,24.33 10,67.69 12,35.01 14,-8.021 16,-41.04 18,-61.21 20,-13.19 22,38.13 24,45.44 26,38.86 28,-9.948 30,-54.75 32,-37.34 34,-9.063 36,27.29 38,54.46 40,20.75 42,-18.22 44,-34.53 46,-39.94 48,-1.95 50,35.3 52,31.34 54,18.15 56,-13.14 58,-39.22 60,-20.84 62,2.959 64,20.97 66,31.89 68,7.824 70,-17.39 72,-21.15 74,-18.42 76,3.282 78,22.82 80,15.79 82,4.488 84,-9.86 86,-20.42 88,-8.171 90,5.721 92,11.5 94,13.51 96,1.242 98,-10.54 100,-9.477 102,-5.698 104,3.257 106,10.59 108,5.759 110,-0.3898 112,-4.979 114,-7.745 116,-2.105 118,3.685 120,4.58 122,4.06 124,-0.4488 126,-4.431 128,-3.106 130,-0.9964 132,1.65 134,3.57 136,1.488 138,-0.8259 140,-1.782 142,-2.127 144,-0.2768 146,1.466 148,1.334 150,0.8291 152,-0.3689 154,-1.333 156,-0.7391 158,0.002854 160,0.5491 162,0.8765 164,0.2588 166,-0.3627 168,-0.4615 170,-0.4165 172,0.02147 174,0.401 176,0.2842 178,0.1004 180,-0.1277 182,-0.2909 184,-0.1255 186,0.05459 188,0.1284 190,0.1561 192,0.02557 194,-0.09494 196,-0.08732 198,-0.05596 200,0.01894 202,0.0782 204,0.04408 206,0.002264 208,-0.02811 210,-0.04623 212,-0.0146 214,0.01656 216,0.02164 218,0.01988 220,6.573e-17\"/></svg>\n"
],
"name": "stdout"
}
]
},
{
"cell_type": "markdown",
"metadata": {
"id": "PRMzHdER2PWT",
"colab_type": "text"
},
"source": [
"For text, use this:\n",
"\n",
"`<g font-size=\"15\" fill=\"#000\" font-family=\"times\" text-anchor=\"middle\" stroke=\"none\">`\n",
"\n",
"For function names in italics, set:\n",
"\n",
"`<text font-family=\"New Century Schoolbook\" font-style=\"italic\">`"
]
},
{
"cell_type": "code",
"metadata": {
"trusted": true,
"id": "8AUZMDJM2PWX",
"colab_type": "code",
"colab": {}
},
"source": [
""
],
"execution_count": 0,
"outputs": []
}
]
}
Display the source blob
Display the rendered blob
Raw
Wiki plots in simple SVG.ipynb
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment