Server-side course-map rendering (d3.js)

[jameslzhu]

Rendering times (excluding loading times) for the current course map are quite long (>5s): https://hkn.eecs.berkeley.edu/courseguides

This is due to the graph being rendered client-side as a d3.js force graph (into an SVG image), which simulates a spring-loaded network graph in time steps until it converges.

This might be mitigated by rendering it once, on the server, caching the resulting SVG (maybe using some hashing system to detect changes?), and sending the SVG as a static asset.

https://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side/

The client-side physics script is at app/assets/javascripts/coursesurveys.js.erb.

The data for the graph is a JSON downloaded from https://hkn.eecs.berkeley.edu/coursesurveys/chartinfo.

[jameslzhu]

So in terms of steps I'd take if I were implementing this:

1. Figure out how / where the data is aggregated for the graph
2. Move the client-side rendering to server-side rendering somehow
3. Figure out how to cache the results / allow a re-render if the graph data changes

[jameslzhu]

This wiki entry may be relevant: https://github.com/compserv/hknweb/wiki/Course-Map

[jameslzhu]

Restructuring the graph itself is out-of-scope for this project; right now tutoring and I are working on that. If you somehow end up finishing this early / are feeling A M B I T I O U S about this, you can ask for more.

[paulshaoyuqiao]

Here is a good link to get started to understand the force layout and physics simulation of d3.js: https://medium.com/@sxywu/understanding-the-force-ef1237017d5
This Stack Overflow post also gives some good advice on how to pre-render the layout and pre-determined positions in the DOM and then simulate for the graph to converge.
https://stackoverflow.com/questions/26247733/d3-pre-rendering/26248784#26248784

[bri25yu]

Closed by #401