Scripting SVG plots in C language


One possibility often overlooked for simple plotting is to use C-language to create plots in SVG. SVG stands for Scalable Vector Graphics and is an add on within HTML5 http://en.wikipedia.org/wiki/SVG http://www.w3schools.com/svg/svg_inhtml.asp This html language extention allows plots to be created in any language including javascript, allowing some wonderful interactive effects but with C language, the student can expose the entire math and scientific libraries of the C and C++ world including the HP, GSL, and IBM libraries. Yes I know about SDS and Cairo and Libplot and all the goodies in Gambas and VB. But the following was created with a minimal of effort and offers the new science or engineering student a very inexpensive way to make simple plots since GCC is available at most university facilities as a good C or C++ compiler and therefore can be used to create SVG files. In the frame below is an SVG graphics page: liner.htm which is on my website at www.gunstar1.com/liner.htm If you decide to go the linux route, I strongly recommend something like the Geany editor over the ancient and outmoded VIM or EMACS, it will save you hundreds of hours since you will not have to lose your mind relearning key strokes and windows conventions. The following was created by first making a series of functions in C that would send text to a file, a function for a rectangle, circle, text, and lines. All that remained was to call the routines. e.g. To draw an exponential decay, one might write the following C language code:
for (x=0.0; x<8.0; x+=1.0){ y=3.0*exp(-x/5.5); if (x>0.1) line(ox,oy,x,y); //call subroutine to plot line ox=x; oy=y; //remember old x and old y values };

At the bottom of this screen is the C-Language program responsible for creating this graph and its html code.
You can also find it at: svgwell.pdf While crude and mostly undocumented, don't dismiss it too quickly, most of the subroutines are there!! Below is the graphic generated from the web page liner.htm that was created by the C language file below. It is shown in a frame but you can access it at: http://www.gunstar1.com/liner.htm



This is liner.htm, the htm web page that was created by the C language code below:


<!DOCTYPE html ><html> <body> <center> <h1> Plot of Exponential Decay Using SVG, scripted graphic</h1> <hr> <svg width='700.0' height='500.0' xmlns='http://www.w3.org/2000/svg' version='1.1'> <rect x='75.0' y='57.7' width='500.0' height='384.6'style='fill:rgb(200,200,255);stroke-width:1;stroke:rgb(0,0,0)'/> <text x='237.5' y='38.5' fill=rgb(0,0,0) transform='rotate(0.0 237.5 38.5)'> Exponential Decay</text> <text x='237.5' y='480.8' fill=rgb(0,0,0) transform='rotate(0.0 237.5 480.8)'> Time (seconds)</text> <text x='37.5' y='307.7' fill=rgb(0,0,0) transform='rotate(-90.0 37.5 307.7)'> Percent</text> <line x1='75' y1='404' x2='88' y2='404' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='575' y1='404' x2='563' y2='404' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='125' y1='442' x2='125' y2='433' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='125' y1='58' x2='125' y2='67' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='75' y1='365' x2='88' y2='365' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='575' y1='365' x2='563' y2='365' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='175' y1='442' x2='175' y2='433' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='175' y1='58' x2='175' y2='67' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='75' y1='327' x2='88' y2='327' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='575' y1='327' x2='563' y2='327' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='225' y1='442' x2='225' y2='433' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='225' y1='58' x2='225' y2='67' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='75' y1='288' x2='88' y2='288' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='575' y1='288' x2='563' y2='288' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='275' y1='442' x2='275' y2='433' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='275' y1='58' x2='275' y2='67' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='75' y1='250' x2='88' y2='250' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='575' y1='250' x2='563' y2='250' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='325' y1='442' x2='325' y2='433' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='325' y1='58' x2='325' y2='67' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='75' y1='212' x2='88' y2='212' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='575' y1='212' x2='563' y2='212' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='375' y1='442' x2='375' y2='433' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='375' y1='58' x2='375' y2='67' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='75' y1='173' x2='88' y2='173' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='575' y1='173' x2='563' y2='173' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='425' y1='442' x2='425' y2='433' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='425' y1='58' x2='425' y2='67' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='75' y1='135' x2='88' y2='135' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='575' y1='135' x2='563' y2='135' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='475' y1='442' x2='475' y2='433' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='475' y1='58' x2='475' y2='67' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='75' y1='96' x2='88' y2='96' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='575' y1='96' x2='563' y2='96' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='525' y1='442' x2='525' y2='433' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='525' y1='58' x2='525' y2='67' style='stroke:rgb(0,0,0);stroke-width:2'/> <text x='50.0' y='365.4' fill=rgb(0,0,0) transform='rotate(0.0 50.0 365.4)'> 20</text> <text x='175.0' y='461.5' fill=rgb(0,0,0) transform='rotate(0.0 175.0 461.5)'> 40</text> <text x='50.0' y='288.5' fill=rgb(0,0,0) transform='rotate(0.0 50.0 288.5)'> 40</text> <text x='275.0' y='461.5' fill=rgb(0,0,0) transform='rotate(0.0 275.0 461.5)'> 80</text> <text x='50.0' y='211.5' fill=rgb(0,0,0) transform='rotate(0.0 50.0 211.5)'> 60</text> <text x='375.0' y='461.5' fill=rgb(0,0,0) transform='rotate(0.0 375.0 461.5)'> 120</text> <text x='50.0' y='134.6' fill=rgb(0,0,0) transform='rotate(0.0 50.0 134.6)'> 80</text> <text x='475.0' y='461.5' fill=rgb(0,0,0) transform='rotate(0.0 475.0 461.5)'> 160</text> <line x1='133' y1='200' x2='88' y2='94' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='178' y1='273' x2='133' y2='200' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='223' y1='324' x2='178' y2='273' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='268' y1='360' x2='223' y2='324' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='313' y1='385' x2='268' y2='360' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='358' y1='402' x2='313' y2='385' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='403' y1='414' x2='358' y2='402' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='448' y1='423' x2='403' y2='414' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='493' y1='429' x2='448' y2='423' style='stroke:rgb(0,0,0);stroke-width:2'/> <line x1='538' y1='433' x2='493' y2='429' style='stroke:rgb(0,0,0);stroke-width:2'/> <ellipse cx='87.5' cy='94.3' rx='7.5' ry='7.7' style='fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)' /> <ellipse cx='132.5' cy='199.5' rx='7.5' ry='7.7' style='fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)' /> <ellipse cx='177.5' cy='272.9' rx='7.5' ry='7.7' style='fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)' /> <ellipse cx='222.5' cy='324.1' rx='7.5' ry='7.7' style='fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)' /> <ellipse cx='267.5' cy='359.9' rx='7.5' ry='7.7' style='fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)' /> <ellipse cx='312.5' cy='384.8' rx='7.5' ry='7.7' style='fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)' /> <ellipse cx='357.5' cy='402.2' rx='7.5' ry='7.7' style='fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)' /> <ellipse cx='402.5' cy='414.3' rx='7.5' ry='7.7' style='fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)' /> <ellipse cx='447.5' cy='422.8' rx='7.5' ry='7.7' style='fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)' /> <ellipse cx='492.5' cy='428.7' rx='7.5' ry='7.7' style='fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)' /> <ellipse cx='537.5' cy='432.8' rx='7.5' ry='7.7' style='fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)' /> </svg> <h2> Or Morse Code "CQ"</h2> <svg width="1000" > <g fill="none"> <path stroke-dasharray="26,16,4,16,26,16,4,45,26,16,26,16,4,16,26,70" stroke-linecap="round" stroke-width="8" stroke=rgb(130,30,40) d="M5 60 24215 0" /> </g> </svg> </center> </body> </html>


The program in C - Language




We hope you have found this useful. And no, you will not go to hell for recommending the death of VIM and EMACS, really.
Richard Stallman rarely makes housecalls anymore for this sort of thing.... I hope. Surround yourself with kevlar stuffed penguins if you must!
Last editted 3-17-15