Munky Imports

flare-imports.json

[{
    "name": "Munky.Views.ArticleFull",
    "imports": ["Munky.Views.Category", "Munky.Models.Section", "Munky.Collections.Articles", "Munky.Settings.App", "Munky.Settings.Metrics", "Munky.Support.Time", "Munky.Support.Stocks", "Munky.FinApi"]
}, {
    "name": "Munky.Views.Video",
    "imports": ["Munky.Views.ArticleFull", "Munky.Settings.Metrics", "Munky.Support.Time"]
}, {
    "name": "Munky.Views.Homepage",
    "imports": ["Munky.Models.Section", "Munky.Collections.Articles", "Munky.Views.BreakingNews", "Munky.Views.Stock", "Munky.Views.Top", "Munky.Views.Stage", "Munky.Views.Focus", "Munky.Views.Special", "Munky.Views.Category", "Munky.Views.VideoSection", "Munky.Views.PhotoshowSection", "Munky.Views.Spinner", "Munky.Collections.Videos", "Munky.Collections.StockPrices", "Munky.Settings.App", "Munky.Settings.Spinner.Messages.Homepage", "Munky.Support.Browser"]
}, {
    "name": "Munky.Views.Categorypage",
    "imports": ["Munky.Models.Section", "Munky.Collections.Articles", "Munky.Views.BreakingNews", "Munky.Views.SpecialHeader", "Munky.Views.Category", "Munky.Views.Spinner", "Munky.Settings.App", "Munky.Settings.Spinner.Messages.Categorypage"]
}, {
    "name": "Munky.Views.Category",
    "imports": ["Munky.Views.Section", "Munky.Views.ArticleTeaser", "Munky.Views.TopTeaser", "Munky.Views.PhotoshowTeaser", "Munky.Transitions.MoreArticles", "Munky.Settings.App", "Munky.Settings.Spinner", "Munky.Helpers"]
}, {
    "name": "Munky.Views.ArticleBase",
    "imports": ["Munky.Views.ArticleFull", "Munky.Views.Photoshow", "Munky.Views.Video", "Munky.Views.Quiz", "Munky.Views.Error", "Munky.Views.Spinner", "Munky.Views.BreakingNewsTeaser", "Munky.Views.SpecialHeader", "Munky.Views.Categories", "Munky.Views.Footer", "Munky.Support.Time", "Munky.Settings.Spinner.Messages.Article", "Munky.Helpers"]
}, {
    "name": "Munky.Routers.Root",
    "imports": ["Munky.Collections.Articles", "Munky.Models.Article", "Munky.Models.Section", "Munky.Collections.HomepageSections", "Munky.Views.Navigation", "Munky.Views.Homepage", "Munky.Views.Categorypage", "Munky.Views.ArticleToolbar", "Munky.Views.ArticleBase", "Munky.Views.Categories", "Munky.Views.Footer", "Munky.Views.Interstitial", "Munky.Settings.App", "Munky.ServerSettings", "Munky.UserSettings", "Munky.Helpers"]
}, {
    "name": "Munky.Models.Article",
    "imports": ["Munky.Settings.App", "Munky.Settings.Metrics", "Munky.Models.Image"]
}, {
    "name": "Munky.Models.Image",
    "imports": []
}, {
    "name": "Munky.Models.Section",
    "imports": ["Munky.Settings.App"]
}, {
    "name": "Munky.Models.Question",
    "imports": ["Munky.Settings.App", "Munky.Settings.Metrics", "Munky.Models.Image"]
}, {
    "name": "Munky.Models.Quiz",
    "imports": ["Munky.Settings.App", "Munky.Settings.Metrics", "Munky.Models.Image"]
}, {
    "name": "Munky.Models.StockPrice",
    "imports": ["Munky.Support.Stocks"]
}, {
    "name": "Munky.Collections.Articles",
    "imports": ["Munky.Models.Article"]
}, {
    "name": "Munky.Collections.Videos",
    "imports": ["Munky.Models.Article"]
}, {
    "name": "Munky.Collections.HomepageSections",
    "imports": ["Munky.Models.Section", "Munky.Collections.Articles", "Munky.Settings.App", "Munky.Helpers"]
}, {
    "name": "Munky.Collections.Questions",
    "imports": ["Munky.Settings.App", "Munky.Settings.Metrics", "Munky.Models.Image"]
}, {
    "name": "Munky.Collections.StockPrices",
    "imports": ["Munky.Models.StockPrice"]
}, {
    "name": "Munky.FinApi",
    "imports": ["Munky.Settings.App"]
}, {
    "name": "Munky.Helpers",
    "imports": ["Munky.Settings.App", "Munky.ServerSettings"]
}, {
    "name": "Munky.UserSettings",
    "imports": []
}, {
    "name": "Munky.Views.VideoSection",
    "imports": ["Munky.Views.SlideSection", "Munky.Views.VideoTeaser", "Munky.Settings.App"]
}, {
    "name": "Munky.Transitions.MoreArticles",
    "imports": ["jQuery", "Munky.Transitions.Transition", "Munky.Settings.Spinner"]
}, {
    "name": "Munky.Views.TopTeaser",
    "imports": ["Munky.Views.ArticleTeaser", "Munky.Settings.Metrics", "Munky.Support.Time"]
}, {
    "name": "Munky.Views.Top",
    "imports": ["Munky.Views.Section", "Munky.Views.TopTeaser"]
}, {
    "name": "Munky.Views.Stock",
    "imports": ["Munky.Views.Section", "Munky.Views.StockTeaser"]
}, {
    "name": "Munky.Views.Stage",
    "imports": ["Munky.Views.Section", "Munky.Views.ArticleTeaser", "Munky.Views.TopStageTeaser", "Munky.Settings.Metrics"]
}, {
    "name": "Munky.Views.Quiz",
    "imports": []
}, {
    "name": "Munky.Views.PhotoshowTeaser",
    "imports": ["Munky.Views.ArticleTeaser", "Munky.Settings.App"]
}, {
    "name": "Munky.Views.PhotoshowSection",
    "imports": ["Munky.Views.SlideSection", "Munky.Views.PhotoshowsTeaser", "Munky.Settings.App"]
}, {
    "name": "Munky.Views.Photoshow",
    "imports": []
}, {
    "name": "Munky.Views.Interstitial",
    "imports": []
}, {
    "name": "Munky.Views.Navigation",
    "imports": ["Munky.Settings.App", "Munky.Tracking"]
}, {
    "name": "Munky.Views.Focus",
    "imports": ["Munky.Views.SlideSection", "Munky.Views.FocusTeaser", "Munky.Views.PageIndicators"]
}, {
    "name": "Munky.Views.Spinner",
    "imports": ["Munky.Settings.Spinner", "Munky.Views.CommonErrorView"]
}, {
    "name": "Munky.Views.Error",
    "imports": []
}, {
    "name": "Munky.Views.SpecialHeader",
    "imports": ["Munky.Helpers"]
}, {
    "name": "Munky.Views.Special",
    "imports": ["Munky.Views.Category", "Munky.Views.ArticleTeaser", "Munky.Views.TopTeaser", "Munky.Views.SpecialHeader", "Munky.Settings.Metrics", "Munky.Helpers"]
}, {
    "name": "Munky.Views.BreakingNewsTeaser",
    "imports": ["Munky.Views.ArticleTeaser", "Munky.Support.Time"]
}, {
    "name": "Munky.Views.BreakingNews",
    "imports": ["Munky.Views.Section", "Munky.Views.BreakingNewsTeaser"]
}, {
    "name": "Munky.Views.Section",
    "imports": []
}, {
    "name": "Munky.Views.Footer",
    "imports": []
}, {
    "name": "Munky.Views.Categories",
    "imports": ["Munky.Settings.App", "Munky.Tracking"]
}, {
    "name": "Munky.Views.ArticleToolbar",
    "imports": ["Munky.ArticleTextSizer"]
}, {
    "name": "Munky.Views.ArticleTeaser",
    "imports": ["Munky.Settings.Metrics"]
}, {
    "name": "Munky.Settings.App",
    "imports": []
}, {
    "name": "Munky.Settings.Metrics",
    "imports": []
}, {
    "name": "Munky.Settings.Spinner.Messages.Homepage",
    "imports": []
}, {
    "name": "Munky.Settings.Spinner.Messages.Categorypage",
    "imports": []
}, {
    "name": "Munky.Settings.Spinner.Messages.Article",
    "imports": []
}, {
    "name": "Munky.Views.SlideSection",
    "imports": []
}, {
    "name": "Munky.Views.FocusTeaser",
    "imports": ["Munky.Views.ArticleTeaser", "Munky.Support.Time", "Munky.Settings.Metrics"]
}, {
    "name": "Munky.Views.TopStageTeaser",
    "imports": ["Munky.Views.ArticleTeaser", "Munky.Settings.Metrics"]
}, {
    "name": "Munky.Views.PhotoshowsTeaser",
    "imports": ["Munky.Views.ArticleTeaser", "Munky.Settings.Metrics"]
}, {
    "name": "Munky.Support.Time",
    "imports": []
}, {
    "name": "Munky.Views.PageIndicators",
    "imports": []
}, {
    "name": "Munky.Views.CommonErrorView",
    "imports": []
}, {
    "name": "Munky.Support.Browser",
    "imports": []
}, {
    "name": "Munky.Views.VideoTeaser",
    "imports": []
}, {
    "name": "Munky.Views.StockTeaser",
    "imports": ["Munky.Views.ArticleTeaser"]
}, {
    "name": "Munky.Tracking",
    "imports": []
}, {
    "name": "Munky.Transitions.Transition",
    "imports": ["jQuery"]
}, {
    "name": "jQuery",
    "imports": []
}, {
    "name": "Munky.ServerSettings",
    "imports": []
}, {
    "name": "Munky.ArticleTextSizer",
    "imports": ["jQuery", "Munky.UserSettings", "Munky.Tracking"]
}, {
    "name": "Munky.Support.Stocks",
    "imports": ["Munky.Settings.App"]
}]

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">
      body {
        font: 300 36px "Helvetica Neue";
        height: 640px;
        margin: 80px 160px 80px 160px;
        overflow: hidden;
        position: relative;
        width: 960px;
      }

      a:link, a:visited {
        color: #777;
        text-decoration: none;
      }

      a:hover {
        color: #666;
      }

      blockquote {
        margin: 0;
      }

      blockquote:before {
        content: "“";
        position: absolute;
        left: -.4em;
      }

      blockquote:after {
        content: "”";
        position: absolute;
      }

      body > ul {
        margin: 0;
        padding: 0;
      }

      h1 {
        font-size: 64px;
      }

      h1, h2, h3 {
        font-weight: inherit;
        margin: 0;
      }

      h2, h3 {
        text-align: right;
        font-size: inherit;
        position: absolute;
        bottom: 0;
        right: 0;
      }

      h2 {
        font-size: 24px;
        position: absolute;
      }

      h3 {
        bottom: -20px;
        font-size: 18px;
      }

      .invert {
        background: #1f1f1f;
        color: #dcdccc;
      }

      .invert h2, .invert h3 {
        color: #7f9f7f;
      }

      .string, .regexp {
        color: #f39;
      }

      .keyword {
        color: #00c;
      }

      .comment {
        color: #777;
        font-style: oblique;
      }

      .number {
        color: #369;
      }

      .class, .special {
        color: #1181B8;
      }

      body > svg {
        position: absolute;
        top: -80px;
        left: -160px;
      }

      path.arc {
        cursor: move;
        fill: #fff;
      }

      .node {
        font-size: 16px;
      }

      .node:hover {
        fill: #1f77b4;
      }

      .link {
        fill: none;
        stroke: #1f77b4;
        stroke-opacity: 0.3;
        pointer-events: none;
        stroke-width: 2px;
        stroke-end
      }

      .link.source, .link.target {
        stroke-opacity: 1;
        stroke-width: 2px;
      }

      .node.target {
        fill: #d62728 !important;
      }

      .link.source {
        stroke: #d62728;
      }

      .node.source {
        fill: #2ca02c;
      }

      .link.target {
        stroke: #2ca02c;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
    <script type="text/javascript" src="packages.js"></script>
    <script type="text/javascript">

var w = 1280,
    h = 800,
    rx = w / 2,
    ry = h / 2,
    m0,
    rotate = 0;

var splines = [];

var cluster = d3.layout.cluster()
    .size([360, ry - 120])
    .sort(function(a, b) { return d3.ascending(a.key, b.key); });

var bundle = d3.layout.bundle();

var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(.85)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; });

// Chrome 15 bug: <http://code.google.com/p/chromium/issues/detail?id=98951>
var div = d3.select("body").insert("div", "h2")
    .style("top", "-80px")
    .style("left", "-160px")
    .style("width", w + "px")
    .style("height", w + "px")
    .style("position", "absolute");

var svg = div.append("svg:svg")
    .attr("width", w)
    .attr("height", w)
  .append("svg:g")
    .attr("transform", "translate(" + rx + "," + ry + ")");

svg.append("svg:path")
    .attr("class", "arc")
    .attr("d", d3.svg.arc().outerRadius(ry - 120).innerRadius(0).startAngle(0).endAngle(2 * Math.PI))
    .on("mousedown", mousedown);

d3.json("flare-imports.json", function(classes) {
  var nodes = cluster.nodes(packages.root(classes));
  var links = packages.imports(nodes);
  // console.log(nodes);
  // console.log(links);
  var splines = bundle(links);

  var path = svg.selectAll("path.link")
      .data(links)
    .enter().append("svg:path")
      .attr("class", function(d) { return "link source-" + d.source.key + " target-" + d.target.key; })
      .attr("d", function(d, i) { return line(splines[i]); });

  svg.selectAll("g.node")
      .data(nodes.filter(function(n) { return !n.children; }))
    .enter().append("svg:g")
      .attr("class", "node")
      .attr("id", function(d) { return "node-" + d.key; })
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
    .append("svg:text")
      .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
      .text(function(d) { return d.key; })
      .on("mouseover", mouseover)
      .on("mouseout", mouseout);
});

d3.select(window)
    .on("mousemove", mousemove)
    .on("mouseup", mouseup);

function mouse(e) {
  return [e.pageX - rx, e.pageY - ry];
}

function mousedown() {
  m0 = mouse(d3.event);
  d3.event.preventDefault();
}

function mousemove() {
  if (m0) {
    var m1 = mouse(d3.event),
        dm = Math.atan2(cross(m0, m1), dot(m0, m1)) * 180 / Math.PI;
    div.style("-webkit-transform", "translate3d(0," + (ry - rx) + "px,0)rotate3d(0,0,0," + dm + "deg)translate3d(0," + (rx - ry) + "px,0)");
  }
}

function mouseup() {
  if (m0) {
    var m1 = mouse(d3.event),
        dm = Math.atan2(cross(m0, m1), dot(m0, m1)) * 180 / Math.PI;

    rotate += dm;
    if (rotate > 360) rotate -= 360;
    else if (rotate < 0) rotate += 360;
    m0 = null;

    div.style("-webkit-transform", "rotate3d(0,0,0,0deg)");

    svg
        .attr("transform", "translate(" + rx + "," + ry + ")rotate(" + rotate + ")")
      .selectAll("g.node text")
        .attr("dx", function(d) { return (d.x + rotate) % 360 < 180 ? 8 : -8; })
        .attr("text-anchor", function(d) { return (d.x + rotate) % 360 < 180 ? "start" : "end"; })
        .attr("transform", function(d) { return (d.x + rotate) % 360 < 180 ? null : "rotate(180)"; });
  }
}

function mouseover(d) {
  svg.selectAll("path.link.target-" + d.key)
      .classed("target", true)
      .each(updateNodes("source", true));

  svg.selectAll("path.link.source-" + d.key)
      .classed("source", true)
      .each(updateNodes("target", true));
}

function mouseout(d) {
  svg.selectAll("path.link.source-" + d.key)
      .classed("source", false)
      .each(updateNodes("target", false));

  svg.selectAll("path.link.target-" + d.key)
      .classed("target", false)
      .each(updateNodes("source", false));
}

function updateNodes(name, value) {
  return function(d) {
    if (value) this.parentNode.appendChild(this);
    svg.select("#node-" + d[name].key).classed(name, value);
  };
}

function cross(a, b) {
  return a[0] * b[1] - a[1] * b[0];
}

function dot(a, b) {
  return a[0] * b[0] + a[1] * b[1];
}

    </script>
  </body>
</html>

packages.js

(function() {
  packages = {

    // Lazily construct the package hierarchy from class names.
    root: function(classes) {
      var map = {};

      function find(name, data) {
        var node = map[name], i;
        if (!node) {
          node = map[name] = data || {name: name, children: []};
          if (name.length) {
            node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
            node.parent.children.push(node);
            node.key = name.substring(i + 1);
          }
        }
        return node;
      }

      classes.forEach(function(d) {
        find(d.name, d);
      });

      return map[""];
    },

    // Return a list of imports for the given array of nodes.
    imports: function(nodes) {
      var map = {},
          imports = [];

      // Compute a map from name to node.
      nodes.forEach(function(d) {
        map[d.name] = d;
      });

      // For each import, construct a link from the source to target node.
      nodes.forEach(function(d) {
        if (d.imports) d.imports.forEach(function(i) {
          if (typeof map[i] === "undefined") {
            console.log(i);
          };
          imports.push({
            source: map[d.name], target: map[i]
          });
        });
      });

      return imports;
    }

  };
})();

thumbnail.png