Working on a personal project. Searching on Google, etc and I couldn’t find intuitive examples.
prims.js or prism.js?
Thanks for the correction: prism.js is what I meant.
What exactly are you trying to accomplish?
I am trying to understand how Amelia Wattenberger managed to get the effect of the scrolling-based animation of the side code in this work: https://wattenberger.com/blog/d3-interactive-charts. You can visit the page and scroll down to see what I mean?
The way she coded the page is hard to follow. I tried to find a repository with no avail (personal page).
I have several questions about her project.
One is how she managed to move to different sections of the code for every triggered animation. There are several answers:
- The source of the side code she used is ONE and PRISM.JS allows you to identify lines and move to that line in combination with JS, possibly by using regex markers.
- The source code must be separated PER ELEMENT LINE BY LINE but show as it is one. You use JS to move to the ELEMENTS not along the (text-based) code.
- There is a DIFFERENT source code sample for each new trigger that specifically shows what you want to show.
I suspect the solution she implemented is the SECOND one, based of what I managed to understand from the html source code (browser view) and other interesting attributes, like the COLLAPSABLE code.
But if it is the first one, I would like to know how to code it, as I couldn’t find anything and the PRISM.JS documentation is ironically not well “highlighted”.
NOTE: the Amelia Wattenberger’s page is a recommendable d3.js tutorial, by the way.
See the repo for the site:
Prism is just the code highlighter; the documentation is slim because it’s basically just plug and play: you ensure the script loads, and it will highlight the code you indicate you want to highlight.
The complex UI interactions you’re talking about are all custom built in React (and in canvas for the examples), you would need to dig into the code to see how it goes together.