D3 Pentaho Component Gallery
Concept
It's undeniable - d3 is amazing and a very hot piece of technology. And on a weekly basis it comes up in conversations with customers:Does Pentaho support d3?
The answer simple: "not out of the box, but Pentaho is an extensible platform, you can add it". But there's actually more to it than that.
What actually does it mean to "support d3"? D3 is not a charting library. It's a visualization library. And unlike it's ancestor Protovis, also from Mike Bostok and the library behind CCC, doesn't provide any kind of abstraction; d3 interacts directly with the SVG layer, providing a huge amount of helper functions and components in order to achieve the amazing gallery of visualizations.
This brings advantages and disadvantages.
Advantages:
- No abstraction: Huge performance, as it takes advantage of the browsers capabilities in handling SVG
- Great animation support through the usage of Transitions
- Very large user base
- Great amount of examples
- Extremely well done - no other way to say it, Mike Bostock's a genius
Disadvantages:
- No abstraction: this makes it harder to make it the rendering layer of a generic charting engine, even one like CCC.
- Direct SVG integration makes it impossible to have rendering in old browsers (by old browsers I mean IE8 or less). And unfortunately, some of our clients are forced to use IE....
- Every visualization is very specific. And it's not easy to do! Lots of mathematical wisdom in there (not sure if this is actually an advantage)
So having said that I started to think - what does it actually mean when a customer asks if Pentaho supports d3?
On one hand, it means if CCC or Analyzer or other platform components use d3 to render all or some of the platform visualizations. The answer there is "Not yet but we're working on that". Integrating d3 into CCC is on the platform roadmap.
On the other hand, and for a large number of the cases, the answer is simple too: When they ask "Does Pentaho support d3?" what they really mean is:
I saw a really cool visualization done with d3. Can I use it in Pentaho?
This may seem a small, but it actually makes a huge difference!
D3 Pentaho Component Gallery
So while the community cannot easily help with the first one - but if you want to help and get to know CCC from inside out, do get in touch - it definitely can help with the second: With the help of... hum... whoever wants to help, let's start porting the d3 gallery to Pentaho. I'll go first :)The d3 component gallery is a Sparkl plugin that bundles specific visualizations as ctools components to be used in dashboards. We're also working on supporting them as Analyzer visualizations.
I built 2 components:
![]()
Pentaho 5.x required.
Refresh the sparkl application through the UI or through the url:
The name of the dashboard will be the id of the visualization you're creating.
This is where you'll supply an example and the documentation for the visualization.
The important bits in there are:
You'll mostly need to implement the render function, and use the original d3 code as an example. Then you'll need to hook in the data that comes from Pentaho and parametrize any arguments you wish. Take a look at the bundled visualizations.
The arguments added to the visualization should be added to the component.xml file, in //Contents/Model/.
If everything worked correctly, you Then you should be able to see the new component in CDE, under the D3 Components group and use it in a dashboard.
To test your code, simply execute the dashboard, eg with:
Adding debug=true&bypassCache=true is only useful for bypassing the minification step, allowing to use a javascript browser debugger like firebug or developer tools.
I built 2 components:
- d3 component - The generic component for writing d3 code
- Calendar View - cause I really like this one :)
Installing
In order to install the D3 Component Library, either get it from the Pentaho Marketplace or clone this project directly into your pentaho-solutions/system and do an ant resolve.Pentaho 5.x required.
Adding new visualizations
If your favorite visualization is not part of the gallery, follow this instructions to add it:Pick your visualization
Choose one from the d3 gallery, from somewhere else, or create your own.Install Sparkl
Make sure you have Sparkl installed. Everyone should have it :)Create a dashboard for your new visualization
In the directory d3ComponentLibrary/dashboards you'll see the available dashboards. Pick the one you want. Currently you may need to manually copy the source files (.wcdf and .cdfde). In what I hope to be a recent future we'll be able to simply do a save as from within CDE, but that's currently not allowed.Refresh the sparkl application through the UI or through the url:
http://127.0.0.1:8080/pentaho/plugin/d3ComponentLibrary/api/refresh
The name of the dashboard will be the id of the visualization you're creating.
This is where you'll supply an example and the documentation for the visualization.
Create the directory for the CDE component
The code for the visualizations are in d3ComponentLibrary/resources/components. Create a directory there with the name of your visualization.Create component.xml
Every component needs to have acomponent.xml that acts as a descriptor for CDE to know how to use it. My suggestion is for you to look into one of the existing ones and use it as a template.The important bits in there are:
- Header - put the component information there
- Contents/Model - The specific options of the component. Most of them are plain CDF, so leave them there, and add the ones you want
- Implementation - Point to your code. You'll need a Styles tag if you want to also supply a CSS code
- Dependencies - The dependencies for the component code. d3 is already in the plugin, and some helper functions are provided in d3ComponentBase.js, so most likely you won't need anything here
Implement your code
This is a standard CDF component, that extends D3ComponentBase. Note that the name of the component always starts with an uppercase letter, and the variable name is the same as specified in the Header/IName node in component.xml appended with "Component".You'll mostly need to implement the render function, and use the original d3 code as an example. Then you'll need to hook in the data that comes from Pentaho and parametrize any arguments you wish. Take a look at the bundled visualizations.
The arguments added to the visualization should be added to the component.xml file, in //Contents/Model/.
Test it
When you make changes to the component.xml file, you need to refresh CDE. Use the following url:http://127.0.0.1:8080/pentaho/plugin/pentaho-cdf-dd/api/renderer/refresh
If everything worked correctly, you Then you should be able to see the new component in CDE, under the D3 Components group and use it in a dashboard.
To test your code, simply execute the dashboard, eg with:
127.0.0.1:8080/pentaho/plugin/d3ComponentLibrary/api/calendarview?debug=true&bypassCache=true
Adding debug=true&bypassCache=true is only useful for bypassing the minification step, allowing to use a javascript browser debugger like firebug or developer tools.