Skip to content

Commit 9a1143c

Browse files
ngfelixlngfelixl
committed
docs: update readmes and tutorial component
1 parent 96f980c commit 9a1143c

File tree

3 files changed

+221
-153
lines changed

3 files changed

+221
-153
lines changed

‎README.md

Lines changed: 15 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@
77
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
88
[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/nodeplotlib/)
99

10-
Library to create top-notch plots directly within NodeJS on top of [plotly.js](https://plot.ly/javascript/)
11-
without any front-end preparations. Inspired by matplotlib.
12-
13-
[![Animation (View on Github)](https://raw.githubusercontent.com/ngfelixl/nodeplotlib/master/img/animation.gif)](https://raw.githubusercontent.com/ngfelixl/nodeplotlib/master/img/animation.gif)
10+
This readme contains all the necessary information for the development. [Here](./libs/nodeplotlib/README.md) you can find the users instructions that you also find in the npm description.
1411

1512
## Installation
1613

@@ -20,158 +17,28 @@ npm install nodeplotlib
2017
yarn add nodeplotlib
2118
```
2219

23-
## Usage
24-
25-
### Overview
26-
27-
Use with TypeScript/JavaScript:
20+
## Serving the app for development
2821

29-
```typescript
30-
import { plot, Plot } from 'nodeplotlib';
31-
const data: Plot[] = [{ x: [1, 3, 4, 5], y: [3, 12, 1, 4], type: 'scatter' }];
32-
plot(data);
3322
```
34-
35-
If ES5 use `require()` instead of `import`. Here is a short animation about howto and the results.
36-
37-
### Detailed usage
38-
39-
Since Python provides with matplotlib a library for spawning plot windows, NodeJS isn't by default.
40-
But there are awesome plotting libraries for usage in front-end. So this lib targets people like
41-
scientists who easily want to create beautiful plots in a time-saving way.
42-
43-
The library provides a simple interface with (for now) just three functions. A `plot`, `stack` and a
44-
`clear` function. The `plot()` functions spawns a plot to the browser, if a plotdata is given as an
45-
argument. Otherwise it plots all the `stack()`ed plotdata. The arguments are of type `Plot`, which is a
46-
partial of plotly's `PlotData` type. With the `clear()` function the stack container can be cleared.
47-
48-
With the stack function the user is able to print multiple charts on one page.
49-
50-
```typescript
51-
import { plot, stack, clear, Plot } from 'nodeplotlib';
52-
53-
const data: Plot[] = [
54-
{
55-
x: [1, 3, 4, 6, 7],
56-
y: [2, 4, 6, 8, 9],
57-
type: 'scatter',
58-
},
59-
];
60-
61-
stack(data);
62-
stack(data);
63-
stack(data);
64-
plot();
65-
```
66-
67-
The plot function plots all stacked plots and the plot given by parameter (if there is one).
68-
Afterwards the temporary container gets cleared and you can call `stack()` and `plot()` again
69-
without any predefined plots.
70-
71-
The functions are of the form:
72-
73-
```typescript
74-
import { plot, stack, clear, Plot, Layout } from 'nodeplotlib';
75-
76-
plot(data?: Plot[], layout?: Layout): void;
77-
stack(data: Plot[], layout?: Layout): void;
78-
clear(): void;
23+
npx nx run web:build -- --watch
24+
NODE_ENV=development npx nx run dev-server:serve
25+
// or on Windows cmd
26+
set "NODE_ENV=development" && npx nx run dev-server:serve
27+
// or on Windows Powershell
28+
($env:NODE_ENV = "development") -and (npx nx run dev-server:serve)
7929
```
8030

81-
## Quick start
82-
83-
In this section there are some examples to getting started. See the full plotly
84-
[cheatsheet](https://images.plot.ly/plotly-documentation/images/plotly_js_cheat_sheet.pdf?_ga=2.2676214.711017137.1550402185-1513144731.1549064935).
85-
86-
#### Line Plots
87-
88-
```typescript
89-
const trace1: Plot = { x: [1, 2], y: [1, 2], type: 'scatter' };
90-
const trace2: Plot = { x: [3, 4], y: [9, 16], type: 'scatter' };
91-
plot([trace1, trace2]);
92-
```
93-
94-
#### Bar Charts
95-
96-
```typescript
97-
const trace: Plot = { x: [1, 2], y: [1, 2], type: 'bar' };
98-
plot([trace]);
99-
```
100-
101-
#### 3D Line Plots
102-
103-
```typescript
104-
const trace: Plot = {
105-
x: [9, 8, 5, 1],
106-
y: [1, 2, 4, 8],
107-
z: [11, 8, 15, 3],
108-
type: 'scatter3d',
109-
};
110-
plot([trace]);
111-
```
112-
113-
#### 3D Surface Plots
114-
115-
```typescript
116-
const trace: Plot = {
117-
colorscale: 'Viridis',
118-
z: [
119-
[3, 5, 7, 9],
120-
[21, 13, 8, 5],
121-
],
122-
};
123-
plot([trace]);
124-
```
125-
126-
#### Radial Plots
127-
128-
In order to style the plot, one is able to pass in the `layout` parameter, which internally
129-
is typeof `Partial<Layout>` from plotly's `Layout`. See the full layout documentation
130-
[here](https://plot.ly/javascript/#layout-options).
131-
132-
With this parameter one is able to define styles like _title_, _axis labels_,
133-
_subplots_ and many more.
134-
135-
```typescript
136-
const data: Plot[] = [
137-
{
138-
type: 'scatterpolar',
139-
r: [1.5, 10, 39, 31, 15, 1.5],
140-
theta: ['A', 'B', 'C', 'D', 'E', 'A'],
141-
fill: 'toself',
142-
name: 'Group B',
143-
},
144-
];
145-
146-
const layout: Layout = {
147-
polar: {
148-
radialaxis: {
149-
visible: true,
150-
range: [0, 50],
151-
},
152-
},
153-
};
154-
155-
plot(data, layout);
156-
```
157-
158-
## Plot types
159-
160-
| Simple charts | Advanced charts | 3D Plots |
161-
| --------------- | ---------------- | -------- |
162-
| Scatter | 2d density plots | Scatter |
163-
| Line | Histograms | Surface |
164-
| Bar | Box-plots | Lines |
165-
| Pie charts | Contour plots | |
166-
| Sankey diagrams | Heatmaps | |
167-
| Tables | Radar charts | |
31+
Unfortunately, it
16832

16933
## Behind the scenes
17034

17135
The lib launches a webserver and opens new tabs for every plot located at
172-
`http://localhost:8080/plots/:id`. At this address a temporary html template
173-
file, the nodeplotlib script and plotly.min.js are available. The client side
174-
js requests the plot data at `http://localhost:8080/data/:id`. After all
36+
`http://localhost:{{PORT}}`, where `PORT` is a free port determined by the express
37+
server itself. At this address the Angular application will be served temporarily.
38+
The server and the app set up a connection via socket.io. This way a realtime
39+
transmission is possible.
40+
41+
The client side js requests the plot data at `http://localhost:8080/data/:id`. After all
17542
pending plots are opened in a unique tab and all the data is requested, the
17643
server shuts down. If you fire another plot the server starts again provides
17744
your plot and shuts down automatically.

‎apps/web/src/app/components/tutorial/tutorial.component.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1-
<p>tutorial works!</p>
1+
<h1>Tutorials</h1>
2+
3+
The tutorials sections will be tackled once the application is done. It will
4+
contain the following topics:
5+
6+
<ul>
7+
<li>Basic plot commands</li>
8+
<li>The Plot and the Layout interfaces</li>
9+
<li>How to plot streams in realtime</li>
10+
</ul>

0 commit comments

Comments
 (0)