I need to display some data online but I also would like to have nice plots as high-res files for printing. So far I was generating the plots as png, but now I am thinking on changing this to Javascript. This is mainly because I would like my plots to be dynamic.
The WWW part is looks relatively easy for me; I would grab data from a server with AJAX and plot on a webpage - I think SVG would be perfect for my needs. But how can I run the script from terminal with a file name as a parameter to get a myplot.svg (which of course will not be dynamic any longer) file that looks like the plot on the webpage?
Ideally I would like to have a single plotting subroutine in order to avoid duplicate code and to keep both versions looking the same.
So my questions are which framework should I use for SVG generation to make the terminal variant easy ?
You can use ImageMagick to convert a SVG to png:
ImageMagick convert svg to png
You can extract the generated SVG from a virtual DOM (with the same code as on your web page, perhaps with slightly differences regarding environment) when you use Node.js and jsdom
As mentioned in the comment I can recommend D3.js - Data Driven Documents for generating SVG the easy way.
An alternative for Node.js and jsdom might be Phantom.js.
Your task is not an easy one, but it's worth the effort. Good luck!
Related
I have SVG images generated using the D3 library and they look great. Problem is, addSVG can't use them. I verified that 'regular' SVGs work, I can do basic shapes, strokes, color fills. Is there a way to get the patterns in there?
Ideally, could I extend addSVG to handle dataURIs or perhaps build a CSS with the pattern fills?
If that doesn't work, then maybe a way to parse the SVG XML string to work?
If not either of those, is there a way to create some patterns in 'regular' SVG that I could use instead? Maybe there's an existing library that's simpler than D3? I actually don't need a lot.
edit: It's worth mentioning that Node.js is not an option, and external server resources aren't really an option either. I'm saving an internal server-based SVG to PNG converter to an absolute last fallback. Also typical client-side SVG to PNG conversions are a no-go as well, I have to support IE11 and I can't get around the security error canvas.toDataURL throws (I don't think it's possible).
edit: addSVG is pretty basic and does not support patterns and other fancy bits. I was able to use canvg and addImage as a workaround. Linked article in answer does NOT work for IE11.
Looking at the code for addSVG() I see it only has extremely basic support for SVGs. It only supports <path> elements and they have to be at the top level of the SVG. In additon, it doesn't support changing path colours, and it only allows 'c' and 'l' path commands.
So the simple answer to your question is "No". :/
Assuming you don't want to write your own SVG converter (and there are no alternative plugins out there), then you may have to resign yourself to converting the SVG to a bitmap and inserting that.
How to converted SVG Files into PDF in JSPDF using javascript
I saved a .gml from wolfram mathimatica, does anyone have an example of how to load the file and display on a webpage? I am dealing with d3 at the moment, would another language be more appropriate?
Thanks.
There's a really good post on exactly this at one developer's blog.
The gist of it is that D3, even in its latest version (v4, at the time of writing this), can't import GML files. However, you can convert a GML file into a JSON file, which D3 can read. You can use NetworkX for this conversion.
Alternatively, you may use Gephi to export the edges and nodes to CSV separately.
i'm making a research for the topic of getting a mp3 file rendered as waveform. i've already found some php libraries. now i'm looking for a similar solution in nodejs.
my results so far are:
https://github.com/afreiday/php-waveform-svg
http://www.schillmania.com/projects/soundmanager2/ (maybe loading this in nodejs to try rendering the wave file in svg-format... not quiet sure)
have you guys experience with nodejs-libraries to create waveforms in svg format?
Not a directly nodejs-related solution.
We use a Linux commandline tool Sonic Annotator to extract waveform (peaks) and detect beat in audio files. Its a host that can run VAMP plugins that are quite good at these tasks.
Peaks are extracted as a set of floats from 0 to 1 at equal intervals. SHould be rather simple to build an svg on top of that data (with D3 i.e.).
I'm not used to nodejs, but the docs says it can run external commands.
I'm trying to figure out a way to extract the information encoded in ttf files. namely: The char-to-glyph table and the individual glyph path data.
Does anyone have a good reference explaining the ttf file structure, or some other solution?
Keep in mind that I'm not interested in any libraries that can do it for me either (unless they are open source and I can see how they are doing it). The "master" goal is to implement it in Javascript.
Thanks!
Take a look at OpenType.js at http://opentype.js.org/
opentype.js provides you with raw access to the glyphs so you can modify them as you please.
One can inspect all the tables in an OpenType and TrueType font using Font Inspector, and enumerate all the glyphs using Glyph Inspector
This toolkit has an utility called ttf2svg, it is open source written in java.
http://xmlgraphics.apache.org/batik/
You can try to extract the ttf parsing logic and implement it as you want.
In a past situation I used this utility to generate a svg file and use it in a web page targeting ipad users (#fontface css feature).
OpenType.js is perfect in a javascript environment, browser or Node.js (I contributed to the lib). Fast & easy to use.
Just keep in mind that the implementation is not complete, if you need something that is not yet implemented you can open an issue and we will help you if we can!
For a more complete tool, fontTools will be more powerful in command line (& complete parsing/writing) https://github.com/behdad/fonttools/
If you do ttx myfont.ttf it will generate an xml file (myfont.ttx) with all infos, you can modify the infos and do ttx myfont.ttx and it will generate a font based on it!
By the way I did an awesome list for typography recently with a lot of resources concerning ttf / otf: https://github.com/Jolg42/awesome-typography
There are a lot of librairies in different languages from javascript to C 😉
I've a text file with content like this:
id, pixelsize, color, text
block1, 200x60, black, Header
block2, 200x180, white, Body
block2, 200x60, black, Footer
Now using actionscript,
I want to generate a psd file which would generate a 3 vertical block graphics (like this) after parsing the given file. All the blocks are placed vertically on top of each other.
Convert this psd file into PDF automatically using the script.
Automate this whole process without opening photoshop. Is it possible?
Please help. Thanks.
You aren't going to be able to create a PSD w/o opening Photoshop. Even when you use something like Adobe Bridge to batch process files from any Adobe app it still uses the appropriate app to open a supported file and perform actions on it.
I have seen apps that allow you to output PDFs from user defined text and variable images (PageFlex comes to mind)...but even then, saving Adobe-compatible files aren't simple tasks to turn off and on (like when you make a text file). There's a lot of data to manage even with PDFs and I'd suspect even more when you look at a PSD file.
Unless you can find an open-source app that somehow allows you mess with its coding so that you can bypass opening it 100% to output a somewhat compatible PSD/PDF file, I don't think you're going to be able to automate much w/o lots of work and some potentially expensive software solutions.
Long answer short, I think you'll have to use Photoshop at some point in your solution. On the upside, you could make a recording of actions in PS so that individual files can be output to whatever format you like...and those I'm sure can be scripted into complicated solutions.
You can do this kind of thing using the ExtendScript Toolkit from Adobe.
Not sure you can do it without having Photoshop open, however.
Given that you want a PDF at the end, could you use something like AlivePDF (ActionScript 3 Open-Source PDF Library)?
If you actually need to also generate a PSD, I'm not sure how you do that from scratch, but the Photoshop SDK would be a good place to start, as well as getting a good understanding of bytearrays.