I’m back with an update to a bar chart I made a couple months ago. That bar chart simply took my Github language stats, graphed them in a bar chart, and then prettified the bars on the chart with a wave of timed color change.
I decided to make it even less useful:
Yep, this is a first pass at turning it into a VR app. I would like to stress the first-passed-ness of this first pass.
Anyway, you can check it out, along with the 2D version, on my bl.ocks.org page.
My new code literally replaces the SVG element from the 2D version with the A-SCENE wrapper element provided by A-Frame. A-Frame wraps the webVR API (the major browsers all ship with at least a version 1 of the spec in their up-to-date versions). Then I replace the SVG-related DOM manipulations in my D3 code with A-Frame-related elements, tweak it here and there, and voilà you have yourself an even more distracting and less useful bar chart.
The README I added to my Gist lists some to-dos like leveraging A-Frame’s ‘cursor’ to bring back my informational tooltips and correcting the bars’ height and the black plane’s size. But I’ll come back here later to add some code to this post and hopefully have those things fixed!
I’m back! I have updated the bar graph so that the bars are manageable (warning: the heights are not accurate though!). On my second pass I added the html/css tooltip back, but found out that in VR mode the tooltip, like the wave button, was not visible. So I updated the tooltip to be rendered in AFrame elements and voilà it worked! Well, sort of. I’m actually not sure what’s up with the font size. Anyway, I’ll be back later. I have more work to do on it…