https://github.com/wikibonsai/treehouze

Graph utilities for handling and housing markdown wikis -- and (semantic) trees!
https://github.com/wikibonsai/treehouze

d3 force-graph graph memory-palace wikibonsai

Last synced: 10 months ago
JSON representation

Graph utilities for handling and housing markdown wikis -- and (semantic) trees!

• Host: GitHub
• URL: https://github.com/wikibonsai/treehouze
• Owner: wikibonsai
• License: gpl-3.0
• Created: 2023-03-01T16:39:29.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-12T22:25:51.000Z (over 2 years ago)
• Last Synced: 2025-04-09T04:20:34.647Z (about 1 year ago)
• Topics: d3, force-graph, graph, memory-palace, wikibonsai
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/treehouze
• Size: 97.7 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# treehouze

[![A WikiBonsai Project](https://img.shields.io/badge/%F0%9F%8E%8B-A%20WikiBonsai%20Project-brightgreen)](https://github.com/wikibonsai/wikibonsai)

[![NPM package](https://img.shields.io/npm/v/treehouze)](https://npmjs.org/package/treehouze)



  



Treehouze is a single graph instance that may be translated between [2D](https://github.com/vasturiano/force-graph), [3D](https://github.com/vasturiano/3d-force-graph), [VR](https://github.com/vasturiano/3d-force-graph-vr), and [AR](https://github.com/vasturiano/3d-force-graph-ar) representations without any changes to its shape or structure.

It's designed to be as general-purpose as possible, but was built with [`[[wikirefs]]`](https://github.com/wikibonsai/wikirefs) and [semantic trees](https://github.com/wikibonsai/semtree) structures in mind with the aim of facilitating tangible digital [memory palaces](https://artofmemory.com/blog/how-to-build-a-memory-palace/).

🏡 Build and maintain a treehouze to play in in your [WikiBonsai](https://github.com/wikibonsai/wikibonsai) digital garden.

## Install

Install with [npm](https://docs.npmjs.com/cli/v9/commands/npm-install):

```

npm install treehouze

```

Or use a script tag:

```html

```

## Use

Add 2 div elements to your `html` -- one for the graph itself and another for the element that wraps it (this is for [selecting multiple nodes](#shift--click) to work)

```html