VizHub Improvements
A lot has changed since VizHub 1.0, not least of which is React support!
Here’s a rundown of incremental improvements over the past few months.
React Support
Now you can write that silky smooth JSX you know and love to make data visualizations and more in VizHub. This was accomplished by making use of Bublé as a Rollup plugin for its JSX transpilation, and also making tweaks to the CodeMirror setup to support JSX syntax highlighting.
Being able to write conventional React code, complete with JXS and ES6 modules, without the bulkiness of Babel or WebPack, feels like a huge step forward for VizHub. It makes the platform more appealing as a general purpose “React sandbox”, which hopefully will attract more users.
Thumbnails
Every visualization now has its own automatically generated screenshot images. This feature has paved the way for all other features that depend on having images, large or small.
The first time I saw all the thumbnails was when viewing a test page that just showed all the thumbnails. I was overwhelmed to see all the works the folks have created in VizHub. It’s awesome to see the platform taking off like this. So, I went ahead and made that test program the new home page. Also, thumbnails show up on every user’s profile page.
Create Visualization Page
Another place the thumbnails were used is in the expansion of the “Create Visualization” page. Now you can choose from a set of visualization templates, each of which has an embedded tutorial video (from dataviz-course-2018/).
Thumbnails Tree
One of the core visions for VizHub is that the “Fork & Modify” proliferation of works can itself be visualized, and this visualization can be a part of the platform. A significant step in this direction is the first prototype of the Thumbnails Tree.
After trying and failing many times to create the flowing branching structure I had sketched in my notebook, I finally found the right parameters and connection drawing hacks for the tree layout to get it to look “right”.
This tree layout captures the branching structure inherent in software development. It could also be a great way of navigating educational resources, as it encapsulates the dependency structure quite well.
Seeing this also made me realize that people are using the “Fork” button essentially as a “Save” button, just to save their work. This suggests there’s a need for a restorable revision history feature. As it stands there’s an inherent insecurity in editing content, because there’s no way to “get back to the way it was”.
Unfurling
Now when you share a VizHub link on social media, it unfurls!
Full Screen Mode
A widely requested feature of filling your display with your dataviz is here!
It’s not fully full screen, but it opens a new tab where the content fills the tab. What do you think, should it be fully full screen and take over the display on the same page? Not sure what’s best here…
Clean Console
Having stale messages and errorsin the console was confusing for many users, myself included! Now, the console is cleared out each time the program runs, so you can be sure that the messages you’re seeing are fresh. I tried out a number of other online editors and was surprised to see how few of them implement this feature. Try your favorite and see if you see stale console content!
Support for Cyrillic and Other Language Scripts
I was pleasantly surprised to see a new issue filed against VizHub “Cyrillic does not show up in Hello VizHub”. I investigated and found a solution. Now VizHub supports Cyrillic! Awesomely, my proposed fix was incorporated into the upstream magic-string library by @Rich_Harris, fixing a related issue in the Svelte REPL. The magic of Open Source!
The Road Ahead
I’m officially signed on to teach the online Data Visualization graduate course at Worcester Polytechnic Institute again this Fall, and I’m planning to use VizHub for that course again. Using VizHub for teaching the course in 2018 yielded a massive amount of real user feedback that will be incorporated into VizHub 2.0, which is planned to be ready for use by the time September rolls around.
VizHub 2.0 plans are for another post, but for now I’ll just say that a few of the “core features” that are most sorely missing include:
- Real-time document editing. The current setup has caused loads of problems around saving, even lost work. Having a visualization open in multiple tabs at once wreaks havoc, as when one writes it clobbers the other. This is a serious usability problem that needs a proper solution.
- Revision history. Students used the “Fork” feature in place of a “Save” feature, as it was the only way to do non-destructive editing. Editing a visualization should not make its previous version unreachable, rather there should be a navigable revision history, a trail of development.
- Comments. Giving feedback is such a core part of teaching, its a shame I had to give feedback on student work in a separate platform (Canvas). Ideally there would be a YouTube-style comments section, so that visualization creators and their viewers can give and receive feedback.
Thanks for reading! Comments & feedback warmly welcome :)
