-
Notifications
You must be signed in to change notification settings - Fork 0
Session 3A: D3 v4 (modular)
A write-up of the session: Let’s Make a (D3) Plugin.
The upcoming release of D3 Version 4 will be a major new release, and will not be backward compatible with prior releases.
- currently d3 is monolithic
- eliminate the parts you don't need for increased performance
- decoupled for easier understanding
- monolithic is hard to keep track of, hard to test, hard to contribute to
- the main goal is to make it easier for people who want to learn or contribute to d3
- to set a standard way for people to create plugins for d3
Components exist in separate repository in github. (d3 is now a github org.) Each module has its own readme with a real world example, plus the API reference for just that module. each will also have its own zip file for download.
There will still be a default build of d3.v4 (d3.v4.js) which will represent a concatenation of all of the modules that go into the d3 build.
Both the code and the release cycle are decoupled. Mike is planning on writing a tutorial about how to write a plugin under this new structure. Hello World d3 plugin would contain the starter template for creating a plugin.
A new way to make a custom build that contains only the code that you need. Besides concatenating files together, you can make a precise custom build using a tool called rollup.js (like browserfy or webpack) which also understands the syntax tree and only includes the code that you're using. A rollup build would only contain a portion of a module.
Note that if people still have d3 cached in their browser, it will still load faster than any minified d3 custom d3 build.
"ES6" is really just ES5 plus a all part of the ES6 module system: the import and export syntax. ES6 eliminates namespace collisions which is also a good thing.
index.js file is at the top level of each module, containing export statements. The index.js takes care of exporting the symbols so that you don't have to memorize the exact path of the symbols that are exported.
There may be some differences in the name of the modules (e.g. d3.shape vs d3_shape) depending on whether you're using the default build or a custom build due to the need for backward browser compatibility since ES6 is involved and old browsers don't support that.
For d3.v4 development, changes should happen to individual modules and should include any corresponding changes to documentation.
Because d3.v4 is in a new github repo but may address issues in the mbostock/d3 repo, it is important to cross reference the issues.
- D3 supports a canvas option as an output rendering mode.
- A symbolic way of referencing things rather than just using strings.
- Layouts wrap the input data rather than mutating it.
- d3 as a github org: self-contained and independent modules
- rollup.js