Designing javascript chart library
- by coolscitist
I started coding a chart library on top of d3js: My chart library.
I read Javascript API reusability and Towards reusable charts. However, I am NOT really following the suggestions because I am not really convinced about them.
This is how my library can be used to create a bubble chart:
var chart = new XYBubbleChart();
chart.data = [{"xValue":200,"yValue":300},{"xValue":400,"yValue":200},{"xValue":100,"yValue":310}]; //set data
chart.dataKey.x = "xValue";
chart.dataKey.y = "yValue";
chart.elementId = "#chart";
chart.createChart();
Here are my questions:
It does not use chaining. Is it a big issue?
Every property and function is exposed publicly. (Example: width, height are exposed in Chart.js). OOP is all about abstraction and hiding, but I don't really see the point right now. I think exposing everything gives flexibility to change property and functionality inside subclasses and objects without writing a lot of code. What could be pitfalls of such exposure?
I have implemented functions like: zooming, "showing info boxes when data point is clicked" as "abilities". (example: XYZoomingAbility.js). Basically, such "abilities" accept "chart" object, play around with public variables of "chart" to add functionality. What this allows me to do is to add an ability by writing:
activateZoomAbility(chartObject);
My goal is to separate "visualization" from "interactivity". I want "interactivity" like: zooming to be plugged into the chart rather than built inside the chart. Like, I don't want my bubble chart to know anything about "zooming". However, I do want zoomable bubble chart. What is the best way to do this?
How to test and what to test? I have written mixed tests: jasmine and actual html files so that I can test manually on browser.
