https://github.com/anergictcell/esbmeplots
An extension of the D3.js library for fast and flexible generation of basic plot types
https://github.com/anergictcell/esbmeplots
d3js data-visualization javascript plotting
Last synced: 3 months ago
JSON representation
An extension of the D3.js library for fast and flexible generation of basic plot types
- Host: GitHub
- URL: https://github.com/anergictcell/esbmeplots
- Owner: anergictcell
- License: mit
- Created: 2018-12-15T15:16:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-28T13:36:07.000Z (about 5 years ago)
- Last Synced: 2025-02-23T09:09:05.788Z (4 months ago)
- Topics: d3js, data-visualization, javascript, plotting
- Language: JavaScript
- Size: 393 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Esbme Plots
An extension of the **D3.js** (v4) library for fast and flexible generation of basic plot types
- Barplots
- Scatterplots
- Piecharts
The chart generation supports argument chaining in D3.js style and allows for seamless chart generation.
[Check out an interactive example of EsbmePlots](https://esbme.com/plots/).
The plots support multi data-series plots as well. Each series will be classed differently so they can be styled accordingly.
Scatterplot is designed to utilize canvas functionality with large datasets to prevent DOM overload. This can also be manually defined for each plot.
# Brief Examples
Simply include the requires JS files in your HTML source:
```html
```
## Barplots
```javascript
Barplot()
.parent(d3.select("div.plot-container"))
.className("test-plot")
.width(400)
.height(300)
.header("Look at this barplot")
.xLabel("Weekday")
.xLabelRotation(-45)
.yLabel("Percent happyness")
.categories(["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"])
.data([1,2,3,4,5,6,7])
.draw()
```
## Scatterplot
```javascript
Scatterplot()
.parent(d3.select("div.plot-container"))
.className("test-plot")
.width(400)
.height(300)
.header("Look at this scatterplot")
.xLabel("Years experience")
.yLabel("Number of bugs")
.yDomain("auto")
.xDomain("auto")
.radius(5)
.data([[1,1],[2,2],[3,3],[4,4]])
.draw()
```
## Piechart
```javascript
Piechart()
.parent(d3.select("div.plot-container"))
.className("test-plot")
.width(200)
.height(200)
.header("Look at this Piechart")
.showValues(false)
.data([35,57])
.draw()
```
## API
[Chek out the API documentation](https://esbme.com/plots/docs/module-EsbmePlots.html) or look at the docs folder for detailed documentation of all functions and the full API.
## Examples
[Check out the interactive example of EsbmePlots](https://esbme.com/plots/).
The code is also present in the example subfolder.