27:null 28:["$","title",null,{"children":"Force Directed clustering along a path | Eric Field | Observable"}] 2d: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; }2e:[] 2b:{"id":"cc7689a70e9c3f91","slug":null,"title":"Force Directed clustering along a path","thumbnail":"da7d4698949a1fa0b4268aa50c11ee511a9e85ca98307e052a69dc7d80cd074e","access_level":"public","create_time":"$D2023-05-01T18:47:52.111Z","update_time":"$D2023-05-02T00:34:04.939Z","view_time":null,"first_public_time":"$D2023-05-02T00:25:56.225Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024"},"version":165,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null}],"members":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"407c620feb10695c","slug":"misc","title":"misc","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"svg","database":"$undefined"},{"id":18,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"## setup the graphic elements in code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"viz = d3.select(svg)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"curve = viz.select(\"#curve1\") // find it in the svg by id","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"dotsLayer = viz.select(\"#layer1\") // a layer to draw the dots into. Just for organization. ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"## build the beeswarm","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"beeswarm = dvBeeswarmForce(dotsLayer,data,1000,300,\"val2\",options)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"## our distanceAlongPath function\nThis could be somewhat unique for each case.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"distanceAlongPath = (value) => curve.node().getPointAtLength(value) // a simple function for distance along the path","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"## dummy data to drive this","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"## other necessary functions to make this work","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"mutable foci = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"nodes = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"force = d3.forceSimulation(nodes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {rFromArea,toNum} from \"@emfielduva/dvlib\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"