The goal of this web app is visualize the channels an are.na channel connects to, and their subsequent channel connections, in an interactive undirected graph.
The d3 force graph layout and its react bindings are really useful to make graphs that are kinetic, cute, fun, and descriptive, with very low effort using reagent in CLJS.
Going beyond the second order of connections (single parent channel → children → grandchildren) seems too heavy for a public-facing web app using a medium-size social website. I think this is the appropriate scope.
Contributions are welcome. The UI framework I'm most comfortable with is re-frame, so this whole app is built in clojurescript with re-frame.
Native language additions are easiest, however, the whole JS/React/Node package ecosystem is at arm's reach and running isolated JS scripts on demand (maybe TS too) is also pretty easy.
The current build is manually published and may not reflect the most recent changes. You can test the latest with:
-
A IDE supporting Clojure
-
A web browser with CORS security policies disabled.
Example:
rm -r /tmp/chro/ # Be careful open -na Chromium --args --disable-web-security --user-data-dir="/tmp/chro"
- A clone of this repo
- The commands below
Tasks
- re-frame-http-fx to better integrate are.na API requests into re-frame handlers (1 2)
- Better status output
- Better division between state, logic, and flavor
- Redo GET loops
- Separate request flows
- Original channel attributes / 0 order
- Directly connected channels / 1st order
- Mutually connected channels / 2nd order
- Node connectivity
- All 1st order connect to 0 order
- All 2nd order connect to relevant connections(!) not parents
- Request pagination
- Node styling
- Node size within variance by order
- Node random color within variance by order
- Oauth(?) realized it's unnecessary for an initial build
- Add hover info block
- Flow layout and add visuals
- UI refine
- Kill nonessential inputs
- Re-theme
- More advanced button visibility state
- Funny anim block
- Maximize content in space
- Better loading / button visibility logic
- Mobile layout fix
(archival)
Old todo
- Channel info
- Restyle
- Add more information
- Progress bar for 1st order % completed callbacks
- Gifs loader
- Fix tangent gif
- Sliding doors
- Make sure sliding doors don’t lag (I think this is from 10x)
- Input
- Retime buttons
- Sliding door on load
- Skip intro
- Mobile layout
- Reflow properly
- Set graph area dimensions on load based on window size
- Error handling
- Private channel silent fail
- More descriptive progress logs
- Optimizing the way the app makes series of potentially many API requests
- Further developing the styles of graph nodes and links. Basic react interop in CLJS is very easy but difficult to scale.
- More fun features to interact with the visualization
- Accessibility guidance
Run this to work on the project. For now you can include your own token in rf.cljs. The token is only necessary for private channels.
npm i
npm run watch # Or jack in
open http://localhost:8280