A starter environment for D3plus modules.
If you use NPM,
npm install d3plus-project-template. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom bundle using Rollup or your preferred bundler. You can also load directly from d3plus.org:
This is the place to be if you want to create your own D3plus module. Here are the steps to get your module up and running:
- Copy the contents of this repo into your new repository.
- Install the Node Package Manager (NPM).
If on a Mac, we suggest using Homebrew to install packages on your machine. Once that's installed, you can install node (which includes npm) by running:
brew install node
- Install all current dependencies:
And that's it! Now your environment should be all set up and ready to go.
Running the Development Server
To test your code live in a browser, with auto-compiling and hot reloading, type this into your shell:
npm run dev
You can then go to
http://localhost:4000/test/ in your preferred browser to test your code live.
All of the Documentation you see in the README file is generated automagically based on the JSDoc formatted comments within each source file. This removes the nuscence of having to write documentation after the fact, and enforces strict code commenting. To regenerate the documentation, simply run:
npm run docs
Any time you write a new feature in your module, you should also be writing tests. D3plus modules come bundled with a test suite that let's you write tape tests using full ES6, which are then run directly in a headless Electron browser.
All tests need to be placed in the
/test/ directory, and the filenames should match up to the components in
/src/. To run all tests, run:
All D3plus 2.0 examples seen on d3plus.org are created from within their respective repositories. The examples are parsed from any markdown files placed in the
/example/ directory, with the following rules:
Example titles are extracted from the first H1 present in the file. Generally, the first line of the file will be the title:
## My Cool Example
The slug used in the URL on d3plus.org is taken directly from the filename. A file with the following path:
Would end up at the following URL:
js code block present in an example will be extracted and rendered into a static HTML file. This is what gets used on d3plus.org, and also let's us take screenshots!
A screenshot of each example is generated from the rendered HTML. By default, each screenshot is 990x400 in size, but specific dimensions can be given using markdown relative links:
[width]: 100[height]: 100
For the purposes of this example, let's make a red square that will be rendered in HTML.
Click here to view this example live on the web.
Kind: global class
A sample chainable function.
If value is specified, sets the constant to the specified function or value and returns this generator. If value is not specified, returns the current constant.
Kind: static method of
If value is specified, sets the id accessor to the specified function and returns this generator. If value is not specified, returns the current id accessor.
Kind: static method of