Todo: New Viz

[milapbhojak]

Hey there,

Thanks airbnb for making this open source. I am Product Designer from CS and ML background. I can see Caravel TODO and found New viz task which includes.

• Maps that use geocodes
• Time animated scatter plots
• Horizon charts
• Calendar heatmap
• Chord diagram

I would love to contribute. It would be really great if I would get to know more about this so that i could create first draft of design.

Thanks, Milap :)

[gbrian]

+1

[mistercrunch]

Awesome, welcome on board! First start by reading the CONTRIBUTING.md and set up a working dev environment. Adding a new visualization consist of: 1) defining a class that derives BaseViz in viz.py, there are tons of examples in that file 2) add and entry in sourceMap here https://github.com/airbnb/caravel/blob/master/caravel/assets/javascripts/modules/caravel.js#L8 3) add a the js file in the assets/visualizations folder, you probably want to analyze/copy another simple viz file and alter it from there

Maybe next time we write a clean PR adding a new viz we can use it as a template, and eventually write a nice tutorial on how to create a new one.

[williaster]

As we begin to add more visualizations, I would like to more clearly define the chart API on the JS side of things, I'll post some more ideas here tomorrow.

[milapbhojak]

@mistercrunch Okay, Got it Thanks! @williaster I would like to get feedback from you on viz mock-ups before I start coding. Looking forward for more ideas. Thanks!

[gbrian]

Hi, Just found couple of graph libraries with tons of graphs I'd love to use ;) adding new ones with current visualization model looks quite feasible, don't you?

• http://ecomfe.github.io/echarts/index-en.html
• https://github.com/mbostock/d3/wiki/Gallery

[milapbhojak]

@gbrian Both libraries looks good. I like eChart's Chord diagrams. Thanks for sharing :)

[williaster]

Sorry for the slow reply on this. long term I think we're considering moving the entire front end to React. That likely means that visualizations should easily wrapped as React components, something along these lines:

const propTypes = { data: PropTypes.array, width: PropTypes.number, height: PropTypes.number, margin: PropTypes.shape({ left: PropTypes.number, top: PropTypes.number, right: PropTypes.number, bottom: PropTypes.number }) };`

const Chart = React.createClass({

getDefaultProps() { return defaultProps; },

componentDidMount() { const container = this.refs.chart; chart.create(container, this.props); },

componentDidUpdate() { chart.update(this.props); },

componentWillUnmount() { chart.destroy(); },

render() { const { width, height } = this.props; return ( <div ref="chart" className="vis-chart" style={{ width: '${width}px', height: '${height}px' }} /> ); } });

Each chart should then clearly implement a create(), update(), and destroy() method, and props defines any customizable attribute or accessor of the chart. With this setup the update() has to handle updates for any prop. Right now the vis's are very inconsistent for the refresh() method, most simply call render() again, and are written in a way that depends on the Slice object (i.e., they are not modular). We also should eventually also update the Python side to make it even easier to dropin new vis's as plugins.

I also like the approach d3.chart takes because it is easily extensible with the hooks they provide into initialization, updating, transitions, etc.: https://bocoup.com/weblog/introducing-d3-chart

[philippfrenzel]

c3js.org

[mistercrunch]

This issue is very generic and many visualizations have been tackled. Feel free to reopen more specific issues targeting support for individual visualization.

[sbookworm]

@mistercrunch Hi Maxime, will caravel support echarts?

[ascott]

@sbookworm i'm assuming you are talking about baidu's echarts. no plans to support echarts at this time. we will be continuing to use d3/nvd3 and moving to react for most of our ui components.

[sbookworm]

@ascott thanks Alanna, It will be wonderful that caravel has rich charts. I just want to learn d3 and contribute some. By the way, do we has IRC chat room? I cannot find the info in caravel home page

[github35]

@mistercrunch I added new viz according to your instruction and other examples (edit viz.py, add js, edit map in main.js)... but I am getting an error from explore.0.11.0.entry.js -- s.default[t.form_data.viz_type] is not a function -- not sure if I miss anything, do you have any idea? Thanks a lot!

[mistercrunch]

in dev mode npm run dev you should get a proper stack trace with good line numbers

[ajaiswal595]

Hi, i want to customize superset. But I have knowledge around javascript, angular, java, HTML ,CSS .

I am exploring python.

What sort of technology required to customize superset. Like removing the credential page, bookmarking dashboard page so directly can be rendered, and removing user role option. Last but not the least Adding custom visualization.

I want to integrate superset in one of my product. Which actually running on Angular2 and Node.js.