2f:T6a0,div_plots = { const plot_1 = createPlot( data_by_week.filter((d) => d.dlqi_item === "DLQI101"), data_by_change.filter((d) => d.dlqi_item === "DLQI101") ); const plot_2 = createPlot( data_by_week.filter((d) => d.dlqi_item === "DLQI102"), data_by_change.filter((d) => d.dlqi_item === "DLQI102") ); const plot_3 = createPlot( data_by_week.filter((d) => d.dlqi_item === "DLQI103"), data_by_change.filter((d) => d.dlqi_item === "DLQI103") ); const plot_4 = createPlot( data_by_week.filter((d) => d.dlqi_item === "DLQI104"), data_by_change.filter((d) => d.dlqi_item === "DLQI104") ); const plot_5 = createPlot( data_by_week.filter((d) => d.dlqi_item === "DLQI105"), data_by_change.filter((d) => d.dlqi_item === "DLQI105") ); const plot_6 = createPlot( data_by_week.filter((d) => d.dlqi_item === "DLQI106"), data_by_change.filter((d) => d.dlqi_item === "DLQI106") ); const plot_7 = createPlot( data_by_week.filter((d) => d.dlqi_item === "DLQI107"), data_by_change.filter((d) => d.dlqi_item === "DLQI107") ); const plot_8 = createPlot( data_by_week.filter((d) => d.dlqi_item === "DLQI108"), data_by_change.filter((d) => d.dlqi_item === "DLQI108") ); const plot_9 = createPlot( data_by_week.filter((d) => d.dlqi_item === "DLQI109"), data_by_change.filter((d) => d.dlqi_item === "DLQI109") ); const plot_10 = createPlot( data_by_week.filter((d) => d.dlqi_item === "DLQI110"), data_by_change.filter((d) => d.dlqi_item === "DLQI110") ); return wrap( plot_1, plot_2, plot_3, plot_4, plot_5, plot_6, plot_7, plot_8, plot_9, plot_10 ); }30:T5c5,For the March 2022 Wonderful Wednesday Challenge, I revisited my first participation as a panelist in the webinar, around one year ago. The challenge was my first approximation to DLQIs, psoriasis indications, and statistical graphs in the pharma industry in general. My favorite entry was made by my colleague Paolo Eusebi, who sent a [slope chart](https://vis-sig.github.io/blog/posts/2021-02-07-wonderful-wednesdays-february-2021/) comparing the effects in Placebo and Active treatments. The March 2022 challenge was about selecting our favorite entry from all the participations that the Wonderful Wednesdays have had in the last two years. And, if possible, try to improve it. Using Paolo's idea I tried to strengthen the comparison between both treatments: instead of using opacity for describing the flow of patients, I used the stroke width of the lines. I also tried to be more descriptive around the items of DLQI. For those unfamiliar with the term, DLQI (Dermatology Life Quality Index) is a method to measure the quality of life for patients with different skin conditions, such as psoriasis ---- Data from February 2021's [Wonderful Wednesdays' Challenge](https://github.com/VIS-SIG/Wonderful-Wednesdays/tree/master/data/2021/2021-01-13): - Show the multidimensional nature of DLQI with any analytical tool and translate the results in an effective visualization - Show the effect of the treatment, possibly reflecting the multidimensional nature of DLQI 31:T682,function createPlot(dots, lines) { const new_dots = dots.slice(0); const new_lines = lines.slice(0); new_dots.forEach((d) => (d.type = "dots")); new_lines.forEach((d) => (d.type = "links")); const this_data = new_dots.concat(new_lines); const title = metadata.filter((d) => d.item === this_data[0].dlqi_item); return Plot.plot({ height: width < 600 ? width * 0.6 : (width * 8) / 16 / 3, width: width < 600 ? width : width / 3, style: { backgroundColor: colors.black, color: "white" }, color: { range: [colors.drug_a, colors.drug_b] }, x: { domain: ["Baseline", "Week 16"], tickFormat: (d) => (d === "Baseline" ? "Wk-0" : "Wk-16") }, y: { domain: [0, 3], ticks: [0, 1, 2, 3], tickFormat: d3.format(".0f"), label: "← Better Worse →", labelAnchor: "center" }, strokeWidth: { range: [0.5, 2] }, facet: { data: this_data, x: "treatment", marginTop: 60, wrap: true }, fx: { label: title[0].name, domain: ["A", "B"], tickFormat: (d) => (d === "A" ? "Placebo" : "Active") }, marks: [ Plot.link(this_data, { x1: "x1", x2: "x2", y1: "y1", y2: "y2", strokeWidth: (d) => scale_stroke(d.n), stroke: "treatment", title: (d) => `${d.n} patients` }), Plot.dot(this_data, { x: "visit", y: "dlqi_value", r: (d) => scale_r(d.n), fill: "treatment", title: (d) => `${d.n} patients`, stroke: colors.black, strokeOpacity: 0.7, strokeWidth: 2 }) ] }); }32:T44f,html``33:T57a,data_by_change = { const this_array = []; array.forEach((d) => { for (var i = 1; i < 11; i++) { const dlq_item = i < 10 ? `DLQI10${i}` : `DLQI1${i}`; this_array.push({ USUBJID: d.USUBJID, treatment: d.treatment, PASI_baseline: +d.PASI_baseline, visit: d.visit, dlq_item: dlq_item, dlq_value: d[dlq_item] }); } }); const filtered_nan = this_array.filter((d) => d.dlq_value >= 0); // summarize by change // group by dlqi item, week, treatment const groups = d3.groups(filtered_nan, (d) => `${d.USUBJID}_${d.dlq_item}`); const new_array = []; groups.forEach((d) => { if (d[1].length > 1) { const start = d[1][0].dlq_value; const end = d[1][1].dlq_value; const change = `${start}*_*${end}`; new_array.push({ dlq_item: d[1][0].dlq_item, treatment: d[1][0].treatment, change: change }); } }); const summary_new_array = d3.rollups( new_array, (d) => d.length, (d) => `${d.dlq_item}*_*${d.change}*_*${d.treatment}` ); const final_array = []; summary_new_array.forEach((d) => { const value = d[0].split("*_*"); final_array.push({ x1: "Baseline", x2: "Week 16", y1: +value[1], y2: +value[2], dlqi_item: value[0], n: d[1], treatment: value[3] }); }); return final_array; }34:[] 2d:{"title":"Comparing Placebo vs. Active treatments","cells":[{"id":0,"value":"# Comparing Placebo vs. Active treatments","pinned":false,"hidden":false,"mode":"md"},{"id":494,"value":"### Wonderful Wednesday DLQI data set","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"### Style","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"colors = ({\n black: \"#1c1c1c\",\n drug_a: \"#6a9fb1\",\n drug_b: \"#f18070\",\n tick_text: \"#999\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"scale_stroke = d3\n .scaleLinear()\n .domain(d3.extent(data_by_change, (d) => d.n))\n .range([0.1, 20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"scale_r = d3\n .scaleSqrt()\n .domain(d3.extent(data_by_change, (d) => d.n))\n .range([0.1, 20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"Original dataset","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"array = d3.csv(\n \"https://raw.githubusercontent.com/VIS-SIG/Wonderful-Wednesdays/cc463f7014059495ffc3f8200a3add3ab9d7c24c/data/2021/2021-01-13/ww2020_dlqi.csv\",\n parse\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof search_array = Inputs.search(array, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"viewof table = Inputs.table(search_array, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"function parse(d) {\n return {\n USUBJID: d.USUBJID,\n treatment: d.TRT,\n PASI_baseline: +d.PASI_BASELINE,\n visit: d.VISIT,\n DLQI101: +d.DLQI101,\n DLQI102: +d.DLQI102,\n DLQI103: +d.DLQI103,\n DLQI104: +d.DLQI104,\n DLQI105: +d.DLQI105,\n DLQI106: +d.DLQI106,\n DLQI107: +d.DLQI107,\n DLQI108: +d.DLQI108,\n DLQI109: +d.DLQI109,\n DLQI110: +d.DLQI110,\n DLQI_SCORE: +d.DLQI_SCORE\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"Summarized dataset, by dlqi item, dlqi value, visit and treatment","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"data_by_week = {\n const this_array = [];\n\n array.forEach((d) => {\n for (var i = 1; i < 11; i++) {\n const dlq_item = i < 10 ? `DLQI10${i}` : `DLQI1${i}`;\n this_array.push({\n USUBJID: d.USUBJID,\n treatment: d.treatment,\n PASI_baseline: +d.PASI_baseline,\n visit: d.visit,\n dlq_item: dlq_item,\n dlq_value: d[dlq_item]\n });\n }\n });\n\n const filtered_nan = this_array.filter((d) => d.dlq_value >= 0);\n\n // group by dlqi item, week, treatment\n const groups = d3.rollups(\n this_array,\n (g) => g.length,\n (d) => `${d.dlq_item}*_*${d.dlq_value}*_*${d.visit}*_*${d.treatment}`\n );\n\n const final_array = [];\n\n groups.forEach((d) => {\n const info = d[0].split(\"*_*\");\n final_array.push({\n dlqi_item: info[0],\n dlqi_value: +info[1],\n visit: info[2],\n treatment: info[3],\n n: d[1]\n });\n });\n return final_array;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"viewof search_data = Inputs.search(data_by_week, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"viewof table_data = Inputs.table(search_data, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"metadata = [\n {\n item: \"DLQI101\",\n name: \"How Itchy, Sore, Painful, Stinging\",\n range: [0 - 3]\n },\n { item: \"DLQI102\", name: \"How Embarrassed, Self Conscious\", range: [0 - 3] },\n { item: \"DLQI103\", name: \"Interfered Shopping\", range: [0 - 3] },\n { item: \"DLQI104\", name: \"Influenced Clothes You Wear\", range: [0 - 3] },\n {\n item: \"DLQI105\",\n name: \"Affected Social, Leisure Activity\",\n range: [0 - 3]\n },\n {\n item: \"DLQI106\",\n name: \"Made It Difficult to Do Any Sports\",\n range: [0 - 3]\n },\n { item: \"DLQI107\", name: \"Prevented Working or Studying\", range: [0 - 3] },\n {\n item: \"DLQI108\",\n name: \"Problem Partner, Friends, Relative\",\n range: [0 - 3]\n },\n { item: \"DLQI109\", name: \"Caused Any Sexual Difficulties\", range: [0 - 3] },\n { item: \"DLQI110\", name: \"How Much a Problem is Treatment\", range: [0 - 3] }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"wrap = (...elems) => {\n const div_master = document.createElement(\"div\");\n div_master.classList.add(\"div_row\");\n const title = document.createElement(\"h2\"); // Create a new element\n const legend = document.createElement(\"p\"); // Create a new element\n title.innerHTML =\n \"Placebo vs Active treatment\"; // Change the text of the element\n\n legend.innerHTML =\n \"▬ Lines describe the flow of patients from different categories visits
● Circles are proportional to the percentages of patients at every visit\"; // Change the text of the element\n div_master.appendChild(title);\n div_master.append(legend);\n const div = document.createElement(\"div\");\n div_master.appendChild(div);\n div.classList.add(\"plot_wrapper\");\n elems.forEach((el) => div.appendChild(el));\n\n return div_master;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}