ニコニコ大百科:グラフ機能

ニコニコ大百科:グラフ機能を使用すれば、HTMLのsvgタグやcanvasタグが使用できないニコニコ大百科でもお絵カキコに頼らずにグラフが描けます。

サンプルデータ集

記事の応用例の作成に使用したサンプルデータ。

三角関数

サインカーブとコサインカーブ。2グラフの同時表示も実現している。

データ

線の太さは1。

0,0,red
5,6.2791,red
10,12.5333,red
15,18.7381,red
20,24.869,red
25,30.9017,red
30,36.8125,red
35,42.5779,red
40,48.1754,red
45,53.5827,red
50,58.7785,red
55,63.7424,red
60,68.4547,red
65,72.8969,red
70,77.0513,red
75,80.9017,red
80,84.4328,red
85,87.6307,red
90,90.4827,red
95,92.9776,red
100,95.1057,red
105,96.8583,red
110,98.2287,red
115,99.2115,red
120,99.8027,red
125,100,red
130,99.8027,red
135,99.2115,red
140,98.2287,red
145,96.8583,red
150,95.1057,red
155,92.9776,red
160,90.4827,red
165,87.6307,red
170,84.4328,red
175,80.9017,red
180,77.0513,red
185,72.8969,red
190,68.4547,red
195,63.7424,red
200,58.7785,red
205,53.5827,red
210,48.1754,red
215,42.5779,red
220,36.8125,red
225,30.9017,red
230,24.869,red
235,18.7381,red
240,12.5333,red
245,6.2791,red
250,0,red
255,-6.2791,red
260,-12.5333,red
265,-18.7381,red
270,-24.869,red
275,-30.9017,red
280,-36.8125,red
285,-42.5779,red
290,-48.1754,red
295,-53.5827,red
300,-58.7785,red
305,-63.7424,red
310,-68.4547,red
315,-72.8969,red
320,-77.0513,red
325,-80.9017,red
330,-84.4328,red
335,-87.6307,red
340,-90.4827,red
345,-92.9776,red
350,-95.1057,red
355,-96.8583,red
360,-98.2287,red
365,-99.2115,red
370,-99.8027,red
375,-100,red
380,-99.8027,red
385,-99.2115,red
390,-98.2287,red
395,-96.8583,red
400,-95.1057,red
405,-92.9776,red
410,-90.4827,red
415,-87.6307,red
420,-84.4328,red
425,-80.9017,red
430,-77.0513,red
435,-72.8969,red
440,-68.4547,red
445,-63.7424,red
450,-58.7785,red
455,-53.5827,red
460,-48.1754,red
465,-42.5779,red
470,-36.8125,red
475,-30.9017,red
480,-24.869,red
485,-18.7381,red
490,-12.5333,red
495,-6.2791,red
500,0,transparent
0,100,blue
5,99.8027,blue
10,99.2115,blue
15,98.2287,blue
20,96.8583,blue
25,95.1057,blue
30,92.9776,blue
35,90.4827,blue
40,87.6307,blue
45,84.4328,blue
50,80.9017,blue
55,77.0513,blue
60,72.8969,blue
65,68.4547,blue
70,63.7424,blue
75,58.7785,blue
80,53.5827,blue
85,48.1754,blue
90,42.5779,blue
95,36.8125,blue
100,30.9017,blue
105,24.869,blue
110,18.7381,blue
115,12.5333,blue
120,6.2791,blue
125,0,blue
130,-6.2791,blue
135,-12.5333,blue
140,-18.7381,blue
145,-24.869,blue
150,-30.9017,blue
155,-36.8125,blue
160,-42.5779,blue
165,-48.1754,blue
170,-53.5827,blue
175,-58.7785,blue
180,-63.7424,blue
185,-68.4547,blue
190,-72.8969,blue
195,-77.0513,blue
200,-80.9017,blue
205,-84.4328,blue
210,-87.6307,blue
215,-90.4827,blue
220,-92.9776,blue
225,-95.1057,blue
230,-96.8583,blue
235,-98.2287,blue
240,-99.2115,blue
245,-99.8027,blue
250,-100,blue
255,-99.8027,blue
260,-99.2115,blue
265,-98.2287,blue
270,-96.8583,blue
275,-95.1057,blue
280,-92.9776,blue
285,-90.4827,blue
290,-87.6307,blue
295,-84.4328,blue
300,-80.9017,blue
305,-77.0513,blue
310,-72.8969,blue
315,-68.4547,blue
320,-63.7424,blue
325,-58.7785,blue
330,-53.5827,blue
335,-48.1754,blue
340,-42.5779,blue
345,-36.8125,blue
350,-30.9017,blue
355,-24.869,blue
360,-18.7381,blue
365,-12.5333,blue
370,-6.2791,blue
375,0,blue
380,6.2791,blue
385,12.5333,blue
390,18.7381,blue
395,24.869,blue
400,30.9017,blue
405,36.8125,blue
410,42.5779,blue
415,48.1754,blue
420,53.5827,blue
425,58.7785,blue
430,63.7424,blue
435,68.4547,blue
440,72.8969,blue
445,77.0513,blue
450,80.9017,blue
455,84.4328,blue
460,87.6307,blue
465,90.4827,blue
470,92.9776,blue
475,95.1057,blue
480,96.8583,blue
485,98.2287,blue
490,99.2115,blue
495,99.8027,blue
500,100,blue

結果

楕円曲線

y² = x³ - 5x + 1 の例。

データ

線の太さは2を指定。最後の直線のデータのみ太さを指定。

180.2500,7.1575
181.0000,17.3118
184.0000,34.8827
187.0000,44.8899
190.0000,51.9615
193.0000,57.2442
196.0000,61.2470
199.0000,64.2518
202.0000,66.4349
205.0000,67.9154
208.0000,68.7779
211.0000,69.0847
214.0000,68.8825
217.0000,68.2063
220.0000,67.0820
223.0000,65.5279
226.0000,63.5547
229.0000,61.1662
232.0000,58.3575
235.0000,55.1135
238.0000,51.4043
241.0000,47.1773
244.0000,42.3415
247.0000,36.7301
250.0000,30.0000
253.0000,21.2344
256.0000,2.6833
256.0000,2.6833
256.0000,-2.6833
256.0000,-2.6833
253.0000,-21.2344
250.0000,-30.0000
247.0000,-36.7301
244.0000,-42.3415
241.0000,-47.1773
238.0000,-51.4043
235.0000,-55.1135
232.0000,-58.3575
229.0000,-61.1662
226.0000,-63.5547
223.0000,-65.5279
220.0000,-67.0820
217.0000,-68.2063
214.0000,-68.8825
211.0000,-69.0847
208.0000,-68.7779
205.0000,-67.9154
202.0000,-66.4349
199.0000,-64.2518
196.0000,-61.2470
193.0000,-57.2442
190.0000,-51.9615
187.0000,-44.8899
184.0000,-34.8827
181.0000,-17.3118
180.2500,-7.1575
180.2500,7.1575,transparent
352.0000,-144.8227
349.0000,-135.6219
346.0000,-126.4563
343.0000,-117.3111
340.0000,-108.1665
337.0000,-98.9955
334.0000,-89.7597
331.0000,-80.4034
328.0000,-70.8407
325.0000,-60.9303
322.0000,-50.4143
319.0000,-38.7337
316.0000,-24.1495
314.0000,-6.1752
314.0000,6.1752
316.0000,24.1495
319.0000,38.7337
322.0000,50.4143
325.0000,60.9303
328.0000,70.8407
331.0000,80.4034
334.0000,89.7597
337.0000,98.9955
340.0000,108.1665
343.0000,117.3111
346.0000,126.4563
349.0000,135.6219
352.0000,144.8227,transparent
50,0, blue, 1
450,100, transparent
328,150, orange, 1
328,-150, transparent
170,45, black,16,P
190,45, transparent
240,60, black,16,Q
270,60, transparent
310,80, black,16,R
330,80, transparent
310,-80, black,16,R'
340,-80, transparent

結果

青とオレンジの線は、楕円曲線の点P, Qの加算に使う補助線。楕円曲線の記事を参照。

P

Q

R

R'

データ生成用コード

表示に時間がかかる環境が存在するようなのでこちらに分離した。末尾しか変更していないので、改訂はしていない。

五芒星

データの最後の色設定blackは無視される。

データ

線の太さは3。

250,100,red
308.7785,-80.9017,orange
154.8943,30.9017,green
345.1057,30.9017,blue
191.2215,-80.9017,purple
250,100,black

結果

色相環

線の太さは8に設定した。

データ

250.0,100.0,#e60012
255.2336,99.863,#e7130e
260.4528,99.4522,#e8270b
265.6434,98.7688,#e93a07
270.7912,97.8148,#ea4e04
275.8819,96.5926,#eb6100
280.9017,95.1057,#ed6c00
285.8368,93.358,#ee7700
290.6737,91.3545,#f08200
295.399,89.1007,#f18d00
300.0,86.6025,#f39800
304.4639,83.8671,#f5a200
308.7785,80.9017,#f7ab00
312.932,77.7146,#f8b500
316.9131,74.3145,#fabe00
320.7107,70.7107,#fcc800
324.3145,66.9131,#fdd000
327.7146,62.932,#fdd800
330.9017,58.7785,#fee100
333.8671,54.4639,#fee900
336.6025,50.0,#fff100
339.1007,45.399,#f5ed00
341.3545,40.6737,#ece800
343.358,35.8368,#e2e400
345.1057,30.9017,#d9df00
346.5926,25.8819,#cfdb00
347.8148,20.7912,#c2d606
348.7688,15.6434,#b5d10c
349.4522,10.4528,#a9cd13
349.863,5.2336,#9cc819
350.0,0.0,#8fc31f
349.863,-5.2336,#79be24
349.4522,-10.4528,#63ba29
348.7688,-15.6434,#4eb52e
347.8148,-20.7912,#38b133
346.5926,-25.8819,#22ac38
345.1057,-30.9017,#1ba83a
343.358,-35.8368,#14a43d
341.3545,-40.6737,#0ea13f
339.1007,-45.399,#079d42
336.6025,-50.0,#009944
333.8671,-54.4639,#00994c
330.9017,-58.7785,#009a54
327.7146,-62.932,#009a5b
324.3145,-66.9131,#009b63
320.7107,-70.7107,#009b6b
316.9131,-74.3145,#009c74
312.932,-77.7146,#009c7c
308.7785,-80.9017,#009d85
304.4639,-83.8671,#009d8d
300.0,-86.6025,#009e96
295.399,-89.1007,#009e9f
290.6737,-91.3545,#009fa7
285.8368,-93.358,#009fb0
280.9017,-95.1057,#00a0b8
275.8819,-96.5926,#00a0c1
270.7912,-97.8148,#00a0c9
265.6434,-98.7688,#00a0d1
260.4528,-99.4522,#00a0d9
255.2336,-99.863,#00a0e1
250.0,-100.0,#00a0e9
244.7664,-99.863,#009be4
239.5472,-99.4522,#0096df
234.3566,-98.7688,#0090db
229.2088,-97.8148,#008bd6
224.1181,-96.5926,#0086d1
219.0983,-95.1057,#0080cc
214.1632,-93.358,#007ac7
209.3263,-91.3545,#0074c1
204.601,-89.1007,#006ebc
200.0,-86.6025,#0068b7
195.5361,-83.8671,#0061b2
191.2215,-80.9017,#005bad
187.068,-77.7146,#0054a7
183.0869,-74.3145,#004ea2
179.2893,-70.7107,#00479d
175.6855,-66.9131,#063f99
172.2854,-62.932,#0c3795
169.0983,-58.7785,#113090
166.1329,-54.4639,#17288c
163.3975,-50.0,#1d2088
160.8993,-45.399,#2a1f88
158.6455,-40.6737,#381d87
156.642,-35.8368,#451c87
154.8943,-30.9017,#531a86
153.4074,-25.8819,#601986
152.1852,-20.7912,#6a1585
151.2312,-15.6434,#741285
150.5478,-10.4528,#7e0e84
150.137,-5.2336,#880b84
150.0,0.0,#920783
150.137,5.2336,#9b0683
150.5478,10.4528,#a40482
151.2312,15.6434,#ac0382
152.1852,20.7912,#b50181
153.4074,25.8819,#be0081
154.8943,30.9017,#c60081
156.642,35.8368,#cd0080
158.6455,40.6737,#d50080
160.8993,45.399,#dc007f
163.3975,50.0,#e4007f
166.1329,54.4639,#e4007b
169.0983,58.7785,#e40077
172.2854,62.932,#e50072
175.6855,66.9131,#e5006e
179.2893,70.7107,#e5006a
183.0869,74.3145,#e50065
187.068,77.7146,#e5005f
191.2215,80.9017,#e5005a
195.5361,83.8671,#e50054
200.0,86.6025,#e5004f
204.601,89.1007,#e50049
209.3263,91.3545,#e50044
214.1632,93.358,#e6003e
219.0983,95.1057,#e60039
224.1181,96.5926,#e60033
229.2088,97.8148,#e6002c
234.3566,98.7688,#e60026
239.5472,99.4522,#e6001f
244.7664,99.863,#e60019
250.0,100.0,#e60012

結果

コッホ雪片

数え方によるが、正三角形から5段階進んだところ。

データ

点の数が3,000以上ある。表示に時間がかかる環境がありそうなのでこちらに分離した。

結果

HTMLのサイズがこの部分だけで376kBにのぼり、PCだと比較的容易に表示できるが、スマートフォンなどの機種によっては表示に時間がかかるようなのでさらにこちらに分離した。

データ生成用コード

表示に時間がかかる環境がありそうなのでこちらに分離した。

構造式

有機化合物(2,4,6-トリニトロトルエン)の構造式。

データ

transparentの色指定を省略できるが、コンマは必須。

250.0000,70.0000,black,2
310.6218,35.0000,black,2
310.6218,-35.0000,black,2
250.0000,-70.0000,black,2
189.3782,-35.0000,black,2
189.3782,35.0000,black,2
250.0000,70.0000,,2
250.0000,63.0000,,2
304.5596,31.5000,black,2
304.5596,-31.5000,,2
250.0000,-63.0000,black,2
195.4404,-31.5000,,2
195.4404,31.5000,black,2
250.0000,63.0000,,2
250.0000,70.0000,black,2
250.0000,91.0000,
310.6218,35.0000,black,2
328.8083,45.5000,
250.0000,-70.0000,black,2
250.0000,-91.0000,
189.3782,35.0000,black,2
171.1917,45.5000,
244.0000,105.4000,black,24.0,CH3
316.0000,105.4000,
335.2791,52.7000,black,24.0,NO2
407.2791,52.7000,
244.0000,-105.4000,black,24.0,NO2
316.0000,-105.4000,
116.7209,52.7000,black,24.0,O2N
188.7209,52.7000,

結果

記事には下付き文字を手作業で修正したものを載せているが、こちらには無修正のものを示す。

CH3

NO2

NO2

O2N

データ生成用コード

こちらに分離した。

関連項目

• ニコニコ大百科:グラフ機能