2f:T132d,function dvBeeswarmForce(elem,data,width,height,sizeField,options) { nodes.length = 0; // clear any existing node data (not node, the svg elements.) // do I want this?? // options: fociField, strength, kFactor, collisionFactor, alphaTarget, alphaMin, maxRadius, dotScaleFactor, colorSet if (typeof(options) === "undefined") {var options = {}} if (typeof(options.strength) === "undefined") {options.strength = -1} if (typeof(options.kFactor) === "undefined") {options.kFactor = 0.1} if (typeof(options.collisionFactor) === "undefined") {options.collisionFactor = 1.1} if (typeof(options.alphaTarget) === "undefined") {options.alphaTarget = 0.1} if (typeof(options.alphaMin) === "undefined") {options.alphaMin = 0.1} if (options.alphaTarget > options.alphaMin) {console.log("Warning: alphaTarget > alphaMin. Simulation will run forever.")} if (typeof(options.maxRadius) === "undefined" || options.maxRadius == '') {options.maxRadius = 20} if (typeof(options.dotScaleFactor) === "undefined" || options.dotScaleFactor == '') {options.dotScaleFactor = 0.005} // options.axisField // options.axisScaleFunction // create axisScaleFunction if it is not passed in through options. if (typeof(options.axisScaleFunction) === "undefined") { let scaleField; if (typeof(options.axisField) === "undefined") { options.axisScaleFunction = d3.scaleLinear().domain([0,1000]).range([0,width]); } else { if (typeof(options.axisField) === "string") {scaleField = options.axisField} options.axisScaleFunction = d3.scaleLinear().domain(d3.extent(data, d => d[scaleField])).range([0,width]); } } // set positions for swarm lines. could be either horizontal or vertical. default is horizontal at middle. if (typeof(options.direction) === "undefined") {options.direction = "horizontal"} if (typeof(options.fociPositions) === "undefined") { if (options.direction == "horizontal" || options.direction == "h") {options.fociPositions = {default: height/2}} else if (options.direction == "vertical" || options.direction == "v") {options.fociPositions = {default: width/2}} } mutable foci = options.fociPositions; // default or passed in // Setup the Force Simulation (the algorithm that does this) force .force('nbody', d3.forceManyBody().strength(options.strength)) .force('foci', alpha => { for (var i = 0, n = nodes.length, o, k = alpha * options.kFactor; i < n; ++i) { o = nodes[i]; if (typeof(options.axisField) !== "undefined" && options.axisField != "") { if (options.direction == "horizontal" || options.direction == "h") { o.vx += (o.axisPos - o.x) * k; o.vy += (mutable foci[o.id] - o.y) * k; } else if (options.direction == "vertical" || options.direction == "v") { o.vx += (mutable foci[o.id] - o.x) * k; o.vy += (o.axisPos - o.y) * k; } else if (options.direction == "path") { o.vx += (o.axisPos.x - o.x) * k; o.vy += (o.axisPos.y - o.y) * k; } } else { o.vx += (width/2 - o.x) * k; o.vy += (height/2 - o.y) * k; } } }) .force('collision', d3.forceCollide(function (d) {return options.collisionFactor*d.r;})) .alphaTarget(options.alphaTarget) .alphaMin(options.alphaMin) .on("tick", tick); // the tick is what updates their position. function tick(e) { node.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } // this creates the dots function addDots(dot) { let fociID; let axisPosition; var radius = rFromArea(dot[sizeField]) * options.dotScaleFactor; if (isFinite(sizeField)) {radius = sizeField}; if (radius < 0 || isNaN(radius)) {radius = 1;} if (typeof(options.fociField) !== "undefined") {fociID = dot[options.fociField]} else {fociID = "default";} if (typeof(options.axisField) !== "undefined") {axisPosition = options.axisScaleFunction(toNum(dot[options.axisField]))} else {axisPosition = options.axisScaleFunction(0);} nodes.push({ id: fociID, axisPos: axisPosition, x: 0, // could also set starting position to center or other input? y: 0, r: radius, data: dot }); } function drawNodes() { node = svgElem.selectAll("circle").data(nodes); node = node.join("circle") .attr("class", function(d) { return "node" + options.classField ? d.data[options.classField] : ""}) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", function(d) {return d.r}) .style("fill", function(d) {return options.colorSet ? options.colorSet[d.id] : ""}); } // draw it. let svgElem = elem; let node = svgElem.selectAll(".node"); data.forEach(function(d){addDots(d)}); // adds each time we run. would rather join. force.nodes(nodes); drawNodes(); return node; }30:[] 2d:{"title":"Force Directed clustering along a path","cells":[{"id":0,"value":"# Force Directed clustering along a path\nThis is a variation on my [Beeswarm Force Directed layout](https://observablehq.com/@emfielduva/beeswarm-force-diagram?collection=@emfielduva/d3-layout-and-lib-examples) that adds the ability to lay it out on a path. In the end it's just a force directed clustering anyway.\n\nData value determines position along the path. Shown here on an arc, but this could be any `` element, spline, or polygon line. This can also work around a circle. The path must exist, but does not need to be graphically visible. (change its style properties to not show it.)","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":18,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"## setup the graphic elements in code","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"viz = d3.select(svg)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"curve = viz.select(\"#curve1\") // find it in the svg by id","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"dotsLayer = viz.select(\"#layer1\") // a layer to draw the dots into. Just for organization. ","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"## build the beeswarm","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"beeswarm = dvBeeswarmForce(dotsLayer,data,1000,300,\"val2\",options)","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"options = ({\n //classField: \"categoricalfield\",\t\t// to set their class/color\n strength: -0.2,\n alphaTarget: 0.09,\n direction: \"path\",\n axisField: \"val\",\n axisScaleFunction: distanceAlongPath,\n dotScaleFactor: 1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"## our distanceAlongPath function\nThis could be somewhat unique for each case.","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"distanceAlongPath = (value) => curve.node().getPointAtLength(value) // a simple function for distance along the path","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"## dummy data to drive this","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"data = {\n let data = [];\n let count = Math.round(Math.random()*100);\n for (let i=0; i else if (options.direction == \"path\") { \n> o.vx += (o.axisPos.x - o.x) * k; \n> o.vy += (o.axisPos.y - o.y) * k; \n> }\n","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"## other necessary functions to make this work","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"mutable foci = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"nodes = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"force = d3.forceSimulation(nodes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {rFromArea,toNum} from \"@emfielduva/dvlib\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}