reviz.ioSeattle, WA, Berkeley CA

  • 155 Commits
  • 88 Pushes
  • 25 Deploys
Launch Site

reviz.io

By Pandabits

Screencast
Quick Intro

Add local and external data sources, add your code, choose a visualization - reviz.io allows you to easily code and interact with your data.

Description

reviz.io is our take on having a 'jsfiddle'-like system for interacting with data. We wanted to make it easy for people to be able to add their own data (in the form of a CSV file), whether by copy-pasting it into the browser or by providing the URL for a Google Spreadsheet or other data source.

Once the data is in, reviz.io allows you to add HTML/JS/CSS to visualize it and see the results right next to it. You can also choose from a set of pre-built visualizations and see and even edit the code generated!

Finally, you can share your creation with others by just giving them a URL, or export it to HTML or SVG.

Judging Instructions

We've created a couple of examples that you can view and play around with:

Feel free to edit these inline, but please don't hit 'Save', so that other judges can see them as well.

Here are also a couple of CSV files for you to play with:

You can also paste some local data if you want.

Our original idea was going to tie this into some public data sources directly from the UI (such as some Google Spreadsheets), but we didn't quite get to it in time, but you can see how it could be added. We also made it quite easy to add new pre-built visualizations, we just didn't have to implement more of them.

Browsers: we've only really tested on Chrome.

IMPORTANT NOTE : turns out there is a bug in Firefox and IE with how dynamic IFrames are handled, which causes issues. Highly recommended to use Chrome!

What they Used

The list of libraries and services are below we used are below. One interesting thing we did was use Node streams on the server to proxy the external data files to work around browser cross-domain issues. We also detect on the browser whether your data is local (in-the-browser) vs. remote, so that we can always use an async fetch model.

Database: MongoDB

JS:

  • Backgrid
  • Backbone
  • Select2
  • X-Editable
  • jQuery
  • Ace Editor
  • Async.js
  • D3
  • FileSave
  • xhook.js
  • require.js
  • jQuery UI
  • toBlob
  • Underscore (with underscore.nest and underscore.string)

CSS:

  • Bootstrap
  • Bootflat

Node.js:

  • Express
  • EJS
  • Mongoose
  • uuid
  • winston
  • underscore
  • request
  • shortid
Who

Votes

Your Vote

Voting is now closed.

Other Votes

  • (26)
  • contestant
  • judge

    tableflip.io

    I really like the idea of a jsfiddle for data-vis. I grabbed a worldbank csv file but struggled to make any visualisations that made sense, but that may be just due to fact that meaningful data vis is hard, even with a good leg up like this.

  • judge

    Sellside

    Great app, I love this concept. I think there will definitely be demand for this. Adding some popovers to guide the user will help.

  • contestant

    USP

    Awesome idea! Well executed!

  • judge

    RolePoint

  • judge
  • contestant

    Looks neat! There should have been examples on the landing page to make it easier to get started.

    When using an example, trying to select a different Viz throws an error that the basic empty data set was empty. The example appeared to load the dataset in via javascript, which seems to work around the first-class dataset tracking of Viz itself.

    The editor looks pretty nice, but the categories and one-file-at-a-time (with no indication of other files in the Vis without clicking on the tabs) makes it hard to navigate.

    I was hoping that there would be a library here on top d3 to make it easier to create some of these visualizations.

    Overall, still a really neat entry.

    • itay
      contestant

      Thanks for the feedback! We definitely wanted to do a better job with a "walkthrough", but ran out of time. Any ideas on what you'd like to see there?

      For the "one file at a time" - what exactly do you mean? Just want to make sure we can work on fixing it.

  • judge

    Twilio

    I like the concept a lot - "jsfiddle for data" is something that could definitely appeal to a niche underserved by web-based tools. I was also impressed by how functional everything was, especially given a two person team.

    Design-wise, I didn't feel the site was super intuitive to use. I launched the app first before reading the "Judging Instructions", which would have led me down a different path, but the home page kind of threw me.

    On the home page, I created a new project numerous times before I realized you could monkey around with pre-built data sets by clicking on the un-labeled images below the primary call-to-action on the home page. If you were to take this site to production, starting off with the sample data sets would be key to giving people a sense of what the tool does. I would make the primary CTA "See How It Works", and start with a guided tour of an example data set.

    Also, in the editing view, it took me a little while to discover the "Run" button in the top right corner of the page. While editing source on the left and interacting with all those elements of the left side, I didn't realize the upper right had meaning for those files right away. I also might just reload the visualization automatically after parameters are changed, so it's easy to twiddle knobs and see how the visualization changes.

    I bet there's an audience for this, very cool stuff.

  • contestant

    Great if the video had audio

  • contestant

    Good job!

  • judge

    Wow! This is the most complete app I've seen so far, and pretty cool data viz. I'd need to spend more time figuring out what to do with it :)

    • itay
      contestant

      Thanks - would love to hear any other feedback you have!

  • contestant

    BandPage

    Wow, looks like you got a lot of stuff done in a short amount of time! The example links were a great idea. It was still kind of hard for me to figure out how to configure the visualizations, but I got the feeling that if I spent more time it would become more apparent... just one of those things that you have to sort of know what you're doing w/ the dataset.

    • itay
      contestant

      Thanks for the feedback - I'd love to know what you think we could do better to make it easier to understand.

      One thing we were thinking about was adding a kind of "first-time-run" or "guided tour" experience, just to give people ideas of what they can do. Any ideas welcome!

  • contestant

    IOKI

  • contestant
  • contestant

    Printly.pk

    Good idea, a demo or getting started guide would have made it easier to give it a try.

  • contestant
  • contestant

    Activimetrics LLC

    Great stuff, very complete project, very clean design. However, I gave a low useful score as it didn't work for me. I uploaded a CSV file I have handy on the internet, and tried to pick a viz and nothing happened (yes I clicked on run) and it wasn't clear to me how to make something happen. Perhaps it is because I am on Firefox, not Chrome. Sorry I don't have Chrome on my laptop.

    The low innovation is because I already use D3 to do my data visualizations.

    But really, if you iron out all this issues, this could be a great tool for exploratory work prior to digging in and doing custom development.

    • itay
      contestant

      Thanks for the feedback - seems like you're right, it is totally busted on Firefox right now! So sorry, I guess that's what happens when you don't test it :)

      I spent a little bit of time debugging this, and the fix is pretty simple (the bug is here: http://stackoverflow.com/questions/8394438/create-an-iframe-then-append-data-to-it-with-jquery) - basically, since we're dynamically creating IFrames, on FF there is a bug where it needs time to "settle" in the DOM or something. This is why the web can't have nice things :D

      If you do get a chance to try it out in Chrome, I'd love to get your feedback.

  • judge

    Nodejitsu

    I've been using http://bl.ocks.org for a long time (e.g. http://bl.ocks.org/indexzero/6043821), but I've always wanted a simple way to edit those scripts in the browser. revis.io is the answer.

    Great work!

    • itay
      contestant

      bl.ocks.org was a huge inspiration, and we've used it extensively. I always wanted to be able to do it live though, and not have to paste big CSV files and deal with cross-domain and other such problems - leading to this idea.

      Would love to hear what else you think we could to improve it!

  • judge

    DIY

    Really sweet implementation and feels pretty polished so far. There are a few places where loading indicators would be nice and just a general perf pass, but all in all I can see this being pretty useful :D.

    • itay
      contestant

      Thanks for the feedback! I'd love to hear where you think we could improve loading indicators - we added the little spinny very late in the game, so we did it rather quickly.

    • drk
      judge

      Really the only place I noticed was when running the example. Generating the vis is pretty fast, but it's about 2 seconds of a blank canvas (from the http://reviz.io/viz/gJnc03G3N example at least) before rendering.

    • itay
      contestant

      Ah yes, good point! I think we can also probably add "auto-run" as a default, so you don't have to click run all the time! All these things we could have done, if we only had time :)

  • judge

    nearForm

  • contestant

    Focus the Web

    Nice app! Interesting concept.

IMPORTANT DATES

REGISTRATION
SEP 17
COMPETITION
NOV 9-11 UTC
JUDGING
NOV 11-17
WINNERS
NOV 18

Thank you to our Platinum Sponsors