Name: d3-bootloader
Owner: FT Interactive News
Description: Uses SystemJS to bootstrap in-browser D3.js via ES6 modules
Created: 2017-06-28 11:08:32.0
Updated: 2017-09-06 17:24:48.0
Pushed: 2017-12-08 13:32:34.0
Homepage: null
Size: 179
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
This users SystemJS to bootstrap and load a D3-based project. You can use modern JS because it transpiles everything on-the-fly.
.html
file containing the following code:cript src="//unpkg.com/@financial-times/d3-bootloader" async></script>
index.js
in the same directory as the above:rt * as d3 from 'd3'; // Import the whole thing...
rt {scaleLinear} from 'd3-scale'; // ...Or just bits and pieces, it doesn't matter.
rt default async function () {
turn await Promise.resolve('Yep you can use ES2017 here too');
Voilą! The above module will run upon page load. Note this only works with D3, and a few of the
sundry ft-interactive
modules.
bootD3
that returns a promise containing the resolved
index.js
module. That means you can then do something like:ipt>
otD3.then((index) => {
index().then(alert);
;
ript>
…Which, given the above index.js
module, will alert with “Yep you can use ES2017 here too”.
It's not like you can include this on page and then add any module in the npmjs.org registry. If you want to add another module (that's deliverable via a CDN like unpkg), add the following before your d3-bootloader script tag:
ipt>
ndow.D3_BOOTLOADER_MODULES = {
'd3-jetpack': 'https://unpkg.com/d3-jetpack@2',
ript>
Each key in the map
object is what you'll import, and the value is a CDN resource exporting some
kind of UMD module.
For more info, please see the SystemJS Configuration API Docs.
Oh hells nawww ? on-the-fly Babel transpilation isn't exactly the lightest thing ever.
Not only that, but every module you load from index.js
will create a separate request.
This project is mainly intended to help streamline the creation of examples for ft-interactive/visual-vocabulary-templates. Again, you probably don't want to use this in production.