Skip to content

Instantly share code, notes, and snippets.

@AlJohri

AlJohri/.block

Forked from mbostock/.block
Last active May 6, 2018 10:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AlJohri/4d684570a395ab00a94b86f27bd8ded4 to your computer and use it in GitHub Desktop.
Save AlJohri/4d684570a395ab00a94b86f27bd8ded4 to your computer and use it in GitHub Desktop.
Download ZIP
Bubble Chart
Raw
.block
license: gpl-3.0
height: 940
border: no
Raw
README.md

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. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Raw
bubble-data.csv
id value
root
root.analytics
root.analytics.cluster
root.analytics.cluster.AgglomerativeCluster 3938
root.analytics.cluster.CommunityStructure 3812
root.analytics.cluster.HierarchicalCluster 6714
root.analytics.cluster.MergeEdge 743
root.analytics.graph
root.analytics.graph.BetweennessCentrality 3534
root.analytics.graph.LinkDistance 5731
root.analytics.graph.MaxFlowMinCut 7840
root.analytics.graph.ShortestPaths 5914
root.analytics.graph.SpanningTree 3416
root.analytics.optimization
root.analytics.optimization.AspectRatioBanker 7074
root.animate
root.animate.Easing 17010
root.animate.FunctionSequence 5842
root.animate.interpolate
root.animate.interpolate.ArrayInterpolator 1983
root.animate.interpolate.ColorInterpolator 2047
root.animate.interpolate.DateInterpolator 1375
root.animate.interpolate.Interpolator 8746
root.animate.interpolate.MatrixInterpolator 2202
root.animate.interpolate.NumberInterpolator 1382
root.animate.interpolate.ObjectInterpolator 1629
root.animate.interpolate.PointInterpolator 1675
root.animate.interpolate.RectangleInterpolator 2042
root.animate.ISchedulable 1041
root.animate.Parallel 5176
root.animate.Pause 449
root.animate.Scheduler 5593
root.animate.Sequence 5534
root.animate.Transition 9201
root.animate.Transitioner 19975
root.animate.TransitionEvent 1116
root.animate.Tween 6006
root.data
root.data.converters
root.data.converters.Converters 721
root.data.converters.DelimitedTextConverter 4294
root.data.converters.GraphMLConverter 9800
root.data.converters.IDataConverter 1314
root.data.converters.JSONConverter 2220
root.data.DataField 1759
root.data.DataSchema 2165
root.data.DataSet 586
root.data.DataSource 3331
root.data.DataTable 772
root.data.DataUtil 3322
root.display
root.display.DirtySprite 8833
root.display.LineSprite 1732
root.display.RectSprite 3623
root.display.TextSprite 10066
root.flex
root.flex.rootVis 4116
root.physics
root.physics.DragForce 1082
root.physics.GravityForce 1336
root.physics.IForce 319
root.physics.NBodyForce 10498
root.physics.Particle 2822
root.physics.Simulation 9983
root.physics.Spring 2213
root.physics.SpringForce 1681
root.query
root.query.AggregateExpression 1616
root.query.And 1027
root.query.Arithmetic 3891
root.query.Average 891
root.query.BinaryExpression 2893
root.query.Comparison 5103
root.query.CompositeExpression 3677
root.query.Count 781
root.query.DateUtil 4141
root.query.Distinct 933
root.query.Expression 5130
root.query.ExpressionIterator 3617
root.query.Fn 3240
root.query.If 2732
root.query.IsA 2039
root.query.Literal 1214
root.query.Match 3748
root.query.Maximum 843
root.query.methods
root.query.methods.add 593
root.query.methods.and 330
root.query.methods.average 287
root.query.methods.count 277
root.query.methods.distinct 292
root.query.methods.div 595
root.query.methods.eq 594
root.query.methods.fn 460
root.query.methods.gt 603
root.query.methods.gte 625
root.query.methods.iff 748
root.query.methods.isa 461
root.query.methods.lt 597
root.query.methods.lte 619
root.query.methods.max 283
root.query.methods.min 283
root.query.methods.mod 591
root.query.methods.mul 603
root.query.methods.neq 599
root.query.methods.not 386
root.query.methods.or 323
root.query.methods.orderby 307
root.query.methods.range 772
root.query.methods.select 296
root.query.methods.stddev 363
root.query.methods.sub 600
root.query.methods.sum 280
root.query.methods.update 307
root.query.methods.variance 335
root.query.methods.where 299
root.query.methods.xor 354
root.query.methods._ 264
root.query.Minimum 843
root.query.Not 1554
root.query.Or 970
root.query.Query 13896
root.query.Range 1594
root.query.StringUtil 4130
root.query.Sum 791
root.query.Variable 1124
root.query.Variance 1876
root.query.Xor 1101
root.scale
root.scale.IScaleMap 2105
root.scale.LinearScale 1316
root.scale.LogScale 3151
root.scale.OrdinalScale 3770
root.scale.QuantileScale 2435
root.scale.QuantitativeScale 4839
root.scale.RootScale 1756
root.scale.Scale 4268
root.scale.ScaleType 1821
root.scale.TimeScale 5833
root.util
root.util.Arrays 8258
root.util.Colors 10001
root.util.Dates 8217
root.util.Displays 12555
root.util.Filter 2324
root.util.Geometry 10993
root.util.heap
root.util.heap.FibonacciHeap 9354
root.util.heap.HeapNode 1233
root.util.IEvaluable 335
root.util.IPredicate 383
root.util.IValueProxy 874
root.util.math
root.util.math.DenseMatrix 3165
root.util.math.IMatrix 2815
root.util.math.SparseMatrix 3366
root.util.Maths 17705
root.util.Orientation 1486
root.util.palette
root.util.palette.ColorPalette 6367
root.util.palette.Palette 1229
root.util.palette.ShapePalette 2059
root.util.palette.SizePalette 2291
root.util.Property 5559
root.util.Shapes 19118
root.util.Sort 6887
root.util.Stats 6557
root.util.Strings 22026
root.vis
root.vis.axis
root.vis.axis.Axes 1302
root.vis.axis.Axis 24593
root.vis.axis.AxisGridLine 652
root.vis.axis.AxisLabel 636
root.vis.axis.CartesianAxes 6703
root.vis.controls
root.vis.controls.AnchorControl 2138
root.vis.controls.ClickControl 3824
root.vis.controls.Control 1353
root.vis.controls.ControlList 4665
root.vis.controls.DragControl 2649
root.vis.controls.ExpandControl 2832
root.vis.controls.HoverControl 4896
root.vis.controls.IControl 763
root.vis.controls.PanZoomControl 5222
root.vis.controls.SelectionControl 7862
root.vis.controls.TooltipControl 8435
root.vis.data
root.vis.data.Data 20544
root.vis.data.DataList 19788
root.vis.data.DataSprite 10349
root.vis.data.EdgeSprite 3301
root.vis.data.NodeSprite 19382
root.vis.data.render
root.vis.data.render.ArrowType 698
root.vis.data.render.EdgeRenderer 5569
root.vis.data.render.IRenderer 353
root.vis.data.render.ShapeRenderer 2247
root.vis.data.ScaleBinding 11275
root.vis.data.Tree 7147
root.vis.data.TreeBuilder 9930
root.vis.events
root.vis.events.DataEvent 2313
root.vis.events.SelectionEvent 1880
root.vis.events.TooltipEvent 1701
root.vis.events.VisualizationEvent 1117
root.vis.legend
root.vis.legend.Legend 20859
root.vis.legend.LegendItem 4614
root.vis.legend.LegendRange 10530
root.vis.operator
root.vis.operator.distortion
root.vis.operator.distortion.BifocalDistortion 4461
root.vis.operator.distortion.Distortion 6314
root.vis.operator.distortion.FisheyeDistortion 3444
root.vis.operator.encoder
root.vis.operator.encoder.ColorEncoder 3179
root.vis.operator.encoder.Encoder 4060
root.vis.operator.encoder.PropertyEncoder 4138
root.vis.operator.encoder.ShapeEncoder 1690
root.vis.operator.encoder.SizeEncoder 1830
root.vis.operator.filter
root.vis.operator.filter.FisheyeTreeFilter 5219
root.vis.operator.filter.GraphDistanceFilter 3165
root.vis.operator.filter.VisibilityFilter 3509
root.vis.operator.IOperator 1286
root.vis.operator.label
root.vis.operator.label.Labeler 9956
root.vis.operator.label.RadialLabeler 3899
root.vis.operator.label.StackedAreaLabeler 3202
root.vis.operator.layout
root.vis.operator.layout.AxisLayout 6725
root.vis.operator.layout.BundledEdgeRouter 3727
root.vis.operator.layout.CircleLayout 9317
root.vis.operator.layout.CirclePackingLayout 12003
root.vis.operator.layout.DendrogramLayout 4853
root.vis.operator.layout.ForceDirectedLayout 8411
root.vis.operator.layout.IcicleTreeLayout 4864
root.vis.operator.layout.IndentedTreeLayout 3174
root.vis.operator.layout.Layout 7881
root.vis.operator.layout.NodeLinkTreeLayout 12870
root.vis.operator.layout.PieLayout 2728
root.vis.operator.layout.RadialTreeLayout 12348
root.vis.operator.layout.RandomLayout 870
root.vis.operator.layout.StackedAreaLayout 9121
root.vis.operator.layout.TreeMapLayout 9191
root.vis.operator.Operator 2490
root.vis.operator.OperatorList 5248
root.vis.operator.OperatorSequence 4190
root.vis.operator.OperatorSwitch 2581
root.vis.operator.SortOperator 2023
root.vis.Visualization 16540
Raw
index.html
<!DOCTYPE html>
<div id="dummy-bubble-chart-container"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
svg {
border: 10px solid;
text-anchor: middle;
font-family: sans-serif;
}
.node text {
font-size: 8px;
}
</style>
<script>
var svg = d3.select("#dummy-bubble-chart-container")
.append("svg")
.attr("width", 940)
.attr("height", 940)
.attr("text-anchor", "middle"),
width = +svg.attr("width"),
height = +svg.attr("height");
var format = d3.format(",d");
var color = d3.scaleOrdinal(d3.schemeCategory20c);
var pack = d3.pack()
.size([width, height])
.padding(1.5);
d3.csv("bubble-data.csv", function(d) {
d.value = +d.value;
if (d.value) return d;
}, function(error, classes) {
if (error) throw error;
var root = d3.hierarchy({children: classes})
.sum(function(d) { return d.value; })
.each(function(d) {
if (id = d.data.id) {
var id, i = id.lastIndexOf(".");
d.id = id;
d.package = id.slice(0, i);
d.class = id.slice(i + 1);
}
});
var node = svg.selectAll(".node")
.data(pack(root).leaves())
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("id", function(d) { return d.id; })
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.package); });
node.append("clipPath")
.attr("id", function(d) { return "clip-" + d.id; })
.append("use")
.attr("xlink:href", function(d) { return "#" + d.id; });
node.append("text")
.attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; })
.selectAll("tspan")
.data(function(d) { return d.class.split(/(?=[A-Z][^A-Z])/g); })
.enter().append("tspan")
.attr("x", 0)
.attr("y", function(d, i, nodes) { return 13 + (i - nodes.length / 2 - 0.5) * 10; })
.text(function(d) { return d; });
node.append("title")
.text(function(d) { return d.id + "\n" + format(d.value); });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment