• Top
  • New

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

by scythmic_waves on 1/2/2024, 5:13:32 PM with 8 comments
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!

  • by sargstuff on 1/3/2024, 3:27:27 PM

    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-...

       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/

       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/

       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

  • by sargstuff on 1/4/2024, 1:57:38 AM

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

  • by sargstuff on 1/3/2024, 8:50:19 PM

    Online web based (no install mess):

    Mathcha editor : https://www.mathcha.io/ can cut/paste tiz examples to use as starting template(s)

    Asmptote : https://asymptote.sourceforge.io/

    WolframAlpha : https://www.wolframalpha.com/input/?i=plot+2x%2B3y-5z%3D7

    GeoGebra : https://www.geogebra.org/classic/3d

    CPM 3D Plotter : https://technology.cpm.org/general/3dgraph/

  • by scythmic_waves on 1/2/2024, 8:30:10 PM

    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

    [1]: https://en.wikipedia.org/wiki/Vector_space#/media/File:Deter...

  • by cvalka on 1/2/2024, 6:51:15 PM

    https://d2lang.com/

  • by billconan on 1/2/2024, 6:17:16 PM

    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?