We Keep Coding

Offline report with D3, md and equations

Is it possible to create a single html page containing embedded D3js charts, CommonMark text, and equations (e.g. Katex or MathJax) and have it all rendered the browser offline?
Must have:
Works offline using modern Firefox/Chrome/Safari, after having
downloaded a minimal number of JavaScript libs.
No requirement for installing anything beyond the web browser. So no local http server, Pandoc, R, Python etc.
Should have:
Possible to write everything in a single html file, which opens in a normal modern browser.
Good archival properties with minimal maintanence.
Motivation:
We work in a high security locked down IT environment and can’t install stuff, but we do have decent web browsers and can run javascript in them.
We routinely share small analytical reports internally, and are experimenting with delivering a directory containing
an html file (with embedded JSON data), and
downloaded D3 and Underscore librariess
All the internal customer has to do is click on index.html. So far this has been very succesful, but we'd like to use markdown and equations too.
We are vaguely aware of data science workbook solutions like Jupyter and Observable, but not sure that these meet our criteria.
Clarification
I know we can download libs and place them in a dir alongside index.html, but I'm not sure if a JavaScript library exists which can render the markdown and equations and write the results directly into the DOM. And even if such a library exists, where in index.html would the markdown be written? Is there some kind of html tag which can just hide a load of raw text which will be parsed by JS?

To answer your question, it is possible. You'll either need Node app that will render static HTML pages or simple HTML page with embedded Javascript. Since all these libraries are available as UDM packages, I suggest 2nd option.
CommonMark CDN: https://cdnjs.com/libraries/commonmark
KaTeX CDN: https://khan.github.io/KaTeX/docs/browser.html
You'll only need to download these libraries and include them in page. KaTeX includes JS to convert simple text to rendered mathematical equation, you only need to give it text and element where to render equation: https://khan.github.io/KaTeX/docs/api.html. CommonMark is similar but it only gives you rendered HTML, you need to insert it with element.innerHTML yourself: https://www.npmjs.com/package/commonmark.

Export web application to pdf using server-side render

Our web application(many d3 charts) is set up by vue, and I could export our
webpage to pdf by the combination of canvg, html2canvas(convert web content to
png) and emit png file to server and use nodejs to download it automatically
and periodically(weekly report).
However, I was asked to use different render method from client-side to
server side rendering and use wkhtmltopdf or phantomjs to download pdf.
My question is that is it difficult to render many complicated d3 chart and edit
css in server side rendering by using vue or another technique?
Thanks!

The wkhtmltopdf is a popular library for converting complex html content to pdf.
You don't have to worry about your complicated d3 chart or css. It will handle it. But you have to install wkhtmltopdf command line tool on your system.

SVG DOM elements can be convert into different images format using server side rendering option. Apache Batik such a library to convert SVG DOM elements into pdf,png,jpg,word.
Batik is a Java-based toolkit for applications or applets that want to use images in the Scalable Vector Graphics (SVG) format for various purposes, such as display, generation or manipulation.
The project’s ambition is to give developers a set of core modules that can be used together or individually to support specific SVG solutions. Examples of modules are the SVG Parser, the SVG Generator and the SVG DOM. Another ambition for the Batik project is to make it highly extensible —for example, Batik allows the developer to handle custom SVG elements. Even though the goal of the project is to provide a set of core modules, one of the deliverables is a full fledged SVG browser implementation which validates the various modules and their inter-operability.

Is there an npm module to modify a pdf file in node.js?

I'm building a node.js app on Bluemix that should take a pdf file as request and then grey out (blank) some part of the pdf file. And also here the pdf file is the same for all, and the area we need to blank out will be fixed. So can anybody suggest an npm module that can perform this kind of functionality?

Yes I guess the most common used library is pdf-lib. Take a look at the official page.

I suggest you to try HummusPDF. Specifically take a look at the Hummus - Modification page, that explains how to edit existing PDF documents. In your case you could try to use the feature that allows to draw shapes.

Please try Aspose.PDF Cloud SDK for Node.js available at GitHub and npm. It provides API methods for a wide range of document processing operations; including creation, manipulation, conversion and rendering of Pdf documents in the cloud. You can use Redaction Annotation to grey out the required PDF area.
P.S: I work with Aspose as Support Developer

P5Js modifying local file such as json or xml or table

P5Js allows you write a json/table/xml file on the disk but I couldn't find a way to modify the existing file.
There is way through which you can open a local file[json/table/xml] in P5js and there is another way thought which you can write/create a file on local disk but I couldn't found how to modify a local file or add a new entry in the existing local json or table or xml file.
P5.Js
P5.Js write a file
P5.Js loadFile
P5.Js Table
reference
I do found some example to this but they are using different technologies
Link

You can.
If you want to use the browser, you have two options:
Use saveTable(), saveJSON(), etc. which will download a file. (Press the edit button in the reference snippet, hit run see what I mean)
Try localstorage for small pieces or data, or use a database otherwise (may require a wee bit of server-side scripting)
With option 1 you'd have a loop like this:
load the file (file browse dialog or drop the file onto the browser (there's a p5.js example for that))
parse and modify the file in p5.js
save/download the file from p5.js
Other options may include using a wrapper for your js code into an application.
As you've mentioned, app.js/electron.js/cordova/etc. will provide options.
It might be worth trying node.js since there already is a p5.js node.js tutorial out there

You can't. (Edit: You can't, unless you do something more complicated like George's answer.)
Think about how scary it would be if JavaScript could modify files on your hard drive. Any time you visited a website, all of the kitten pictures you have might be deleted!
Depending on what you want to do, you might be able to use cookies. Or you might have to create a database and save to that. Or a server. The point is, it's not as simple as modifying a file on the user's computer.
If you really need to modify a file on the user's computer, then you can't use JavaScript. You can use regular Processing in Java mode and deploy as an application, but you can't embed that in a webpage.

Output 300 png images with correct filenames from svg or svg via canvas?

For browsers that don't support SVG, I'd like to show a static image of a chart instead of an interactive version.
One idea is to generate all possible chart states (around 300) beforehand. I tried using the Canvas2Image library but it doesn't seem to allow me to specify a filename. Is there any workaround? Perhaps a server-side solution?

There's a couple other ways to solve this.
rsvg is a rendering library that processes SVGs statically single-pass. It's used in ImageMagick's convert tool, and also has python and other bindings. Some people find various SVG-isms aren't supported, but rsvg gets updates now and then so best to just try and see.
inkscape is a GUI program that includes SVG->PNG conversion. But it can also be used exclusively on the command line (no X11 required). See man inkscape for all the command line options that can be used to process your svg's; it's quite flexible. The rendering is relatively fast. The main downside is that being a GUI program it has a lot of dependencies, that might not be present on a web server.