2b:null 2c:["$","title",null,{"children":"User Journeys with d3-force | Ben Kates | Observable"}] 31:T8fe,

Node Filter:
Color Setting:
Node Speed:
Number of Steps:

32:T2f02,chart = { if (document.getElementById("container")) { //define initial settings const width = window.innerWidth; const height = width * 0.85; const nodeSize = 3; const strokeWidth = 1; const speedOptions = { fast: 0.3, medium: 0.5, slow: 0.7 }; //grab input elements manually let speedSetInput = document.getElementById("speedSetInput"); let numStepsInput = document.getElementById("numStepsInput"); let colorFilterInput = document.getElementById("colorFilterInput"); let convertFilterInput = document.getElementById("convertFilterInput"); //declare global vars let timelineGroup; let timelineLine; let timelineDots; let simulation; let node; let intervalId = ""; //get the last step possible in data and set the "number of steps" input max let maxPossibleStepsArr = Object.keys(nodeArrayTotal[0]) .filter((d) => d.match("step")) .map((d) => parseInt(d.replace("step", ""))); let maxPossibleSteps = d3.max(maxPossibleStepsArr); if (numStepsInput != null) { numStepsInput.max = String(maxPossibleSteps); } //define zones let spaces = [ { value: "group1", id: 1 }, { value: "group2", id: 2 }, { value: "group3", id: 3 }, { value: "group4", id: 4 }, { value: "group5", id: 5 }, { value: "group6", id: 6 }, { value: "group7", id: 7 }, { value: "group8", id: 8 } ]; //set global step function //change timeline when there's a change in step let step = 1; function currentStep(step) { timelineDots.attr("fill", (e) => (e == step ? "darkgrey" : "white")); return `step${step}`; } //calculate where each zone should go and set position spaces.forEach(function (data, i) { let theta = (2 * Math.PI) / spaces.length; data["x"] = (width / 4) * Math.cos((i - 1) * theta) + width / 2.5; data["y"] = (width / 4.5) * Math.sin((i - 1) * theta) + height / 2; }); //add the extra zones manually spaces.push({ value: "group0", id: 10, x: width / 2.5, y: height / 2 }); spaces.push({ value: "Continue", id: 11, x: width / 7 + width / 1.4, y: height - height / 5.5 }); spaces.push({ value: "Exit", id: 0, x: width / 7 + width / 1.4, y: height / 5.5 }); //color scale for nodes const colorScale = d3 .scaleSequential(d3.interpolateTurbo) .domain(d3.extent(spaces.map((d) => d.id)).reverse()); //declare svg container const svg = d3 .select("#container") .append("svg") .attr("width", width) .attr("height", height); //declare main svg container const spaceContainer = svg .append("g") .attr("id", "spaceContainer") .selectAll("g") .data(spaces) .enter() .append("g"); //add a nice gradient for the zones let defs = svg.append("defs").attr("id", "maskDefs"); let gradient = defs.append("radialGradient").attr("id", "fadient"); //define radialGradient gradient .append("stop") .attr("offset", "50%") .attr("stop-color", "white") .attr("stop-opacity", 1); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", "white") .attr("stop-opacity", 0); //use a mask to make gradient usable let mask = defs .append("mask") .attr("id", "mask") .attr("maskContentUnits", "objectBoundingBox") .append("circle") .attr("fill", "url(#fadient)") .attr("cx", 0.5) .attr("cy", 0.5) .attr("r", 0.5); //add defind circles with associated mask let bgCircles = spaceContainer .append("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", width / 13) .attr("mask", "url(#mask)") .attr("fill", (d) => colorScale(d.id)) .attr("fill-opacity", 0.4); //add text for zones let bgText = spaceContainer .append("text") .text((d) => d.value) .attr("x", (d) => d.x) .attr("y", (d) => d.y) .attr("dy", -width * 0.05) .attr("text-anchor", "middle") .attr("font-size", 17) .attr("style", "font-family: sans-serif;") .attr("fill", (d) => d3.color(colorScale(d.id)).darker(1.5)); //define node color function based on selection const nodeColorScaleFunction = (d, maxSteps) => { let colorFilterResult = colorFilterInput.value; if (colorFilterResult == "convertFlag") { return d.convert_flag == "1" ? "purple" : "lightblue"; } if (colorFilterResult == "firstZone") { return colorScale( spaces.filter((e) => e.value == d[currentStep(1)])[0].id ); } if (colorFilterResult == "lastZone") { return colorScale( spaces.filter((e) => e.value == d[currentStep(maxSteps)])[0].id ); } }; //define the render nodes function const render = () => { let maxStepsArray; //create a copy of the array to use and filter let nodeArray = [...nodeArrayTotal]; //filter the data based on filter if (convertFilterInput.value == "converters") { nodeArray = nodeArray.filter((d) => d.convert_flag == "1"); } if (convertFilterInput.value == "non-converters") { nodeArray = nodeArray.filter((d) => d.convert_flag == "0"); } //filter the data based on maximum number of steps let maxSteps = parseInt(document.getElementById("numStepsInput").value); //iterate through nodes to assign position nodeArray.forEach((d, index, object) => { let nextStepLocal = `step${maxSteps + 1}`; let StepLocal = `step${maxSteps}`; //if next step exists... if (d.hasOwnProperty(nextStepLocal)) { //if next step is exit, apply exit value to last step if (d[nextStepLocal] == "Exit") { d[StepLocal] = "Exit"; } //if not, add continue else { d[StepLocal] = "Continue"; } } //filter based on next step maxPossibleStepsArr .filter((f) => f > maxSteps) .forEach((e) => { let stepLocal2 = `step${e}`; delete object[index][stepLocal2]; }); }); //update counter based on current/max steps document.getElementById("counter").innerText = [step, maxSteps].join("/"); //create timeline svg.selectAll("#timelineGroup").remove(); timelineGroup = svg.append("g").attr("id", "timelineGroup"); //define maxSteps maxStepsArray = d3.range(1, maxSteps + 1); //create timeline scale let timelineXScale = d3 .scaleLinear() .domain([1, d3.max(maxStepsArray)]) .range([25, 400]) .nice(); //create timeline line timelineLine = timelineGroup .append("line") .attr("x1", timelineXScale([1])) .attr("x2", timelineXScale([maxSteps]) + 2) .attr("y1", 12) .attr("y2", 12) .style("stroke-width", "2px") .style("stroke", "lightgrey"); //create timeline dots timelineDots = timelineGroup .selectAll("circle") .data(maxStepsArray) .enter() .append("circle") .attr("r", 5) .attr("fill", "white") .style("stroke", "lightgrey") .style("stroke-width", "2px") .attr("cx", (d) => timelineXScale(d)) .attr("cy", 12) .attr("id", (d) => d) .style("cursor", "pointer") .on("mousedown", function (f) { console.log(f.target.id); let clickedNode = f.target.id; clearInterval(intervalId); step = clickedNode; currentStep(clickedNode); moveNodes(); }); //declare actual pathing nodes with styles node = svg .append("g") .attr("id", "nodeGroup") .selectAll("circle") .data(nodeArray) .enter() .append("circle") .attr("r", nodeSize) .style("fill", (d) => nodeColorScaleFunction(d, maxSteps)) .style("fill-opacity", 0) .attr("stroke", "black") .style("stroke-width", strokeWidth) .style("stroke-opacity", 0) .attr("class", "node"); //fade in nodes node .transition() .duration(2000) .style("stroke-opacity", 1) .style("fill-opacity", 1); //declare simulation with charge/collision/positions simulation = d3 .forceSimulation() .force("charge", d3.forceManyBody().strength(nodeSize * -0.5)) .force( "collision", d3.forceCollide().radius(nodeSize + strokeWidth - 1) ) .force( "x", d3 .forceX() .x( (d) => spaces.filter((e) => e.value == d[currentStep(step)])[0].x ) ) .force( "y", d3 .forceY() .y( (d) => spaces.filter((e) => e.value == d[currentStep(step)])[0].y ) ) .nodes(nodeArray) .on("tick", function (d) { node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); }); //button click (next) d3.select("#next").on("click", function () { clearInterval(intervalId); if (step + 1 <= maxSteps) { currentStep(step++); moveNodes(); } }); //button click (previous) d3.select("#previous").on("click", function () { clearInterval(intervalId); if (step - 1 >= 1) { currentStep(step--); moveNodes(); } }); //button click (reset) d3.select("#reset").on("click", function () { clearInterval(intervalId); step = 1; currentStep(step); moveNodes(); }); //button click (play) d3.select("#play").on("click", function () { if (step + 1 <= maxSteps) { currentStep(step++); moveNodes(); } else { step = 1; currentStep(step); moveNodes(); } //update 2sec interval intervalId = window.setInterval(function () { if (step + 1 <= maxSteps) { currentStep(step++); moveNodes(); } }, 2000); }); //declare the moveNodes function function moveNodes() { //reheat the simulation simulation .alpha(0.3) .alphaTarget(0.3) .velocityDecay(speedOptions[speedSetInput.value]) .restart(); //re-init the positions simulation.force("x").initialize(nodeArray); simulation.force("y").initialize(nodeArray); //update counter document.getElementById("counter").innerText = [step, maxSteps].join( "/" ); } }; //end of render() //filter click (convert) d3.select("#convertFilterInput").on("input", function () { clearInterval(intervalId); step = 1; currentStep(step); node.transition().duration(2000).attr("r", 0).remove(); svg.selectAll("#nodeGroup").transition().duration(2000).remove(); simulation.stop(); render(); }); //filter click (color) d3.select("#colorFilterInput").on("input", function () { clearInterval(intervalId); step = 1; currentStep(step); node.transition().duration(2000).attr("r", 0).remove(); svg.selectAll("#nodeGroup").transition().duration(2000).remove(); simulation.stop(); render(); }); //filter click (steps) d3.select("#numStepsInput").on("change", function () { clearInterval(intervalId); step = 1; currentStep(step); node.transition().duration(2000).attr("r", 0).remove(); svg.selectAll("#nodeGroup").transition().duration(2000).remove(); simulation.stop(); render(); }); return render(); } }33:[{"id":"3c4bea464fecec59187ff0c044e7425846b495935c44e2f732f7c0da38b0c2e2a50fbbb26b289dc9f4de08145d30ed2aee30b7620856a22737b2ca525d100048","href":"https://static.observableusercontent.com/files/3c4bea464fecec59187ff0c044e7425846b495935c44e2f732f7c0da38b0c2e2a50fbbb26b289dc9f4de08145d30ed2aee30b7620856a22737b2ca525d100048","name":"node_data_half@1.json","type":"application/json","lastModified":1671065869427.152,"size":140261}] 2f:{"id":"bf270bde3374b53d","slug":null,"title":"User Journeys with d3-force","thumbnail":"f47d9b1ed7c1e492a59c3d07da50e497c78214e088c28879c4143912c3b6010b","access_level":"public","create_time":"$D2022-12-09T15:25:23.371Z","update_time":"$D2024-02-13T18:52:52.493Z","view_time":null,"first_public_time":"$D2022-12-09T15:25:23.371Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c66fdfa7ca0f9207","login":"benkates","name":"Ben Kates","avatar_url":"https://avatars-next.observableusercontent.com/f64d42b424efb5f5b1856d6df2082b68771971c4df3edefcbb3ed749539c1cd6","tier":"starter_2024"},"version":334,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"794b1c1eb3bbad78","login":"benkates","name":"Ben Kates","avatar_url":"https://avatars-next.observableusercontent.com/a403af350ba2640c9aa5d23aab550636d49cb25b28cd9f0ca681324d3a33f611","tier":null}],"members":[{"type":"individual","id":"794b1c1eb3bbad78","login":"benkates","name":"Ben Kates","avatar_url":"https://avatars-next.observableusercontent.com/a403af350ba2640c9aa5d23aab550636d49cb25b28cd9f0ca681324d3a33f611","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"User Journeys with d3-force","cells":[{"id":5,"value":"# User Journeys with d3-force\n\nHow do nodes move between zones?\n\nClick **play (▷)** to watch the nodes move! Or **step (« | »)** through by clicking the arrows.\n\nFilters, color settings and speed are available as well!\n\n*Note: if the viz doesn't load initially, try refreshing*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"nodeArrayTotal = FileAttachment(\"node_data_half@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"