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:

1. It does not use chaining. Is it a big issue?

2. 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?

3. 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?

4. 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.