Notebooks 2.0 is here.
Public
Edited
Oct 10, 2023
chart = {
// Specify the dimensions of the chart.
const width = 928;
const height = width;
const margin = 1; // to avoid clipping the root circle stroke
const name = d => d.id.split(".").pop(); // "Strings" of "flare.util.Strings"
const group = d => d.id.split(".")[1]; // "util" of "flare.util.Strings"
const names = d => name(d).split(/(?=[A-Z][a-z])|\s+/g); // ["Legend", "Item"] of "flare.vis.legend.LegendItems"
// 数字格式化：,表示千的前面加逗号, d表示整数显示
// Specify the number format for values.
const format = d3.format(",d");
//颜色尺子，采用schemeTableau10配色
// Create a categorical color scale.
const color = d3.scaleOrdinal(d3.schemeTableau10);
// pack生成器，间距3px
// 由于data只有id和value值，id为文本，因此想要绘制出pack图或气泡图，可以采用pack布局，按照value值计算出x,y坐标来进行绘制
// Create the pack layout.
const pack = d3.pack()
.size([width - margin * 2, height - margin * 2])
.padding(3);
// d3.hierarchy({children: data})构建树结构层级
// pack布局生成器，计算出每个节点的x,y,r值
// sum计算总和，总和其实就是叶子节点的value值
// Compute the hierarchy from the (flat) data; expose the values
// for each node; lastly apply the pack layout.
const root = pack(d3.hierarchy({children: data})
.sum(d => d.value));
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-margin, -margin, width, height])
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;")
//文本水平居中
.attr("text-anchor", "middle");
// 为每一个叶子节点创建g，并将坐标移动到pack布局计算出的x,y坐标处
// Place each (leaf) node according to the layout’s x and y values.
const node = svg.append("g")
.selectAll()
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x},${d.y})`);
// 鼠标移入提示
// Add a title.
node.append("title")
.text(d => `${d.data.id}\n${format(d.value)}`);
// 绘制气泡图
// Add a filled circle.
node.append("circle")
.attr("fill-opacity", 0.7)
//按照分组显示颜色，调用color尺子，传入分组值，返回颜色值
.attr("fill", d => color(group(d.data)))
//半径为pack计算出的r
.attr("r", d => d.r);
// Add a label.
const text = node.append("text")
//设置裁剪，裁剪区域为circle半径内
.attr("clip-path", d => `circle(${d.r})`)
;
// 第一部分tspan显示names，names为一个[]数组，每一个都采用一行绘制
// Add a tspan for each CamelCase-separated word.
text.selectAll()
.data(d => names(d.data))
.join("tspan")
.attr("x", 0)
//每一name的y坐标，整体往下偏移一点
.attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.35}em`)
.text(d => d);
// 第二行部分tspan显示value
// Add a tspan for the node’s value.
text.append("tspan")
.attr("x", 0)
//距离上面names/2个距离+一点偏移
.attr("y", d => `${names(d.data).length / 2 + 0.35}em`)
.attr("fill-opacity", 0.7)
//数值格式化，千加逗号，另外整数显示
.text(d => format(d.value));
return Object.assign(svg.node(), {scales: {color}});
}
data = [
{
"id": "flare.analytics.cluster.AgglomerativeCluster",
"value": 3938
},
{
"id": "flare.analytics.cluster.CommunityStructure",
"value": 3812
},
{
"id": "flare.analytics.cluster.HierarchicalCluster",
"value": 6714
},
{
"id": "flare.analytics.cluster.MergeEdge",
"value": 743
},
{
"id": "flare.analytics.graph.BetweennessCentrality",
"value": 3534
},
{
"id": "flare.analytics.graph.LinkDistance",
"value": 5731
},
{
"id": "flare.analytics.graph.MaxFlowMinCut",
"value": 7840
},
{
"id": "flare.analytics.graph.ShortestPaths",
"value": 5914
},
{
"id": "flare.analytics.graph.SpanningTree",
"value": 3416
},
{
"id": "flare.analytics.optimization.AspectRatioBanker",
"value": 7074
},
{
"id": "flare.animate.Easing",
"value": 17010
},
{
"id": "flare.animate.FunctionSequence",
"value": 5842
},
{
"id": "flare.animate.interpolate.ArrayInterpolator",
"value": 1983
},
{
"id": "flare.animate.interpolate.ColorInterpolator",
"value": 2047
},
{
"id": "flare.animate.interpolate.DateInterpolator",
"value": 1375
},
{
"id": "flare.animate.interpolate.Interpolator",
"value": 8746
},
{
"id": "flare.animate.interpolate.MatrixInterpolator",
"value": 2202
},
{
"id": "flare.animate.interpolate.NumberInterpolator",
"value": 1382
},
{
"id": "flare.animate.interpolate.ObjectInterpolator",
"value": 1629
},
{
"id": "flare.animate.interpolate.PointInterpolator",
"value": 1675
},
{
"id": "flare.animate.interpolate.RectangleInterpolator",
"value": 2042
},
{
"id": "flare.animate.ISchedulable",
"value": 1041
},
{
"id": "flare.animate.Parallel",
"value": 5176
},
{
"id": "flare.animate.Pause",
"value": 449
},
{
"id": "flare.animate.Scheduler",
"value": 5593
},
{
"id": "flare.animate.Sequence",
"value": 5534
},
{
"id": "flare.animate.Transition",
"value": 9201
},
{
"id": "flare.animate.Transitioner",
"value": 19975
},
{
"id": "flare.animate.TransitionEvent",
"value": 1116
},
{
"id": "flare.animate.Tween",
"value": 6006
},
{
"id": "flare.data.converters.Converters",
"value": 721
},
{
"id": "flare.data.converters.DelimitedTextConverter",
"value": 4294
},
{
"id": "flare.data.converters.GraphMLConverter",
"value": 9800
},
{
"id": "flare.data.converters.IDataConverter",
"value": 1314
},
{
"id": "flare.data.converters.JSONConverter",
"value": 2220
},
{
"id": "flare.data.DataField",
"value": 1759
},
{
"id": "flare.data.DataSchema",
"value": 2165
},
{
"id": "flare.data.DataSet",
"value": 586
},
{
"id": "flare.data.DataSource",
"value": 3331
},
{
"id": "flare.data.DataTable",
"value": 772
},
{
"id": "flare.data.DataUtil",
"value": 3322
},
{
"id": "flare.display.DirtySprite",
"value": 8833
},
{
"id": "flare.display.LineSprite",
"value": 1732
},
{
"id": "flare.display.RectSprite",
"value": 3623
},
{
"id": "flare.display.TextSprite",
"value": 10066
},
{
"id": "flare.flex.FlareVis",
"value": 4116
},
{
"id": "flare.physics.DragForce",
"value": 1082
},
{
"id": "flare.physics.GravityForce",
"value": 1336
},
{
"id": "flare.physics.IForce",
"value": 319
},
{
"id": "flare.physics.NBodyForce",
"value": 10498
},
{
"id": "flare.physics.Particle",
"value": 2822
},
{
"id": "flare.physics.Simulation",
"value": 9983
},
{
"id": "flare.physics.Spring",
"value": 2213
},
{
"id": "flare.physics.SpringForce",
"value": 1681
},
{
"id": "flare.query.AggregateExpression",
"value": 1616
},
{
"id": "flare.query.And",
"value": 1027
},
{
"id": "flare.query.Arithmetic",
"value": 3891
},
{
"id": "flare.query.Average",
"value": 891
},
{
"id": "flare.query.BinaryExpression",
"value": 2893
},
{
"id": "flare.query.Comparison",
"value": 5103
},
{
"id": "flare.query.CompositeExpression",
"value": 3677
},
{
"id": "flare.query.Count",
"value": 781
},
{
"id": "flare.query.DateUtil",
"value": 4141
},
{
"id": "flare.query.Distinct",
"value": 933
},
{
"id": "flare.query.Expression",
"value": 5130
},
{
"id": "flare.query.ExpressionIterator",
"value": 3617
},
{
"id": "flare.query.Fn",
"value": 3240
},
{
"id": "flare.query.If",
"value": 2732
},
{
"id": "flare.query.IsA",
"value": 2039
},
{
"id": "flare.query.Literal",
"value": 1214
},
{
"id": "flare.query.Match",
"value": 3748
},
{
"id": "flare.query.Maximum",
"value": 843
},
{
"id": "flare.query.methods.add",
"value": 593
},
{
"id": "flare.query.methods.and",
"value": 330
},
{
"id": "flare.query.methods.average",
"value": 287
},
{
"id": "flare.query.methods.count",
"value": 277
},
{
"id": "flare.query.methods.distinct",
"value": 292
},
{
"id": "flare.query.methods.div",
"value": 595
},
{
"id": "flare.query.methods.eq",
"value": 594
},
{
"id": "flare.query.methods.fn",
"value": 460
},
{
"id": "flare.query.methods.gt",
"value": 603
},
{
"id": "flare.query.methods.gte",
"value": 625
},
{
"id": "flare.query.methods.iff",
"value": 748
},
{
"id": "flare.query.methods.isa",
"value": 461
},
{
"id": "flare.query.methods.lt",
"value": 597
},
{
"id": "flare.query.methods.lte",
"value": 619
},
{
"id": "flare.query.methods.max",
"value": 283
},
{
"id": "flare.query.methods.min",
"value": 283
},
{
"id": "flare.query.methods.mod",
"value": 591
},
{
"id": "flare.query.methods.mul",
"value": 603
},
{
"id": "flare.query.methods.neq",
"value": 599
},
{
"id": "flare.query.methods.not",
"value": 386
},
{
"id": "flare.query.methods.or",
"value": 323
},
{
"id": "flare.query.methods.orderby",
"value": 307
},
{
"id": "flare.query.methods.range",
"value": 772
},
{
"id": "flare.query.methods.select",
"value": 296
},
{
"id": "flare.query.methods.stddev",
"value": 363
},
{
"id": "flare.query.methods.sub",
"value": 600
},
{
"id": "flare.query.methods.sum",
"value": 280
},
{
"id": "flare.query.methods.update",
"value": 307
},
{
"id": "flare.query.methods.variance",
"value": 335
},
{
"id": "flare.query.methods.where",
"value": 299
},
{
"id": "flare.query.methods.xor",
"value": 354
},
{
"id": "flare.query.methods._",
"value": 264
},
{
"id": "flare.query.Minimum",
"value": 843
},
{
"id": "flare.query.Not",
"value": 1554
},
{
"id": "flare.query.Or",
"value": 970
},
{
"id": "flare.query.Query",
"value": 13896
},
{
"id": "flare.query.Range",
"value": 1594
},
{
"id": "flare.query.StringUtil",
"value": 4130
},
{
"id": "flare.query.Sum",
"value": 791
},
{
"id": "flare.query.Variable",
"value": 1124
},
{
"id": "flare.query.Variance",
"value": 1876
},
{
"id": "flare.query.Xor",
"value": 1101
},
{
"id": "flare.scale.IScaleMap",
"value": 2105
},
{
"id": "flare.scale.LinearScale",
"value": 1316
},
{
"id": "flare.scale.LogScale",
"value": 3151
},
{
"id": "flare.scale.OrdinalScale",
"value": 3770
},
{
"id": "flare.scale.QuantileScale",
"value": 2435
},
{
"id": "flare.scale.QuantitativeScale",
"value": 4839
},
{
"id": "flare.scale.RootScale",
"value": 1756
},
{
"id": "flare.scale.Scale",
"value": 4268
},
{
"id": "flare.scale.ScaleType",
"value": 1821
},
{
"id": "flare.scale.TimeScale",
"value": 5833
},
{
"id": "flare.util.Arrays",
"value": 8258
},
{
"id": "flare.util.Colors",
"value": 10001
},
{
"id": "flare.util.Dates",
"value": 8217
},
{
"id": "flare.util.Displays",
"value": 12555
},
{
"id": "flare.util.Filter",
"value": 2324
},
{
"id": "flare.util.Geometry",
"value": 10993
},
{
"id": "flare.util.heap.FibonacciHeap",
"value": 9354
},
{
"id": "flare.util.heap.HeapNode",
"value": 1233
},
{
"id": "flare.util.IEvaluable",
"value": 335
},
{
"id": "flare.util.IPredicate",
"value": 383
},
{
"id": "flare.util.IValueProxy",
"value": 874
},
{
"id": "flare.util.math.DenseMatrix",
"value": 3165
},
{
"id": "flare.util.math.IMatrix",
"value": 2815
},
{
"id": "flare.util.math.SparseMatrix",
"value": 3366
},
{
"id": "flare.util.Maths",
"value": 17705
},
{
"id": "flare.util.Orientation",
"value": 1486
},
{
"id": "flare.util.palette.ColorPalette",
"value": 6367
},
{
"id": "flare.util.palette.Palette",
"value": 1229
},
{
"id": "flare.util.palette.ShapePalette",
"value": 2059
},
{
"id": "flare.util.palette.SizePalette",
"value": 2291
},
{
"id": "flare.util.Property",
"value": 5559
},
{
"id": "flare.util.Shapes",
"value": 19118
},
{
"id": "flare.util.Sort",
"value": 6887
},
{
"id": "flare.util.Stats",
"value": 6557
},
{
"id": "flare.util.Strings",
"value": 22026
},
{
"id": "flare.vis.axis.Axes",
"value": 1302
},
{
"id": "flare.vis.axis.Axis",
"value": 24593
},
{
"id": "flare.vis.axis.AxisGridLine",
"value": 652
},
{
"id": "flare.vis.axis.AxisLabel",
"value": 636
},
{
"id": "flare.vis.axis.CartesianAxes",
"value": 6703
},
{
"id": "flare.vis.controls.AnchorControl",
"value": 2138
},
{
"id": "flare.vis.controls.ClickControl",
"value": 3824
},
{
"id": "flare.vis.controls.Control",
"value": 1353
},
{
"id": "flare.vis.controls.ControlList",
"value": 4665
},
{
"id": "flare.vis.controls.DragControl",
"value": 2649
},
{
"id": "flare.vis.controls.ExpandControl",
"value": 2832
},
{
"id": "flare.vis.controls.HoverControl",
"value": 4896
},
{
"id": "flare.vis.controls.IControl",
"value": 763
},
{
"id": "flare.vis.controls.PanZoomControl",
"value": 5222
},
{
"id": "flare.vis.controls.SelectionControl",
"value": 7862
},
{
"id": "flare.vis.controls.TooltipControl",
"value": 8435
},
{
"id": "flare.vis.data.Data",
"value": 20544
},
{
"id": "flare.vis.data.DataList",
"value": 19788
},
{
"id": "flare.vis.data.DataSprite",
"value": 10349
},
{
"id": "flare.vis.data.EdgeSprite",
"value": 3301
},
{
"id": "flare.vis.data.NodeSprite",
"value": 19382
},
{
"id": "flare.vis.data.render.ArrowType",
"value": 698
},
{
"id": "flare.vis.data.render.EdgeRenderer",
"value": 5569
},
{
"id": "flare.vis.data.render.IRenderer",
"value": 353
},
{
"id": "flare.vis.data.render.ShapeRenderer",
"value": 2247
},
{
"id": "flare.vis.data.ScaleBinding",
"value": 11275
},
{
"id": "flare.vis.data.Tree",
"value": 7147
},
{
"id": "flare.vis.data.TreeBuilder",
"value": 9930
},
{
"id": "flare.vis.events.DataEvent",
"value": 2313
},
{
"id": "flare.vis.events.SelectionEvent",
"value": 1880
},
{
"id": "flare.vis.events.TooltipEvent",
"value": 1701
},
{
"id": "flare.vis.events.VisualizationEvent",
"value": 1117
},
{
"id": "flare.vis.legend.Legend",
"value": 20859
},
{
"id": "flare.vis.legend.LegendItem",
"value": 4614
},
{
"id": "flare.vis.legend.LegendRange",
"value": 10530
},
{
"id": "flare.vis.operator.distortion.BifocalDistortion",
"value": 4461
},
{
"id": "flare.vis.operator.distortion.Distortion",
"value": 6314
},
{
"id": "flare.vis.operator.distortion.FisheyeDistortion",
"value": 3444
},
{
"id": "flare.vis.operator.encoder.ColorEncoder",
"value": 3179
},
{
"id": "flare.vis.operator.encoder.Encoder",
"value": 4060
},
{
"id": "flare.vis.operator.encoder.PropertyEncoder",
"value": 4138
},
{
"id": "flare.vis.operator.encoder.ShapeEncoder",
"value": 1690
},
{
"id": "flare.vis.operator.encoder.SizeEncoder",
"value": 1830
},
{
"id": "flare.vis.operator.filter.FisheyeTreeFilter",
"value": 5219
},
{
"id": "flare.vis.operator.filter.GraphDistanceFilter",
"value": 3165
},
{
"id": "flare.vis.operator.filter.VisibilityFilter",
"value": 3509
},
{
"id": "flare.vis.operator.IOperator",
"value": 1286
},
{
"id": "flare.vis.operator.label.Labeler",
"value": 9956
},
{
"id": "flare.vis.operator.label.RadialLabeler",
"value": 3899
},
{
"id": "flare.vis.operator.label.StackedAreaLabeler",
"value": 3202
},
{
"id": "flare.vis.operator.layout.AxisLayout",
"value": 6725
},
{
"id": "flare.vis.operator.layout.BundledEdgeRouter",
"value": 3727
},
{
"id": "flare.vis.operator.layout.CircleLayout",
"value": 9317
},
{
"id": "flare.vis.operator.layout.CirclePackingLayout",
"value": 12003
},
{
"id": "flare.vis.operator.layout.DendrogramLayout",
"value": 4853
},
{
"id": "flare.vis.operator.layout.ForceDirectedLayout",
"value": 8411
},
{
"id": "flare.vis.operator.layout.IcicleTreeLayout",
"value": 4864
},
{
"id": "flare.vis.operator.layout.IndentedTreeLayout",
"value": 3174
},
{
"id": "flare.vis.operator.layout.Layout",
"value": 7881
},
{
"id": "flare.vis.operator.layout.NodeLinkTreeLayout",
"value": 12870
},
{
"id": "flare.vis.operator.layout.PieLayout",
"value": 2728
},
{
"id": "flare.vis.operator.layout.RadialTreeLayout",
"value": 12348
},
{
"id": "flare.vis.operator.layout.RandomLayout",
"value": 870
},
{
"id": "flare.vis.operator.layout.StackedAreaLayout",
"value": 9121
},
{
"id": "flare.vis.operator.layout.TreeMapLayout",
"value": 9191
},
{
"id": "flare.vis.operator.Operator",
"value": 2490
},
{
"id": "flare.vis.operator.OperatorList",
"value": 5248
},
{
"id": "flare.vis.operator.OperatorSequence",
"value": 4190
},
{
"id": "flare.vis.operator.OperatorSwitch",
"value": 2581
},
{
"id": "flare.vis.operator.SortOperator",
"value": 2023
},
{
"id": "flare.vis.Visualization",
"value": 16540
}
]
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
