The article IIDX Retrospective on this site uses CSS diagrams to display data. However, at the time I manually created these diagrams in HTML & applied classes to transform the data.
It’s one of the few non-markdown articles on this site for that specific reason. However, how cool would it be to have the diagrams drawn as ASCII diagrams and then converted at runtime for users with Javascript enabled?
Here’s one of the diagrams from the article as an ascii diagram:
Chart Plays |
-------------------------------|
Resident | ## 693 |
| |- Resident only released on the 19th of October 2022, this data was taken on the 5th of April 2023.
Heroic Verse | #### 726 |
Bistrover | ######## 1413 |
Cast Hour | ########## 1721 |And if you have Javascript enabled, here it is rendered as seen in the article:
Chart Plays |
-------------------------------|
Resident | ## 693 |
| |- Resident only released on the 19th of October 2022, this data was taken on the 5th of April 2023.
Heroic Verse | #### 726 |
Bistrover | ######## 1413 |
Cast Hour | ########## 1721 |I’ve wanted to use these graphs a bit more in other articles but manually writing the HTML inline in the markdown seemed kinda icky? This will look the same to you as the viewer (if you have Javascript enabled) but for me there’s a big dump of HTML:
However, while writing this I learned about the markdown-markdown_in_html_blocks+raw_html format in Pandoc - which allows inline HTML, as well as the .mdx file format which hints most editors into adding syntax highlighting to inline HTML…
So I’ll probably just do that instead of adding more JS to my site.