{"id":13626397,"url":"https://github.com/pshihn/venn","last_synced_at":"2025-04-15T19:09:36.311Z","repository":{"id":57391516,"uuid":"380144072","full_name":"pshihn/venn","owner":"pshihn","description":"Declarative Venn Diagrams","archived":false,"fork":false,"pushed_at":"2021-11-18T20:00:25.000Z","size":168,"stargazers_count":51,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-15T19:09:30.017Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/pshihn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"pshihn"}},"created_at":"2021-06-25T06:21:05.000Z","updated_at":"2025-02-11T01:16:38.000Z","dependencies_parsed_at":"2022-09-19T05:02:15.950Z","dependency_job_id":null,"html_url":"https://github.com/pshihn/venn","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshihn%2Fvenn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshihn%2Fvenn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshihn%2Fvenn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshihn%2Fvenn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pshihn","download_url":"https://codeload.github.com/pshihn/venn/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249135809,"owners_count":21218365,"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":[],"created_at":"2024-08-01T21:02:17.220Z","updated_at":"2025-04-15T19:09:36.294Z","avatar_url":"https://github.com/pshihn.png","language":"TypeScript","funding_links":["https://github.com/sponsors/pshihn"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Venny\n\nVenny is a set of custom elements used to show Venn/Euler Diagrams on a web page. These Web Components are framework indepenedent and can easily be used with any framework or in markdown. \n\nVenny is based on [venn.js](https://github.com/benfred/venn.js/) which provides the algorithms to layout area proportional Venn and Euler diagrams. \n\n_Venny is good for area proportional diagrams with as many sets but not very good when the intersections are of more than three sets._\n\n\n## Usage\n\nIn your HTML you can import the library and just use the `venn-` elements in your HTML\n\nFor example:\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/venny?module\"\u003e\u003c/script\u003e\n\n\u003cvenn-diagram\u003e\n  \u003cvenn-set name=\"A\" label=\"Apples\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-set name=\"B\" label=\"Oranges\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-n sets=\"A B\" label=\"Fruit\"\u003e\u003c/venn-n\u003e\n\u003c/venn-diagram\u003e\n```\n\nwill create:\n\n![Venn diagram example](https://user-images.githubusercontent.com/833927/142365349-bd5ca46d-7c3b-41cd-98ee-94848c4f6094.png)\n\n\nYou can also import Venny in your JavaScript project from NPM\n\n```\nnpm install venny -s\n```\n\n### Styling \u0026 Interactivity\n\nVenny components expose CSS properties to let you control the styling of the section. See more in the [Styling section](#styling).\n\nSince these components are just DOM Nodes, you can add click and other handlers to them as you would add to any other node. \n\n### Usage Examples\n\nMore usage and examples on this website: [Venny Website](https://pshihn.github.io/venn/)\n\n## Documentation \n\nVenny is a set of **three components**: `venn-diagram` is the container. `venn-set` represents a set or, visually a circle. `venn-n` describes intersection of sets. \n\n### venn-diagram\n\nThis is the outer-most element for any diagram. It sets the size of the diagram. The default size is `600px x 350px`. These values can be set as properties or via atttributes to the node. These properties/attributes are reactive. When set, the diagram will recalculate the sizes of the shapes. \n\n```html\n\u003cvenn-diagram width=\"400\" height=\"200\"\u003e\n  \u003cvenn-set name=\"A\"\u003e\u003c/venn-set\u003e\n\u003c/venn-diagram\u003e\n```\n\n```javascript\nconst vd = document.querySelector('venn-diagram');\nvd.width = 400;\nvd.height = 200;\n```\n\n### venn-set\n\nThis element represents a single Set. It must have a `name` property. You can also set a `label` property which gets displayed in the diagram. \n\nCircles corresponding to each set are sized based on the `size` property which has a numeric value. If no `size` is set, it is assumed that the set's size is `10`.\n\n```html\n\u003cvenn-diagram\u003e\n  \u003cvenn-set name=\"A\" label=\"Apples\" size=\"20\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-set name=\"B\" label=\"Bananas\" size=\"10\"\u003e\u003c/venn-set\u003e\n\u003c/venn-diagram\u003e\n```\n\n![Venn Diagram with differrnt sized sets](https://user-images.githubusercontent.com/833927/142366532-ed00c3c0-16f9-4f18-a10e-1c7b5bafe818.png)\n\n\n### venn-n\n\nThis element represents the intersection of two or more sets. The intersecting sets are specified in the `sets` property, which is a list of *space separated* set namnes.\nLike a set, the intersection can alsoe have a `label` and a `size`. The `size` property indicates how much the sets are intersecting. e.g. two sets each of size 10, can have 5 elements in the intersection or just 1.\n\n```html\n\u003cvenn-diagram\u003e\n  \u003cvenn-set name=\"A\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-set name=\"B\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-n sets=\"A B\" size=\"5\" label=\"Five\"\u003e\u003c/venn-n\u003e\n\u003c/venn-diagram\u003e\n\n\u003cvenn-diagram\u003e\n  \u003cvenn-set name=\"A\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-set name=\"B\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-n sets=\"A B\" size=\"1\" label=\"One\"\u003e\u003c/venn-n\u003e\n\u003c/venn-diagram\u003e\n```\n\n![Screen Shot 2021-11-17 at 10 58 04 PM](https://user-images.githubusercontent.com/833927/142367366-494f134c-6a59-4e3f-a117-76577b375562.png)\n![Screen Shot 2021-11-17 at 10 57 52 PM](https://user-images.githubusercontent.com/833927/142367386-fc28c2de-6ac0-4dcc-b91f-13f899ca81a2.png)\n\n\nNormally when more than two sets are intersecting, you should declare all possible intersections but it is not necessary. e.g. If three sets are intersecting, you can just provide one intersection for sets `A, B, C`. Venny will automatically assume values for intersections of `A, B` `B, C` and `A, C`. \n\n```html\n\u003cvenn-diagram\u003e\n  \u003cvenn-set name=\"A\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-set name=\"B\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-set name=\"C\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-n sets=\"A B C\"\u003e\u003c/venn-n\u003e\n\u003c/venn-diagram\u003e\n```\n![Screen Shot 2021-11-17 at 11 01 17 PM](https://user-images.githubusercontent.com/833927/142367951-bed31784-289f-42ad-9a8e-ff9e05c2d017.png)\n\nOr you can be specific \n\n```html\n\u003cvenn-diagram\u003e\n  \u003cvenn-set name=\"A\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-set name=\"B\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-set name=\"C\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-n sets=\"A B C\" size=\"1\"\u003e\u003c/venn-n\u003e\n  \u003cvenn-n sets=\"A B\" size=\"5\"\u003e\u003c/venn-n\u003e\n  \u003cvenn-n sets=\"A C\" size=\"3\"\u003e\u003c/venn-n\u003e\n\u003c/venn-diagram\u003e\n```\n![Screen Shot 2021-11-17 at 11 02 07 PM](https://user-images.githubusercontent.com/833927/142368046-b808e127-c4b1-436a-b9e1-fa0ddad015d8.png)\n\n### Nested Sets\n\nWhen you need to show that a Set is a subset of another one, you can create an intersection expressing that, or you can define the Subset as a child of the parent Set. Venny will automatically generate the intersection of the two.\n\n```html\n\u003cvenn-diagram\u003e\n  \u003cvenn-set name=\"A\" label=\"Apples\"\u003e\u003c/venn-set\u003e\n  \u003cvenn-set name=\"B\" label=\"Oranges\"\u003e\n    \u003cvenn-set name=\"C\" label=\"Lemons\"\u003e\n      \u003cvenn-set name=\"D\" label=\"Limes\"\u003e\u003c/venn-set\u003e\n    \u003c/venn-set\u003e\n  \u003c/venn-set\u003e\n  \u003cvenn-n sets=\"A B\" size=\"1\" label=\"A+O\"\u003e\u003c/venn-n\u003e\n\u003c/venn-diagram\u003e\n```\n![Screen Shot 2021-11-17 at 11 11 15 PM](https://user-images.githubusercontent.com/833927/142369233-21eb4005-fcec-4a4a-a9e1-605c8a6f565e.png)\n\n\n## Styling \n\nVenny exposes custom CSS properties to style the diagrams. Color, opacity of the set fill, stroke colors can be specified for the normal and the `hover` states. \n\n### Styling Circles\n\n**Fill Color:** A dynamic color is assigned to each circle. But this can be overriden by setting the css property `--venn-circle-[name]-fill` where name is the name of the set in lower-case. e.g. `--venn-circle-apples-fill: red;`\n\nA corersponding property `--venn-hover-[name]-fill` can be set to change the color of the set when the user hovers over the set. \n\n**Fill Opacity:** By default all circles are filled with an opacity of `0.25`. Having a translucent fill easily shows the intersections between the sets. However the default value of this can be set by setting the `--venn-circle-fill-opacity` property. To change the fill opacity only of a specific set you can set the `--venn-circle-[name]-fill-opacity` property by substituting `[name]` with the name of the set in lower-case. \n\nCorresponding hover properties are `--venn-hover-circle-fill-opacity` and `--venn-hover-circle-[name]-fill-opacity` to change the opacity on hover. \n\n**Stroke:** Circles are not drawn without any stroke (outline). But circle stroke color, size can be set using following properties:\n\n`--venn-circle-stroke` to set the color of the stroke of all circles. `--venn-circle-[name]-stroke` to set the stroke color of a specific set. \n\n`--venn-circle-stroke-width` to set the width of the stroke of all circles. `--venn-circle-[name]-stroke-width` to set the stroke width of a specific set. \n\nReplace `--venn-` with `--venn-hover-` in these styles to set these when hovered. \n\n### Styling Intersections\n\nIntersection strokes can be set using `--venn-intersection-stroke` and `--venn-intersection-stroke-width` prroperties. \n\nTo set stroke on a specific intersection specify the intersecting set names in lower case, separated by a `-`\ne.g. `--venn-intersection-a-b-stroke` sets the stroke color only of the intersection of Sets A and B.\n\nReplace `--venn-` with `--venn-hover-` in these styles to set these when hovered. \n\n### Styling Labels\n\nBy default labels use the same color as their corresponding sets but with full opacity. Intersection labels are black by default. \n\n`--venn-label-color` can be set to set the color of all labels. \n\n`--venn-label-[name]-color` to set the label color of a specific set or intersection. e.g `--venn-label-a-b-color` sets the label color of the intersection of sets A, B\n\nFollowing properties cannot be set on a set specifc levl at the moment:\n\n`--venn-label-size` sets the font size of the label.\n\n`--venn-label-font-family` sets which Font you'd like to use for the labels.\n\n`--venn-label-font-weight` sets the font weight which defaults to normal / 400. \n\n## Sponsor\n\nIf you like my whimsical open source projects like this one, you can show some love by sponsoring me https://github.com/sponsors/pshihn \nOr just Tweet at me to show your love, that's equally appreciated :)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpshihn%2Fvenn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpshihn%2Fvenn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpshihn%2Fvenn/lists"}