In the previous tutorial we’ve learned how to make a new visualization tool in Vizabi by combining exising components. But what if a component we need doesn’t exist? Well, we need to make a new one.
In this tutorial we will do the following:
we will start with a tool definition, like we had previously
in the tool definition we will add a time slider and a component that doesn’t exist yet
we will then define that new component
we will connect the component to the models
we will add stuff the component should do when it’s loaded
we will add D3 magic so that things appear on the screen
we will add event binding, so that stuff would redraw on changes of time slider or resize
Start with a tool definition
Let our new tool be a simple bar chart with bars that change height over time.
Here we connect D3, Vizabi js and css, define a placeholder on the page and call Vizabi to render myBarChart in that placeholder without any configurations.
Now let’s define tool “myBarChart” (before calling Vizabi):
Including components in the tool
Let’s include a time slider component. First we choose which component to use, by providing its name. Once Vizabi is defined, we can stop on a breakpoint and check Vizabi.Component.getCollection() to see which components are available.
Then we give a placeholder selector, if we need the component to be rendered on screen somewhere (these placeholdes are defined by the template in Tool.js).
Finally, we list the models our component should have access to. The result would be:
We will add one more component, our own ‘myBarChartComponent’. It does not exist yet, but we will make it soon.
Creating a new component
As with the tool, let’s start from an outline
Component.init: connect the component to the models
The init function will have the following:
Here we have defined a template with an empty SVG element and connected the component to models.
Component.readyOnce: add stuff the component should do when it’s loaded
This function is only called once after the data model and the dom are both ready for the first time. This allows to do the preparations we don’t need to repeat every time when redrawing the bars.
Component.redraw: add D3 magic so that things appear on the screen
This function requests the data for the current time point and updates the visuals