Adding new visualizations

[pgp44]

Hello

Not sure this is the correct place to post as it's not an issue but a question.

Anyway, is there documentation on how to add visualisations to Caravel?

Many thanks

Peter!

[ascott]

hey peter!

good question. this is something i want to work on in the coming 2-3 months. good to know there is interest in it. i'll keep this thread posted on my progress.

[mistercrunch]

@pgp44 & @ascott I just tagged a few PRs that are good examples of adding a new visualization. It requires touching a fair number of files, but these 3 examples map out the process.

Here they are:
https://github.com/airbnb/caravel/pulls?q=is%3Apr+label%3Aexample+is%3Aclosed

We may want to change the code to be organized on a per-visiualization basis. Say each viz consists of a folder with a set of required files.

[ascott]

thanks @mistercrunch. i think a folder for each viz with required files makes a lot of sense. @pgp44 happy to field questions if you want to share work in progress.

[pgp44]

@mistercrunch @ascott - good news! Certainly interested in all that.

I have been trying to understand how the things interact. I copied a viz (big numbers) and adapted it a bit, just to get a feeling for it. That worked out fine, but I am missing information on what the python code for each viz is taking care of. Looks like data preparation at first sight? It's also not obvious to me how the ui part is created for each viz.

What would be useful is a list of steps and a high level description of what each piece of code in the flow ,from data to viz, is responsible for.

[mistercrunch]

@pgp44 the only issue is we probably don't want to document the current process if we're going to alter it.

To me the examples are fairly straightforward and many have managed to figure it out already (4-5 people have contributed visualizations).

@ascott the only issue with the folder idea is do we bring python code in the webpack area of the code, or do we bring javascript in the python area? symlnks?

[ascott]

right, i don't think we want to bring the python code in the js folder. i think ideally we would have 1 python file for the viz in a python folder, and a folder with css/js/markup in the assets folder. and maybe a configuration file where the new viz can be added.

[pgp44]

@mistercrunch I was not necessarily looking for "real" documentation,but more like a list of ~5 bullets telling what part of the pieces that need to be added do what (high level). It's (just guessing) 10 minutes of work for someone who knows the stuff.

I am sure others (and I guess I as well) can find out what is needed but it might take me the better part of a day, which I would rather spend writing the viz code, code I would happily contribute. One thing I am interested in is adding other libraries (plot.ly and highcharts to start).

Anyway, from what I have seen, I like Caravel a lot and I appreciate the direction it is going. Looking forward to how it will evolve.

[niconoe]

@ascott, any progress on having "easy to add" viz in folders? We're super interested in that since I'm currently developing visualisation that are probably too specialized to be merged in Caravel, but we don't think maintaining our fork is a long-term solution. Is there something we can do to help this happening?

Thanks!

[niks-git]

@mistercrunch
I tried creating a new viz type for "dual axis bar and line" graph by following your steps using the chord example, but despite everything, I am still not able to see my newly created viz type in the drop down list after i restart the superset server.

Note: In your example, the code maintains a list of viz_types, but the latest code on which I am working computes that list using globals().

Can you suggest where could I be going wrong?

Files added: dualaxis_bar_line.css/.jsx/.png
Files updated: main.js, viz.py, visTypes.js
Files not modified: package.json

[syazshafei]

@mistercrunch I was not necessarily looking for "real" documentation,but more like a list of ~5 bullets telling what part of the pieces that need to be added do what (high level). It's (just guessing) 10 minutes of work for someone who knows the stuff.

I am sure others (and I guess I as well) can find out what is needed but it might take me the better part of a day, which I would rather spend writing the viz code, code I would happily contribute. One thing I am interested in is adding other libraries (plot.ly and highcharts to start).

Anyway, from what I have seen, I like Caravel a lot and I appreciate the direction it is going. Looking forward to how it will evolve.

Is there a way to add highcharts libraries to superset?