2c:null 2d:["$","title",null,{"children":"The Scent of Data | Deepali Kank | Observable"}] 32:T2424,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] : ""; }); } // Create tooltip const tooltip = d3 .select("body") .append("div") .attr("class", "beeswarm-tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "10px") .style("border-radius", "5px") .style("pointer-events", "none") .style("opacity", 0) .style("font-family", "Quicksand"); // Update the drawNodes function to handle tooltip 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] : ""; }) .on("mouseover", function (event, d) { // Show tooltip tooltip.transition().duration(200).style("opacity", 0.9); tooltip .html(() => { return ` ${d.data.value || "N/A"} ${d.data.n} `; }) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 28 + "px"); }) .on("mouseout", function () { // Hide tooltip tooltip.transition().duration(500).style("opacity", 0); }); } // draw it. let svgElem = elem; let node = svgElem.selectAll(".node"); svgElem .append("image") .attr( "xlink:href", "https://img.freepik.com/premium-photo/perfume-bottle-isolated-white-background_941265-5188.jpg" ) .attr("x", -120) .attr("y", height - 110) .attr("width", 250) .attr("height", 250); svgElem .append("rect") .attr("x", -120) .attr("y", height - 10) .attr("width", 40) .attr("height", 40) .style("fill", "transparent") .style("cursor", "pointer") .on("click", function () { force.alpha(1).restart(); }); svgElem .append("text") .attr("x", 400) .attr("y", -100) .attr("text-anchor", "middle") .attr("font-size", "40px") .attr("font-weight", "bold") .style("font-family", "Quicksand") .attr("fill", "black") .text("Notes of Elegances"); svgElem .append("text") .attr("x", 400) .attr("y", -70) .attr("text-anchor", "middle") .attr("font-size", "20px") .attr("font-weight", "normal") .style("font-family", "Quicksand") .attr("fill", "black") .text("Unveiling the most captivating top notes in perfume creation"); svgElem .append("text") .attr("x", 450) .attr("y", 250) .attr("text-anchor", "start") .attr("font-size", "20px") .attr("font-weight", "normal") .attr("text-anchor", "middle") .style("font-family", "Quicksand") .attr("fill", "black") .text("Out of 55,110 perfumes listed on Parfumo,"); svgElem .append("text") .attr("x", 450) .attr("y", 280) .attr("text-anchor", "start") .attr("font-size", "20px") .attr("font-weight", "normal") .attr("text-anchor", "middle") .style("font-family", "Quicksand") .attr("fill", "black") .text( "the most prominent top notes are Bergamot,Mandarin, Grapefruit, and Lemon." ); svgElem .append("circle") .attr("cx", 130) .attr("cy", height - 60) .attr("r", 30) .style("fill", "red") .style("cursor", "pointer") .on("click", function () { console.log("Button clicked! Starting animation..."); startAnimation(); }); function startAnimation() { nodes.forEach((node) => { node.x = 130; node.y = height - 60; }); force.alpha(1).restart(); } data.forEach(function (d) { addDots(d); }); force.nodes(nodes); drawNodes(); return node; }33:[{"id":"fbece3ab16a9429de31ff6fff6038fda9e9efea477cbad218c2ea79200f7ab22cc2d8ecfd0b19a749056cc93131b92fc168fdca2bc1025da0b9276ae66b07ba9","href":"https://static.observableusercontent.com/files/fbece3ab16a9429de31ff6fff6038fda9e9efea477cbad218c2ea79200f7ab22cc2d8ecfd0b19a749056cc93131b92fc168fdca2bc1025da0b9276ae66b07ba9","name":"df_new.csv","type":"text/csv","lastModified":1733973433510.723,"size":39305}] 30:{"id":"b184ef4ed324fdc3","slug":null,"title":"The Scent of Data","thumbnail":"47d17273b19680658bbc3f1ac3b50d432ae45b011ac5fc05d917ae20713cb481","access_level":"public","create_time":"$D2024-12-12T03:17:13.510Z","update_time":"$D2026-07-29T06:05:18.342Z","view_time":null,"first_public_time":"$D2024-12-12T06:31:59.758Z","has_unpublished_edits":null,"fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024"},"version":399,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null}],"members":[{"type":"individual","id":"0b38fd39f0b1d2da","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":null,"role":"editor"},{"type":"team","id":"f95c5551c5b4848e","login":"deepalikank","name":"Deepali Kank","avatar_url":"https://avatars-next.observableusercontent.com/2299cdaa9c6d43935fda16e1da6d65387af5f4c54b6046cf170cf75b80c9707c","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"The Scent of Data","cells":[{"id":0,"value":"# The Scent of Data\nOriginal Notebook Inspiration: https://observablehq.com/d/cc7689a70e9c3f91","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"svgNode = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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(svgNode)","pinned":false,"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":false,"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":false,"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, \"n\", options)","pinned":false,"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: \"n\",\n axisScaleFunction: distanceAlongPath,\n dotScaleFactor: 1\n})","pinned":false,"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":180,"value":"data = await FileAttachment(\"df_new.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data","database":"$undefined"},{"id":394,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"---\n## my modified dvBeeswarm function\nto include the path option. I should get this change into the main library function.\n\nthe only difference is adding: \n\n> 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":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"nodes = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"force = d3.forceSimulation(nodes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import { rFromArea, toNum } from \"@emfielduva/dvlib\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 31:"$30:body"