https://github.com/gerardnico/world
A function grapher library
https://github.com/gerardnico/world
Last synced: 3 months ago
JSON representation
A function grapher library
- Host: GitHub
- URL: https://github.com/gerardnico/world
- Owner: gerardnico
- License: gpl-3.0
- Created: 2017-11-24T09:21:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T23:10:17.000Z (over 2 years ago)
- Last Synced: 2025-01-22T21:43:12.204Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 248 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# World - A graphing library
## Introduction
A function grapher library to graph a function.
## Usage
Tip: The [function grapher file](./example/function-grapher.html) gives a complete example.
### Step 1: Dependencies
Add the dependencies and the `world.js` library:
* https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.7/vega.js
* https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.1/vega-lite.js
* https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc7/vega-embed.js
* https://unpkg.com/worldjs
### Step 2: Graph your function
```javascript
var func = (x) => Math.cos(x);
var graph = new world.func(func)
.render();
```
By default:
* the coordinates of the function will be calculated on the range [-10,10] with an interval of 0.1 between each
* the graph will be rendered:
* in the `body` element of the page. **You need to define a selector in the render function, if you want to output more than one graph by page. See below.**
* with a `width` of 600 pixels and an `height` of 300 pixels
### Step 3: Tweak the output
You can override and set new properties:
```javascript
var graph = new world.func(func)
.setXMax(5) // The Max value on the X axis
.setXMin(-5) // The Min value on the X axis
.setStep(0.5) // The interval between each point on the X axis
.setTitle("Cosine") // The title of the graph
.setHeight(400) // The height of the graph
.setWidth(400) // The width of the graph
.render("#vis"); // Define a CSS selector
```
## Notes
* An interactive function grapher: https://www.desmos.com/calculator
* A function grapher for the terminal ?, see [function-graph](https://www.npmjs.com/package/function-graph)