Pre-Work to migrate to d3 v4

[jimerino]

I'm trying to evaluate the effort to migrate nvd3 from d3 v3 to d3 v4.

I've successfully migrated line.js and you can get a demo in line.v4.html.

Once migrated line.js I've tried to migrate lineChart.js but it's needed a deep change in nvd3 API:

For example we need a redefinition of Axis (in v3 a horizontal axis is created with d3.svg.axis().orient("bottom"/"right"/"left"/...), but in v4 exists 4 objects for each position of the axis: d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft). nvd3 is sticked with the d3 const definition about colors, orientation of the axis, ...

I think it's not possible keeps a compatibility with the current API without sacrifice the ability to inject d3 objects in nvd3 methods (a custom axis for example).

And I think would be necessary write nvd3 in ES6 (in my project is configured to use a transpiler to convert from ES6 to ES5) and create classes instead still using functions.

I think this isn't a work to make by my own criteria because don't know in depth the nvd3 API.

Then what do you think? ES6? New API?

[liquidpele]

I think a new API... right now nvd3 even directly inherits d3 objects/options so there probably isn't a reasonable way to support both d3 v3 and v4 at the same time.

[jimerino]

NVD3 is sticked with the D3 API definition, for example a custom colors in v3 is:

.color(d3.scale.category10().range())

but in v4 becomes in

.color(d3.schemeCategory10().range())

Or for example the scale in v3 is:

.xScale(d3.time.scale())

but in v4 becomes in

.xScale(d3.scaleTime())

As you can inject d3 objects in NVD3, is not possible a smooth transition from v3 to v4. NVD3 users would change their code to adapt them to a NVD3 4.x version and only can work with the same code in very simple cases with default colours, default scales, default brushes, ...

Even in the case we can keep the NVD3 API without change (I don't think it can be possible and some minor changes in the API we need), at least you need different samples for v3 and v4 because those D3 objects you can inject has changed in v4.

Another option would be change the API creating your own classes (not .xScale(d3.time.scale()) in v3 or .xScale(d3.scaleTime()) in v4 instead xScale(nvd3.scaleTime())). You need create your own objects to avoid that a change in a D3 API affect to the existing base of users (hiding the D3 objects and creating you own objects), but I think this is a breaking change not in the API instead in the philosophy of NVD3 (you can hack NVD3 easily injecting D3 objects, in this case a hack isn't possible).

I think we need to take another technical decisions about ES6/ES5. We still program with functions/prototipes (ES5) or use classes (ES6). If we change to ES6, a transpiler is necessary to generate a vanilla .js file (now grunt is to concatenate & uglify the source files, but if we program in ES6 we need babel too to generate a ES5 code).

Regards

[liquidpele]

I created a branch for this for people to merge work into.

https://github.com/novus/nvd3/tree/dev/D3v4

[ConstantinoSchillebeeckx]

I'm here to help - just let me know how.

[bgth]

Hi @liquidpele , @ConstantinoSchillebeeckx , @jimerino . Thanks a lot for taking interest in the migration to d3 v4.
To start with. D3 js is an excellent library. No doubt. It gives lot of power to modify the charts to the user.

But why NVD3 was used because it abstracted away the need to look at minor details of how to make charts. You could take your data and in little time your basic chart will be ready. So, it was giving excellent starting point for creating great charts.

a) So, first challenge will be to see if the foundation of NVD3 needs to change to keep up with D3 v4. If we could create the foundation right, then one by one we could move all charts to new version.

b) Also there is a discussion about moving to ES6. We could come to conclusion on that as well.

Please tell if you want to add something to the above.

[liquidpele]

Previously I've been against js-compilers for this project as I think it complicates things for people just starting out with web development. However, given that all the evergreen browsers already support much of ES6 already, it's starting to be more of a backfill for older versions of IE... which I'm fine with. In that regard I am fine with implementing ES6 features AS LONG AS it runs natively in the current evergreen browsers (chrome/FF/Edge). My $0.02.

[jimerino]

@liquidpele It's possible create a ES6 version that can run natively in most evergreen browsers:

https://kangax.github.io/compat-table/es6/

As you can see the browser cover of ES6 functionality (even in the MS Edge) is much better than the Babel transpiller.

There's only one functionality that justify the use of Babel transpiller and is the ES6 modules (the import sentence), but now is starting to be supported in all evergreen browsers (in a experimental way), then in a short time you don't need to transpille your code at all.

https://jakearchibald.com/2017/es-modules-in-browsers/

[liquidpele]

Don't include IDE specific files please

[liquidpele]

don't include build files in the PR, only src files

[liquidpele]

Hi gents. I've decided to make moving to d3 v4 a breaking change from the novus repo. I have no control under the novus org, and I'd like to have more help but can't add anyone! So, I've acquired the "nvd3" organization from another user and plan to use that for the d3 v4 break. If you'd like to help, let me know and I'll add you to the new organization :)

https://github.com/nvd3/nvd3

[jimerino]

And my axe! I don’t have so much free time until August and only can make minor changes or shorts tasks. But you can count on me. Regards, Jose I. El 30 jun 2018, a las 15:58, liquidpele <[email protected]<mailto:[email protected]>> escribió: Hi gents. I've decided to make moving to d3 v4 a breaking change from the novus repo. I have no control under the novus org, and I'd like to have more help but can't add anyone! So, I've acquired the "nvd3" organization from another user and plan to use that for the d3 v4 break. If you'd like to help, let me know and I'll add you to the new organization :) https://github.com/nvd3/nvd3 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#2082 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AFJCJ4_1rfk3JoaV8VBr3wTbrfN6p6rxks5uB4PsgaJpZM4OqK-S>.

[ConstantinoSchillebeeckx]

I'm in too! ❤️

[dudumanbogdan]

+1, any updates?