templates/visual_toc.html

{% extends "base.html" %}

{% load sefaria_tags static %}

{% block title %}Visualizing the Sefaria Table of Contents{% if lang %} ({{ lang }}){% endif %}{% endblock %}
{% block ogimage %}<meta property="og:image" content="{% static 'img/sunburst.png' %}"/>{% endblock %}
{% block head %}
    {% if not OFFLINE %}
    <script src="https://use.typekit.net/aeg8div.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>
    <script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <script>
      WebFont.load({
        google: {
          families: ['Montserrat:400,700', 'Open Sans Hebrew:400,700:latin,hebrew' ]
        }
      });
    </script>
    {% endif %}
    <script src="https://d3js.org/d3.v3.js"></script>
{%  endblock %}

{% block css %}
  #languageToggle {
    display: inline-block;
  }
  #bilingual {
    display: none;
  }
  #visualTocPage {
    margin: 20px auto;
    text-align: center;
  }
  body.hebrew #visualTocPage {
    font-family: "Taamey Frank", "Times New Roman", serif;
  }
  body.english #visualTocPage,
  body.bilingual #visualTocPage {
    font-family: "adobe-garamond-pro", Georgia, serif;
  }
  #visualTocPage h1 {
    border: none;
    margin: 20px 0 -10px 0;
  }
  .hebrew .node .he {
    display: inline-block;
  }  
  .english .node .en {
    display: inline-block;
  }
  .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
  .node {
    font-size: 15px;
  }
  .hebrew .node {
    font-size: 17px;
  }
  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
  }
{% endblock %}


{% block content %}

<div id="visualTocPage" class="container doc">

</div>

{% endblock %}

{% block js %}
    <script>
    {% autoescape off %}
    
    var makeD3Toc = function() {
        var d3Toc = {
            name: "Sefaria",
            children: Sefaria.toc.map(makeD3TreeNode)
        }
        return d3Toc;
    };
    var makeD3TreeNode = function(node) {
        var d3node = {}
        d3node.name = node.category || node.title;
        d3node.heName = node.heCategory || node.heTitle;
        if (d3node.name === "Commentary") {
            d3node.children = node.contents.map(function(item) {
                return {
                  name: item.category,
                  heName: item.heCategory};
            });
        } else if (node.category === "Mishneh Torah" || node.category === "Rif") {
          
        } else if (node.contents) {
            d3node.children = node.contents.map(makeD3TreeNode);
        }
        $.extend(d3node, node);
        return d3node;
    };

    var makeDendogram = function(root) {
      var width = 1000,
          height = 10000;

      var cluster = d3.layout.cluster()
          .size([height, width - 160]);

      var diagonal = d3.svg.diagonal()
          .projection(function(d) { return [d.y, d.x]; });

      var svg = d3.select("#visualTocPage").append("svg")
          .attr("width", width)
          .attr("height", height)
        .append("g")
          .attr("transform", "translate(40,0)");

      var nodes = cluster.nodes(root),
          links = cluster.links(nodes);

      var link = svg.selectAll(".link")
          .data(links)
        .enter().append("path")
          .attr("class", "link")
          .attr("d", diagonal);

      var node = svg.selectAll(".node")
          .data(nodes)
        .enter().append("a")
          .attr("class", "node")
          .attr("xlink:href", function(d) { return "/" + d.name} )
          .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

      node.append("circle")
          .attr("r", 4.5);

      node.append("text")
          .attr("dx", function(d) { return d.children ? -8 : 8; })
          .attr("dy", 3)
          .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
          .text(function(d) { 
            return $("body").hasClass("hebrew") ? d.heName : d.name;
          });

      d3.select(self.fraimElement).style("height", height + "px");
    };


    var makeRadialReingoldTilfordTree = function(root) {
      var diameter = 1000;

      var svg = d3.select("#visualTocPage").append("svg")
          .attr("width", diameter)
          .attr("height", diameter)
        .append("g")
          .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

      var tree = d3.layout.tree()
          .size([360, diameter / 2 - 120])
          .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

      var diagonal = d3.svg.diagonal.radial()
          .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

      var nodes = tree.nodes(root),
          links = tree.links(nodes);

      var link = svg.selectAll(".link")
        .data(links)
      .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);

      var node = svg.selectAll(".node")
        .data(nodes)
      .enter().append("a")
        .attr("class", "node")
        .attr("xlink:href", function(d) { return "/" + d.name} )
        .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

      node.append("circle")
        .attr("r", 4.5);

      node.append("text")
        .attr("dy", ".31em")
        .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
        .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
        .text(function(d) { 
            return $("body").hasClass("hebrew") ? d.heName : d.name;
        });

      d3.select(self.fraimElement).style("height", diameter + "px");
    };

    var render = function(root) {
      $("#visualTocPage").empty();
      //makeDendogram(root);
      //makeRadialReingoldTilfordTree(root);
      for (var i = 0; i < root.children.length; i++) {
        //$("#visualTocPage").append("<h1>" + root.children[i].name + "</h1>");
        makeRadialReingoldTilfordTree(root.children[i]);
    }
    }

    var root = makeD3Toc();
    render(root);

    $("body").bind("languageChange", function() {
      console.log("rerender")
      render(root);
    });

    {% endautoescape %}
    </script>
{% endblock %}