https://github.com/mithi/bare-minimum-2d
An extremely lightweight React component to declaratively (and elegantly) plot shapes on an inline SVG
Science Score: 13.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
○.zenodo.json file
-
○DOI references
-
○Academic publication links
-
○Committers with academic emails
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (7.8%) to scientific vocabulary
Keywords
Keywords from Contributors
Repository
An extremely lightweight React component to declaratively (and elegantly) plot shapes on an inline SVG
Basic Info
- Host: GitHub
- Owner: mithi
- License: mit
- Language: JavaScript
- Default Branch: master
- Homepage: https://bare-minimum-2d.netlify.app
- Size: 3.24 MB
Statistics
- Stars: 24
- Watchers: 3
- Forks: 7
- Open Issues: 8
- Releases: 2
Topics
Metadata Files
README.md
A Bare Minimum 2D Plotter
An extremely lightweight React component to declaratively (and elegantly) plot shapes on an inline SVG
Update: External Plugins 🥳
You can now use your own shape implementation by passing it as a plugin (see plugin section below for more information). Below are a couple of plugins by @fuddl.
Demo Applications
| Responsive Illustrations | On-The-Fly Animations | Interactive Applications |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| 
| 
| 
|
| demo | demo | demo |
| source code | source code | source code |
Install
bash
npm install --save bare-minimum-2d
Usage
This is an example of what you can pass to a BareMinimum2d component.
You pass it like so:
```jsx import BareMinimum2d from 'bare-minimum-2d'
```
The component takes the dimensions of its parent and is always centered
Everything you need to know explained in two minutes
A BareMinimum2d component only has two props: container and data. container is a small object with exactly four elements. data is an array containing objects.
Example:
```jsx import BareMinimum2d from 'bare-minimum-2d'
const container = { color: '#0000FF', opacity: 0.2, xRange: 300, yRange: 500 }
const data = [{ x: [0], y: [0], color: "#FFFFFF", opacity: 1.0, size: 10, type: 'points', id: 'center' }]
```
container.color and container.opacity specifies the canvas color of BareMinimum2d.
The cartesian coordinate system of BareMinimum will follow the diagram below given container.xRange and container.yRange. Position (0, 0) will always be at the center of the rendered component.
js
yRange/2
|
|
-xRange/2 -------(0,0)--------- xRange/2
|
|
-yRange/2
Please take a look at more complex example data prop to get the idea.
each element of the array data should be a hash-like objectwith a type key which should have a value that is one of
the following:
| points | ellipse | lines | polygon | | ------ | -------- | ------ | -------- | | plural | singular | plural | singular |
Elements of the data array will be stacked based on the order they are declared.
The first element will be at the most bottom layer while the last element of the array will be at the top.
All attributes are ALWAYS required, nothing is optional because there are no default values. The id attribute must be unique for each element of the data array.
Create your own
You can add your own shapes as a plugin for example, here's an example plugin written by @fuddl
```jsx
const Triangle = ({ x, y, transforms, size, color, opacity, id, i }) => {
const cx = transforms.tx(x)
const cy = transforms.ty(y)
const ySize = size * 0.8626
return (
const trianglesPlugin = {
triangle: (element, transforms) => {
const { size, color, opacity, id } = element
return element.x.map((x, i) => (
And you can use it like so:
```jsx const triangle = { "x": [-163.72675374383329], "y": [-154.33259574213795], "opacity": 1, "size": 60, "color": "#2196F3", "type": "triangles", "id":"points0" }
```
END
Contributing
- Clone this repository.
- Add your changes
- You can add a demo or update the demo based on your changes somewhere here
- After making your change go run the following command to see if it works as you expect.
npm install && npm run build && rm -rf node_modules && cd example && npm install && npm run start
PRs welcome! Please read the contributing guidelines and the commit style guide!
License
MIT © Mithi
Owner
- Name: Mithi Sevilla
- Login: mithi
- Kind: user
- Location: Singapore
- Website: http://www.mithi.dev
- Repositories: 51
- Profile: https://github.com/mithi
Software Engineer. Mostly Frontend Web and Robotics Stuff
GitHub Events
Total
- Watch event: 1
Last Year
- Watch event: 1
Committers
Last synced: over 1 year ago
Top Committers
| Name | Commits | |
|---|---|---|
| Mithi | m****a@g****m | 104 |
| dependabot[bot] | 4****] | 40 |
| mikong | 4****g | 6 |
| Alex | a****x@M****x | 1 |
| fuddl | i****b@g****m | 1 |
Committer Domains (Top 20 + Academic)
Issues and Pull Requests
Last synced: 9 months ago
All Time
- Total issues: 8
- Total pull requests: 75
- Average time to close issues: 3 months
- Average time to close pull requests: about 1 month
- Total issue authors: 2
- Total pull request authors: 6
- Average comments per issue: 2.75
- Average comments per pull request: 0.52
- Merged pull requests: 50
- Bot issues: 0
- Bot pull requests: 52
Past Year
- Issues: 0
- Pull requests: 3
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Issue authors: 0
- Pull request authors: 1
- Average comments per issue: 0
- Average comments per pull request: 0.0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 3
Top Authors
Issue Authors
- mithi (7)
- fuddl (1)
Pull Request Authors
- dependabot[bot] (61)
- mithi (12)
- mikong (7)
- fuddl (2)
- Alen002 (1)
- kaustubhkadamkk2011 (1)
Top Labels
Issue Labels
Pull Request Labels
Packages
- Total packages: 1
-
Total downloads:
- npm 10 last-month
- Total dependent packages: 2
- Total dependent repositories: 2
- Total versions: 4
- Total maintainers: 1
npmjs.org: bare-minimum-2d
An extremely lightweight React component for plotting points, lines, ellipses, and polygons on an inline SVG
- Homepage: https://github.com/mithi/bare-minimum-2d#readme
- License: MIT
-
Latest release: 0.3.0
published almost 5 years ago