2f:T11fa,{ let data = adlb.filter(d => d.USUBJID === patient) .filter(d => d.LBNRIND !== "NORMAL") // accessors const xAccessor = d => d.ADY const radiusAccessor = d => d.AVAL // canvas const svg = d3.create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height) const bounds = svg.append("g") .style("transform", `translate(${ dimensions.margin.left }px, ${ dimensions.margin.top }px)` ) // scales const colorScale = d3.scaleOrdinal() .domain(["LOW", "NORMAL", "HIGH"]) .range(['#fdd26e', '#86cac5', '#ff8041']) // marks const dots = bounds.selectAll("circle") .data(beeswarmForce(data, 'ADY', 'AVAL', 'LBNRIND', xScale)) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r) .attr("fill", d => colorScale(d.fill)) .on('mousemove', nodeMouseOver) .on('mouseout', nodeMouseOut ); // extras const xAxisGenerator = d3.axisBottom() .scale(xScale) const xAxis = bounds.append("g") .call(xAxisGenerator) .style("transform", `translateY(${dimensions.boundedHeight}px)`) .style("stroke", "#004f5b") // tooltip // const listenerRect = bounds.append('rect') // .attr('class', 'listener-rect') // .attr('width', dimensions.boundedWidth) // .attr('height', dimensions.boundedHeight) // .on("mousemove", onMouseMo) // .on("mouseleave", onMouseLeave) // const tooltip = bounds.append("div") const tooltip = d3.select("body").append('div') // const tooltip = wrapper.append('div') .attr('class', 'tooltip') .html( ` ` ) // .append('span') // .attr('class', 'tooltip-param') // .apppend('span') // .attr('class', 'tooltip-aval') // .append('span') // .attr('class', 'tooltip-range') function onMouseEnter(event, d) { const mousePosition = d3.pointer(event) const xPosition = mousePosition[0] const yPosition = mousePosition[1] // console.log(mousePosition) tooltip.select('.tooltip-param') .text(`PARAM: ${d.PARAM}`) // .style('left', `${dimensions.boundedWidth - xPosition - 20}px`) // .style('top', `${dimensions.boundedHeight + yPosition + 20}px`) // .style('left', '79px') // .style('right', '260px') // tooltip.style('transform', `translate(calc(-50% + ${xPosition}px), calc(-100% + ${yPosition}px))`) // .style('opacity', 1) tooltip .style('width', '100px') .style('height', '100px') .style('left', xPosition + 'px') .style('top', yPosition + 'px') // .style('transform', `translate(${xPosition}px, ${yPosition}px)`) .style('opacity', 1) .style('background', 'red') // console.log(dimensions.boundedWidth - xPosition - 20) // console.log(dimensions.boundedHeight + yPosition + 20) // const hoveredDay = xScale.invert(mousePosition[0]) // // need to find closet point in our data // const getDistanceFromHoveredDay = d => { // return Math.abs(xAccessor(d) - hoveredDay) // } // const closestIndex = d3.leastIndex( // data, // (a, b) => { // kind of like native JS sort // return getDistanceFromHoveredDay(a) - getDistanceFromHoveredDay(b) // } // ) // const closestDataPoint = data[closestIndex] // console.log(closestDataPoint) // // at this point, we're at the 'd' we usually work with // const formatDate = d3.timeFormat("%B %A %-d, %Y") // tooltip.select("#date") // .text(formatDate(xAccessor(closestDataPoint))) // const formatTemperature = d => `${d3.format(".1f")(d)}°F` // tooltip.select("#temperature") // .text(formatTemperature(yAccessor(closestDataPoint))) // // ended up not using this but it's nice to know there's an inverse // //const hoveredTemp = yScale.invert(mousePosition[1]) // // move tooltip to correct position // const x = xScale(xAccessor(closestDataPoint)) + dimensions.margin.left // const y = yScale(yAccessor(closestDataPoint)) + dimensions.margin.top // tooltip.style('transform', `translate(calc(-50% + ${x}px), calc(-100% + ${y}px))`) // tooltip.style('opacity', 1) } function onMouseLeave(event, d) { tooltip.style('opacity', 0) } return svg.node() }30:T469,{ let data = advs .filter(d => d.USUBJID === patient) .filter(d => d.ANRIND !== "NORMAL") // accessors const xAccessor = d => d.ADY const radiusAccessor = d => d.AVAL // canvas const svg = d3.create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height) const bounds = svg.append("g") .style("transform", `translate(${ dimensions.margin.left }px, ${ dimensions.margin.top }px)` ) // scales const colorScale = d3.scaleOrdinal() .domain(["LOW", "NORMAL", "HIGH"]) .range(['#fdd26e', '#86cac5', '#ff8041']) // marks const dots = bounds.selectAll("circle") .data(beeswarmForce(data, 'ADY', 'AVAL', 'ANRIND', xScale)) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r) .attr("fill", d => colorScale(d.fill)) // extras const xAxisGenerator = d3.axisBottom() .scale(xScale) const xAxis = bounds.append("g") .call(xAxisGenerator) .style("transform", `translateY(${dimensions.boundedHeight}px)`) .style("stroke", "#004f5b") return svg.node() }31:[{"id":"d352b60ec1b2f8b52c1ffe92125deef92af2eab719d5fa2d56f4e6e0dab0a923b22e718fd8ad64b030081bd474f2e6b013cb93c4629e3cfa9643f918254da3d1","href":"https://static.observableusercontent.com/files/d352b60ec1b2f8b52c1ffe92125deef92af2eab719d5fa2d56f4e6e0dab0a923b22e718fd8ad64b030081bd474f2e6b013cb93c4629e3cfa9643f918254da3d1","name":"adsl.json","type":"application/json","lastModified":1719495020093.241,"size":9430},{"id":"3c5da88016d702d212e81741de007c3a674987c225cd8e18153ec5a03bc4751c2a3e80a35e6f851f9a33d27a1ecb4677da56d3d96cf666aed25c6ee21a33c9c5","href":"https://static.observableusercontent.com/files/3c5da88016d702d212e81741de007c3a674987c225cd8e18153ec5a03bc4751c2a3e80a35e6f851f9a33d27a1ecb4677da56d3d96cf666aed25c6ee21a33c9c5","name":"adae.json","type":"application/json","lastModified":1719495020093.241,"size":287952},{"id":"bd4333200cb813b54e890e99c630f80ec7741e72ac074ddaa34bbdaf8c0797b6325f79a0220ba0bea1ac31ebfd10edb477e7b211f096cf8f9744b75c8dc9a573","href":"https://static.observableusercontent.com/files/bd4333200cb813b54e890e99c630f80ec7741e72ac074ddaa34bbdaf8c0797b6325f79a0220ba0bea1ac31ebfd10edb477e7b211f096cf8f9744b75c8dc9a573","name":"adlb.json","type":"application/json","lastModified":1719495020093.241,"size":7018445},{"id":"b4e019e49041c1e05e0d0d48f3a89b850d6189fb5bac9bd4c0adf119a22579a23a488c694a5ac0d2f1add32ec92e507af3383208bc1c38131b68b4267539044f","href":"https://static.observableusercontent.com/files/b4e019e49041c1e05e0d0d48f3a89b850d6189fb5bac9bd4c0adf119a22579a23a488c694a5ac0d2f1add32ec92e507af3383208bc1c38131b68b4267539044f","name":"advs.json","type":"application/json","lastModified":1719495020093.241,"size":4595300},{"id":"8e48a56be0d017b9dbedd990068ff73da826211e23bbcd0a675ced45beee362214441d24fcc38f5098c765de4bc751b4d478548ac4f94ce05b15ba713fadc828","href":"https://static.observableusercontent.com/files/8e48a56be0d017b9dbedd990068ff73da826211e23bbcd0a675ced45beee362214441d24fcc38f5098c765de4bc751b4d478548ac4f94ce05b15ba713fadc828","name":"adex.json","type":"application/json","lastModified":1719495020093.241,"size":367633}] 2d:{"title":"Patient Journey with D3 -- playground","cells":[{"id":0,"value":"# Patient Journey with D3 -- playground\n\nso i can change things and not worry it breaking","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"viewof patient = Inputs.select(adsl.map(d => d.USUBJID))","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"function nodeMouseOver(event, d){\n // Get the toolTip, update the position, and append the inner html depending on your content\n // I tend to use template literal to more easily output variables.\n toolTip.style(\"left\", event.pageX + 18 + \"px\")\n .style(\"top\", event.pageY + 18 + \"px\")\n .style(\"display\", \"block\")\n .html(\n `\n Tooltip for ${d.PARAM}\n `\n );\n \n // Optional cursor change on target\n d3.select(event.target).style(\"cursor\", \"pointer\"); \n \n // Optional highlight effects on target\n d3.select(event.target)\n .transition()\n .attr('stroke', '#A8234E')\n .attr('stroke-width', 3);\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":908,"value":"function nodeMouseOut(event, d){\n // Hide tooltip on mouse out\n\t toolTip.style(\"display\", \"none\"); // Hide toolTip\n \n // Optional cursor change removed\n d3.select(event.target).style(\"cursor\", \"default\"); \n \n // Optional highlight removed\n\t d3.select(event.target)\n .transition()\n .attr('stroke', '#fff')\n .attr('stroke-width', 0);\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":910,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":423,"value":"dimensions = {\n let dimensions = {\n width: 1000,\n height: 200,\n margin: {\n top: 5,\n right: 100,\n bottom: 25,\n left: 100,\n },\n }\n dimensions.boundedWidth = dimensions.width\n - dimensions.margin.left\n - dimensions.margin.right\n dimensions.boundedHeight = dimensions.height\n - dimensions.margin.top\n - dimensions.margin.bottom\n\n return dimensions\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"xScale = d3.scaleLinear()\n .domain([d3.min(adae.map(d => d.AESTDY)), d3.max(adae.map(d => d.AEENDY))])\n .range([0, dimensions.boundedWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":725,"value":"// for AEs, the start and end day can be the same\n// so we need to nudge one of the days a bit if we want a line\nnudge = function(x) {\n const random = d3.randomInt(4, 6)\n return x + random()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"unique = (arr) => {\n const uniqueFilter = (value, index, array) => {\n return array.indexOf(value) === index;\n }\n return arr.filter(uniqueFilter)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"beeswarmForce = function(data, xName, radiusName, fillName, xScale){\n // adapted from\n // https://observablehq.com/@harrystevens/force-directed-beeswarm\n const ticks = 300\n \n let forceData = data.map(d => {\n return {\n x: d[xName],\n y: dimensions.boundedHeight / 2,\n r: 8,\n fill: d[fillName],\n // below is for tooltip\n PARAM: d.PARAM,\n AVAL: d.AVAL,\n ANRLO: d.ANRLO,\n ANRHI: d.ANRHI,\n ADY: d[xName]\n }\n });\n\n const simulation = d3.forceSimulation(forceData)\n .force(\"x\", d3.forceX(d => xScale(d.x)))\n .force(\"y\", d3.forceY(d => d.y))\n .force(\"collide\", d3.forceCollide(d => d.r))\n\n for (let i = 0; i < ticks; i++) simulation.tick();\n \n return forceData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"adsl = FileAttachment(\"adsl.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"adae = FileAttachment(\"adae.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"adlb = FileAttachment(\"adlb.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"advs = FileAttachment(\"advs.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"adex = FileAttachment(\"adex.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"## To Do\n\n### All\n\n- figure out what variables to use for day. across each domain, the variable we use should represent the same thing\n- figure out scale for day variable (x axis). needs to be common across all charts. need to figure out widest scale across labs, aes, etc.\n\n### Adverse Events\n\n- figure out what to do about missing days. e.g. what if the event doesn't have a start/end day?\n- how to handle AEs resolved in the same day? i.e. start day and end day are the same.\n- update severity color scale. domain should include all possible severities","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}