Skip to content

Instantly share code, notes, and snippets.

@tophtucker
Forked from mbostock/.block
Last active March 12, 2017 13:36

Revisions

  1. tophtucker revised this gist Jan 4, 2017. No changes.
  2. tophtucker revised this gist Jan 4, 2017. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion README.md
    Original file line number Diff line number Diff line change
    @@ -1 +1,3 @@
    Click anywhere to zoom in, or click on the top bar to zoom out. Built with [D3](http://d3js.org/).
    Click anywhere to zoom in, or click on the top bar to zoom out.

    Converting [Bostock's classic](https://bl.ocks.org/mbostock/1005873) to d3 v4. You may find [the diff](https://gist.github.com/tophtucker/a35c0f4f32400755a6a9b976be834ab3/revisions) helpful in understanding the d3-hierarchy api changes! Note that I didn't touch the json.
  3. tophtucker revised this gist Jan 4, 2017. 1 changed file with 28 additions and 19 deletions.
    47 changes: 28 additions & 19 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -8,23 +8,24 @@

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

    var width = 960,
    height = 500;

    var x = d3.scale.linear()
    var x = d3.scaleLinear()
    .range([0, width]);

    var y = d3.scale.linear()
    var y = d3.scaleLinear()
    .range([0, height]);

    var color = d3.scale.category20c();
    var color = d3.scaleOrdinal(d3.schemeCategory20c);

    var partition = d3.layout.partition()
    .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
    .value(function(d) { return d.value; });
    var partition = d3.partition()
    .size([width, height])
    .padding(0)
    .round(true);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    @@ -35,27 +36,35 @@
    d3.json("readme.json", function(error, root) {
    if (error) throw error;

    root = d3.hierarchy(d3.entries(root)[0], function(d) {
    return d3.entries(d.value)
    })
    .sum(function(d) { return d.value })
    .sort(function(a, b) { return b.value - a.value; });

    partition(root);

    rect = rect
    .data(partition(d3.entries(root)[0]))
    .data(root.descendants())
    .enter().append("rect")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y); })
    .attr("width", function(d) { return x(d.dx); })
    .attr("height", function(d) { return y(d.dy); })
    .attr("fill", function(d) { return color((d.children ? d : d.parent).key); })
    .attr("x", function(d) { return d.x0; })
    .attr("y", function(d) { return d.y0; })
    .attr("width", function(d) { return d.x1 - d.x0; })
    .attr("height", function(d) { return d.y1 - d.y0; })
    .attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); })
    .on("click", clicked);
    });

    function clicked(d) {
    x.domain([d.x, d.x + d.dx]);
    y.domain([d.y, 1]).range([d.y ? 20 : 0, height]);
    x.domain([d.x0, d.x1]);
    y.domain([d.y0, height]).range([d.depth ? 20 : 0, height]);

    rect.transition()
    .duration(750)
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y); })
    .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
    .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
    .attr("x", function(d) { return x(d.x0); })
    .attr("y", function(d) { return y(d.y0); })
    .attr("width", function(d) { return x(d.x1) - x(d.x0); })
    .attr("height", function(d) { return y(d.y1) - y(d.y0); });
    }

    </script>
  4. @mbostock mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  5. @mbostock mbostock revised this gist Nov 17, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    Click anywhere to zoom in! Click on the top bar to zoom out. Built with [D3.js](http://mbostock.github.com/d3/).
    Click anywhere to zoom in, or click on the top bar to zoom out. Built with [D3](http://d3js.org/).
  6. @mbostock mbostock renamed this gist Nov 17, 2015. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  7. @mbostock mbostock revised this gist Oct 30, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,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,
  8. @mbostock mbostock revised this gist Jun 11, 2015. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,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,
    @@ -33,6 +33,8 @@
    var rect = svg.selectAll("rect");

    d3.json("readme.json", function(error, root) {
    if (error) throw error;

    rect = rect
    .data(partition(d3.entries(root)[0]))
    .enter().append("rect")
  9. @mbostock mbostock revised this gist Nov 22, 2013. 1 changed file with 34 additions and 35 deletions.
    69 changes: 34 additions & 35 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -1,60 +1,59 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Partition - Icicle</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
    <style type="text/css">
    <meta charset="utf-8">
    <style>

    rect {
    stroke: #fff;
    }

    </style>
    </head>
    <body>
    <div id="chart"></div>
    <script type="text/javascript">
    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var w = 960,
    h = 500,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]),
    color = d3.scale.category20c();
    var width = 960,
    height = 500;

    var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h);
    var x = d3.scale.linear()
    .range([0, width]);

    var y = d3.scale.linear()
    .range([0, height]);

    var color = d3.scale.category20c();

    var partition = d3.layout.partition()
    .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
    .value(function(d) { return d.value; });

    d3.json("readme.json", function(json) {
    var rect = vis.selectAll("rect")
    .data(partition(d3.entries(json)[0]))
    .enter().append("svg:rect")
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    var rect = svg.selectAll("rect");

    d3.json("readme.json", function(error, root) {
    rect = rect
    .data(partition(d3.entries(root)[0]))
    .enter().append("rect")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y); })
    .attr("width", function(d) { return x(d.dx); })
    .attr("height", function(d) { return y(d.dy); })
    .attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); })
    .on("click", click);
    .attr("fill", function(d) { return color((d.children ? d : d.parent).key); })
    .on("click", clicked);
    });

    function click(d) {
    x.domain([d.x, d.x + d.dx]);
    y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);
    function clicked(d) {
    x.domain([d.x, d.x + d.dx]);
    y.domain([d.y, 1]).range([d.y ? 20 : 0, height]);

    rect.transition()
    rect.transition()
    .duration(750)
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y); })
    .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
    .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
    }
    });
    }

    </script>
    </body>
    </html>
    </script>
  10. @mbostock mbostock revised this gist Oct 12, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png

    Unable to render rich display

    Invalid image source.

  11. @mbostock mbostock revised this gist Jun 3, 2011. 1 changed file with 1 addition and 6 deletions.
    7 changes: 1 addition & 6 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -43,8 +43,8 @@
    .on("click", click);

    function click(d) {
    y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);
    x.domain([d.x, d.x + d.dx]);
    y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);

    rect.transition()
    .duration(750)
    @@ -53,13 +53,8 @@
    .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
    .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
    }

    });

    function key(d) {
    return d.parent ? key(d.parent) + "." + d.data.key : d.data.key;
    }

    </script>
    </body>
    </html>
  12. @mbostock mbostock revised this gist Jun 3, 2011. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions readme.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Click anywhere to zoom in! Click on the top bar to zoom out. Built with [D3.js](http://mbostock.github.com/d3/).
  13. @mbostock mbostock revised this gist Jun 3, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@
    <script type="text/javascript">

    var w = 960,
    h = 250,
    h = 500,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]),
    color = d3.scale.category20c();
  14. @mbostock mbostock created this gist Jun 3, 2011.
    65 changes: 65 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Partition - Icicle</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
    <style type="text/css">

    rect {
    stroke: #fff;
    }

    </style>
    </head>
    <body>
    <div id="chart"></div>
    <script type="text/javascript">

    var w = 960,
    h = 250,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]),
    color = d3.scale.category20c();

    var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

    var partition = d3.layout.partition()
    .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
    .value(function(d) { return d.value; });

    d3.json("readme.json", function(json) {
    var rect = vis.selectAll("rect")
    .data(partition(d3.entries(json)[0]))
    .enter().append("svg:rect")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y); })
    .attr("width", function(d) { return x(d.dx); })
    .attr("height", function(d) { return y(d.dy); })
    .attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); })
    .on("click", click);

    function click(d) {
    y.domain([d.y, 1]).range([d.y ? 20 : 0, h]);
    x.domain([d.x, d.x + d.dx]);

    rect.transition()
    .duration(750)
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return y(d.y); })
    .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
    .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
    }

    });

    function key(d) {
    return d.parent ? key(d.parent) + "." + d.data.key : d.data.key;
    }

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