Web component tiny-ps to display PostScript graphics inside HTML.
You can create any type of vector graphics using PostScript language. PostScript is a very powerful and dynamic language that allows you to add new operators on the fly, like the triangle here.
{{tiny-ps|
/triangle { moveto 100 0 rlineto -50 100 rlineto closepath } def
0.2 setgray 200 100 triangle fill
0.4 setgray 240 140 triangle fill
1.0 setgray 280 180 triangle fill
0.0 setgray 280 180 triangle stroke
showpage}}
/triangle { moveto 100 0 rlineto -50 100 rlineto closepath } def
0.2 setgray 200 100 triangle fill
0.4 setgray 240 140 triangle fill
1.0 setgray 280 180 triangle fill
0.0 setgray 280 180 triangle stroke
showpage
Or a more complex one.
{{tiny-ps|
/state { ... } def
/startstate { ... } def
/path { ... } def
/path2 { ... } def
/TGL017 12 selectfont
(start) 100 200 startstate
(number) 200 175 state
(fraction) 200 260 state
(operator) 200 100 state
(0-9-) 100 200 200 175 path
(0-9) 200 175 250 150 250 200 200 175 path2
(.) 200 175 200 260 path
(space) 200 175 170 225 100 225 100 200 path2
(0-9) 200 260 250 235 250 285 200 260 path2
(space) 200 260 175 275 75 250 100 200 path2
(a-z) 100 200 200 100 path
(a-z0-9) 200 100 250 75 250 125 200 100 path2
(space) 200 100 150 125 100 150 100 200 path2
showpage }}
% label x y
/state {
gsave
translate 0 0 30 0 360 arc stroke
dup stringwidth pop 2 div neg -3 moveto show
grestore
} def
/startstate {
gsave
translate 0 0 30 0 360 arc stroke
0 0 25 0 360 arc stroke
dup stringwidth pop 2 div neg -3 moveto show
grestore
} def
% label x1 y1 x2 y2
/path {
gsave
/y2 exch def /x2 exch def /y1 exch def /x1 exch def /label exch def
/a y2 y1 sub x2 x1 sub atan def
% line
x1 a cos 30 mul add y1 a sin 30 mul add moveto
x2 a cos 30 mul sub y2 a sin 30 mul sub lineto stroke
% arrows
x2 a cos 30 mul sub y2 a sin 30 mul sub moveto
a 150 add cos 10 mul a 150 add sin 10 mul rlineto stroke
x2 a cos 30 mul sub y2 a sin 30 mul sub moveto
a -150 add cos 10 mul a -150 add sin 10 mul rlineto stroke
% label
x1 a cos 40 mul add 3 sub y1 a sin 40 mul add 2 sub moveto
label stringwidth pop 3 add 0 rlineto 0 12 rlineto
label stringwidth pop 3 add neg 0 rlineto 0 -12 rlineto
0.8 setgray fill
x1 a cos 40 mul add y1 a sin 40 mul add moveto
0 setgray label show
grestore
} def
% label x1 y1 x2 y2 x3 y3 x4 y4
/path2 {
gsave
/y4 exch def /x4 exch def /y3 exch def /x3 exch def
/y2 exch def /x2 exch def /y1 exch def /x1 exch def /label exch def
% line
/a1 y2 y1 sub x2 x1 sub atan def
/a4 y4 y3 sub x4 x3 sub atan def
x1 a1 cos 30 mul add y1 a1 sin 30 mul add moveto
x2 y2 lineto
x2 a1 cos 50 mul add y2 a1 sin 50 mul add
x3 a4 cos 50 mul sub y3 a4 sin 50 mul sub
x3 y3 curveto
x4 a4 cos 30 mul sub y4 a4 sin 30 mul sub lineto stroke
% arrows
x4 a4 cos 30 mul sub y4 a4 sin 30 mul sub moveto
a4 150 add cos 10 mul a4 150 add sin 10 mul rlineto stroke
x4 a4 cos 30 mul sub y4 a4 sin 30 mul sub moveto
a4 -150 add cos 10 mul a4 -150 add sin 10 mul rlineto stroke
% label
x1 a1 cos 50 mul add 3 sub y1 a1 sin 50 mul add 2 sub moveto
label stringwidth pop 3 add 0 rlineto 0 12 rlineto
label stringwidth pop 3 add neg 0 rlineto 0 -12 rlineto
0.8 setgray fill
x1 a1 cos 50 mul add y1 a1 sin 50 mul add moveto
0 setgray label show
grestore
} def
/TGL017 12 selectfont
(start) 100 200 startstate
(number) 200 175 state
(fraction) 200 260 state
(operator) 200 100 state
(0-9-) 100 200 200 175 path
(0-9) 200 175 250 150 250 200 200 175 path2
(.) 200 175 200 260 path
(space) 200 175 170 225 100 225 100 200 path2
(0-9) 200 260 250 235 250 285 200 260 path2
(space) 200 260 175 275 75 250 100 200 path2
(a-z) 100 200 200 100 path
(a-z0-9) 200 100 250 75 250 125 200 100 path2
(space) 200 100 150 125 100 150 100 200 path2
showpage
tiny-ps has access to built in fonts. You can add other fonts, if you add the URL to the $rpnFontURLs variable.
{{tiny-ps|
/Nimbus-Sans findfont 20 scalefont setfont
0 280 moveto (Nimbus Sans) show
...
showpage}}
/Nimbus-Sans 20 selectfont
0 280 moveto (Nimbus Sans) show
/Nimbus-Sans-Italic 20 selectfont
0 260 moveto (Nimbus Sans Italic) show
/Nimbus-Sans-Bold 20 selectfont
0 240 moveto (Nimbus Sans Bold) show
/Nimbus-Sans-BoldItalic 20 selectfont
0 220 moveto (Nimbus Sans Bold Italic) show
/Nimbus-Roman 20 selectfont
300 280 moveto (Nimbus Roman) show
/Nimbus-Roman-Italic 20 selectfont
300 260 moveto (Nimbus Roman Italic) show
/Nimbus-Roman-Bold 20 selectfont
300 240 moveto (Nimbus Roman Bold) show
/Nimbus-Roman-BoldItalic 20 selectfont
300 220 moveto (Nimbus Roman Bold Italic) show
/Nimbus-Mono 20 selectfont
0 180 moveto (Nimbus Mono) show
/Nimbus-Mono-Oblique 20 selectfont
0 160 moveto (Nimbus Mono Oblique) show
/Nimbus-Mono-Bold 20 selectfont
0 140 moveto (Nimbus Mono Bold) show
/Nimbus-Mono-BoldOblique 20 selectfont
0 120 moveto (Nimbus Mono Bold Oblique) show
/Europa-Mittelschrift 20 selectfont
0 80 moveto (Europa-Mittelschrift) show
/TGL017 20 selectfont
0 60 moveto (TGL017) show
showpage
The preparechart operator allows you to visualize data. The data must have been saved to cache folder with the tiny-ps-table function. Preparechart analyses the table and estimates the scale, but you can manually override it by setting manually ylimits which is an array [ ymin ystep ymax ] and you can also manually override the labels which are in row 0 of data.
{{tiny-ps-table| pstest.csv }}
{{tiny-ps|
(pstest.csv) 1 preparechart data
ylimits 2 140000 put
ylimits 1 20000 put
data 0 get 1 (2015) put
data 0 get 1 (2019) put
category xaxis yticks ygrid
[1 2] bar
(Voters by party) [1 2] toplegend
(Data Source: FSO) credits
(National elections) title
showpage}}
(pstest.csv) 1 preparechart data
ylimits 2 140000 put
ylimits 1 20000 put
data 0 get 1 (2015) put
data 0 get 2 (2019) put
category xaxis yticks ygrid
[1 2] bar
(Voters by party) [1 2] toplegend
(Data Source: FSO) credits
(National elections) title
showpage