Skip to content

Instantly share code, notes, and snippets.

@wakita

wakita/svg.ipynb

Created November 22, 2023 05:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wakita/905ed59d9a0003c26d2934099f66c6d5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wakita/905ed59d9a0003c26d2934099f66c6d5 to your computer and use it in GitHub Desktop.
Download ZIP
Plotly は SVG path の A コマンド（円弧）をサポートしていない。円弧を線分列で近似する例。
Display the source blob
Display the rendered blob
Raw
svg.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 8,
"metadata": {},
"outputs": [],
"source": [
"import numpy as np\n",
"import plotly.graph_objects as go"
]
},
{
"cell_type": "code",
"execution_count": 13,
"metadata": {},
"outputs": [],
"source": [
"def ellipse_arc(x_center=0, y_center=0, a=1, b =1, start_angle=0, end_angle=2*np.pi, N=100, closed= False):\n",
" t = np.linspace(start_angle, end_angle, N)\n",
" x = x_center + a*np.cos(t)\n",
" y = y_center + b*np.sin(t)\n",
" path = [f'M {x[0]},{y[0]}'] + [f'L {x},{y}' for x, y in zip(x[1:], y[1:])] + (['Z'] if closed else [])\n",
" return ' '.join(path)\n",
"\n",
"fig = go.Figure()\n",
"\n",
"# Create a minimal trace \n",
"fig.add_trace(go.Scatter(\n",
" x=[0],\n",
" y=[0.2],\n",
" marker_size=0.1\n",
"));"
]
},
{
"cell_type": "code",
"execution_count": 14,
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.plotly.v1+json": {
"config": {
"plotlyServerURL": "https://plot.ly"
},
"data": [
{
"marker": {
"size": 0.1
},
"type": "scatter",
"x": [
0
],
"y": [
0.2
]
}
],
"layout": {
"height": 400,
"shapes": [
{
"line": {
"color": "RoyalBlue"
},
"path": "M 4.330127018922194,-1.4999999999999998 L 4.53465943487614,-1.263831860449787 L 4.703501333355167,-1.0177165983540908 L 4.835323826310521,-0.763591289956193 L 4.9290893908463875,-0.5034560554173647 L 4.9840600351537505,-0.23935831665924914 L 4.99980310695311,0.02662331708727319 L 4.97619469873008,0.2923954091962393 L 4.9134206229626045,0.555866172261343 L 4.811974949664174,0.8149619317303161 L 4.6726561177534345,1.0676434469801728 L 4.496560650856097,1.3119219613765662 L 4.285074526999576,1.5458748549935633 L 4.039862270126101,1.7676607767974513 L 3.762853849280692,1.9755341371951158 L 3.4562294885853277,2.1678588468818614 L 3.1224025075540296,2.343121193855604 L 2.7640003268059665,2.4999417572475453 L 2.383843788673126,2.637086264200252 L 1.984924955461901,2.75347530434294 L 1.5703835601097438,2.848192825405144 L 1.1434822945844567,2.92049334310316 L 0.7075811305214237,2.9698078085530737 L 0.26611087421089347,2.995748087030286 L -0.1774538359263661,2.9981100128249807 L -0.6196218768488636,2.9768749961499736 L -1.056913118148123,2.9322101694535996 L -1.4858858127837387,2.8644670719860756 L -1.903163685718079,2.774178882972587 L -2.30546250724663,2.6620562251697146 L -2.689615941875819,2.5289815718337456 L -3.0526004693019573,2.3760023011214217 L -3.3915591813480805,2.204322452589202 L -3.703824267562425,2.015293250672378 L -3.986938012503203,1.810402469730011 L -4.238672139448354,1.5912627243592277 L -4.457045348283551,1.3595987771411915 L -4.640338909534636,1.1172339637144972 L -4.787110191810028,0.8660758420188637 L -4.8962040161839235,0.6081011786582811 L -4.966761748154408,0.34534039055004884 L -4.998228055617263,0.07986156431332396 L -4.990355279666124,-0.1862458208257029 L -4.943205383818141,-0.45088733850141094 L -4.85714946632355,-0.7119800996133444 L -4.7328648393975845,-0.9674691459255269 L -4.57132969836293,-1.2153436238329598 L -4.373815422659807,-1.4536526109979502 L -4.141876569319404,-1.6805204712910382 L -3.877338637658074,-1.8941616171838611 L -3.5822837014915754,-2.0928945634049545 L -3.259034021952536,-2.2751551612477146 L -2.9101337698881884,-2.4395089093685005 L -2.5383290016942035,-2.584662244181417 L -2.1465460461868955,-2.70947272098757 L -1.7378684726222895,-2.812958005707083 L -1.3155128211376088,-2.8943036064435477 L -0.8828032866313738,-2.952869284028777 L -0.4431455553352963,-2.988194091093008 L -9.184850993605148e-16,-3.0",
"type": "path"
},
{
"fillcolor": "LightPink",
"line": {
"color": "Crimson"
},
"path": "M 2.5,0.0 L 2.4989933382359424,0.09513587948484675 L 2.4959774064153977,0.1898886803606239 L 2.4909643486313535,0.28387686654061534 L 2.483974350698178,0.37672198077161884 L 2.4750355588704727,0.4680501685477306 L 2.4641839665080365,0.5574936834904913 L 2.4514632691433107,0.6446923681337575 L 2.4369246885348925,0.7292951041507031 L 2.4206267664155905,0.8109612261833963 L 2.4026351287655294,0.8893618935819606 L 2.383022221559489,0.9641814145298089 L 2.3618670190525353,1.035118517223168 L 2.339254705778566,1.1018875629862999 L 2.3152763335422613,1.1642196964376352 L 2.290028454785599,1.2218639280755035 L 2.2636127338052514,1.2745881449242715 L 2.236135537386341,1.3221800451713732 L 2.207707506500943,1.3644479930317774 L 2.178443110795936,1.40122179039766 L 2.1484601876641376,1.4323533621661109 L 2.1178794677547135,1.4577173524853124 L 2.086824088833465,1.477211629518312 L 2.0554190999505058,1.4907576966918812 L 2.023790957911871,1.4983010087745119 L 1.992067018082596,1.4998111915108125 L 1.9603750215716058,1.4952821639279135 L 1.9288425808633574,1.484732162821399 L 1.8975966659674046,1.468203669322168 L 1.8667630931549826,1.445763237839913 L 1.836466018341289,1.4175012280720027 L 1.8068274371534356,1.383531441156872 L 1.777966693697113,1.3439906614370039 L 1.75,1.299038105676658 L 1.7230399680669448,1.2488547819521572 L 1.6971951564311665,1.1936427607962479 L 1.6725696330273574,1.1336243615313875 L 1.6492625561468393,1.0690412570682941 L 1.6273677751621227,1.0001535007744375 L 1.6069734526286061,0.9272384793309077 L 1.5881617092850837,0.8505897957941563 L 1.5710082933825116,0.7705160873601095 L 1.5555822756725384,0.6873397825911158 L 1.5419457712839653,0.6013958031099205 L 1.5301536896070458,0.5130302149885033 L 1.5202535131927513,0.4225988352621445 L 1.5122851065572964,0.3304657991798112 L 1.5062805556618029,0.23700209396002483 L 1.5022640387134576,0.14258406495627365 L 1.5002517288084074,0.047591900247101485 L 1.5002517288084074,-0.04759190024710179 L 1.5022640387134576,-0.14258406495627396 L 1.5062805556618029,-0.23700209396002514 L 1.5122851065572964,-0.33046579917981084 L 1.5202535131927513,-0.42259883526214476 L 1.5301536896070458,-0.513030214988503 L 1.5419457712839653,-0.6013958031099207 L 1.5555822756725384,-0.6873397825911154 L 1.5710082933825116,-0.7705160873601096 L 1.5881617092850835,-0.850589795794156 L 1.6069734526286064,-0.9272384793309079 L 1.6273677751621225,-1.0001535007744373 L 1.6492625561468395,-1.0690412570682943 L 1.6725696330273574,-1.1336243615313872 L 1.6971951564311667,-1.193642760796248 L 1.7230399680669448,-1.248854781952157 L 1.7500000000000002,-1.2990381056766582 L 1.777966693697113,-1.343990661437004 L 1.8068274371534356,-1.383531441156872 L 1.836466018341289,-1.4175012280720025 L 1.8667630931549826,-1.4457632378399132 L 1.8975966659674048,-1.468203669322168 L 1.9288425808633574,-1.484732162821399 L 1.9603750215716056,-1.4952821639279135 L 1.9920670180825961,-1.4998111915108125 L 2.023790957911871,-1.4983010087745119 L 2.0554190999505053,-1.4907576966918812 L 2.086824088833465,-1.4772116295183122 L 2.117879467754714,-1.4577173524853124 L 2.1484601876641376,-1.4323533621661109 L 2.1784431107959357,-1.4012217903976603 L 2.2077075065009435,-1.3644479930317774 L 2.2361355373863416,-1.322180045171373 L 2.2636127338052514,-1.2745881449242715 L 2.290028454785599,-1.2218639280755037 L 2.3152763335422613,-1.1642196964376348 L 2.339254705778566,-1.1018875629862999 L 2.361867019052535,-1.035118517223168 L 2.383022221559489,-0.9641814145298093 L 2.4026351287655294,-0.8893618935819603 L 2.4206267664155905,-0.8109612261833963 L 2.4369246885348925,-0.7292951041507032 L 2.4514632691433107,-0.6446923681337579 L 2.4641839665080365,-0.5574936834904909 L 2.4750355588704727,-0.4680501685477306 L 2.483974350698178,-0.3767219807716191 L 2.4909643486313535,-0.2838768665406146 L 2.4959774064153977,-0.18988868036062356 L 2.4989933382359424,-0.09513587948484678 L 2.5,-3.6739403974420594e-16 Z",
"type": "path"
}
],
"template": {
"data": {
"bar": [
{
"error_x": {
"color": "#2a3f5f"
},
"error_y": {
"color": "#2a3f5f"
},
"marker": {
"line": {
"color": "#E5ECF6",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "bar"
}
],
"barpolar": [
{
"marker": {
"line": {
"color": "#E5ECF6",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "barpolar"
}
],
"carpet": [
{
"aaxis": {
"endlinecolor": "#2a3f5f",
"gridcolor": "white",
"linecolor": "white",
"minorgridcolor": "white",
"startlinecolor": "#2a3f5f"
},
"baxis": {
"endlinecolor": "#2a3f5f",
"gridcolor": "white",
"linecolor": "white",
"minorgridcolor": "white",
"startlinecolor": "#2a3f5f"
},
"type": "carpet"
}
],
"choropleth": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "choropleth"
}
],
"contour": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "contour"
}
],
"contourcarpet": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "contourcarpet"
}
],
"heatmap": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "heatmap"
}
],
"heatmapgl": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "heatmapgl"
}
],
"histogram": [
{
"marker": {
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "histogram"
}
],
"histogram2d": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "histogram2d"
}
],
"histogram2dcontour": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "histogram2dcontour"
}
],
"mesh3d": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "mesh3d"
}
],
"parcoords": [
{
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "parcoords"
}
],
"pie": [
{
"automargin": true,
"type": "pie"
}
],
"scatter": [
{
"fillpattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
},
"type": "scatter"
}
],
"scatter3d": [
{
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatter3d"
}
],
"scattercarpet": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattercarpet"
}
],
"scattergeo": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattergeo"
}
],
"scattergl": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattergl"
}
],
"scattermapbox": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattermapbox"
}
],
"scatterpolar": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterpolar"
}
],
"scatterpolargl": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterpolargl"
}
],
"scatterternary": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterternary"
}
],
"surface": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"type": "surface"
}
],
"table": [
{
"cells": {
"fill": {
"color": "#EBF0F8"
},
"line": {
"color": "white"
}
},
"header": {
"fill": {
"color": "#C8D4E3"
},
"line": {
"color": "white"
}
},
"type": "table"
}
]
},
"layout": {
"annotationdefaults": {
"arrowcolor": "#2a3f5f",
"arrowhead": 0,
"arrowwidth": 1
},
"autotypenumbers": "strict",
"coloraxis": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"colorscale": {
"diverging": [
[
0,
"#8e0152"
],
[
0.1,
"#c51b7d"
],
[
0.2,
"#de77ae"
],
[
0.3,
"#f1b6da"
],
[
0.4,
"#fde0ef"
],
[
0.5,
"#f7f7f7"
],
[
0.6,
"#e6f5d0"
],
[
0.7,
"#b8e186"
],
[
0.8,
"#7fbc41"
],
[
0.9,
"#4d9221"
],
[
1,
"#276419"
]
],
"sequential": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
],
"sequentialminus": [
[
0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1,
"#f0f921"
]
]
},
"colorway": [
"#636efa",
"#EF553B",
"#00cc96",
"#ab63fa",
"#FFA15A",
"#19d3f3",
"#FF6692",
"#B6E880",
"#FF97FF",
"#FECB52"
],
"font": {
"color": "#2a3f5f"
},
"geo": {
"bgcolor": "white",
"lakecolor": "white",
"landcolor": "#E5ECF6",
"showlakes": true,
"showland": true,
"subunitcolor": "white"
},
"hoverlabel": {
"align": "left"
},
"hovermode": "closest",
"mapbox": {
"style": "light"
},
"paper_bgcolor": "white",
"plot_bgcolor": "#E5ECF6",
"polar": {
"angularaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"bgcolor": "#E5ECF6",
"radialaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
}
},
"scene": {
"xaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
},
"yaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
},
"zaxis": {
"backgroundcolor": "#E5ECF6",
"gridcolor": "white",
"gridwidth": 2,
"linecolor": "white",
"showbackground": true,
"ticks": "",
"zerolinecolor": "white"
}
},
"shapedefaults": {
"line": {
"color": "#2a3f5f"
}
},
"ternary": {
"aaxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"baxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
},
"bgcolor": "#E5ECF6",
"caxis": {
"gridcolor": "white",
"linecolor": "white",
"ticks": ""
}
},
"title": {
"x": 0.05
},
"xaxis": {
"automargin": true,
"gridcolor": "white",
"linecolor": "white",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "white",
"zerolinewidth": 2
},
"yaxis": {
"automargin": true,
"gridcolor": "white",
"linecolor": "white",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "white",
"zerolinewidth": 2
}
}
},
"width": 600,
"xaxis": {
"range": [
-5.2,
5.2
]
},
"yaxis": {
"range": [
-3.2,
3.2
]
}
}
}
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"fig = go.Figure()\n",
"\n",
"# Create a minimal trace \n",
"fig.add_trace(go.Scatter(\n",
" x=[0],\n",
" y=[0.2],\n",
" marker_size=0.1\n",
"))\n",
"\n",
"fig.update_layout(width =600, height=400,\n",
" xaxis_range=[-5.2, 5.2], \n",
" yaxis_range=[-3.2, 3.2], \n",
" shapes=[\n",
" dict(type=\"path\",\n",
" path= ellipse_arc(a=5, b=3, start_angle=-np.pi/6, end_angle=3*np.pi/2, N=60),\n",
" line_color=\"RoyalBlue\"),\n",
" dict(type=\"path\",\n",
" path = ellipse_arc(x_center=2, a= 0.5, b= 1.5, closed=True),\n",
" fillcolor=\"LightPink\",\n",
" line_color=\"Crimson\")\n",
" ]\n",
" )"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "vis23",
"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.11.4"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment