docs: add nucleus render (#354)

docs/nucleus-configuration.md

@@ -100,7 +100,7 @@ nucles.createConfiguration({
 
 ### Loading on the fly
 
-If you don't know exactly which types you will need and want to avoid installing everything to reduce the size of your bundle, you could load the charts at runtime using a lighweight AMD loader like [d3-require](https://github.com/d3/d3-require).
+If you don't know exactly which types you will need and want to avoid installing everything to reduce the size of your bundle, you could load the visualizations at runtime using a lighweight AMD loader like [d3-require](https://github.com/d3/d3-require).
 
 Start by installing the module:
 

docs/render-charts.md

@@ -1,6 +1,75 @@
 ---
 id: render-charts
-title: Render charts
+title: Rendering supernovae
 ---
 
-TODO
+You can render a supernova in two ways:
+
+1. On the fly
+1. From existing object
+
+Rendering is done using the `render()` method on the `nucleus` instance, which at minimum requires the `HTMLElement` you want to render into:
+
+```js
+const n = nucleus(enigmaApp);
+n.render({
+  element,
+  // rest of the config
+});
+```
+
+## Render on the fly
+
+When rendering a supernova on the fly you need to specify the `type` of supernova to render:
+
+```js
+n.render({
+  element,
+  type: 'barchart',
+});
+```
+
+Some supernovae have minimum requirements on the various properties and/or data it needs in order to render, in which case you might see something like this:
+
+![Incomplete supernova](assets/supernova-incomplete.png)
+
+To provide initial data to the supernova, add the data dimensions and measures into the `fields` property:
+
+```js
+n.render({
+  element,
+  type: 'barchart',
+  fields: ['Region', '=sum(Sales)'],
+});
+```
+
+You can also modify the initial properties of the supernova:
+
+```js
+n.render({
+  element,
+  type: 'barchart',
+  fields: ['Product', '=sum(Sales)'],
+  properties: {
+    title: 'Sales by region',
+  },
+});
+```
+
+![Supernova bar chart](assets/supernova-barchart.png)
+
+Read more
+
+- [render() API reference](#TODO)
+- [API reference per supernova](#TODO)
+
+## Render from existing objects
+
+If you already have created a generic object in your app and want to render it, you can do so by providing the object's `id`:
+
+```js
+n.render({
+  element,
+  id: '<ObjectID>',
+});
+```

docs/web-integration.md

@@ -60,12 +60,13 @@ Load the two core `nebula.js` modules:
 <script src="https://cdn.jsdelivr.net/npm/@nebula.js/nucleus" crossorigin></script>
 ```
 
-## Load chart modules
+## Load visualization modules
 
-The core modules do not contain any charts by themselves, each chart is its own separate module and needs to be loaded and registered before it can be used.
+The core modules do not contain any visualizations by themselves, each visualization is its own separate module and needs to be loaded and registered before it can be used.
 
-Official supernova chart modules from Qlik are published under the `@nebula.js` scope and are prefixed with `sn-`.
-The available charts are as follows:
+Official supernova modules from Qlik are published under the `@nebula.js` scope and are prefixed with `sn-`.
+
+The available visualizations are as follows:
 
 - Bar chart: `@nebula.js/sn-bar-chart`
 - Line chart: `@nebula.js/sn-line-chart`
@@ -74,7 +75,7 @@ The available charts are as follows:
 - Funnel chart: `@nebula.js/sn-funnel-chart`
 - Mekko chart: `@nebula.js/sn-mekko-chart`
 
-You can load a chart through a `<script>` tag:
+You can load a visualization through a `<script>` tag:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/@nebula.js/sn-bar-chart" crossorigin></script>
@@ -82,9 +83,9 @@ You can load a chart through a `<script>` tag:
 
 which makes it available to you on the global `window` object as `@nebula.js/sn-bar-chart`.
 
-## Render charts
+## Render visualizations
 
-Before rendering the chart you need to configure `nucleus` with the supernova types you want to support:
+Before rendering the visualization you need to configure `nucleus` with the supernova types you want to support:
 
 ```js
 const n = nucleus.createConfiguration({
@@ -97,7 +98,7 @@ const n = nucleus.createConfiguration({
 });
 ```
 
-You can then render a chart on the fly in an `HTMLElement` that has a fixed size and provide the initial `fields` to it:
+You can then render a visualization on the fly in an `HTMLElement` that has a fixed size and provide the initial `fields` to it:
 
 ```js
 n(enigmaApp).render({