| license: mit |
Built with blockbuilder.org
forked from jorgeehernandez's block: Spacetree
forked from anonymous's block: Spacetree
forked from anonymous's block: Spacetree
forked from anonymous's block: Spacetree
forked from anonymous's block: Spacetree
forked from jorgeehernandez's block: Spacetree
| id | value | |
|---|---|---|
| flare | ||
| flare.analytics | ||
| flare.analytics.cluster | ||
| flare.analytics.cluster.AgglomerativeCluster | 3938 | |
| flare.analytics.cluster.CommunityStructure | 3812 | |
| flare.analytics.cluster.HierarchicalCluster | 6714 | |
| flare.analytics.cluster.MergeEdge | 743 | |
| flare.analytics.graph | ||
| flare.analytics.graph.BetweennessCentrality | 3534 | |
| flare.analytics.graph.LinkDistance | 5731 | |
| flare.analytics.graph.MaxFlowMinCut | 7840 | |
| flare.analytics.graph.ShortestPaths | 5914 | |
| flare.analytics.graph.SpanningTree | 3416 | |
| flare.analytics.optimization | ||
| flare.analytics.optimization.AspectRatioBanker | 7074 | |
| flare.animate | ||
| flare.animate.Easing | 17010 | |
| flare.animate.FunctionSequence | 5842 | |
| flare.animate.interpolate | ||
| flare.animate.interpolate.ArrayInterpolator | 1983 | |
| flare.animate.interpolate.ColorInterpolator | 2047 | |
| flare.animate.interpolate.DateInterpolator | 1375 | |
| flare.animate.interpolate.Interpolator | 8746 | |
| flare.animate.interpolate.MatrixInterpolator | 2202 | |
| flare.animate.interpolate.NumberInterpolator | 1382 | |
| flare.animate.interpolate.ObjectInterpolator | 1629 | |
| flare.animate.interpolate.PointInterpolator | 1675 | |
| flare.animate.interpolate.RectangleInterpolator | 2042 | |
| flare.animate.ISchedulable | 1041 | |
| flare.animate.Parallel | 5176 | |
| flare.animate.Pause | 449 | |
| flare.animate.Scheduler | 5593 | |
| flare.animate.Sequence | 5534 | |
| flare.animate.Transition | 9201 | |
| flare.animate.Transitioner | 19975 | |
| flare.animate.TransitionEvent | 1116 | |
| flare.animate.Tween | 6006 | |
| flare.data | ||
| flare.data.converters | ||
| flare.data.converters.Converters | 721 | |
| flare.data.converters.DelimitedTextConverter | 4294 | |
| flare.data.converters.GraphMLConverter | 9800 | |
| flare.data.converters.IDataConverter | 1314 | |
| flare.data.converters.JSONConverter | 2220 | |
| flare.data.DataField | 1759 | |
| flare.data.DataSchema | 2165 | |
| flare.data.DataSet | 586 | |
| flare.data.DataSource | 3331 | |
| flare.data.DataTable | 772 | |
| flare.data.DataUtil | 3322 | |
| flare.display | ||
| flare.display.DirtySprite | 8833 | |
| flare.display.LineSprite | 1732 | |
| flare.display.RectSprite | 3623 | |
| flare.display.TextSprite | 10066 |
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| .node circle { | |
| fill: #999; | |
| } | |
| .node text { | |
| font: 10px sans-serif; | |
| } | |
| .node--internal circle { | |
| fill: #555; | |
| } | |
| .node--internal text { | |
| text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #555; | |
| stroke-opacity: 0.4; | |
| stroke-width: 1.5px; | |
| } | |
| .rect{ | |
| fill:red; | |
| stroke:black; | |
| stroke-width:2; | |
| opacity:0.5; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg width="400" height="400"></svg> | |
| <script> | |
| var svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"), | |
| g = svg.append("g"); | |
| var tree = d3.tree() | |
| .size([height, width]); | |
| var stratify = d3.stratify() | |
| .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); }); | |
| d3.csv("data.csv", function(error, data) { | |
| if (error) throw error; | |
| var root = stratify(data).sort(function(a, b) { | |
| return (a.height - b.height) || a.id.localeCompare(b.id); | |
| }); | |
| function collapse(d) { | |
| if(d.children) { | |
| d._children = d.children; | |
| d._children.forEach(collapse); | |
| d.children = null; | |
| } | |
| } | |
| root.children.forEach(collapse); | |
| tree(root); | |
| var link = g.selectAll(".link") | |
| .data(root.descendants().slice(1)) | |
| .enter().append("path") | |
| .attr("class", "link") | |
| .attr("d", function(d,i) { | |
| console.log(d) | |
| return "M" + d.x + "," + d.y/2 | |
| + "C" + (d.x) + "," + d.y/2 | |
| + " " + (d.x) + "," + (d.y/2) | |
| + " " + d.x + "," + (d.y/2); | |
| }) | |
| .transition() | |
| .duration(2000) | |
| .attr("d", function(d,i) { | |
| console.log(d) | |
| return "M" + d.parent.x + "," + d.parent.y/2 | |
| + "C" + (d.x + d.parent.x)/2 + "," + (d.parent.y/2) | |
| + " " + (d.x + d.parent.x)/2 + "," + d.y/2 | |
| + " " + d.x + "," + (d.y/2); | |
| }); | |
| var node = g.selectAll(".node") | |
| .data(root.descendants()) | |
| .enter().append("g") | |
| .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) | |
| .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
| node.append("rect") | |
| .attr('x',function(d){return d.children ? -25 : -25;}) | |
| .attr('y',function(d){return d.children ? d.y : -d.y/2}) | |
| .attr('width',0) | |
| .attr('height',0) | |
| .attr('class','rect') | |
| .transition() | |
| .duration(2000) | |
| .attr('width',50) | |
| .attr('height',20); | |
| node.append("text") | |
| .attr("dy", 3) | |
| .attr("x", function(d) { return d.children ? 8 : -20; }) | |
| .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) | |
| .style('fill', 'black') | |
| .attr('y',function(d){return d.children ? d.y+10 : (-d.y/2)+10}) | |
| .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); }) | |
| .attr('font-size', '1em') | |
| .transition() | |
| .duration(2000) | |
| .attr('font-size', '30em'); | |
| }); | |
| function update(source) { | |
| var nodes = tree.nodes(root).reverse(), | |
| links = tree.links(nodes); | |
| } | |
| </script> | |
| </body> |