PojoViz - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #llm #golang #go #machine-learning #rust #windows #cli #kubernetes #awesome-list #pytorch #security

PojoViz

(★ 510)

Visualize the object structure of many JavaScript libraries & frameworks

파일 탐색기

최종 버전 다운로드 (.zip)

- - speckit.analyze.toml
  - speckit.checklist.toml
  - speckit.clarify.toml
  - speckit.constitution.toml
  - speckit.implement.toml
  - speckit.plan.toml
  - speckit.specify.toml
  - speckit.tasks.toml
- - gh-pages.yml
- - constitution.md
- - agent-file-template.md
  - checklist-template.md
  - plan-template.md
  - spec-template.md
  - tasks-template.md
- custom.js
- external.js
- externalEmber.js
- helloWorld.js
- helloWorldForbidFunction.js
- helloWorldNoForbid.js
- pojoviz.js
- pojovizLevels.js
- pojovizNoArrays.js
- simple.js
- simpleForceVisit.js
- simpleUppercase.js
- - data-model.md
  - plan.md
  - quickstart.md
  - spec.md
  - tasks.md
- - svelte.svg
- - Canvas.svelte
  - CodeMirrorEditor.svelte
  - Dialog.svelte
  - InspectorForm.svelte
  - LibraryMenu.svelte
  - Notification.svelte
  - ProgressBar.svelte
  - Readme.svelte
  - Search.svelte
  - Sidebar.svelte
  - Toolbar.svelte
- - index.js
  - InspectedInstances.js
  - ObjectAnalyzer.js
- app.css
- App.svelte
- github-markdown.css
- main.js
- utils.js
- vite-env.d.ts
- - schemas.spec.js
- hashkey.spec.js
- index.js
- Inspector.spec.js
- labeler.spec.js
- ObjectAnalyzer.spec.js
- utils.spec.js
.editorconfig
.eslintrc.cjs
.gitignore
.prettierrc.json
DEV_README.md
index.html
karma.conf.js
LICENSE
package-lock.json
package.json
README.md
svelte.config.js
tailwind.config.js
vite.config.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/mauriciopoppe/PojoViz

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd PojoViz

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

PojoViz - Plain Old JavaScript Object Visualization
=======

PojoViz is a tool to visualize the plain objects of a JavaScript object hierarchy by finding all the relationships found between the hierarchy entry point (in most libraries/frameworks a global variable) and the objects/functions linked to it.

To start, click on any of the links on the left ⬅️.

## How does it work?

In short PojoViz receives as input a collection of JS objects and then:

- It does a Depth First Search through the properties of objects/functions it finds along the way
- It finishes whenever it reaches a max-depth or it completes visiting all reachable nodes
- It creates a graph whose layout is computed by [dagre](https://github.com/cpettitt/dagre)
- The graph is rendered by [d3.js](http://d3js.org/)

## Why?

I wanted a way to visualize the object structure of libraries, meaning, if you take the `Object` and follow `Object.prototype` how
many other objects will you find?

Learnings:

- `typeof Function.prototype` is `function`. I thought that all prototypes were of type `object`.
- There are some objects in `window` that are read-only and we can't set properties on them.
- There are many "array like" objects somewhere deep in the stack in `window`.

## Features

- Renders the hierarchy of the browser's built in objects (Object, Function, etc)
- Renders a library/framework hosted anywhere through the Library Search widget (as long as there is a way to access it, e.g. for d3 `window.d3` would be the access point to the library)

## Technologies used in this project

- [d3](http://d3js.org/)
- [Dagre](https://github.com/cpettitt/dagre)