dorkhub
show your thing

graphosaurus

3D graph viewer powered by WebGL (three.js)

frewsxcv
JavaScript★ 391⑂ 47 forksMPL-2.0updated 4 years ago
graphjavascriptthreejsvisualizationwebgl
visit the demogit clone https://github.com/frewsxcv/graphosaurus.gitfrewsxcv/graphosaurus
README.mdfork it — it’s yours

Graphosaurus

Build Status npm version

A three-dimensional static graph viewer.

(click the image to try it out)

Demos

Documentation

JSDoc generated API documentation can be found here.

Twenty second tutorial

<html>
  <head>
    <style>
    #graph {
      width: 500px;
      height: 500px;
      border: 1px solid grey;
    }
    </style>
  </head>
  <body>
    <div id="graph"></div>

    <script src="graphosaurus.min.js"></script>
    <script>
      // JavaScript will go here
    </script>
  </body>
</html>

If you open this up in your web browser, you'll see something that looks like this:

Look at that amazing square! Now let's create a graph, a couple nodes, and an edge between the nodes:

var graph = G.graph()

// Create a red node with cartesian coordinates x=0, y=0, z=0
var redNode = G.node([0, 0, 0], {color: "red"});
graph.addNode(redNode);

// You can also use the addTo method to add to the graph
var greenNode = G.node([1, 1, 1], {color: "green"}).addTo(graph);

var edge = G.edge([redNode, greenNode], {color: "blue"});
graph.addEdge(edge);  // or edge.addTo(graph)

// Render the graph in the HTML element with id='graph'
graph.renderIn("graph");

After inserting this JavaScript in the <script> block, you should see this:

While this is a very basic example, I hope I've demonstrated how simple it is to create graphs with Graphosaurus.

Build

  1. Run git clone https://github.com/frewsxcv/graphosaurus.git to clone this repository
  2. Install node, npm, and grunt-cli
  3. Run npm install to install all the build requirements
  4. Run grunt to build Graphosaurus. The resulting compiled JavaScript will be in dist/ and the docs will be in doc/

Mascot

gryposaurus

John Conway's illustration of our glorious leader, the gryposaurus graphosaurus.

Similar projects

Copyright

All files in this repository are licensed under version two of the Mozilla Public License.

Graphosaurus has some third party dependencies listed in the package.json file in the devDependencies and dependencies sections. Their licenses can be found on their respective project pages.

more like this

lottery

🎉🌟✨🎈年会抽奖程序，基于 Express + Three.js的 3D 球体抽奖程序，奖品🧧🎁，文字，图片，抽奖规则均可配置，😜抽奖人员信息Excel一键导入😍，抽奖结果Excel导出😎，给你的抽奖活动带来全新酷炫体验🚀🚀🚀

JavaScript★ 4.6k
@moshang-ax

search

search projects, people, and tags