New chart type : Chord Diagrams #3013

mistercrunch · 2017-06-21T04:35:10Z

This PR is used as an example on how to add new visualizations to Superset, find comments in the code that put things into perspective.

graceguo-supercat

LGTM!!

mistercrunch · 2017-06-22T16:32:37Z

superset/assets/javascripts/explore/stores/visTypes.js

@@ -622,6 +624,37 @@ const visTypes = {
      },
    },
  },
+  chord: {


This file contains configuration of the new chord viz type. It defines the panels of controls that should render on the left panel of the explore view.

controlSetRows references controls defined in controls.jsx, and can have one or two items and that defines how many items will render on that row.

This file contains configuration of the new chord viz type. It defines the panels of controls that should render on the left panel of the explore view.
controlSetRows references controls defined in controls.jsx, and can have one or two items and that defines how many items will render on that row.

Could I please ask some questiones? I want to show a metric and some filter in the superset dashboard, after reading some articles, i am confused because the configuration needed to be changed does not exist in the files. For example,
superset/assets/javascripts/explore/stores/visTypes.js, this file does not exist in the current code file. So, how can i add a metric in the superset now and which files should i modify in order to achieve this?

mistercrunch · 2017-06-22T16:36:35Z

superset/assets/javascripts/explore/stores/visTypes.js

+        ],
+      },
+    ],
+    controlOverrides: {


controlOverrides allows you to override the control configuration coming from controls.jsx. By reusing the same control across visualizations we allow continuity in the sense that the values are carried over when going from a viz type to the next. For instance as you go from one viz type to the next, it's nice to have metrics carried over, though you might want a slightly different label or tooltip in the different contexts, this is what the overrides are for.

mistercrunch · 2017-06-22T16:41:53Z

superset/assets/javascripts/explore/stores/controls.jsx

    default: [],
    description: 'One or many controls to pivot as columns',
+    optionRenderer: c => <ColumnOption column={c} />,


This file (controls.jsx) holds configuration for a "pool" of controls that can be used across visualizations. When creating a new visualization, you'll want to reuse controls that already exist. If the exact control that you need doesn't exist already, you'll want to create it here.

Note that type references controls React components defined in javascripts/explore/component/controls/.

Also note that controls can be dynamic with mapStateToProps, allowing to map anything from the app's state into a prop for the component. This allows in this case to get configuration elements proper to the datasource in this case, but can also be used to change a control based on another control's value.

mistercrunch · 2017-06-22T16:43:10Z

superset/assets/visualizations/chord.css

@@ -0,0 +1,17 @@
+.chord svg #circle circle {


by convention each visualization has its own css file, and the entries need to be "namespaced" properly to make sure that one viz's css doesn't spill and apply to other viz types

mistercrunch · 2017-06-22T16:49:01Z

superset/assets/visualizations/chord.jsx

+import { category21 } from '../javascripts/modules/colors';
+import './chord.css';
+
+function chordViz(slice, json) {


This function is the heart of this new visualization, the framework will pass it a slice and json object, and expects you to mutate the dom element referenced in the slice object. It will be called whenever the slice needs to be rendered or re-rendered. Knowing that this function may be called many times, you can use closures here if you want to persists certain things in the module namespace.

The json objects corresponds to the data returned from running your query and related context. To see exactly what you should expect in here you can click the json button in the explore view.

The slice object contains, amongst other things, a reference to the dom element that you should mutate.

mistercrunch · 2017-06-22T19:22:01Z

superset/assets/visualizations/chord.jsx

+
+  const div = d3.select(slice.selector);
+  const nodes = json.data.nodes;
+  const fd = slice.formData;


On of the things that the slice object exposes isf the information provided by the user controls. The keys of this slice.formData object are the control's "id" defined in controls.jsx and their values are the ones provided by the user.

mistercrunch · 2017-06-22T19:22:56Z

superset/assets/visualizations/chord.jsx

+  const fd = slice.formData;
+  const f = d3.format(fd.y_axis_format);
+
+  const width = slice.width();


The slice object exposes width() and height() methods that can be useful while rendering your chart.

mistercrunch · 2017-06-22T19:23:36Z

superset/assets/visualizations/chord.jsx

+  });
+}
+
+module.exports = chordViz;


that function should be exported as the default export for the visualization module

mistercrunch · 2017-06-22T19:24:33Z

superset/assets/visualizations/main.js

@@ -10,6 +10,7 @@ const vizMap = {
  cal_heatmap: require('./cal_heatmap.js'),
  compare: require('./nvd3_vis.js'),
  directed_force: require('./directed_force.js'),
+  chord: require('./chord.jsx'),


simply adding the mapping from the chord visualization type to the appropriate javascript modules. It's possible here to have multiple visualization types target the same module (look at nvd3.js!)

mistercrunch · 2017-06-22T19:25:33Z

superset/viz.py

@@ -1231,6 +1232,39 @@ def get_data(self, df):
        return df.to_dict(orient='records')


+class ChordViz(BaseViz):


This is the backend part of this component, you can derive BaseViz or other BaseViz derivatives

mistercrunch · 2017-06-22T19:27:45Z

superset/viz.py

+    credits = '<a href="https://github.com/d3/d3-chord">Bostock</a>'
+    is_timeseries = False
+
+    def query_obj(self):


You need to override query_obj and it has to return a query object, which is essentially a Python dict with key/values that are expected by the query method of the connectors. Until this is better documented, you can look at the connector's Datasource query method to get a sense for it.

mistercrunch · 2017-06-22T19:30:00Z

superset/viz.py

+        qry['metrics'] = [fd.get('metric')]
+        return qry
+
+    def get_data(self, df):


get_data receives a pandas dataframe (df) that correspond to what is returned when applying your query object defined above. The shape of that dataframe is related to what you ask for in that query_obj.

Now whatever get_data returns needs to be json-serializable, and will be made available to the javascript visualization function as payload.data.

mistercrunch · 2017-06-22T19:31:27Z

superset/assets/visualizations/chord.jsx

+  slice.container.html('');
+
+  const div = d3.select(slice.selector);
+  const nodes = json.data.nodes;


json.data corresponds exactly to what is returned in the backend ChordViz.get_data lower in this PR.

Visitante · 2017-07-10T19:01:45Z

Mistercrunch, I'm new to Superset. We are doing a POC here at work, and we want to know how easy it would be to add a new visualization to it. So I just updated all the files from your example to my superset local server, but the new visualization is not showing on the visualization tab.
Do I need to change anything else? I´ve restarted the server as well.
edit: I´m using version 0.18.5.

xrmx · 2017-07-10T19:29:36Z

@Visitante just use master as this PR has been merged there.

Visitante · 2017-07-10T19:55:51Z

@xrmx thanks for the fast reply. The point of my POC is to see how hard it would be to add a new visualization to Superset.
I´ve followed Mistercrunch example and I was not able to make the new visualization appear on dashboard.

apoku · 2017-08-17T17:03:22Z

Hi! Our team followed the FAQ on the https://superset.incubator.apache.org/faq.html page to this git thread.

Is there a mechanism for adding source for a new visualization type without manually building the Superset source? Since we are using Superset by installing via pip, is there a way to drop in new javascript files in a directory etc. that Superset knows to look for?

xrmx · 2017-08-17T17:10:07Z

@apoku nope

mistercrunch · 2017-08-17T19:44:53Z

@apoku thought quite a bit about that and given the modern javascript building pipeline there's no easy/clean way to do this without bundling all of Superset together. We may reorganize visualizations so that it's easier to maintain a fork. The idea would be to have all the code related to one each visualization (js & py) in a specific folder.

mistercrunch · 2017-08-17T19:46:20Z

@Visitante you're probably missing something like an entry in stores/visTypes.jsx

aliciaouyang · 2017-08-18T13:13:53Z

I get an error when trying to make a custom build so I can use the chord visualization: Error Message: Failed at superset@0.18.5 build script 'NODE_ENV=production webpack --colors --progress'. Is this referring to the missing entry in stores/visTypes.jsx?
Versions of npm and node I have:
npm v3.5.2
node v4.2.6

xrmx · 2017-08-18T13:20:11Z

@ouyangal the actual error would be helpful but please try to reproduce with a modern version of node (6+) and if you cannot upgrade to a node with npm 5+ try to build with yarn instead.

MTShannon · 2018-06-12T13:57:28Z

Have the file locations changed? I can't find "controls.jsx" in the stores folder.

HaiNguyenHuynh · 2018-06-21T10:37:30Z

The new path of "controls.jsx" is superset/assets/src/explore/controls.jsx

Leoleo0324 · 2018-11-20T09:49:32Z

Hello, excuse me, superset and druid combine, how to achieve year-on-year, month-to-month function?

ankit6373 · 2019-05-10T06:59:53Z

The code and file architecture of present version of superset seems very different. @mistercrunch Can you help me how to add new chart visualization in the current version of the superset.
There are a few things which I observed comparing present and previous version:
I can see in the present version. Superset is using superset -ui and there are common chart components like Chart Renderer, Chart and SuperChart to render charts. Also, the visTypes.js file is missing in the present version, instead there are separate visType kind of files for every visualization in explore/controlPanels Folder.

ankit6373 · 2019-05-10T07:03:05Z

Hey, did you add the visualization in the current version of superset. @MTShannon @HaiNguyenHuynh.
Please help me on this if your integration was successful.

mgulaydin · 2020-02-07T07:58:32Z

@ankit6373 hello, we also try to add new custom chart to current version of superset (0.35.2) but as you said it seems very different then the older versions. Did you manage how to add it?

srinivasjavvadi · 2020-04-10T13:30:55Z

mgulaydin hi. Please help me how to add new chart in current version superset

rusackas · 2020-07-13T04:31:06Z

Hi everyone,

It seems there are a lot of people still looking to build new viz components for Superset, and that's awesome! I hope that this recently published blog post can help get you started, using the latest tools and practices.

https://preset.io/blog/2020-07-02-hello-world/

Thanks!

Ihebbenali95 · 2024-05-09T18:11:15Z

Hello everyone, im running Apache superset on windows and i just want to customise a new chart thats not existing (traffic light chart for machine status).
i created the needed files (i think) and when i run npm run build i keep getting errors .
Does anyone have an idea how to make that work?

mistercrunch · 2024-05-09T19:36:08Z

Windows isn't officially supported, fire up a VM!

mistercrunch requested a review from graceguo-supercat June 21, 2017 04:35

mistercrunch force-pushed the chords branch from 3948880 to cf760db Compare June 21, 2017 04:51

New chart type : Chord Diagrams

52b86d8

mistercrunch force-pushed the chords branch from cf760db to 52b86d8 Compare June 21, 2017 21:35

graceguo-supercat approved these changes Jun 21, 2017

View reviewed changes

mistercrunch commented Jun 22, 2017

View reviewed changes

mistercrunch added the example label Jun 22, 2017

mistercrunch merged commit 7045018 into apache:master Jun 26, 2017

mistercrunch deleted the chords branch June 26, 2017 23:44

xiaohanyu mentioned this pull request Sep 27, 2017

Where is technical document #3519

Closed

Smilebags mentioned this pull request May 15, 2019

Example 'new visualisation' PRs no longer work #7509

Closed

3 tasks

vliweihan mentioned this pull request Nov 29, 2019

How is viz.py works #8685

Closed

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.19.0 labels Feb 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New chart type : Chord Diagrams #3013

New chart type : Chord Diagrams #3013

mistercrunch commented Jun 21, 2017 •

edited

Loading

graceguo-supercat left a comment

mistercrunch Jun 22, 2017

tiankongbiji1 Sep 15, 2020

mistercrunch Jun 22, 2017

mistercrunch Jun 22, 2017

mistercrunch Jun 22, 2017

mistercrunch Jun 22, 2017

mistercrunch Jun 22, 2017

mistercrunch Jun 22, 2017

mistercrunch Jun 22, 2017

mistercrunch Jun 22, 2017

mistercrunch Jun 22, 2017

mistercrunch Jun 22, 2017

mistercrunch Jun 22, 2017

mistercrunch Jun 22, 2017

Visitante commented Jul 10, 2017 •

edited

Loading

xrmx commented Jul 10, 2017

Visitante commented Jul 10, 2017

apoku commented Aug 17, 2017

xrmx commented Aug 17, 2017

mistercrunch commented Aug 17, 2017

mistercrunch commented Aug 17, 2017

aliciaouyang commented Aug 18, 2017

xrmx commented Aug 18, 2017

MTShannon commented Jun 12, 2018

HaiNguyenHuynh commented Jun 21, 2018

Leoleo0324 commented Nov 20, 2018

ankit6373 commented May 10, 2019 •

edited

Loading

ankit6373 commented May 10, 2019

mgulaydin commented Feb 7, 2020

srinivasjavvadi commented Apr 10, 2020 •

edited

Loading

rusackas commented Jul 13, 2020

Ihebbenali95 commented May 9, 2024 •

edited

Loading

mistercrunch commented May 9, 2024

		@@ -1231,6 +1232,39 @@ def get_data(self, df):
		return df.to_dict(orient='records')


		class ChordViz(BaseViz):

New chart type : Chord Diagrams #3013

New chart type : Chord Diagrams #3013

Conversation

mistercrunch commented Jun 21, 2017 • edited Loading

graceguo-supercat left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Visitante commented Jul 10, 2017 • edited Loading

xrmx commented Jul 10, 2017

Visitante commented Jul 10, 2017

apoku commented Aug 17, 2017

xrmx commented Aug 17, 2017

mistercrunch commented Aug 17, 2017

mistercrunch commented Aug 17, 2017

aliciaouyang commented Aug 18, 2017

xrmx commented Aug 18, 2017

MTShannon commented Jun 12, 2018

HaiNguyenHuynh commented Jun 21, 2018

Leoleo0324 commented Nov 20, 2018

ankit6373 commented May 10, 2019 • edited Loading

ankit6373 commented May 10, 2019

mgulaydin commented Feb 7, 2020

srinivasjavvadi commented Apr 10, 2020 • edited Loading

rusackas commented Jul 13, 2020

Ihebbenali95 commented May 9, 2024 • edited Loading

mistercrunch commented May 9, 2024

mistercrunch commented Jun 21, 2017 •

edited

Loading

Visitante commented Jul 10, 2017 •

edited

Loading

ankit6373 commented May 10, 2019 •

edited

Loading

srinivasjavvadi commented Apr 10, 2020 •

edited

Loading

Ihebbenali95 commented May 9, 2024 •

edited

Loading