Skip to content

Instantly share code, notes, and snippets.

@codefactory

codefactory/html5_springy.html

Last active December 22, 2016 08:13
Show Gist options
  • Save codefactory/4631415 to your computer and use it in GitHub Desktop.
Save codefactory/4631415 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. codefactory renamed this gist Jan 25, 2013. 1 changed file with 14 additions and 5 deletions.
    19 changes: 14 additions & 5 deletions gistfile1.html → html5_springy.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta charset="utf-8">
    <title>HTML5 Features</title>
    <style>
    html, body {
    @@ -31,20 +31,21 @@

    $.getJSON('data/html5.json', function (data) { // http://codefactory.kr/demos/graphs/data/html5.json

    // 아래의 코드에서 newNode를 만들 때 depth 속성은 Springy 라이브러리에서 원래 제공하는 속성이 아니라 제가 사용하려고 임의로 넣은 것입니다.
    for (i in data) {

    depth1 = graph.newNode({label: i}); // depth1 node
    depth1 = graph.newNode({label: i, depth: 1}); // depth1 node

    for (j in data[i]) {

    depth2 = graph.newNode({label: j}); // depth2 node
    depth2 = graph.newNode({label: j, depth: 2}); // depth2 node
    graph.newEdge(depth1, depth2); // depth1과 depth2 연결

    len = data[i][j].length;

    for (k = 0; k < len; k++) {

    depth3 = graph.newNode({label: data[i][j][k]}); // depth3 node
    depth3 = graph.newNode({label: data[i][j][k], depth: 3}); // depth3 node
    graph.newEdge(depth2, depth3, {color: colors[k % colorsLen]}); // depth2와 depth3 연결, 예쁘게 하려고 색상 넣음

    }
    @@ -55,7 +56,15 @@

    // springy 만듬
    var springy = $('#html5-features').springy({
    graph: graph
    graph: graph,
    nodeSelected: function(node){
    var url = 'https://www.google.com/#q=' + encodeURIComponent('html5 ' + node.data.label);

    // depth가 3인 경우 구글 검색 결과를 새 창으로 띄움
    if (node.data.depth == 3) {
    window.open(url);
    }
    }
    });

    });
  2. codefactory created this gist Jan 25, 2013.
    64 changes: 64 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Features</title>
    <style>
    html, body {
    height: 100%;
    }
    </style>
    </head>
    <body>

    <canvas id="html5-features"></canvas>

    <script src="jquery-1.9.0.min.js"></script>
    <script src="../springy/springy.js"></script> <!-- http://getspringy.com/ -->
    <script src="../springy/springyui.js"></script> <!-- http://getspringy.com/ -->
    <script>
    // 페이지 로드 후 canvas의 크기를 화면에 꽉차도록 조절
    $('#html5-features').attr({
    width: document.body.clientWidth,
    height: document.body.clientHeight
    });

    var graph = new Graph(),
    colors = ['#00A0B0', '#6A4A3C', '#CC333F', '#EB6841', '#EDC951', '#7DBE3C', '#00A0B0', '#6A4A3C', '#CC333F', '#EB6841'],
    colorsLen = colors.length,
    i, j, k, len,
    depth1, depth2, depth3;

    $.getJSON('data/html5.json', function (data) { // http://codefactory.kr/demos/graphs/data/html5.json

    for (i in data) {

    depth1 = graph.newNode({label: i}); // depth1 node

    for (j in data[i]) {

    depth2 = graph.newNode({label: j}); // depth2 node
    graph.newEdge(depth1, depth2); // depth1과 depth2 연결

    len = data[i][j].length;

    for (k = 0; k < len; k++) {

    depth3 = graph.newNode({label: data[i][j][k]}); // depth3 node
    graph.newEdge(depth2, depth3, {color: colors[k % colorsLen]}); // depth2와 depth3 연결, 예쁘게 하려고 색상 넣음

    }

    }

    }

    // springy 만듬
    var springy = $('#html5-features').springy({
    graph: graph
    });

    });
    </script>
    </body>
    </html>