viz-blog-template

viz-blog-template

template for showcasing interactive visualizations via blog posts.

1. implemented as a standalone JavaScript function called viz_blog().
2. accepts a list of iframe URLs in array format and binds them to the existing DIV elements containing data-type="true" metadata (i.e. "key divs").
3. issues a console log statement if the number of URLs does not match the number DIVs.

algorithm design is summarized below:

1. each visualization is loaded as an iframe
2. horizontal line halfway down the window is used to measure the distances of each key div
3. current visualization starts fading out each when the nearest-neighboring visualization is within dTol = 0.3 * windowHeight pixels of the center-line
4. current visualization finishes fading out as soon as the nearest-neighboring visualization is within dcut = 0.1 * windowHeight pixels of the center-line
5. current visualization opacity is updated each time the page is scrolled.
6. these parameters are hard-coded for now, and there is also a new concept of a "center line" which is also hard-coded for now.
7. new visualizations are loaded at 100% opacity, allowing them to execute their normal "onload" event(s).