Skip to content

Instantly share code, notes, and snippets.

@markarios
Forked from mbostock/.block
Last active April 1, 2017 20:04
Show Gist options
  • Save markarios/2da3e74e3f58fc88ad4d89b158c6e37a to your computer and use it in GitHub Desktop.
Save markarios/2da3e74e3f58fc88ad4d89b158c6e37a to your computer and use it in GitHub Desktop.
Force-Directed Tree II (Mike's Example with Text Nodes)
border: no
height: 640
license: gpl-3.0
size path
d3
d3/d3-array
d3/d3-array/threshold
d3/d3-axis
d3/d3-brush
d3/d3-chord
d3/d3-collection
d3/d3-color
d3/d3-dispatch
d3/d3-drag
d3/d3-dsv
d3/d3-ease
d3/d3-force
d3/d3-format
d3/d3-geo
d3/d3-geo/clip
d3/d3-geo/path
d3/d3-geo/projection
d3/d3-hierarchy
d3/d3-hierarchy/hierarchy
d3/d3-hierarchy/pack
d3/d3-hierarchy/treemap
d3/d3-interpolate
d3/d3-interpolate/transform
d3/d3-path
d3/d3-polygon
d3/d3-quadtree
d3/d3-queue
d3/d3-random
d3/d3-request
d3/d3-scale
d3/d3-selection
d3/d3-selection/selection
d3/d3-shape
d3/d3-shape/curve
d3/d3-shape/offset
d3/d3-shape/order
d3/d3-shape/symbol
d3/d3-time-format
d3/d3-time
d3/d3-timer
d3/d3-transition
d3/d3-transition/selection
d3/d3-transition/transition
d3/d3-voronoi
d3/d3-zoom
90 d3/d3-array/array.js
86 d3/d3-array/ascending.js
238 d3/d3-array/bisect.js
786 d3/d3-array/bisector.js
72 d3/d3-array/constant.js
86 d3/d3-array/descending.js
135 d3/d3-array/deviation.js
553 d3/d3-array/extent.js
1876 d3/d3-array/histogram.js
43 d3/d3-array/identity.js
451 d3/d3-array/max.js
362 d3/d3-array/mean.js
452 d3/d3-array/median.js
339 d3/d3-array/merge.js
451 d3/d3-array/min.js
63 d3/d3-array/number.js
182 d3/d3-array/pairs.js
161 d3/d3-array/permute.js
416 d3/d3-array/quantile.js
344 d3/d3-array/range.js
357 d3/d3-array/scan.js
285 d3/d3-array/shuffle.js
295 d3/d3-array/sum.js
361 d3/d3-array/threshold/freedmanDiaconis.js
180 d3/d3-array/threshold/scott.js
96 d3/d3-array/threshold/sturges.js
672 d3/d3-array/ticks.js
356 d3/d3-array/transpose.js
540 d3/d3-array/variance.js
99 d3/d3-array/zip.js
42 d3/d3-axis/array.js
5239 d3/d3-axis/axis.js
43 d3/d3-axis/identity.js
15778 d3/d3-brush/brush.js
72 d3/d3-brush/constant.js
127 d3/d3-brush/event.js
202 d3/d3-brush/noevent.js
42 d3/d3-chord/array.js
3178 d3/d3-chord/chord.js
72 d3/d3-chord/constant.js
159 d3/d3-chord/math.js
2340 d3/d3-chord/ribbon.js
137 d3/d3-collection/entries.js
104 d3/d3-collection/keys.js
1988 d3/d3-collection/map.js
2021 d3/d3-collection/nest.js
800 d3/d3-collection/set.js
115 d3/d3-collection/values.js
9276 d3/d3-color/color.js
1855 d3/d3-color/cubehelix.js
340 d3/d3-color/define.js
3167 d3/d3-color/lab.js
72 d3/d3-color/math.js
2729 d3/d3-dispatch/dispatch.js
72 d3/d3-drag/constant.js
4297 d3/d3-drag/drag.js
430 d3/d3-drag/event.js
857 d3/d3-drag/nodrag.js
202 d3/d3-drag/noevent.js
199 d3/d3-dsv/csv.js
3582 d3/d3-dsv/dsv.js
200 d3/d3-dsv/tsv.js
653 d3/d3-ease/back.js
521 d3/d3-ease/bounce.js
261 d3/d3-ease/circle.js
210 d3/d3-ease/cubic.js
1309 d3/d3-ease/elastic.js
251 d3/d3-ease/exp.js
43 d3/d3-ease/linear.js
596 d3/d3-ease/poly.js
192 d3/d3-ease/quad.js
236 d3/d3-ease/sin.js
654 d3/d3-force/center.js
2447 d3/d3-force/collide.js
72 d3/d3-force/constant.js
69 d3/d3-force/jiggle.js
3213 d3/d3-force/link.js
3181 d3/d3-force/manyBody.js
3444 d3/d3-force/simulation.js
1030 d3/d3-force/x.js
1030 d3/d3-force/y.js
361 d3/d3-format/defaultLocale.js
134 d3/d3-format/exponent.js
656 d3/d3-format/formatDecimal.js
368 d3/d3-format/formatDefault.js
475 d3/d3-format/formatGroup.js
611 d3/d3-format/formatPrefixAuto.js
458 d3/d3-format/formatRounded.js
1589 d3/d3-format/formatSpecifier.js
846 d3/d3-format/formatTypes.js
5247 d3/d3-format/locale.js
119 d3/d3-format/precisionFixed.js
190 d3/d3-format/precisionPrefix.js
186 d3/d3-format/precisionRound.js
906 d3/d3-geo/adder.js
1958 d3/d3-geo/area.js
5361 d3/d3-geo/bounds.js
929 d3/d3-geo/cartesian.js
3816 d3/d3-geo/centroid.js
2373 d3/d3-geo/circle.js
2897 d3/d3-geo/clip/antimeridian.js
470 d3/d3-geo/clip/buffer.js
5956 d3/d3-geo/clip/circle.js
5527 d3/d3-geo/clip/extent.js
3813 d3/d3-geo/clip/index.js
1099 d3/d3-geo/clip/line.js
2802 d3/d3-geo/clip/polygon.js
250 d3/d3-geo/compose.js
72 d3/d3-geo/constant.js
229 d3/d3-geo/distance.js
3034 d3/d3-geo/graticule.js
43 d3/d3-geo/identity.js
911 d3/d3-geo/interpolate.js
1309 d3/d3-geo/length.js
880 d3/d3-geo/math.js
34 d3/d3-geo/noop.js
945 d3/d3-geo/path/area.js
485 d3/d3-geo/path/bounds.js
2033 d3/d3-geo/path/centroid.js
914 d3/d3-geo/path/context.js
1690 d3/d3-geo/path/index.js
1149 d3/d3-geo/path/string.js
139 d3/d3-geo/pointEqual.js
2491 d3/d3-geo/polygonContains.js
235 d3/d3-geo/projection/albers.js
3986 d3/d3-geo/projection/albersUsa.js
502 d3/d3-geo/projection/azimuthal.js
447 d3/d3-geo/projection/azimuthalEqualArea.js
443 d3/d3-geo/projection/azimuthalEquidistant.js
402 d3/d3-geo/projection/conic.js
1017 d3/d3-geo/projection/conicConformal.js
871 d3/d3-geo/projection/conicEqualArea.js
771 d3/d3-geo/projection/conicEquidistant.js
314 d3/d3-geo/projection/cylindricalEqualArea.js
253 d3/d3-geo/projection/equirectangular.js
910 d3/d3-geo/projection/fit.js
387 d3/d3-geo/projection/gnomonic.js
1922 d3/d3-geo/projection/identity.js
3752 d3/d3-geo/projection/index.js
1119 d3/d3-geo/projection/mercator.js
376 d3/d3-geo/projection/orthographic.js
3275 d3/d3-geo/projection/resample.js
436 d3/d3-geo/projection/stereographic.js
762 d3/d3-geo/projection/transverseMercator.js
2509 d3/d3-geo/rotation.js
2305 d3/d3-geo/stream.js
701 d3/d3-geo/transform.js
166 d3/d3-hierarchy/accessors.js
2093 d3/d3-hierarchy/cluster.js
120 d3/d3-hierarchy/constant.js
138 d3/d3-hierarchy/hierarchy/ancestors.js
121 d3/d3-hierarchy/hierarchy/descendants.js
381 d3/d3-hierarchy/hierarchy/each.js
353 d3/d3-hierarchy/hierarchy/eachAfter.js
282 d3/d3-hierarchy/hierarchy/eachBefore.js
1819 d3/d3-hierarchy/hierarchy/index.js
164 d3/d3-hierarchy/hierarchy/leaves.js
246 d3/d3-hierarchy/hierarchy/links.js
606 d3/d3-hierarchy/hierarchy/path.js
151 d3/d3-hierarchy/hierarchy/sort.js
264 d3/d3-hierarchy/hierarchy/sum.js
2452 d3/d3-hierarchy/pack/enclose.js
1917 d3/d3-hierarchy/pack/index.js
389 d3/d3-hierarchy/pack/shuffle.js
3497 d3/d3-hierarchy/pack/siblings.js
1266 d3/d3-hierarchy/partition.js
1934 d3/d3-hierarchy/stratify.js
7060 d3/d3-hierarchy/tree.js
1184 d3/d3-hierarchy/treemap/binary.js
309 d3/d3-hierarchy/treemap/dice.js
2810 d3/d3-hierarchy/treemap/index.js
1029 d3/d3-hierarchy/treemap/resquarify.js
166 d3/d3-hierarchy/treemap/round.js
309 d3/d3-hierarchy/treemap/slice.js
170 d3/d3-hierarchy/treemap/sliceDice.js
1868 d3/d3-hierarchy/treemap/squarify.js
372 d3/d3-interpolate/array.js
600 d3/d3-interpolate/basis.js
360 d3/d3-interpolate/basisClosed.js
697 d3/d3-interpolate/color.js
72 d3/d3-interpolate/constant.js
760 d3/d3-interpolate/cubehelix.js
134 d3/d3-interpolate/date.js
547 d3/d3-interpolate/hcl.js
547 d3/d3-interpolate/hsl.js
447 d3/d3-interpolate/lab.js
100 d3/d3-interpolate/number.js
390 d3/d3-interpolate/object.js
163 d3/d3-interpolate/quantize.js
1277 d3/d3-interpolate/rgb.js
112 d3/d3-interpolate/round.js
1758 d3/d3-interpolate/string.js
672 d3/d3-interpolate/transform/decompose.js
2064 d3/d3-interpolate/transform/index.js
980 d3/d3-interpolate/transform/parse.js
598 d3/d3-interpolate/value.js
1387 d3/d3-interpolate/zoom.js
4089 d3/d3-path/path.js
243 d3/d3-polygon/area.js
346 d3/d3-polygon/centroid.js
411 d3/d3-polygon/contains.js
402 d3/d3-polygon/cross.js
1710 d3/d3-polygon/hull.js
375 d3/d3-polygon/length.js
2441 d3/d3-quadtree/add.js
1667 d3/d3-quadtree/cover.js
170 d3/d3-quadtree/data.js
206 d3/d3-quadtree/extent.js
1696 d3/d3-quadtree/find.js
134 d3/d3-quadtree/quad.js
2077 d3/d3-quadtree/quadtree.js
1898 d3/d3-quadtree/remove.js
51 d3/d3-quadtree/root.js
155 d3/d3-quadtree/size.js
695 d3/d3-quadtree/visit.js
773 d3/d3-quadtree/visitAfter.js
138 d3/d3-quadtree/x.js
138 d3/d3-quadtree/y.js
29 d3/d3-queue/array.js
2870 d3/d3-queue/queue.js
168 d3/d3-random/bates.js
113 d3/d3-random/exponential.js
137 d3/d3-random/irwinHall.js
178 d3/d3-random/logNormal.js
503 d3/d3-random/normal.js
236 d3/d3-random/uniform.js
101 d3/d3-request/csv.js
517 d3/d3-request/dsv.js
157 d3/d3-request/html.js
127 d3/d3-request/json.js
4593 d3/d3-request/request.js
109 d3/d3-request/text.js
118 d3/d3-request/tsv.js
370 d3/d3-request/type.js
174 d3/d3-request/xml.js
90 d3/d3-scale/array.js
2637 d3/d3-scale/band.js
119 d3/d3-scale/category10.js
179 d3/d3-scale/category20.js
179 d3/d3-scale/category20b.js
179 d3/d3-scale/category20c.js
101 d3/d3-scale/colors.js
72 d3/d3-scale/constant.js
3328 d3/d3-scale/continuous.js
188 d3/d3-scale/cubehelix.js
463 d3/d3-scale/identity.js
1206 d3/d3-scale/linear.js
3273 d3/d3-scale/log.js
340 d3/d3-scale/nice.js
44 d3/d3-scale/number.js
1116 d3/d3-scale/ordinal.js
1000 d3/d3-scale/pow.js
1280 d3/d3-scale/quantile.js
1066 d3/d3-scale/quantize.js
536 d3/d3-scale/rainbow.js
717 d3/d3-scale/sequential.js
802 d3/d3-scale/threshold.js
1203 d3/d3-scale/tickFormat.js
4565 d3/d3-scale/time.js
379 d3/d3-scale/utcTime.js
6471 d3/d3-scale/viridis.js
72 d3/d3-selection/constant.js
662 d3/d3-selection/creator.js
536 d3/d3-selection/local.js
533 d3/d3-selection/matcher.js
224 d3/d3-selection/mouse.js
303 d3/d3-selection/namespace.js
254 d3/d3-selection/namespaces.js
448 d3/d3-selection/point.js
259 d3/d3-selection/select.js
282 d3/d3-selection/selectAll.js
235 d3/d3-selection/selection/append.js
1460 d3/d3-selection/selection/attr.js
134 d3/d3-selection/selection/call.js
1740 d3/d3-selection/selection/classed.js
3597 d3/d3-selection/selection/data.js
132 d3/d3-selection/selection/datum.js
869 d3/d3-selection/selection/dispatch.js
289 d3/d3-selection/selection/each.js
53 d3/d3-selection/selection/empty.js
792 d3/d3-selection/selection/enter.js
176 d3/d3-selection/selection/exit.js
546 d3/d3-selection/selection/filter.js
520 d3/d3-selection/selection/html.js
2216 d3/d3-selection/selection/index.js
468 d3/d3-selection/selection/insert.js
171 d3/d3-selection/selection/lower.js
575 d3/d3-selection/selection/merge.js
258 d3/d3-selection/selection/node.js
140 d3/d3-selection/selection/nodes.js
3119 d3/d3-selection/selection/on.js
367 d3/d3-selection/selection/order.js
617 d3/d3-selection/selection/property.js
138 d3/d3-selection/selection/raise.js
153 d3/d3-selection/selection/remove.js
653 d3/d3-selection/selection/select.js
550 d3/d3-selection/selection/selectAll.js
98 d3/d3-selection/selection/size.js
681 d3/d3-selection/selection/sort.js
71 d3/d3-selection/selection/sparse.js
889 d3/d3-selection/selection/style.js
528 d3/d3-selection/selection/text.js
152 d3/d3-selection/selector.js
171 d3/d3-selection/selectorAll.js
175 d3/d3-selection/sourceEvent.js
407 d3/d3-selection/touch.js
323 d3/d3-selection/touches.js
218 d3/d3-selection/window.js
8831 d3/d3-shape/arc.js
2917 d3/d3-shape/area.js
42 d3/d3-shape/array.js
81 d3/d3-shape/constant.js
1436 d3/d3-shape/curve/basis.js
1530 d3/d3-shape/curve/basisClosed.js
1069 d3/d3-shape/curve/basisOpen.js
1081 d3/d3-shape/curve/bundle.js
1633 d3/d3-shape/curve/cardinal.js
1605 d3/d3-shape/curve/cardinalClosed.js
1288 d3/d3-shape/curve/cardinalOpen.js
2637 d3/d3-shape/curve/catmullRom.js
2083 d3/d3-shape/curve/catmullRomClosed.js
1760 d3/d3-shape/curve/catmullRomOpen.js
738 d3/d3-shape/curve/linear.js
514 d3/d3-shape/curve/linearClosed.js
3203 d3/d3-shape/curve/monotone.js
1761 d3/d3-shape/curve/natural.js
655 d3/d3-shape/curve/radial.js
1367 d3/d3-shape/curve/step.js
86 d3/d3-shape/descending.js
43 d3/d3-shape/identity.js
1516 d3/d3-shape/line.js
106 d3/d3-shape/math.js
29 d3/d3-shape/noop.js
319 d3/d3-shape/offset/expand.js
310 d3/d3-shape/offset/none.js
314 d3/d3-shape/offset/silhouette.js
740 d3/d3-shape/offset/wiggle.js
305 d3/d3-shape/order/ascending.js
112 d3/d3-shape/order/descending.js
545 d3/d3-shape/order/insideOut.js
120 d3/d3-shape/order/none.js
97 d3/d3-shape/order/reverse.js
2336 d3/d3-shape/pie.js
81 d3/d3-shape/point.js
934 d3/d3-shape/radialArea.js
396 d3/d3-shape/radialLine.js
1432 d3/d3-shape/stack.js
186 d3/d3-shape/symbol/circle.js
476 d3/d3-shape/symbol/cross.js
307 d3/d3-shape/symbol/diamond.js
137 d3/d3-shape/symbol/square.js
609 d3/d3-shape/symbol/star.js
255 d3/d3-shape/symbol/triangle.js
733 d3/d3-shape/symbol/wye.js
1160 d3/d3-shape/symbol.js
867 d3/d3-time-format/defaultLocale.js
284 d3/d3-time-format/isoFormat.js
319 d3/d3-time-format/isoParse.js
13876 d3/d3-time-format/locale.js
462 d3/d3-time/day.js
164 d3/d3-time/duration.js
569 d3/d3-time/hour.js
1845 d3/d3-time/interval.js
668 d3/d3-time/millisecond.js
437 d3/d3-time/minute.js
414 d3/d3-time/month.js
440 d3/d3-time/second.js
397 d3/d3-time/utcDay.js
399 d3/d3-time/utcHour.js
412 d3/d3-time/utcMinute.js
453 d3/d3-time/utcMonth.js
979 d3/d3-time/utcWeek.js
808 d3/d3-time/utcYear.js
963 d3/d3-time/week.js
754 d3/d3-time/year.js
400 d3/d3-timer/interval.js
250 d3/d3-timer/timeout.js
2771 d3/d3-timer/timer.js
484 d3/d3-transition/active.js
665 d3/d3-transition/interrupt.js
245 d3/d3-transition/selection/index.js
138 d3/d3-transition/selection/interrupt.js
1090 d3/d3-transition/selection/transition.js
2473 d3/d3-transition/transition/attr.js
904 d3/d3-transition/transition/attrTween.js
510 d3/d3-transition/transition/delay.js
528 d3/d3-transition/transition/duration.js
348 d3/d3-transition/transition/ease.js
574 d3/d3-transition/transition/filter.js
1892 d3/d3-transition/transition/index.js
340 d3/d3-transition/transition/interpolate.js
653 d3/d3-transition/transition/merge.js
853 d3/d3-transition/transition/on.js
284 d3/d3-transition/transition/remove.js
4792 d3/d3-transition/transition/schedule.js
826 d3/d3-transition/transition/select.js
883 d3/d3-transition/transition/selectAll.js
174 d3/d3-transition/transition/selection.js
2119 d3/d3-transition/transition/style.js
607 d3/d3-transition/transition/styleTween.js
473 d3/d3-transition/transition/text.js
691 d3/d3-transition/transition/transition.js
2026 d3/d3-transition/transition/tween.js
4381 d3/d3-voronoi/Beach.js
4087 d3/d3-voronoi/Cell.js
1632 d3/d3-voronoi/Circle.js
72 d3/d3-voronoi/constant.js
3415 d3/d3-voronoi/Diagram.js
3634 d3/d3-voronoi/Edge.js
81 d3/d3-voronoi/point.js
5302 d3/d3-voronoi/RedBlackTree.js
1420 d3/d3-voronoi/voronoi.js
72 d3/d3-zoom/constant.js
137 d3/d3-zoom/event.js
202 d3/d3-zoom/noevent.js
1336 d3/d3-zoom/transform.js
12133 d3/d3-zoom/zoom.js
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="980" height="680"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// ORIGINAL
// Force-Directed Tree II
// Mike Bostock
// https://bl.ocks.org/mbostock/9a8124ccde3a4e9625bc413b48f14b30
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d"),
width = canvas.width,
height = canvas.height;
// FAIL
// // http://stackoverflow.com/questions/6838461/can-canvas-context-filltext-be-made-crisp-because-context-translate-0-5-0-5-doe
// canvas.mozOpaque = true;
d3.csv("d3.csv", function(error, data) {
if (error) throw error;
var root = d3.stratify()
.id(function(d) {
return d.path; })
.parentId(function(d) {
return d.path.substring(0, d.path.lastIndexOf("/")); })
(data);
var nodes = root.descendants(),
links = root.links();
var linkDist = function(d) {
return d.target.children ? 15*d.target.children.length: 100 };
var simulation = d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody())
.force("link", d3.forceLink(links).strength(0.7)
.distance(linkDist))
.force("x", d3.forceX())
.force("y", d3.forceY())
.on("tick", ticked);
d3.select(canvas)
.call(d3.drag()
.container(canvas)
.subject(dragsubject)
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
function ticked() {
context.clearRect(0, 0, width, height);
context.save();
context.translate(width / 2, height / 2);
context.beginPath();
links.forEach(drawLink);
context.strokeStyle = "#aaa";
context.stroke();
context.beginPath();
nodes.forEach(drawNode);
context.fill();
context.strokeStyle = "#fff";
context.stroke();
context.restore();
}
function dragsubject() {
return simulation.find(d3.event.x - width / 2, d3.event.y - height / 2);
}
function dragstarted() {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d3.event.subject.fx = d3.event.subject.x;
d3.event.subject.fy = d3.event.subject.y;
}
function dragged() {
d3.event.subject.fx = d3.event.x;
d3.event.subject.fy = d3.event.y;
}
function dragended() {
if (!d3.event.active) simulation.alphaTarget(0);
d3.event.subject.fx = null;
d3.event.subject.fy = null;
}
function drawLink(d) {
context.moveTo(d.source.x, d.source.y);
context.lineTo(d.target.x, d.target.y);
}
function drawNode(d) {
context.moveTo(d.x, d.y);
context.font = "10px Arial";
context.fillText(d.id.substr(d.id.lastIndexOf('/') + 1), d.x, d.y);
}
});
</script>
@markarios
Copy link
Author

Proof of concept based on Mike's example. It needs improvement.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment