Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Forked from mbostock/.block
Last active April 18, 2016 04:58
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  2. mbostock revised this gist Oct 31, 2015. 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
    @@ -20,7 +20,7 @@

    </style>
    <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var width = 960,
  3. mbostock revised this gist Jun 11, 2015. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

    var width = 960,
    @@ -36,6 +36,8 @@
    .attr("transform", "translate(40,0)");

    d3.json("/mbostock/raw/4063550/flare.json", function(error, root) {
    if (error) throw error;

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

    @@ -68,4 +70,4 @@

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

    </script>
    </script>
  4. mbostock revised this gist Dec 11, 2013. 1 changed file with 0 additions and 0 deletions.
    Binary file modified 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.
  5. mbostock revised this gist Dec 5, 2013. 2 changed files with 8 additions and 8 deletions.
    4 changes: 1 addition & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1 @@
    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.

    Compare to this [radial layout](/mbostock/4339607).
    A variation of the [cluster dendrogram](/mbostock/4063570) using a different style of curved links to avoid intersection.
    12 changes: 7 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -29,24 +29,26 @@
    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("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(40,0)");

    d3.json("/d/4063550/flare.json", function(error, root) {
    d3.json("/mbostock/raw/4063550/flare.json", function(error, root) {
    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);
    .attr("d", function(d) {
    return "M" + d.source.y + "," + d.source.x
    + "C" + d.source.y + "," + d.source.x
    + " " + d.source.y + "," + d.target.x
    + " " + d.target.y + "," + d.target.x;
    });

    var node = svg.selectAll(".node")
    .data(nodes)
  6. mbostock revised this gist Nov 22, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,3 @@
    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.

    Compare to this [radial layout](/mbostock/4339607).
  7. 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);

  8. 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.
  9. 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>
  10. 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>
  11. 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>
  12. 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");
  13. 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>
  14. 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>
  15. 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>