!!!
%html
  %head
    %meta{:charset => "utf-8"}
      %title Society Relational Analysis
      :css
        @import url(stylesheets/society.css);
      %script{:src => "javascripts/d3.min.js"}
      %script{:src => "javascripts/society.js"}
      :css
        body {
          background-color: #fff;
          padding: 1em;
          font-family: Consolas, Verdana, sans-serif;
          font-size: 12px;
        }
  %body
    %div{:style => "text-align: center;"}
      %h1 Relational Matrices
      %h3
        Generated by
        %a{:href => "https://github.com/Bantik/society"} Society
    %hr{:size => "1"}/
    %div{:style => "text-align: center;"}
      %h2 Heatmap
    #heatmap
    %hr{:size => "1"}/
    %div{:style => "text-align: center;"}
      %h2 Network
      %p
        %em
          Hover over a class name to see incoming references (green) and outgoing
          references (red).
    #network{:style => "height: 100%; width: 100%;"}
    :javascript
      var data = JSON.parse('#{json_data}');
      Society.generate("#network", {
        data: {
          json: data
        }
      });
      Society.generate("#heatmap", {
        type: "heatmap",
        data: {
          json: data
        }
      });