Define API for Developer Custom Charts using D3 about cedar HOT 5 OPEN

@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

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

from cedar.

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?

from cedar.

@abakirov that's generally the idea. What would you think of that?

from cedar.

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.

from cedar.

Similar example
http://jlord.us/sheetsee.js/docs/custom-charts.html

from cedar.