Skip to content

Instantly share code, notes, and snippets.

@markauskas

markauskas/README.md

Forked from mbostock/.block
Created May 11, 2013 18:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save markauskas/5560922 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save markauskas/5560922 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mbostock mbostock revised this gist Dec 19, 2012. 2 changed files with 1 addition and 381 deletions.
    380 changes: 0 additions & 380 deletions flare.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1,380 +0,0 @@
    {
    "name": "flare",
    "children": [
    {
    "name": "analytics",
    "children": [
    {
    "name": "cluster",
    "children": [
    {"name": "AgglomerativeCluster", "size": 3938},
    {"name": "CommunityStructure", "size": 3812},
    {"name": "HierarchicalCluster", "size": 6714},
    {"name": "MergeEdge", "size": 743}
    ]
    },
    {
    "name": "graph",
    "children": [
    {"name": "BetweennessCentrality", "size": 3534},
    {"name": "LinkDistance", "size": 5731},
    {"name": "MaxFlowMinCut", "size": 7840},
    {"name": "ShortestPaths", "size": 5914},
    {"name": "SpanningTree", "size": 3416}
    ]
    },
    {
    "name": "optimization",
    "children": [
    {"name": "AspectRatioBanker", "size": 7074}
    ]
    }
    ]
    },
    {
    "name": "animate",
    "children": [
    {"name": "Easing", "size": 17010},
    {"name": "FunctionSequence", "size": 5842},
    {
    "name": "interpolate",
    "children": [
    {"name": "ArrayInterpolator", "size": 1983},
    {"name": "ColorInterpolator", "size": 2047},
    {"name": "DateInterpolator", "size": 1375},
    {"name": "Interpolator", "size": 8746},
    {"name": "MatrixInterpolator", "size": 2202},
    {"name": "NumberInterpolator", "size": 1382},
    {"name": "ObjectInterpolator", "size": 1629},
    {"name": "PointInterpolator", "size": 1675},
    {"name": "RectangleInterpolator", "size": 2042}
    ]
    },
    {"name": "ISchedulable", "size": 1041},
    {"name": "Parallel", "size": 5176},
    {"name": "Pause", "size": 449},
    {"name": "Scheduler", "size": 5593},
    {"name": "Sequence", "size": 5534},
    {"name": "Transition", "size": 9201},
    {"name": "Transitioner", "size": 19975},
    {"name": "TransitionEvent", "size": 1116},
    {"name": "Tween", "size": 6006}
    ]
    },
    {
    "name": "data",
    "children": [
    {
    "name": "converters",
    "children": [
    {"name": "Converters", "size": 721},
    {"name": "DelimitedTextConverter", "size": 4294},
    {"name": "GraphMLConverter", "size": 9800},
    {"name": "IDataConverter", "size": 1314},
    {"name": "JSONConverter", "size": 2220}
    ]
    },
    {"name": "DataField", "size": 1759},
    {"name": "DataSchema", "size": 2165},
    {"name": "DataSet", "size": 586},
    {"name": "DataSource", "size": 3331},
    {"name": "DataTable", "size": 772},
    {"name": "DataUtil", "size": 3322}
    ]
    },
    {
    "name": "display",
    "children": [
    {"name": "DirtySprite", "size": 8833},
    {"name": "LineSprite", "size": 1732},
    {"name": "RectSprite", "size": 3623},
    {"name": "TextSprite", "size": 10066}
    ]
    },
    {
    "name": "flex",
    "children": [
    {"name": "FlareVis", "size": 4116}
    ]
    },
    {
    "name": "physics",
    "children": [
    {"name": "DragForce", "size": 1082},
    {"name": "GravityForce", "size": 1336},
    {"name": "IForce", "size": 319},
    {"name": "NBodyForce", "size": 10498},
    {"name": "Particle", "size": 2822},
    {"name": "Simulation", "size": 9983},
    {"name": "Spring", "size": 2213},
    {"name": "SpringForce", "size": 1681}
    ]
    },
    {
    "name": "query",
    "children": [
    {"name": "AggregateExpression", "size": 1616},
    {"name": "And", "size": 1027},
    {"name": "Arithmetic", "size": 3891},
    {"name": "Average", "size": 891},
    {"name": "BinaryExpression", "size": 2893},
    {"name": "Comparison", "size": 5103},
    {"name": "CompositeExpression", "size": 3677},
    {"name": "Count", "size": 781},
    {"name": "DateUtil", "size": 4141},
    {"name": "Distinct", "size": 933},
    {"name": "Expression", "size": 5130},
    {"name": "ExpressionIterator", "size": 3617},
    {"name": "Fn", "size": 3240},
    {"name": "If", "size": 2732},
    {"name": "IsA", "size": 2039},
    {"name": "Literal", "size": 1214},
    {"name": "Match", "size": 3748},
    {"name": "Maximum", "size": 843},
    {
    "name": "methods",
    "children": [
    {"name": "add", "size": 593},
    {"name": "and", "size": 330},
    {"name": "average", "size": 287},
    {"name": "count", "size": 277},
    {"name": "distinct", "size": 292},
    {"name": "div", "size": 595},
    {"name": "eq", "size": 594},
    {"name": "fn", "size": 460},
    {"name": "gt", "size": 603},
    {"name": "gte", "size": 625},
    {"name": "iff", "size": 748},
    {"name": "isa", "size": 461},
    {"name": "lt", "size": 597},
    {"name": "lte", "size": 619},
    {"name": "max", "size": 283},
    {"name": "min", "size": 283},
    {"name": "mod", "size": 591},
    {"name": "mul", "size": 603},
    {"name": "neq", "size": 599},
    {"name": "not", "size": 386},
    {"name": "or", "size": 323},
    {"name": "orderby", "size": 307},
    {"name": "range", "size": 772},
    {"name": "select", "size": 296},
    {"name": "stddev", "size": 363},
    {"name": "sub", "size": 600},
    {"name": "sum", "size": 280},
    {"name": "update", "size": 307},
    {"name": "variance", "size": 335},
    {"name": "where", "size": 299},
    {"name": "xor", "size": 354},
    {"name": "_", "size": 264}
    ]
    },
    {"name": "Minimum", "size": 843},
    {"name": "Not", "size": 1554},
    {"name": "Or", "size": 970},
    {"name": "Query", "size": 13896},
    {"name": "Range", "size": 1594},
    {"name": "StringUtil", "size": 4130},
    {"name": "Sum", "size": 791},
    {"name": "Variable", "size": 1124},
    {"name": "Variance", "size": 1876},
    {"name": "Xor", "size": 1101}
    ]
    },
    {
    "name": "scale",
    "children": [
    {"name": "IScaleMap", "size": 2105},
    {"name": "LinearScale", "size": 1316},
    {"name": "LogScale", "size": 3151},
    {"name": "OrdinalScale", "size": 3770},
    {"name": "QuantileScale", "size": 2435},
    {"name": "QuantitativeScale", "size": 4839},
    {"name": "RootScale", "size": 1756},
    {"name": "Scale", "size": 4268},
    {"name": "ScaleType", "size": 1821},
    {"name": "TimeScale", "size": 5833}
    ]
    },
    {
    "name": "util",
    "children": [
    {"name": "Arrays", "size": 8258},
    {"name": "Colors", "size": 10001},
    {"name": "Dates", "size": 8217},
    {"name": "Displays", "size": 12555},
    {"name": "Filter", "size": 2324},
    {"name": "Geometry", "size": 10993},
    {
    "name": "heap",
    "children": [
    {"name": "FibonacciHeap", "size": 9354},
    {"name": "HeapNode", "size": 1233}
    ]
    },
    {"name": "IEvaluable", "size": 335},
    {"name": "IPredicate", "size": 383},
    {"name": "IValueProxy", "size": 874},
    {
    "name": "math",
    "children": [
    {"name": "DenseMatrix", "size": 3165},
    {"name": "IMatrix", "size": 2815},
    {"name": "SparseMatrix", "size": 3366}
    ]
    },
    {"name": "Maths", "size": 17705},
    {"name": "Orientation", "size": 1486},
    {
    "name": "palette",
    "children": [
    {"name": "ColorPalette", "size": 6367},
    {"name": "Palette", "size": 1229},
    {"name": "ShapePalette", "size": 2059},
    {"name": "SizePalette", "size": 2291}
    ]
    },
    {"name": "Property", "size": 5559},
    {"name": "Shapes", "size": 19118},
    {"name": "Sort", "size": 6887},
    {"name": "Stats", "size": 6557},
    {"name": "Strings", "size": 22026}
    ]
    },
    {
    "name": "vis",
    "children": [
    {
    "name": "axis",
    "children": [
    {"name": "Axes", "size": 1302},
    {"name": "Axis", "size": 24593},
    {"name": "AxisGridLine", "size": 652},
    {"name": "AxisLabel", "size": 636},
    {"name": "CartesianAxes", "size": 6703}
    ]
    },
    {
    "name": "controls",
    "children": [
    {"name": "AnchorControl", "size": 2138},
    {"name": "ClickControl", "size": 3824},
    {"name": "Control", "size": 1353},
    {"name": "ControlList", "size": 4665},
    {"name": "DragControl", "size": 2649},
    {"name": "ExpandControl", "size": 2832},
    {"name": "HoverControl", "size": 4896},
    {"name": "IControl", "size": 763},
    {"name": "PanZoomControl", "size": 5222},
    {"name": "SelectionControl", "size": 7862},
    {"name": "TooltipControl", "size": 8435}
    ]
    },
    {
    "name": "data",
    "children": [
    {"name": "Data", "size": 20544},
    {"name": "DataList", "size": 19788},
    {"name": "DataSprite", "size": 10349},
    {"name": "EdgeSprite", "size": 3301},
    {"name": "NodeSprite", "size": 19382},
    {
    "name": "render",
    "children": [
    {"name": "ArrowType", "size": 698},
    {"name": "EdgeRenderer", "size": 5569},
    {"name": "IRenderer", "size": 353},
    {"name": "ShapeRenderer", "size": 2247}
    ]
    },
    {"name": "ScaleBinding", "size": 11275},
    {"name": "Tree", "size": 7147},
    {"name": "TreeBuilder", "size": 9930}
    ]
    },
    {
    "name": "events",
    "children": [
    {"name": "DataEvent", "size": 2313},
    {"name": "SelectionEvent", "size": 1880},
    {"name": "TooltipEvent", "size": 1701},
    {"name": "VisualizationEvent", "size": 1117}
    ]
    },
    {
    "name": "legend",
    "children": [
    {"name": "Legend", "size": 20859},
    {"name": "LegendItem", "size": 4614},
    {"name": "LegendRange", "size": 10530}
    ]
    },
    {
    "name": "operator",
    "children": [
    {
    "name": "distortion",
    "children": [
    {"name": "BifocalDistortion", "size": 4461},
    {"name": "Distortion", "size": 6314},
    {"name": "FisheyeDistortion", "size": 3444}
    ]
    },
    {
    "name": "encoder",
    "children": [
    {"name": "ColorEncoder", "size": 3179},
    {"name": "Encoder", "size": 4060},
    {"name": "PropertyEncoder", "size": 4138},
    {"name": "ShapeEncoder", "size": 1690},
    {"name": "SizeEncoder", "size": 1830}
    ]
    },
    {
    "name": "filter",
    "children": [
    {"name": "FisheyeTreeFilter", "size": 5219},
    {"name": "GraphDistanceFilter", "size": 3165},
    {"name": "VisibilityFilter", "size": 3509}
    ]
    },
    {"name": "IOperator", "size": 1286},
    {
    "name": "label",
    "children": [
    {"name": "Labeler", "size": 9956},
    {"name": "RadialLabeler", "size": 3899},
    {"name": "StackedAreaLabeler", "size": 3202}
    ]
    },
    {
    "name": "layout",
    "children": [
    {"name": "AxisLayout", "size": 6725},
    {"name": "BundledEdgeRouter", "size": 3727},
    {"name": "CircleLayout", "size": 9317},
    {"name": "CirclePackingLayout", "size": 12003},
    {"name": "DendrogramLayout", "size": 4853},
    {"name": "ForceDirectedLayout", "size": 8411},
    {"name": "IcicleTreeLayout", "size": 4864},
    {"name": "IndentedTreeLayout", "size": 3174},
    {"name": "Layout", "size": 7881},
    {"name": "NodeLinkTreeLayout", "size": 12870},
    {"name": "PieLayout", "size": 2728},
    {"name": "RadialTreeLayout", "size": 12348},
    {"name": "RandomLayout", "size": 870},
    {"name": "StackedAreaLayout", "size": 9121},
    {"name": "TreeMapLayout", "size": 9191}
    ]
    },
    {"name": "Operator", "size": 2490},
    {"name": "OperatorList", "size": 5248},
    {"name": "OperatorSequence", "size": 4190},
    {"name": "OperatorSwitch", "size": 2581},
    {"name": "SortOperator", "size": 2023}
    ]
    },
    {"name": "Visualization", "size": 16540}
    ]
    }
    ]
    }
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -38,7 +38,7 @@
    .append("g")
    .attr("transform", "translate(40,0)");

    d3.json("flare.json", function(error, root) {
    d3.json("/d/4063550/flare.json", function(error, root) {
    var nodes = cluster.nodes(root),
    links = cluster.links(nodes);

  2. @mbostock mbostock revised this gist Nov 13, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  3. @mbostock mbostock revised this gist Nov 13, 2012. 2 changed files with 17 additions and 17 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    The `tree` layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by [Jeff Heer](http://jheer.org/) and [Jason Davies](http://www.jasondavies.com/) using [Buchheim et al.](http://www.springerlink.com/content/u73fyc4tlxp3uwt8/)'s linear-time variant of the Reingold-Tilford algorithm. Data shows the [Flare](http://flare.prefuse.org/) class hierarchy, also courtesy Jeff Heer.
    A dendrogram is a node-link diagram that places leaf nodes of the tree at the same depth. In this example, the classes (leaf nodes) are aligned on the right edge, with the packages (internal nodes) to the left. Data shows the [Flare](http://flare.prefuse.org/) class hierarchy, courtesy Jeff Heer.
    32 changes: 16 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -23,24 +23,24 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var diameter = 960;
    var width = 960,
    height = 2200;

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

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

    var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter - 150)
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
    .attr("transform", "translate(40,0)");

    d3.json("flare.json", function(error, root) {
    var nodes = tree.nodes(root),
    links = tree.links(nodes);
    var nodes = cluster.nodes(root),
    links = cluster.links(nodes);

    var link = svg.selectAll(".link")
    .data(links)
    @@ -52,18 +52,18 @@
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

    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)"; })
    .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 d.name; });
    });

    d3.select(self.frameElement).style("height", diameter - 150 + "px");
    d3.select(self.frameElement).style("height", height + "px");

    </script>
  4. @mbostock mbostock revised this gist Nov 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -64,6 +64,6 @@
    .text(function(d) { return d.name; });
    });

    d3.select(self.frameElement).style("height", diameter + "px");
    d3.select(self.frameElement).style("height", diameter - 150 + "px");

    </script>
  5. @mbostock mbostock revised this gist Nov 13, 2012. 1 changed file with 14 additions and 0 deletions.
    14 changes: 14 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,21 @@
    <meta charset="utf-8">
    <style>

    .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
    }

    .node {
    font: 10px sans-serif;
    }

    .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
    }

    </style>
    <body>
  6. @mbostock mbostock revised this gist Nov 13, 2012. 2 changed files with 30 additions and 35 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Enclosure diagrams use containment to represent the hierarchy. Although circle packing is not as space-efficient as a treemap, it better reveals the hierarchy. Implementation based on work by [Jeff Heer](http://jheer.org/). Data shows the [Flare](http://flare.prefuse.org/) class hierarchy, also courtesy Jeff Heer.
    The `tree` layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by [Jeff Heer](http://jheer.org/) and [Jason Davies](http://www.jasondavies.com/) using [Buchheim et al.](http://www.springerlink.com/content/u73fyc4tlxp3uwt8/)'s linear-time variant of the Reingold-Tilford algorithm. Data shows the [Flare](http://flare.prefuse.org/) class hierarchy, also courtesy Jeff Heer.
    63 changes: 29 additions & 34 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,57 +2,52 @@
    <meta charset="utf-8">
    <style>

    circle {
    fill: rgb(31, 119, 180);
    fill-opacity: .25;
    stroke: rgb(31, 119, 180);
    stroke-width: 1px;
    }

    .leaf circle {
    fill: #ff7f0e;
    fill-opacity: 1;
    }

    text {
    font: 10px sans-serif;
    }


    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var diameter = 960,
    format = d3.format(",d");
    var diameter = 960;

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

    var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .value(function(d) { return d.size; });
    var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

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

    d3.json("flare.json", function(error, root) {
    var node = svg.datum(root).selectAll(".node")
    .data(pack.nodes)
    .enter().append("g")
    .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    var nodes = tree.nodes(root),
    links = tree.links(nodes);

    node.append("title")
    .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });
    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("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

    node.append("circle")
    .attr("r", function(d) { return d.r; });
    .attr("r", 4.5);

    node.filter(function(d) { return !d.children; }).append("text")
    .attr("dy", ".3em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.name.substring(0, d.r / 3); });
    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 d.name; });
    });

    d3.select(self.frameElement).style("height", diameter + "px");
  7. @mbostock mbostock revised this gist Nov 13, 2012. 2 changed files with 26 additions and 30 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Bubble charts encode data in the area of circles. Although less perceptually-accurate than bar charts, they can pack hundreds of values into a small space. Implementation based on work by [Jeff Heer](http://jheer.org/). Data shows the [Flare](http://flare.prefuse.org/) class hierarchy, also courtesy Jeff Heer.
    Enclosure diagrams use containment to represent the hierarchy. Although circle packing is not as space-efficient as a treemap, it better reveals the hierarchy. Implementation based on work by [Jeff Heer](http://jheer.org/). Data shows the [Flare](http://flare.prefuse.org/) class hierarchy, also courtesy Jeff Heer.
    54 changes: 25 additions & 29 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,18 @@
    <meta charset="utf-8">
    <style>

    circle {
    fill: rgb(31, 119, 180);
    fill-opacity: .25;
    stroke: rgb(31, 119, 180);
    stroke-width: 1px;
    }

    .leaf circle {
    fill: #ff7f0e;
    fill-opacity: 1;
    }

    text {
    font: 10px sans-serif;
    }
    @@ -12,53 +24,37 @@
    <script>

    var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20c();
    format = d3.format(",d");

    var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);
    var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .value(function(d) { return d.size; });

    var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");
    .append("g")
    .attr("transform", "translate(2,2)");

    d3.json("flare.json", function(error, root) {
    var node = svg.selectAll(".node")
    .data(bubble.nodes(classes(root))
    .filter(function(d) { return !d.children; }))
    var node = svg.datum(root).selectAll(".node")
    .data(pack.nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("title")
    .text(function(d) { return d.className + ": " + format(d.value); });
    .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });

    node.append("circle")
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return color(d.packageName); });
    .attr("r", function(d) { return d.r; });

    node.append("text")
    node.filter(function(d) { return !d.children; }).append("text")
    .attr("dy", ".3em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.className.substring(0, d.r / 3); });
    .text(function(d) { return d.name.substring(0, d.r / 3); });
    });

    // Returns a flattened hierarchy containing all leaf nodes under the root.
    function classes(root) {
    var classes = [];

    function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
    }

    recurse(null, root);
    return {children: classes};
    }

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

    </script>
  8. @mbostock mbostock revised this gist Nov 13, 2012. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -11,18 +11,18 @@
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var radius = 960,
    var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20c();

    var bubble = d3.layout.pack()
    .sort(null)
    .size([radius, radius])
    .size([diameter, diameter])
    .padding(1.5);

    var svg = d3.select("body").append("svg")
    .attr("width", radius)
    .attr("height", radius)
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

    d3.json("flare.json", function(error, root) {
    @@ -59,4 +59,6 @@
    return {children: classes};
    }

    </script>
    d3.select(self.frameElement).style("height", diameter + "px");

    </script>
  9. @mbostock mbostock created this gist Nov 13, 2012.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Bubble charts encode data in the area of circles. Although less perceptually-accurate than bar charts, they can pack hundreds of values into a small space. Implementation based on work by [Jeff Heer](http://jheer.org/). Data shows the [Flare](http://flare.prefuse.org/) class hierarchy, also courtesy Jeff Heer.
    380 changes: 380 additions & 0 deletions flare.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,380 @@
    {
    "name": "flare",
    "children": [
    {
    "name": "analytics",
    "children": [
    {
    "name": "cluster",
    "children": [
    {"name": "AgglomerativeCluster", "size": 3938},
    {"name": "CommunityStructure", "size": 3812},
    {"name": "HierarchicalCluster", "size": 6714},
    {"name": "MergeEdge", "size": 743}
    ]
    },
    {
    "name": "graph",
    "children": [
    {"name": "BetweennessCentrality", "size": 3534},
    {"name": "LinkDistance", "size": 5731},
    {"name": "MaxFlowMinCut", "size": 7840},
    {"name": "ShortestPaths", "size": 5914},
    {"name": "SpanningTree", "size": 3416}
    ]
    },
    {
    "name": "optimization",
    "children": [
    {"name": "AspectRatioBanker", "size": 7074}
    ]
    }
    ]
    },
    {
    "name": "animate",
    "children": [
    {"name": "Easing", "size": 17010},
    {"name": "FunctionSequence", "size": 5842},
    {
    "name": "interpolate",
    "children": [
    {"name": "ArrayInterpolator", "size": 1983},
    {"name": "ColorInterpolator", "size": 2047},
    {"name": "DateInterpolator", "size": 1375},
    {"name": "Interpolator", "size": 8746},
    {"name": "MatrixInterpolator", "size": 2202},
    {"name": "NumberInterpolator", "size": 1382},
    {"name": "ObjectInterpolator", "size": 1629},
    {"name": "PointInterpolator", "size": 1675},
    {"name": "RectangleInterpolator", "size": 2042}
    ]
    },
    {"name": "ISchedulable", "size": 1041},
    {"name": "Parallel", "size": 5176},
    {"name": "Pause", "size": 449},
    {"name": "Scheduler", "size": 5593},
    {"name": "Sequence", "size": 5534},
    {"name": "Transition", "size": 9201},
    {"name": "Transitioner", "size": 19975},
    {"name": "TransitionEvent", "size": 1116},
    {"name": "Tween", "size": 6006}
    ]
    },
    {
    "name": "data",
    "children": [
    {
    "name": "converters",
    "children": [
    {"name": "Converters", "size": 721},
    {"name": "DelimitedTextConverter", "size": 4294},
    {"name": "GraphMLConverter", "size": 9800},
    {"name": "IDataConverter", "size": 1314},
    {"name": "JSONConverter", "size": 2220}
    ]
    },
    {"name": "DataField", "size": 1759},
    {"name": "DataSchema", "size": 2165},
    {"name": "DataSet", "size": 586},
    {"name": "DataSource", "size": 3331},
    {"name": "DataTable", "size": 772},
    {"name": "DataUtil", "size": 3322}
    ]
    },
    {
    "name": "display",
    "children": [
    {"name": "DirtySprite", "size": 8833},
    {"name": "LineSprite", "size": 1732},
    {"name": "RectSprite", "size": 3623},
    {"name": "TextSprite", "size": 10066}
    ]
    },
    {
    "name": "flex",
    "children": [
    {"name": "FlareVis", "size": 4116}
    ]
    },
    {
    "name": "physics",
    "children": [
    {"name": "DragForce", "size": 1082},
    {"name": "GravityForce", "size": 1336},
    {"name": "IForce", "size": 319},
    {"name": "NBodyForce", "size": 10498},
    {"name": "Particle", "size": 2822},
    {"name": "Simulation", "size": 9983},
    {"name": "Spring", "size": 2213},
    {"name": "SpringForce", "size": 1681}
    ]
    },
    {
    "name": "query",
    "children": [
    {"name": "AggregateExpression", "size": 1616},
    {"name": "And", "size": 1027},
    {"name": "Arithmetic", "size": 3891},
    {"name": "Average", "size": 891},
    {"name": "BinaryExpression", "size": 2893},
    {"name": "Comparison", "size": 5103},
    {"name": "CompositeExpression", "size": 3677},
    {"name": "Count", "size": 781},
    {"name": "DateUtil", "size": 4141},
    {"name": "Distinct", "size": 933},
    {"name": "Expression", "size": 5130},
    {"name": "ExpressionIterator", "size": 3617},
    {"name": "Fn", "size": 3240},
    {"name": "If", "size": 2732},
    {"name": "IsA", "size": 2039},
    {"name": "Literal", "size": 1214},
    {"name": "Match", "size": 3748},
    {"name": "Maximum", "size": 843},
    {
    "name": "methods",
    "children": [
    {"name": "add", "size": 593},
    {"name": "and", "size": 330},
    {"name": "average", "size": 287},
    {"name": "count", "size": 277},
    {"name": "distinct", "size": 292},
    {"name": "div", "size": 595},
    {"name": "eq", "size": 594},
    {"name": "fn", "size": 460},
    {"name": "gt", "size": 603},
    {"name": "gte", "size": 625},
    {"name": "iff", "size": 748},
    {"name": "isa", "size": 461},
    {"name": "lt", "size": 597},
    {"name": "lte", "size": 619},
    {"name": "max", "size": 283},
    {"name": "min", "size": 283},
    {"name": "mod", "size": 591},
    {"name": "mul", "size": 603},
    {"name": "neq", "size": 599},
    {"name": "not", "size": 386},
    {"name": "or", "size": 323},
    {"name": "orderby", "size": 307},
    {"name": "range", "size": 772},
    {"name": "select", "size": 296},
    {"name": "stddev", "size": 363},
    {"name": "sub", "size": 600},
    {"name": "sum", "size": 280},
    {"name": "update", "size": 307},
    {"name": "variance", "size": 335},
    {"name": "where", "size": 299},
    {"name": "xor", "size": 354},
    {"name": "_", "size": 264}
    ]
    },
    {"name": "Minimum", "size": 843},
    {"name": "Not", "size": 1554},
    {"name": "Or", "size": 970},
    {"name": "Query", "size": 13896},
    {"name": "Range", "size": 1594},
    {"name": "StringUtil", "size": 4130},
    {"name": "Sum", "size": 791},
    {"name": "Variable", "size": 1124},
    {"name": "Variance", "size": 1876},
    {"name": "Xor", "size": 1101}
    ]
    },
    {
    "name": "scale",
    "children": [
    {"name": "IScaleMap", "size": 2105},
    {"name": "LinearScale", "size": 1316},
    {"name": "LogScale", "size": 3151},
    {"name": "OrdinalScale", "size": 3770},
    {"name": "QuantileScale", "size": 2435},
    {"name": "QuantitativeScale", "size": 4839},
    {"name": "RootScale", "size": 1756},
    {"name": "Scale", "size": 4268},
    {"name": "ScaleType", "size": 1821},
    {"name": "TimeScale", "size": 5833}
    ]
    },
    {
    "name": "util",
    "children": [
    {"name": "Arrays", "size": 8258},
    {"name": "Colors", "size": 10001},
    {"name": "Dates", "size": 8217},
    {"name": "Displays", "size": 12555},
    {"name": "Filter", "size": 2324},
    {"name": "Geometry", "size": 10993},
    {
    "name": "heap",
    "children": [
    {"name": "FibonacciHeap", "size": 9354},
    {"name": "HeapNode", "size": 1233}
    ]
    },
    {"name": "IEvaluable", "size": 335},
    {"name": "IPredicate", "size": 383},
    {"name": "IValueProxy", "size": 874},
    {
    "name": "math",
    "children": [
    {"name": "DenseMatrix", "size": 3165},
    {"name": "IMatrix", "size": 2815},
    {"name": "SparseMatrix", "size": 3366}
    ]
    },
    {"name": "Maths", "size": 17705},
    {"name": "Orientation", "size": 1486},
    {
    "name": "palette",
    "children": [
    {"name": "ColorPalette", "size": 6367},
    {"name": "Palette", "size": 1229},
    {"name": "ShapePalette", "size": 2059},
    {"name": "SizePalette", "size": 2291}
    ]
    },
    {"name": "Property", "size": 5559},
    {"name": "Shapes", "size": 19118},
    {"name": "Sort", "size": 6887},
    {"name": "Stats", "size": 6557},
    {"name": "Strings", "size": 22026}
    ]
    },
    {
    "name": "vis",
    "children": [
    {
    "name": "axis",
    "children": [
    {"name": "Axes", "size": 1302},
    {"name": "Axis", "size": 24593},
    {"name": "AxisGridLine", "size": 652},
    {"name": "AxisLabel", "size": 636},
    {"name": "CartesianAxes", "size": 6703}
    ]
    },
    {
    "name": "controls",
    "children": [
    {"name": "AnchorControl", "size": 2138},
    {"name": "ClickControl", "size": 3824},
    {"name": "Control", "size": 1353},
    {"name": "ControlList", "size": 4665},
    {"name": "DragControl", "size": 2649},
    {"name": "ExpandControl", "size": 2832},
    {"name": "HoverControl", "size": 4896},
    {"name": "IControl", "size": 763},
    {"name": "PanZoomControl", "size": 5222},
    {"name": "SelectionControl", "size": 7862},
    {"name": "TooltipControl", "size": 8435}
    ]
    },
    {
    "name": "data",
    "children": [
    {"name": "Data", "size": 20544},
    {"name": "DataList", "size": 19788},
    {"name": "DataSprite", "size": 10349},
    {"name": "EdgeSprite", "size": 3301},
    {"name": "NodeSprite", "size": 19382},
    {
    "name": "render",
    "children": [
    {"name": "ArrowType", "size": 698},
    {"name": "EdgeRenderer", "size": 5569},
    {"name": "IRenderer", "size": 353},
    {"name": "ShapeRenderer", "size": 2247}
    ]
    },
    {"name": "ScaleBinding", "size": 11275},
    {"name": "Tree", "size": 7147},
    {"name": "TreeBuilder", "size": 9930}
    ]
    },
    {
    "name": "events",
    "children": [
    {"name": "DataEvent", "size": 2313},
    {"name": "SelectionEvent", "size": 1880},
    {"name": "TooltipEvent", "size": 1701},
    {"name": "VisualizationEvent", "size": 1117}
    ]
    },
    {
    "name": "legend",
    "children": [
    {"name": "Legend", "size": 20859},
    {"name": "LegendItem", "size": 4614},
    {"name": "LegendRange", "size": 10530}
    ]
    },
    {
    "name": "operator",
    "children": [
    {
    "name": "distortion",
    "children": [
    {"name": "BifocalDistortion", "size": 4461},
    {"name": "Distortion", "size": 6314},
    {"name": "FisheyeDistortion", "size": 3444}
    ]
    },
    {
    "name": "encoder",
    "children": [
    {"name": "ColorEncoder", "size": 3179},
    {"name": "Encoder", "size": 4060},
    {"name": "PropertyEncoder", "size": 4138},
    {"name": "ShapeEncoder", "size": 1690},
    {"name": "SizeEncoder", "size": 1830}
    ]
    },
    {
    "name": "filter",
    "children": [
    {"name": "FisheyeTreeFilter", "size": 5219},
    {"name": "GraphDistanceFilter", "size": 3165},
    {"name": "VisibilityFilter", "size": 3509}
    ]
    },
    {"name": "IOperator", "size": 1286},
    {
    "name": "label",
    "children": [
    {"name": "Labeler", "size": 9956},
    {"name": "RadialLabeler", "size": 3899},
    {"name": "StackedAreaLabeler", "size": 3202}
    ]
    },
    {
    "name": "layout",
    "children": [
    {"name": "AxisLayout", "size": 6725},
    {"name": "BundledEdgeRouter", "size": 3727},
    {"name": "CircleLayout", "size": 9317},
    {"name": "CirclePackingLayout", "size": 12003},
    {"name": "DendrogramLayout", "size": 4853},
    {"name": "ForceDirectedLayout", "size": 8411},
    {"name": "IcicleTreeLayout", "size": 4864},
    {"name": "IndentedTreeLayout", "size": 3174},
    {"name": "Layout", "size": 7881},
    {"name": "NodeLinkTreeLayout", "size": 12870},
    {"name": "PieLayout", "size": 2728},
    {"name": "RadialTreeLayout", "size": 12348},
    {"name": "RandomLayout", "size": 870},
    {"name": "StackedAreaLayout", "size": 9121},
    {"name": "TreeMapLayout", "size": 9191}
    ]
    },
    {"name": "Operator", "size": 2490},
    {"name": "OperatorList", "size": 5248},
    {"name": "OperatorSequence", "size": 4190},
    {"name": "OperatorSwitch", "size": 2581},
    {"name": "SortOperator", "size": 2023}
    ]
    },
    {"name": "Visualization", "size": 16540}
    ]
    }
    ]
    }
    62 changes: 62 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    text {
    font: 10px sans-serif;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var radius = 960,
    format = d3.format(",d"),
    color = d3.scale.category20c();

    var bubble = d3.layout.pack()
    .sort(null)
    .size([radius, radius])
    .padding(1.5);

    var svg = d3.select("body").append("svg")
    .attr("width", radius)
    .attr("height", radius)
    .attr("class", "bubble");

    d3.json("flare.json", function(error, root) {
    var node = svg.selectAll(".node")
    .data(bubble.nodes(classes(root))
    .filter(function(d) { return !d.children; }))
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("title")
    .text(function(d) { return d.className + ": " + format(d.value); });

    node.append("circle")
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return color(d.packageName); });

    node.append("text")
    .attr("dy", ".3em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.className.substring(0, d.r / 3); });
    });

    // Returns a flattened hierarchy containing all leaf nodes under the root.
    function classes(root) {
    var classes = [];

    function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
    }

    recurse(null, root);
    return {children: classes};
    }

    </script>