Both the Fun of VR and the Insight of Data Viz (Updated)

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:

firsttry

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!

UPDATE:

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…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s