Esri
Define API for Developer Custom Charts using D3
This is more of a discussion than actual issue. What should be our strategy if we want to do something very custom using d3 like chord diagram? We were thinking something about custom templates (specifications?) bypassing vega if needed. This will probably require some extensibility entry point in Cedar.
@ajturner, what are your thoughts on this?
cc @arthaddad @HeikoH
@abakirov Yes - looking at the Stack
- (Application)
- Cedar - JS Functions
- Vega - specification templates
- D3 - SceneGraph or JS Functions
We would like to keep the 'customization' as high-level as possible. By doing so we can make it easier to reuse charts as shared and trusted Items in hosted applications. We can do that because we are not running arbitrary Javascript code but only a JSON document that can be validated.
But as you are pointing out - the chart design may go beyond the Vega capabilities, though that may just be a challenge to the community craft such a document. :)
The pattern should be that through encapsulation you can 'swap out' Vega for a custom visualization engine that would then use D3. So then after loading the engine, the Cedar API continues to function.
For example mimicking this chart
and a service like
| OBJECTID | Origin | Destination | Name | Date |
|---|---|---|---|---|
| 1 | Sudan | Chad | Person 1 | 2012-01-02 |
| 2 | Somalia | Ethiopia | Person 1 | 2012-08-07 |
| 3 | Sudan | Chad | Person 1 | 2013-03-20 |
| 4 | Sudan | Uganda | Person 1 | 2013-07-14 |
etc.
<script type="text/javascript" src="/chord-graphic.js"></script>
<script>
//create a cedar chart, passing a url to a spec
var chart = new Cedar({"engine":"chord-graphic"});
var dataset = {
"url":"http://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Education_WebMercator/MapServer/5",
"mappings":{
"category1": {"field":"Origin","label":"Origin Country"},
"category2": {"field":"Destination","label":"Destination Country"}
}
};
//assign to the chart
chart.dataset = dataset;
//show the chart
chart.show({
elementId: "#chart"
});
</script>
z
And what will chord-graphic.js look in this example, something like this?
Cedar.registerEngine("chord-graphic", impl);
... where impl is my own implementation of some well-defined interface?
Sounds good to me. I would also add that OOTB vega engine implementation should probably use that same API Cedar.registerEngine("vega", ...). This way people will be able to look at vega implementation and use it as example for their own engine.