31:T4db,32:T13bc,// 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 { // 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; // }33:T443,// function dvBeeswarmMoveNodes(fociPositions,fociField,axisField,axisScaleFunction,direction) { // // This makes the dots move. // // The id setting being changed here maps to a new foci point. // // and by changing the id, the force simulation knows to move it. // if (typeof(direction) === "undefined") {direction = "horizontal"} // if (typeof(axisScaleFunction) === "undefined") {axisScaleFunction = d3.scaleLinear().domain([0,1000]).range([0,1000])} //default it // if (typeof(fociPositions) !== "undefined" && fociPositions != "") { // mutable foci = fociPositions; // if (typeof(fociField) !== "undefined" && fociField != "") { // nodes.forEach(function(n) { // n.id = n.data[fociField]; // n.axisPos = axisScaleFunction(toNum(n.data[axisField])); // }); // } else { // nodes.forEach(function(n) { // n.id = "default"; // n.axisPos = axisScaleFunction(toNum(n.data[axisField])); // }); // } // force.alpha(1); // force.restart(); // } else { // console.log("No foci provided."); // } // }34:[] 2f:{"title":"Beeswarm - Force Diagram","cells":[{"id":0,"value":"# Beeswarm - Force Diagram\nAn implementation of a Beeswarm layout. Not a completely accurate beeswarm location because of the force settling but allows us to include a data-scaled size of the dot. (The [BeeswarmAaccurate](https://observablehq.com/@d3/beeswarm-mirrored) one doesn't use size.)","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"\n\n

\n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":98,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":22,"value":"import {powerplants_2019} from \"@emfielduva/dvlib_sampledata\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"Sampling 2000 records from the full 11000+ record set, for demonstration quickness.","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"slice = d3.shuffle(powerplants_2019).slice(0,2000) // change the right number here to show more or fewer of the 11000+ powerplants","pinned":true,"hidden":false,"mode":"ojs"},{"id":539,"value":"### Draw the layout\nsimilar to the original [Clusters](https://observablehq.com/@emfielduva/clusters-dynamic-movement?collection=@emfielduva/d3-layout-and-lib-examples) notebook:","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"bsElem = d3.select(svgContainer).select(\"#layer1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"beeswarm = dvBeeswarmForce(bsElem,slice,1000,800,\"Plant annual net generation (MWh)\",options)","pinned":true,"hidden":false,"mode":"ojs"},{"id":728,"value":"scaleAxis = d3.scaleLinear().domain([0,22000000]).range([100,1000]) // domain estimated from data extents","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"options = ({\n classField: \"Plant primary fuel generation category\",\t\t// to set their class/color\n strength: -0.2,\n alphaTarget: 0.09,\n //direction: \"vertical\",\n axisField: \"Plant annual CO2 equivalent emissions (tons)\",\n axisScaleFunction: scaleAxis,\n //fociPositions: {COAL:50, OIL:100, HYDRO:150, NUCLEAR:200, GAS:250, GEOTHERMAL:300, WIND:350, SOLAR:400, BIOMASS:450, OTFL:500, OTHF:550, OFSL:600, \"\": 650},\n //fociField: \"Plant primary fuel generation category\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":879,"value":"^^ by including fociPositions and a fociField (to determine position sets from the data) in the original options, you can generate multiple parallel beeswarms on first draw.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"-----","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"### Other Foci (axis location) sets:\nUsing the same syntax as dvClusters, we're going to set categorical axis locations for parallel beeswarms using the **fociPositions** option. **Foci** are x or y pixel locations for each parallel beeswarm. In combination with the **direction** option (horizontal / vertical / h / v) this sets where the parallel categories position.","pinned":false,"hidden":false,"mode":"md"},{"id":818,"value":"fociOneCenter = ({default: 400})","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"fociFuels = ({COAL:50, OIL:100, HYDRO:150, NUCLEAR:200, GAS:250, GEOTHERMAL:300, WIND:350, SOLAR:400, BIOMASS:450, OTFL:500, OTHF:550, OFSL:600, \"\": 650})","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"-----","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"### Register event listeners for buttons\nto call the `dvBeeswarmMoveNodes` library function, sending which foci set and which data field in each node has the needed property.","pinned":false,"hidden":false,"mode":"md"},{"id":466,"value":"{\n // register event listeners\n const btns = d3.select(svgContainer).select(\"#controls\");\n btns.select(\"#btn_all\").on(\"click\", () => dvBeeswarmMoveNodes(fociOneCenter,'',options.axisField,options.axisScaleFunction));\n btns.select(\"#btn_fuel\").on(\"click\", () => dvBeeswarmMoveNodes(fociFuels,\"Plant primary fuel generation category\",options.axisField,options.axisScaleFunction));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":460,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":876,"value":"import {dvBeeswarmForce, dvBeeswarmMoveNodes} from \"@emfielduva/dvlib_layout\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"// import {rFromArea, toNum} from \"@emfielduva/dvlib\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"// mutable foci = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"// nodes = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"// force = d3.forceSimulation(nodes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":694,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}