{"id":13726432,"url":"https://github.com/hydrosquall/code-maps-frontend","last_synced_at":"2025-07-04T08:37:56.050Z","repository":{"id":90547163,"uuid":"209654523","full_name":"hydrosquall/code-maps-frontend","owner":"hydrosquall","description":"resources about visualizing + mapping javascript codebases","archived":false,"fork":false,"pushed_at":"2020-04-16T17:44:56.000Z","size":7,"stargazers_count":65,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-06T04:51:12.296Z","etag":null,"topics":["architecture-visualization","diagrams","frontend-development","visual-programming"],"latest_commit_sha":null,"homepage":"","language":null,"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/hydrosquall.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}},"created_at":"2019-09-19T21:50:10.000Z","updated_at":"2025-02-02T11:14:59.000Z","dependencies_parsed_at":"2023-07-18T16:01:26.240Z","dependency_job_id":null,"html_url":"https://github.com/hydrosquall/code-maps-frontend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hydrosquall/code-maps-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hydrosquall%2Fcode-maps-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hydrosquall%2Fcode-maps-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hydrosquall%2Fcode-maps-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hydrosquall%2Fcode-maps-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hydrosquall","download_url":"https://codeload.github.com/hydrosquall/code-maps-frontend/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hydrosquall%2Fcode-maps-frontend/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263478503,"owners_count":23473008,"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":["architecture-visualization","diagrams","frontend-development","visual-programming"],"created_at":"2024-08-03T01:03:04.572Z","updated_at":"2025-07-04T08:37:56.025Z","avatar_url":"https://github.com/hydrosquall.png","language":null,"readme":"# code-maps-frontend\n\nExploring the idea of using interactive auto-generated diagrams to make frontend code more understandable.\n\n## Presentations\n\n- [October 2019] React Conf: [Slides](https://slides.com/cameronyick/frontend-maps-react-conf-2019) / [Video](https://www.youtube.com/watch?v=SbreAPNmZOk) / [Transcript](https://www.datadoghq.com/videos/2020-auto-viz-of-the-frontend/)\n- [September 2019] React Boston : [Slides](https://slides.com/cameronyick/frontend-code-maps) / [Video](https://www.youtube.com/watch?v=iS3BNfbDXzE)\n\nPlease feel welcome to send me maps of code that you have made or find elsewhere.\n\n## Readings\n\n- Mentioned\n  - Papers\n    - [Software Reflexion Models: Bridging the Gap Between Source \u0026 High Level Models](https://www.cs.ubc.ca/~murphy/papers/rm/fse95.html) - Gail C. Murphy, Kevin Sullivan, David Notkin (1995)\n    - [The Eyes Have It: A Taxonomy for Information Visualization](https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf) - Ben Schneiderman (1996)\n  - Articles\n    - [How Graphic Design Legend Massimo Vignelli Cracked the NYC Subway System](https://www.ceros.com/originals/massimo-vignelli-nyc-subway/)\n  - Books\n    - [How to Lie With Maps](https://www.amazon.com/How-Lie-Maps-Mark-Monmonier/dp/0226534219) - Mark Monmonier\n    - [History of the World in 12 Maps](https://www.amazon.com/History-World-12-Maps/dp/0143126024)\n- Influenced but not directly quoted\n  - [Questions Developers Ask During Change Tasks](http://pages.cpsc.ucalgary.ca/~sillito/work/fse2006.pdf) - Sillito (2006)\n  - [Developers Ask Reachability Questions](https://dl.acm.org/citation.cfm?id=1806829) - Thomas LaToza \u0026 Brad Myers (2012)\n\n## Tools\n\n- Visual + Node Based Programming (not necessarily JS)\n  - [Visual Programming Codex](https://github.com/ivanreese/visual-programming-codex)\n  - Collections on are.na such as [Frederic Brodbeck's](https://www.are.na/frederic-brodbeck/dataflow-programming) or [@round](https://www.are.na/maxim-leyzerovich/visual-programming-aedh3fsg8nm)'s. Still working on curating my own.\n\n- JS+TS Exploration\n  - Files as Nodes\n    - [ARKit](https://github.com/dyatko/arkit)\n    - [Dependency-Cruiser](https://github.com/sverweij/dependency-cruiser)\n    - [Madge](https://github.com/pahen/madge)\n  - Functions as Nodes\n    - Dynamic Callgraphs (Browser Devtools, [Flamebearer](https://github.com/mapbox/flamebearer))\n    - Python/C Tools: [Pyan](https://github.com/davidfraser/pyan)\n    - Static Callgraphs: [js-callgraph](https://github.com/Persper/js-callgraph)\n  - Variables as Nodes\n    - [Observable Debugger](https://observablehq.com/@mbostock/notebook-visualizer)\n    - [Reselect Devtools](https://github.com/skortchmark9/reselect-tools)\n  - State Machines\n    - [XState](https://github.com/davidkpiano/xstate)\n    - [Sketch.systems](https://sketch.systems/)\n\n- Miscellaneous\n  - [Python Callgraph](http://pycallgraph.slowchop.com/en/master/)\n  - Data Engineering DAGs: Airflow and Dagster UI ([Compound nodes](https://dagster.readthedocs.io/en/0.5.9/sections/reference/reference.html#composite-solids))\n  - Visualizing Audio Transformation DAGs: [NFGrapherJS](https://github.com/spotify/NFGrapher/issues/5)\n\n- Influenced but not directly mentioned\n  - Alternate network layouts (Hive plots, biofabric)\n    - [The State of the Art in Visualizing Multivariate Networks](https://vdl.sci.utah.edu/publications/2019_eurovis_mvn/)\n  - Generic graph analysis tools (Cytoscape + Gephi + Neo4j viewer)\n  - Codecrumbs / Structuralizr TS / Dependo\n  - Visual tools for performance/bundle optimization / code growth\n    - Gource, Codeflower, hercules, git-of-theseus, bundlebuddy, etc\n  - Bret Victor / Mindstorms (Papert) on tangible computing\n  - Susie Lu's Keynote at Visfest Unconf 2019 - [Data Visualization Retrospective and Abstractions](https://www.susielu.com/data-viz/abstractions)\n\n## Demos\n\n- [Electron Demos from Section 3](https://github.com/hydrosquall/interactive-js-map)\n- [Historical Train Schedule Remake](https://slides.com/cameronyick/metronorth-train-viz)\n- [Github Radial Repository](https://github.com/hydrosquall/untitled-code-map) - An Electron version of an demo by Amelia Wattenberger. Not from the presentation, but explores related ideas.\n\n## Related Readings / Watches\n\nIf you're read this far, you might also like these non-frontend specific resources:\n\n- [Visualizing The Architecture](https://www.youtube.com/watch?v=zcmU-OE452k) - Simon Brown, Devternity 2016. See also his site [codingthearchitecture.com](http://www.codingthearchitecture.com/)\n- [One-Page Design Docs](https://www.gdcvault.com/play/1012356/One-Page) - Stone Librande\n- Readings on Wayfinding\n- [Ruth Malan](https://www.ruthmalan.com/)'s public work on software architecture\n- [Your Code as a Crime Scene](https://www.youtube.com/watch?v=qJ_hplxTYJw) - Adam Tornhill (TED 2016) - Applying forensic psychology to understanding code\n- Trying out any GIS software (ArcGIS, ESRI, QGis) to get a feel for the potential of data-map overlays\n\n## Contributing\n\nIf you see a resource that you think would be appropriate to include in this list, I welcome pull requests/issues.\n\nIn the future, the \"recommended/cut for time\" sections might split into a separate list of curated resources. In that case, this document will be limited to items specifically mentioned in the talk.\n","funding_links":[],"categories":["Others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhydrosquall%2Fcode-maps-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhydrosquall%2Fcode-maps-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhydrosquall%2Fcode-maps-frontend/lists"}