4 ms·

Ask HN: How do you build diagrams for the web?

Do you use SVG? Canvas? Something else? If so, why? And what's your process? When explaining a technical topic, I've sometimes found myself wanting to make a visual aid of some sort. But there seems to be a huge landscape of tools and I don't know what I should invest in learning. Thanks in advance for any advice!

billconan 3y ago
Are you asking about the technology to build diagram on web? or what tools to use for creating diagrams? Because SVG and canvas are technologies, not tools. You then said your intention is to explain technical topics?
- scythmic_waves 3y ago
  To clarify: my goal is to create visual aids and embed them in an HTML document. So I want diagrams _for_ the web and not necessarily built _by_ a browser. For instance, one person's approach could be to use the Inkscape software to create SVGs. Another approach could be to use JS to call the Canvas API. Another is to use Tikz. Because there are so many approaches, each requiring a heavy investment in learning, I was curious if any in the HN crowd have strong preferences.
cvalka 3y ago
https://d2lang.com/ https://d2lang.com/
- scythmic_waves 3y ago
  Oh interesting! I like that it can embed LaTeX and code snippets. However I fear it may not be low-level enough for what I'm hoping to do. Since I can't edit the OP, I'll reply to it with examples of what I'm hoping to achieve. EDIT: https://news.ycombinator.com/item?id=38846756 https://news.ycombinator.com/item?id=38846756
scythmic_waves 3y ago
Additional context: for a flavor of what I have in mind, you can glance at the wiki page for vector spaces [0]. E.g. [1]. [0]: https://en.wikipedia.org/wiki/Vector_space https://en.wikipedia.org/wiki/Vector_space [1]: https://en.wikipedia.org/wiki/Vector_space#/media/File:Determinant_parallelepiped.svg https://en.wikipedia.org/wiki/Vector_space#/media/File:Deter...
sargstuff 3y ago
Examples based on expected environement generating visuals from / presenting visuals: a) interactive [2i] & [2iii] / non-interactive b) generating data for visuals via: sketches by hand[0], gui/command line[1], via database/spreadsheet/ide[2] ----- [0] i) : https://www.skillshare.com/en/blog/how-to-digitize-a-sketch-with-adobe-illustrator/ https://www.skillshare.com/en/blog/how-to-digitize-a-sketch-... ii) : https://towardsdatascience.com/how-to-convert-any-text-into-a-graph-of-concepts-110844f22a1a iii) : https://zapier.com/blog/best-wireframe-tools/ ** [1] i) overleaf : https://www.overleaf.com/ https://www.overleaf.com/ ii) tiz and pgf packages : https://tikz.dev/ / https://texample.net/tikz/examples/area/physics/ iii) ggplot : https://ggplot2.tidyverse.org/ iv) gnuplot : http://gnuplot.info/ ** [2] i) jupyter / jupyterlab: https://jupyter.org/ https://jupyter.org/ ii) impress : https://wiki.openoffice.org/wiki/Documentation/OOo3_User_Guides/Impress_Guide/Introducing_Impress iii) graphana : https://medium.com/analytics-vidhya/grafana-with-postgresql-data-visualization-with-open-source-tool-36f5150fa290
sargstuff 3y ago
Online web based (no install mess): Mathcha editor : https://www.mathcha.io/ https://www.mathcha.io/ can cut/paste tiz examples to use as starting template(s) Asmptote : https://asymptote.sourceforge.io/ https://asymptote.sourceforge.io/ WolframAlpha : https://www.wolframalpha.com/input/?i=plot+2x%2B3y-5z%3D7 https://www.wolframalpha.com/input/?i=plot+2x%2B3y-5z%3D7 GeoGebra : https://www.geogebra.org/classic/3d https://www.geogebra.org/classic/3d CPM 3D Plotter : https://technology.cpm.org/general/3dgraph/ https://technology.cpm.org/general/3dgraph/
sargstuff 3y ago
Walk through of various tools a physics class instructor used per different presenation requirements. https://opensource.com/article/20/1/teach-physics-open-source https://opensource.com/article/20/1/teach-physics-open-sourc...

billconan 3y ago

Are you asking about the technology to build diagram on web? or what tools to use for creating diagrams? Because SVG and canvas are technologies, not tools. You then said your intention is to explain technical topics?

scythmic_waves 3y ago
To clarify: my goal is to create visual aids and embed them in an HTML document. So I want diagrams _for_ the web and not necessarily built _by_ a browser. For instance, one person's approach could be to use the Inkscape software to create SVGs. Another approach could be to use JS to call the Canvas API. Another is to use Tikz. Because there are so many approaches, each requiring a heavy investment in learning, I was curious if any in the HN crowd have strong preferences.

cvalka 3y ago

https://d2lang.com/ https://d2lang.com/

scythmic_waves 3y ago
Oh interesting! I like that it can embed LaTeX and code snippets. However I fear it may not be low-level enough for what I'm hoping to do. Since I can't edit the OP, I'll reply to it with examples of what I'm hoping to achieve. EDIT: https://news.ycombinator.com/item?id=38846756 https://news.ycombinator.com/item?id=38846756

scythmic_waves 3y ago

Additional context: for a flavor of what I have in mind, you can glance at the wiki page for vector spaces [0]. E.g. [1]. [0]: https://en.wikipedia.org/wiki/Vector_space https://en.wikipedia.org/wiki/Vector_space [1]: https://en.wikipedia.org/wiki/Vector_space#/media/File:Determinant_parallelepiped.svg https://en.wikipedia.org/wiki/Vector_space#/media/File:Deter...

sargstuff 3y ago

Examples based on expected environement generating visuals from / presenting visuals: a) interactive [2i] & [2iii] / non-interactive b) generating data for visuals via: sketches by hand[0], gui/command line[1], via database/spreadsheet/ide[2] ----- [0] i) : https://www.skillshare.com/en/blog/how-to-digitize-a-sketch-with-adobe-illustrator/ https://www.skillshare.com/en/blog/how-to-digitize-a-sketch-... ii) : https://towardsdatascience.com/how-to-convert-any-text-into-a-graph-of-concepts-110844f22a1a iii) : https://zapier.com/blog/best-wireframe-tools/ ** [1] i) overleaf : https://www.overleaf.com/ https://www.overleaf.com/ ii) tiz and pgf packages : https://tikz.dev/ / https://texample.net/tikz/examples/area/physics/ iii) ggplot : https://ggplot2.tidyverse.org/ iv) gnuplot : http://gnuplot.info/ ** [2] i) jupyter / jupyterlab: https://jupyter.org/ https://jupyter.org/ ii) impress : https://wiki.openoffice.org/wiki/Documentation/OOo3_User_Guides/Impress_Guide/Introducing_Impress iii) graphana : https://medium.com/analytics-vidhya/grafana-with-postgresql-data-visualization-with-open-source-tool-36f5150fa290

sargstuff 3y ago

Online web based (no install mess): Mathcha editor : https://www.mathcha.io/ https://www.mathcha.io/ can cut/paste tiz examples to use as starting template(s) Asmptote : https://asymptote.sourceforge.io/ https://asymptote.sourceforge.io/ WolframAlpha : https://www.wolframalpha.com/input/?i=plot+2x%2B3y-5z%3D7 https://www.wolframalpha.com/input/?i=plot+2x%2B3y-5z%3D7 GeoGebra : https://www.geogebra.org/classic/3d https://www.geogebra.org/classic/3d CPM 3D Plotter : https://technology.cpm.org/general/3dgraph/ https://technology.cpm.org/general/3dgraph/

sargstuff 3y ago

Walk through of various tools a physics class instructor used per different presenation requirements. https://opensource.com/article/20/1/teach-physics-open-source https://opensource.com/article/20/1/teach-physics-open-sourc...