Skip to main content
100%

force directed text fit labels

✓ Published0🌍 Public
RRobinL
Last edited Aug 13, 2016
Created on Aug 5, 2016

This example shows a hierarchical dataset rendered as a force-directed graph, where parent nodes are connected to child nodes by lines, and each leaf node displays its label text inside a circle sized by its value. The visualization uses d3.forceSimulation with forces for link distance, charge, centering, and collision, while text is fit to each circle by computing a font size based on the circle’s radius and the text length. Nodes and links are drawn as SVG elements, with data loaded from a CSV file via d3.csv and a stratify layout, and labels are added for leaves using underscore.js.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/RobinL/'>RobinL</a>'s block: <a href='http://bl.ocks.org/RobinL/b676e77ef1341149be14cac937c31aaa'>force directed test</a>

forked from <a href='http://bl.ocks.org/RobinL/'>RobinL</a>'s block: <a href='http://bl.ocks.org/RobinL/6cdc2d3cf90ea0f1600f210ebf1cf00c'>force directed text fit</a>

forked from <a href='http://bl.ocks.org/RobinL/'>RobinL</a>'s block: <a href='http://bl.ocks.org/RobinL/256be6a22a5ac0649f6003022423937e'>force directed text fit done</a>

gpl-3.0 Licensed

Similar vizzes