{"id":19696206,"url":"https://github.com/mithi/bare-minimum-2d","last_synced_at":"2025-04-29T11:31:56.598Z","repository":{"id":39701841,"uuid":"285877248","full_name":"mithi/bare-minimum-2d","owner":"mithi","description":"An extremely lightweight React component to declaratively (and elegantly) plot shapes on an inline SVG","archived":false,"fork":false,"pushed_at":"2024-06-20T16:49:29.000Z","size":3400,"stargazers_count":23,"open_issues_count":8,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-18T20:59:22.887Z","etag":null,"topics":["build-your-own","build-your-own-x","chart-js","charting-library","creative-coding","d3js","data-visualization","hacktoberfest","javascript","javascript-library","p5js","plot","plotly","plotting","plotting-library","react","svg","svg-animations","visualization"],"latest_commit_sha":null,"homepage":"https://bare-minimum-2d.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mithi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-07T16:43:06.000Z","updated_at":"2024-06-09T20:27:04.000Z","dependencies_parsed_at":"2023-02-08T05:17:15.142Z","dependency_job_id":"2e657b32-05fd-40f2-ae8c-acca56b2e5ce","html_url":"https://github.com/mithi/bare-minimum-2d","commit_stats":{"total_commits":152,"total_committers":5,"mean_commits":30.4,"dds":0.3157894736842105,"last_synced_commit":"9ee17c765c88b16dce790e08931660aafd6d4557"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mithi%2Fbare-minimum-2d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mithi%2Fbare-minimum-2d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mithi%2Fbare-minimum-2d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mithi%2Fbare-minimum-2d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mithi","download_url":"https://codeload.github.com/mithi/bare-minimum-2d/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251493957,"owners_count":21598204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["build-your-own","build-your-own-x","chart-js","charting-library","creative-coding","d3js","data-visualization","hacktoberfest","javascript","javascript-library","p5js","plot","plotly","plotting","plotting-library","react","svg","svg-animations","visualization"],"created_at":"2024-11-11T19:34:17.587Z","updated_at":"2025-04-29T11:31:54.997Z","avatar_url":"https://github.com/mithi.png","language":"JavaScript","readme":"# A Bare Minimum 2D Plotter\n\n\u003e An extremely lightweight React component to declaratively (and elegantly) plot shapes on an inline SVG\n\n[![NPM](https://img.shields.io/npm/v/bare-minimum-2d.svg)](https://www.npmjs.com/package/bare-minimum-2d)\n[![MINIFIED](https://img.shields.io/bundlephobia/min/bare-minimum-2d@0.2.0?color=%2300BCD4\u0026label=minified)](https://bundlephobia.com/result?p=bare-minimum-2d@0.2.0)\n[![GZIPPED](https://img.shields.io/bundlephobia/minzip/bare-minimum-2d@0.2.0?color=%2300BCD4\u0026label=minified%20%2B%20gzipped)](https://bundlephobia.com/result?p=bare-minimum-2d@0.2.0)\n\n## Update: External Plugins 🥳\nYou can now use your own shape implementation by passing it as a plugin (see [plugin section](./README.md#plugins) below for more information).\nBelow are a couple of plugins by [@fuddl](https://github.com/fuddl).\n\n* [`text-marker`](https://www.npmjs.com/package/bare-minimum-text-marker) ([Demo](https://fuddl.github.io/bare-minimum-text-marker/))\n* [`quadratic-bezier`](https://www.npmjs.com/package/bare-minimum-quadratic-bezier) ([Demo](https://fuddl.github.io/bare-minimum-quadratic-bezier/))\n\n## Demo Applications\n\n| Responsive Illustrations                                                            | On-The-Fly Animations                                                               | Interactive Applications                                                            |\n| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |\n| [\u003cimg src=\"./example/src/demo1/demo.svg\" height=\"300px\" width=\"300px\"\u003e][demo_link1] | [\u003cimg src=\"./example/src/demo2/demo.svg\" height=\"300px\" width=\"300px\"\u003e][demo_link2] | [\u003cimg src=\"./example/src/demo3/demo.svg\" height=\"300px\" width=\"300px\"\u003e][demo_link3] |\n| [demo][demo_link1]                                                                  | [demo][demo_link2]                                                                  | [demo][demo_link3]                                                                  |\n| [source code][source_link1]                                                         | [source code][source_link2]                                                         | [source code][source_link3]                                                         |\n\n[demo_link1]: https://bare-minimum-2d.netlify.app/demo1\n[demo_link2]: https://bare-minimum-2d.netlify.app/demo2\n[demo_link3]: https://bare-minimum-2d.netlify.app/demo3\n[source_link1]: https://github.com/mithi/bare-minimum-2d/blob/master/example/src/demo1/demo.js\n[source_link2]: https://github.com/mithi/bare-minimum-2d/blob/master/example/src/demo2/demo.js\n[source_link3]: https://github.com/mithi/bare-minimum-2d/blob/master/example/src/demo3/demo.js\n\n## Install\n\n```bash\nnpm install --save bare-minimum-2d\n```\n\n## Usage\n\nThis is [an example](./example/src/demo1/demoProps.js) of what you can pass to a `BareMinimum2d` component.\n\nYou pass it like so:\n\n```jsx\nimport BareMinimum2d from 'bare-minimum-2d'\n\n\u003cdiv style={{ width: '100%', height: '100vh' }}\u003e\n  \u003cBareMinimum2d {...{ data, container }} /\u003e\n\u003c/div\u003e\n```\n\nThe component takes the dimensions of its parent and is always centered\n\n## Everything you need to know explained in two minutes\n\nA `BareMinimum2d` component only has two props: `container` and `data`. `container` is a small object with exactly four elements. `data` is an array containing objects.\n\nExample:\n\n```jsx\nimport BareMinimum2d from 'bare-minimum-2d'\n\nconst container = {\n  color: '#0000FF',\n  opacity: 0.2,\n  xRange: 300,\n  yRange: 500\n}\n\nconst data = [{\n  x: [0],\n  y: [0],\n  color: \"#FFFFFF\",\n  opacity: 1.0,\n  size: 10,\n  type: 'points',\n  id: 'center'\n}]\n\n\u003cdiv style={{ width: \"100%\", height: \"100vh\" }}\u003e\n  \u003cBareMinimum2d {...{ data, container }} /\u003e\n\u003c/div\u003e\n```\n\n`container.color` and `container.opacity` specifies the canvas color of `BareMinimum2d`.\n\nThe 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.\n\n```js\n                  yRange/2\n                     |\n                     |\n  -xRange/2 -------(0,0)--------- xRange/2\n                     |\n                     |\n                   -yRange/2\n```\n\nPlease take a look at more [complex example data prop](./example/src/demo1/demoProps.js) to get the idea.\neach element of the array `data` should be a hash-like objectwith a `type` key which should have a value that is one of\nthe following:\n\n| points | ellipse  | lines  | polygon  |\n| ------ | -------- | ------ | -------- |\n| plural | singular | plural | singular |\n\nElements of the `data` array will be stacked based on the order they are declared.\nThe first element will be at the most bottom layer while the last element of the array will be at the top.\n\nAll 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.\n\n#### Create your own\n\nYou can add your own shapes as a plugin for example, here's an example plugin written by [@fuddl](https://github.com/fuddl)\n\n```jsx\n\nconst Triangle = ({ x, y, transforms, size, color, opacity, id, i }) =\u003e {\n  const cx = transforms.tx(x)\n  const cy = transforms.ty(y)\n  const ySize = size * 0.8626\n  return (\n    \u003cpolygon\n      {...{\n        opacity,\n        id: `${id}-${i}`,\n        fill: color\n      }}\n      points={[\n        `${cx},${cy - ySize}`,\n        `${cx + size},${cy + ySize}`,\n        `${cx - size},${cy + ySize}`\n      ].join(' ')}\n    /\u003e\n  )\n}\n\nconst trianglesPlugin = {\n  triangle: (element, transforms) =\u003e {\n    const { size, color, opacity, id } = element\n    return element.x.map((x, i) =\u003e (\n      \u003cTriangle\n        {...{\n          x,\n          y: element.y[i],\n          size,\n          color,\n          opacity,\n          id,\n          i,\n          transforms\n        }}\n        key={`${id}-${i}`}\n      /\u003e\n    ))\n  }\n}\n```\n\nAnd you can use it like so:\n\n```jsx\nconst triangle = {\n  \"x\": [-163.72675374383329],\n  \"y\": [-154.33259574213795],\n  \"opacity\": 1,\n  \"size\": 60,\n  \"color\": \"#2196F3\",\n  \"type\": \"triangles\",\n  \"id\":\"points0\"\n}\n\n\u003cdiv style={{ width: \"100%\", height: \"100vh\" }}\u003e\n  \u003cBareMinimum2d {...{ data: [triangle], container, plugins: [trianglesPlugin] }} /\u003e\n\u003c/div\u003e\n```\n\nEND\n\n## Contributing\n\n1. Clone this repository.\n2. Add your changes\n3. You can add a demo or update the demo based on your changes somewhere [here](https://github.com/mithi/bare-minimum-2d/tree/master/example/src)\n4. After making your change go run the following command to see if it works as you expect.\n```\nnpm install \u0026\u0026 npm run build \u0026\u0026 rm -rf node_modules \u0026\u0026 cd example \u0026\u0026 npm install \u0026\u0026 npm run start\n```\n\nPRs welcome! Please read the [contributing guidelines](https://github.com/mithi/mithi/wiki/Contributing) and the [commit style guide](https://github.com/mithi/mithi/wiki/Commit-style-guide)!\n\n## License\n\nMIT © [Mithi](https://github.com/mithi)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmithi%2Fbare-minimum-2d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmithi%2Fbare-minimum-2d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmithi%2Fbare-minimum-2d/lists"}