Videos are a great format to walk the audience through not one but a handful of data visualizations and to tell a story, a deep insight we draw from our vast database. While Graphiq has a lot of experience building and scaling web products, it doesn’t have any experience building videos.
There were two goals I wanted to achieve when I started making the framework for Graphiq videos:
Like every popular video-making application, we organize our videos as a list of slides (or clips), conceptually like this in code — All the code snippets in this article are simplified for demo purpose. They are not actual samples of code we use in the production environment.
Within each slide, I decided to make the HTML structure identical, just a list of the elements the slide contains:
No structure, no nesting, just elements; everything else relies on the classes and styles.
From webpage to video, one big change in design and front-end code is the page is no longer a scrolling flow but a defined 16:9 screen.
This means not only new challenges since most CSS layout techniques do not apply, but also more freedom—everything can be
position: absolute; with a defined place. This structure also eliminated the need for having structural HTML code in the slides.
So I decided to do exactly that, have
.slide fill up the entire page with a fixed position, and every element within be set to position absolute.
With absolute positioning, how to place the elements in the correct space becomes the next question.
We need the slide to scale with the viewpoint so we can’t use absolute units like pixels. Among relative units, it’s either
vh because they are more predictable. Also, we could use
vh within width calculation and
vw in height.
% leads to much more complicated calculations.
In addition, we wanted the text to size with the slide as well. The
font-size attribute would be processed as a percentage of the inherited font size, not the parent
<div> height, where
vh are still based on the viewpoint size.
That’s why we wrote the slide layouts in
vh units moving forward.
Before jumping to create different classes for different layouts, I brainstormed about possible templates and came up with a set of simple guidelines:
I then created all possible styles for every element that could be put into a slide. Take slide title as an example:
After that, each layout template becomes just a combination of element classes. With SASS’s
@extend feature, it’s very easy to write:
Some of the templates we have:
In addition to layout, we also wanted to use classes to give slides different themes.
Again, the themes had to be flexible. So we defined everything that should be controlled by the theme as a SASS object.
We created a SASS mixin to generate style overrides for slides with theme classes.
Then, we can call the mixin to generate style overrides for themed slides.
A quick demo to show how easy it is to switch layouts and themes. It is also avaliable on CodePen.
Put news article in context with data.
Generated by a video template for hundreds of colleges.
After making this video technology, Wilson and I also created a web-based video editor so our knowledge engineers can organize Graphiq content into engaging and scalable videos.
I hope you find this article useful. If you want to get an email every time I write something new, subscribe to the list below.