How We Won The All GoodData Hackathon

Petr Cvengros & Team

This is the story that about the Team that won our All Data Hackathon earlier this year.

April 8th: All Data Hackathon is coming in two days. I definitely want to participate. It’s about time to look for a hackathon project. Let me follow Jiri’s advice and email Martin Schmied to find out what he’s up to.

April 9th: Martin tells me he want’s to do a Logical Data Model visualization tool and sends me a short PoC he put together in two hours. There’s huge room for improvement in the way you can visualize the LDM in GoodData so this sounds like a problem worth solving. I’m in. Meanwhile Marek Gerhart joins the team, so now we have a team of two hackers in Prague, one in SF, and a good project to work on. Ready to go!

Model

Hackday 1 (April 10th)

9 AM PST Hackathon Kick-off, we have a brief team hangout. We agree on building the app in GoodData Labs. The environment has all we need for development and when we’re done, it will be easy to publish the the app, so other people can enjoy it.

We’re going to do some svg stuff, so we don’t need any other special JavaScript framework like Ember, we’ll just hack it in plain old JavaScript. For the model visualization we’ll use Dagre D3, a graph visualization library working on top of d3.js. The visualization will be rendered purely in client side JavaScript, so we can make things more interactive and we don’t have to do any server side coding.

The main issue with the current model visualizations is that big projects have big models and these are difficult to work with. So our visualizer will focus on making models easy to explore and navigate, no matter how complex they may be. First features we can think of is edge highlighting and search. We divide the work between the three of us so that we can hack in parallel. 9.30 AM PST GoodData Labs git repository is forked, a new Labs app is created from the template, and the PoC code is pushed there. Now we have a common place where everyone can push their changes. This is important as we want to see the results continuously rather than spend our precious time merging our code.

Martin focuses on the d3 stuff as he’s the most experienced guy on our team in that area. He implements some crazy recursive functions to highlight the edges that are coming from and to the dataset on mouse hover (see screenshot below)

Modeler 1

Marek concentrates on the search feature. He builds an index on top of the model so that the search works real-time even for big models. For visualization and autocomplete he uses the jQuery UI to make things smooth and good looking.

Search

My job is to bring the actual model from GoodData API to our app. Fortunately we have a new API resource to get the whole model at once. To make things even easier, I use GoodData JavaScript SDK that handles authentication to the GoodData platform and other tedious tasks.

Our current model visualizations are polluted with many time and date dimensions that add no value to the user, so we decide to implement a feature that puts all the time and date dimensions inline to the datasets. We also take some ideas from the CloudConnect modeler and use different colors for fact tables and dimensions.

11.30 AM PST Electricity outage hits the Prague office. Lucky enough, Martin and Marek have their laptops charged and they use flashlights to reach their RedBull cans. All good!

5.02 PM PST (2.00 AM CET) Marek pushes today’s last commit and goes home to get some sleep. I’m working on expanding and collapsing the dataset rectangles on click. That way the datasets with many facts and attributes won’t make the visualization difficult to read. Then I prepare a few slides for the final presentation.

Hackday 2 (April 11)

1 AM PST (10 AM CET) Everyone is awake and we decide to build another feature - hiding collapsed datasets. This will make it easy for users to explore even complex datasets. I’m passing the baton to Martin and Marek and go to sleep. The two work on hiding the collapsed datasets, rotating the model, and reversing arrows between datasets (just for fun).

Visualizer

During the day Michal Manak helps us with some graphics and the overall visual style, so our apps looks awesome and we even come up with an app icon.

Icon

8 AM PST (5 PM CET) We have a morning hangout to discuss the progress. Martin and Marek show me the last version and it looks just awesome. All code is in our git repository, so one pull is all I need to fetch the latest code. After a few scary moments I do a last minute 2-character fix and have the app up and running. I ask our consulting guys for a project with a real nasty model and do a few tweaks to the slides. Everything looks good and we’re ready for the final presentation!

9.45 AM PST (6.45 PM CET) The final presentation begins. We’re one of the last teams to present. Everyone looks tired but the Awesome Visualizer inspires some real excitement!

10 AM PST (7 PM CET) Final ceremony .. and the Awesome LDM Visualizer wins the grand prize!

April 14th After a few clean ups in our code, we send a pull request to the Labs repository, QA checks it out, and the Awesome Visualizer is live in GoodData Labs! Such quick and effective hacking is only possible thanks to the GoodData platform API. And since the API is open, everyone can and is welcome to hack too!


About The Author

Petr Cvengros Petr Cvengros Product Manager, Expert Services - hacks on top of the GoodData Platform API to create new programs, make customers happier and consulting services more productive. Before joining GoodData, Petr worked in Deloitte Enterprise Risk Services as a consultant. Email petr.cvengros@gooddata.com

Dev's Newsletter

Subscribe Now