Skip to content

Commit

Permalink
Smoothing out JSDoc blocks. Adding 'class' constructor back!
Browse files Browse the repository at this point in the history
  • Loading branch information
jamesleesaunders committed Nov 14, 2018
1 parent 163226b commit 3dd02ab
Show file tree
Hide file tree
Showing 18 changed files with 145 additions and 160 deletions.
28 changes: 14 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,11 @@ Inspired by Mike Bostock's [reusable charts](http://bost.ocks.org/mike/chart/),

* [Examples](#examples)
* [Getting Started](#getting-started)
* [Reference](#reference)
* [Download](https://github.com/jamesleesaunders/d3-x3dom)
* [API Reference](https://jamesleesaunders.github.io/d3-x3dom/)
* [Charts and Components](#components-and-charts)
* [Data Structure](#data-structures)
* [Download from GitHub](https://github.com/jamesleesaunders/d3-x3dom)
* [Download from NPM](https://github.com/jamesleesaunders/d3-x3dom)

### Examples

Expand All @@ -22,7 +25,7 @@ Inspired by Mike Bostock's [reusable charts](http://bost.ocks.org/mike/chart/),
* [Scatter Plot](https://raw.githack.com/jamesleesaunders/d3-x3dom/master/examples/ScatterPlot.html)
* [Surface Area](https://raw.githack.com/jamesleesaunders/d3-x3dom/master/examples/SurfaceArea.html)
* [Components Showcase](https://raw.githack.com/jamesleesaunders/d3-x3dom/master/examples/Components.html)
* [Observable Examples](https://beta.observablehq.com/collection/@jamesleesaunders/d3-x3dom)
* [Observable Examples](https://www.npmjs.com/package/d3-x3dom)

### Getting Started

Expand Down Expand Up @@ -94,6 +97,7 @@ chartHolder.datum(myData).call(myChart);
That's all there is to it! View the page in a browser and you should see a basic 3D bar chart.

#### Install from NPM

If your project is using ES6 modules you can also import d3-x3dom, for example [from NPM](https://www.npmjs.com/package/d3-x3dom):

```bash
Expand All @@ -104,15 +108,11 @@ Then in your project:
var d3X3dom = require("d3-x3dom");
```

### Reference

For more information see the [API documentation](https://jamesleesaunders.github.io/d3-x3dom/).

#### Components and Charts
### Components and Charts

d3-x3dom has two types of reusable modules: `component` and `chart`.
d3-x3dom has two types of reusable modules: `component` and `chart`. For more information see the [API Reference](https://jamesleesaunders.github.io/d3-x3dom/).

##### Components
#### Components

The `component` modules are lower level building blocks which can be used independently, or combined to build higher level `chart` modules.
For example, combining `component.bars()`, `component.axis()` and `component.viewpoint()` modules together we have built the `chart.barChartMultiSeries()`.
Expand All @@ -129,7 +129,7 @@ Component modules do not generate a `x3d` tag, these should be attached to an ex
| component.surfaceArea() | Surface Area | [View](https://raw.githack.com/jamesleesaunders/d3-x3dom/master/examples/Components.html)
| component.viewpoint() | User's location and viewing model parameters | [View](https://raw.githack.com/jamesleesaunders/d3-x3dom/master/examples/Components.html)

##### Charts
#### Charts

The `chart` modules are higher level, pre-combined components, making it even simpler to quickly create charts.
All the charts are typically constructed of a viewpoint, axis and one or more of the other components above.
Expand All @@ -143,11 +143,11 @@ Chart modules also generate the `x3d` tag, these should be attached to a `div` t
| chart.scatterPlot() | Scatter Plot & Axis | [View](https://raw.githack.com/jamesleesaunders/d3-x3dom/master/examples/ScatterPlot.html)
| chart.surfaceArea() | Surface Area Chart & Axis | [View](https://raw.githack.com/jamesleesaunders/d3-x3dom/master/examples/SurfaceArea.html)

#### Data Structures
### Data Structures

At its most basic description, the format of the d3-x3dom data is a series of key / value pairs. Depending on whether the chart is a single series or multi series chart the data structure differs slightly.

##### Single Series Data
#### Single Series Data

Used by charts such as a single series bar chart, the data structure is an object with the following structure:
* `key` {string} - The series name
Expand All @@ -171,7 +171,7 @@ var myData = {
};
```

##### Multi Series Data
#### Multi Series Data

Used by charts such as the multi series scatter plot, the multi series data structure is simply an array of the single series data objects above.

Expand Down
Loading

0 comments on commit 3dd02ab

Please sign in to comment.