{"id":16960536,"url":"https://github.com/randomfractals/venn-diagram-generator","last_synced_at":"2025-10-13T20:38:50.502Z","repository":{"id":101632403,"uuid":"87090734","full_name":"RandomFractals/venn-diagram-generator","owner":"RandomFractals","description":"we do it for #dataSci tech lulz :)","archived":false,"fork":false,"pushed_at":"2017-09-27T15:11:55.000Z","size":9393,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-13T20:38:46.810Z","etag":null,"topics":["angular4","data-science","diagram-generator","pancakes","svg","venn-diagram"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RandomFractals.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}},"created_at":"2017-04-03T15:37:09.000Z","updated_at":"2022-06-30T03:14:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"faa29da6-0fd3-4579-bbfa-48f8d77b0472","html_url":"https://github.com/RandomFractals/venn-diagram-generator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RandomFractals/venn-diagram-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvenn-diagram-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvenn-diagram-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvenn-diagram-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvenn-diagram-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RandomFractals","download_url":"https://codeload.github.com/RandomFractals/venn-diagram-generator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvenn-diagram-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279016930,"owners_count":26085910,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["angular4","data-science","diagram-generator","pancakes","svg","venn-diagram"],"created_at":"2024-10-13T22:49:09.415Z","updated_at":"2025-10-13T20:38:50.485Z","avatar_url":"https://github.com/RandomFractals.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# venn-diagram-generator\n\nwe do it for #dataSci tech lulz :)\n\n# Venn Diagrams generator MVP demo on the web:\n\nhttps://venn-diagrams.herokuapp.com/\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/VennDiagramGeneratorMVP.png)\n\n# VueJS CodePen\n\nIf you are looking for a vuejs quickie of this viz, I got you! :) \n\nSee this codepen: https://codepen.io/TarasNovak/full/prZmqY\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/VennDiagramsVueJSPort.png)\n\n# basic Venn Diagram Designer UX Sketch Idea\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/vennDiagramsMemeGeneratorSketchIdea.jpg)\n\n# Synopsis\n\nThe idea for this Venn diagram pics generator project came from sourcing a number of ineteresting posts from the data science community: new data scientist position posted, articles shared on medium, kdnuggets or elsewhere, and heavy use and abuse of Venn Diagrams pics for that purpose.\n\nAs a data viz specialist and practitioner, I've had it! A few other creative types decided if we can't beat them, we should join them, and create one stop shop app for you to gen those Venn Diagrams about what you fancy, and what unicorn intersection you are trying to find FTW.\n\nThus, the Venn Diagram generator idea was born: \n\nhttps://twitter.com/dataandme/status/848850426095120384\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/vennDiagramsInTheWild.png)\n\n# Ultimate Project Goal\n\nIdeally, we'd like to create an app for you to gen Venn Diagrams like this:\n\nhttps://twitter.com/BourseetTrading/status/848192200789942272\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/epicDataSciVennDiagram.jpg)\n\nor how to make your pancakes:\n\nhttps://twitter.com/MrBenWard/status/836489614676353024\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/pancakesVennDiagram.jpg)\n\n## How we got here:\n\nBest bg story on how we ended up here is on kdnuggets:\n\nhttp://www.kdnuggets.com/2016/10/battle-data-science-venn-diagrams.html\n\nAlso get to know 42 V's of data science. Fun read:\n\nhttp://www.kdnuggets.com/2017/04/42-vs-big-data-data-science.html\n\n# Side Project Goal\n\nDemonstrate custom Angular 4, SVG, and Material UI CSS mini-app setup best practices from start to finish with micro commits in a few days or so.\n\n# App Dev Status\n\n## day 1: Angular 4 App Scaffolding  + basic Topic list UI prototype:\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/vennDiagramTopicList3.png)\n\nAlso, the boilerplate angular4 jasmine tests are still passing. It's a good sign. \nI'll double down on that part for the topic list view model type in day 2 of dev.\nOne must have tests! for good karma and all :)\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/vennDiagramsTestKarma2.png)\n\n## day 2 of dev: Inline Topic editor UI prototype:\n\n- \u0026#10003; add delete topic option\n- \u0026#10003; add move topic up/down options for reordering diagram topics\n- \u0026#10003; add inline topic name editor\n- \u0026#10003; add diagram view model topic list updates tests\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/vennDiagramTopicListEditor2.png)\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/vennDiagramTopicListTests1.png)\n\n## day 3 of dev: Custom Material UI app CSS setup\n\n- \u0026#10003; add custom responsive material UI CSS setup for the app title bar, view content/cards, footer, etc.\n- \u0026#10003; add inline diagram name/title editor functionality\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/vennDiagramTopicListPrettyV.PNG)\n\n## day 4 of dev (6/27/2017):\n\n- \u0026#10003; split monolithic Angular 4 prototype app component into separate app header/footer, topic list, and actual venn diagram components\n- \u0026#10003; set up a half ass decent 2 cols layot for topic list and diagram view comp.\n\n## day 5 of dev\n- \u0026#10003; deploy to https://venn-diagrams.herokuapp.com for topic list test on mobile and UI layout preview\n- \u0026#10003; switch to this 2 cols layout for mobile: https://codepen.io/mor10/pen/QvmLpd\n- \u0026#10003; stub out the actual Venn diagram SVG view component to render diagram topics. \n  Use this code block: http://bl.ocks.org/bycoffe/3404776\n\nLatest with Augury:\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/VennD2LayoutWithAugury.png)\n\nBlank app canvas for that Venn D SVG render:)\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/VennDBlankCanvas.png)\n\n## 7-5-2017: Still lots todo :)\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/VennDiagramsGenAppMVPTodo.jpg)\n\n## 7-6-2017: Latest with funky colors and some app UI tips on heroku: https://venn-diagrams.herokuapp.com/\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/VennDWithFunkyColors.png)\n\n## ...\n\n## 7-10-2017: MVP Alpha v with ellipses layout and mandatory pancakes test :)\n\n![alt tag](https://github.com/RandomFractals/venn-diagram-generator/blob/master/screens/PancakesEllipsesVennDiagram.png)\n\nI'll add random circles/ellipses layout just for fun next.\n\n# App Build/Run Instructions\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.1.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. \n\nThe app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. \n\nYou can also use `ng generate directive|pipe|service|class|module`.\n\n## Build\n\nRun `ng build` to build the project. \n\nBuild artifacts will be stored in the `dist/` directory. \n\nUse the `-prod` flag for a production build.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\nBefore running the tests make sure you are serving the app via `ng serve`.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` \n\nor see Angular CLI README\n(https://github.com/angular/angular-cli/blob/master/README.md).\n\n## Yarn Note\n\nRun `ng set --global packageManager=yarn` to use Yarn package manager\n\n## References\n\nA bunch of good tech reads I used for building this mini-app.\n\n### Angular 4\n\n- Good writeup on #angular 4 comps comms via Input/Output, beyond simple string msg passing example :) \n\nhttps://www.infoq.com/articles/angular-component-communication\n\n- For a more robust solution via RJXS Observable Service see: \n\nhttp://mean.expert/2016/05/21/angular-2-component-communication/\n\n- How to deploy Angular 4 web app with Express to heroku:\n\nhttps://medium.com/@ervib/deploy-angular-4-app-with-express-to-heroku-6113146915ca\n\n### CSS Tips and Tricks\n\n- Decent no frills responsive html5/css3 2 cols layout setup for desktop and mobile browsers:\n\nhttps://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/\n\n- How to vertically align inline-blocks (used for stroke/fill color boxes setup):\n\nhttps://codepen.io/edge0703/pen/iHJuAf\n\n\n### SVG code blocks\n\n- Placing SVG elements around a circle d3 code block:\n\nhttp://bl.ocks.org/bycoffe/3404776\n\n- How to Export SVG d3 data viz to Png or Jpeg:\n\nhttp://bl.ocks.org/Rokotyan/0556f8facbaf344507cdc45dc3622177\n\n\n### Venn Diagrams Links\n\n- Exact and Approximate Area-proportinal Circular Venn and Euler Diagrams whitepaper:\n\nhttps://www.cs.uic.edu/~wilkinson/Publications/venneuler.pdf\n\n- All you can eat DataScience VennDiagrams on Bing for this proj. research reference:\n\nhttps://www.bing.com/images/search?q=data+science+venn+diagram\u0026FORM=IGRE","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frandomfractals%2Fvenn-diagram-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frandomfractals%2Fvenn-diagram-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frandomfractals%2Fvenn-diagram-generator/lists"}