31:Td9a,chart = { let this_data = data; if (radios_gender !== "All") { this_data = this_data.filter((d) => d.Sex === radios_gender); } if (radios_race !== "All") { this_data = this_data.filter((d) => d.Race === radios_race); } if (radios_ethnicity !== "All") { this_data = this_data.filter((d) => d.Ethnicity === radios_ethnicity); } mutable n = this_data.length; // axis X let label = select_x; let domain_x = [0, 1]; if (select_x === "Duration disease") { label = `${label} (in months)`; domain_x = [0, 200]; } else if (select_x === "Baseline bmi") { label = `${label} (kg/m^2)`; domain_x = [10, 40]; } else if (select_x === "Baseline weight") { label = `${label} (kg)`; domain_x = [20, 120]; } else if (select_x === "Baseline height") { label = `${label} (cm)`; domain_x = [120, 200]; } else if (select_x === "Age") { domain_x = [50, 90]; } else if (select_x === "Years of education") { domain_x = [0, 30]; } // axis y let domain_y = []; if (select_var === "Sex") { domain_y = sex.filter((d) => d !== "All"); } else if (select_var === "Group bmi") { domain_y = ["Normal", "Overweight", "Obese"]; } else if (select_var === "Race") { domain_y = races.filter((d) => d !== "All"); } else if (select_var === "Ethnicity") { domain_y = ethnicity.filter((d) => d !== "All"); } const chart_horizontal = Plot.plot({ height: 400, width: width, marginLeft: margin_left, marginRight: margin_right, marginTop: 60, marginBottom: 50, style: { color: colors.black, fontSize: "14px" }, facet: { data: this_data, x: "Arm", marginTop: 45, marginLeft: 120, marginRight: 0, wrap: true }, color: { range: [colors.placebo, colors.drug_a, colors.drug_b] }, x: { label: `${label} →`, grid: true, domain: domain_x }, fx: { domain: ["Placebo", "Xanomeline Low Dose", "Xanomeline High Dose"] }, y: { domain: domain_y }, marks: [ Plot.frame({ stroke: colors.light_grey, strokeWidth: 4 }), beeswarmX(this_data, { x: (d) => d[`${select_x}`], y: (d) => d[`${select_var}`], r: 4, fill: (d) => d.Arm, gap: 0.5, ticks: 2, dynamic: true, title: "Age" }) ] }); const chart_vertical = Plot.plot({ height: 500, width: width, marginLeft: margin_left, marginRight: 20, marginTop: 20, marginBottom: 150, style: { color: colors.black, fontSize: "14px" }, facet: { data: this_data, y: "Arm_acronym", marginTop: 45, marginLeft: 10, marginRight: 0, wrap: true, label: "Arm" }, color: { range: [colors.placebo, colors.drug_a, colors.drug_b] }, y: { label: `${label}`, grid: true, domain: domain_x }, fx: { domain: ["Placebo", "Xanomeline Low Dose", "Xanomeline High Dose"] }, x: { domain: domain_y, tickRotate: 40, fontSize: 8 }, marks: [ Plot.frame({ stroke: colors.light_grey, strokeWidth: 4 }), beeswarmY(this_data, { y: (d) => d[`${select_x}`], x: (d) => d[`${select_var}`], r: 2, fill: (d) => d.Arm, gap: 0.5, ticks: 2, dynamic: true, title: "Age" }) ] }); return width <= 600 ? chart_vertical : chart_horizontal; }32:T407,html``33:[] 2f:{"title":"Beeswarm for demographic data","cells":[{"id":0,"value":"# Beeswarm for demographic data","pinned":false,"hidden":false,"mode":"md"},{"id":526,"value":"### Alzheimer demographic data set","pinned":false,"hidden":false,"mode":"md"},{"id":521,"value":"Data from November's [Wonderful Wednesdays' Challenge](https://github.com/VIS-SIG/Wonderful-Wednesdays/tree/master/data/2021/2021-11-10): give a comprehensive visual overview of the demographic data and baseline characteristics.\n\n----\n\nUse dropdowns and toggle to modify the visualization below","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"viewof select_var = Inputs.select(variables, {\n label: \"Select y variable\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"viewof select_x = Inputs.select(x_var, { label: \"Select x variable\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"**Select demographic attributes**","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"viewof radios_gender = Inputs.radio(sex, { label: \"Sex\", value: \"All\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"viewof radios_race = Inputs.radio(races, { label: \"Race\", value: \"All\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"viewof radios_ethnicity = Inputs.radio(ethnicity, {\n label: \"Ethnicity\",\n value: \"All\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"

\n
\n

Patients by Planned Arm, ${select_var} and ${select_x}

In total, there are ${n} participants with this characteristics

\n (${Math.round(100 * n/data.length)}% of total)\n

","pinned":false,"hidden":false,"mode":"html"},{"id":661,"value":"Swatches({\n color: d3.scaleOrdinal(\n [\"Placebo\", \"Xanomeline High Dose\", \"Xanomeline Low Dose\"],\n [colors.placebo, colors.drug_a, colors.drug_b]\n )\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"---- \nVisualization extremely inspired in [FlowingData's](https://flowingdata.com/2018/01/23/the-demographics-of-others/) wonderful work and [Fil's beeswarm in plot](https://observablehq.com/@fil/experimental-plot-beeswarm)","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"### Style variables","pinned":false,"hidden":false,"mode":"md"},{"id":399,"value":"margin_left = width <= 600 ? 30 : 270","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"margin_right = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"colors = ({\n light_grey: \"#f2f2f2\",\n grey: \"#555\",\n black: \"#1c1c1c\",\n placebo: \"#ccc\",\n drug_a: \"#3c0253\",\n drug_b: \"#886598\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"mutable n = data.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"Original dataset","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"all_data = d3.csv(\n \"https://raw.githubusercontent.com/VIS-SIG/Wonderful-Wednesdays/master/data/2021/2021-11-10/adsl.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"data = {\n const array = [];\n\n all_data.forEach((d) => {\n array.push(parse(d));\n });\n\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"function parse(d) {\n let sex = \"\";\n if (d.SEX === \"M\") sex = \"Male\";\n if (d.SEX === \"F\") sex = \"Female\";\n let bmi = \"Normal\";\n\n if (d.BMIBLGR1 === \"25-<30\") {\n bmi = \"Overweight\";\n } else if (d.BMIBLGR1 === \">=30\") {\n bmi = \"Obese\";\n }\n\n let arm = d.ARM;\n\n if (arm === \"Placebo\") {\n arm = \"PCB\";\n } else if (arm === \"Xanomeline High Dose\") {\n arm = \"X. High Dose\";\n } else {\n arm = \"X. Low dose\";\n }\n\n return {\n subject: d.USUBJID,\n Age: +d.AGE,\n Sex: sex,\n Arm: d.ARM,\n Arm_acronym: arm,\n Race: capitalizeFirstLetter(d.RACE.toLowerCase()),\n Ethnicity: capitalizeFirstLetter(d.ETHNIC.toLowerCase()),\n \"Baseline bmi\": +d.BMIBL,\n \"Group bmi\": bmi,\n \"Baseline weight\": +d.WEIGHTBL,\n \"Baseline height\": +d.HEIGHTBL,\n \"Years of education\": +d.EDUCLVL,\n \"Date disease\": d.DISONSDT,\n \"Duration disease\": +d.DURDIS\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof search_data = Inputs.search(data, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof table = Inputs.table(search_data, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"Arrays for interactions","pinned":false,"hidden":false,"mode":"md"},{"id":518,"value":"extent_age = d3.extent(data, (d) => d.Age)","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"extent_weight = d3.extent(data, (d) => d[\"Baseline weight\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"extent_height = d3.extent(data, (d) => d[\"Baseline height\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"extent_baseline_bmi = d3.extent(data, (d) => d[\"Baseline bmi\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"extent_duration = d3.extent(data, (d) => d[\"Duration disease\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"extent_education = d3.extent(data, (d) => d[\"Years of education\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"races = [\n \"All\",\n \"American indian or alaska native\",\n \"Black or african american\",\n \"White\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"sex = [\"All\", \"Female\", \"Male\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"group_bmi = d3.groupSort(\n data,\n (g) => g[\"Group bmi\"],\n (d) => d[\"Group bmi\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"arm = d3.groupSort(\n data,\n (g) => g.Arm,\n (d) => d.Arm\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"ethnicity = [\"All\", \"Hispanic or latino\", \"Not hispanic or latino\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"variables = [\"Sex\", \"Race\", \"Ethnicity\", \"Group bmi\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"x_var = [\n \"Age\",\n \"Baseline bmi\",\n \"Baseline weight\",\n \"Baseline height\",\n \"Duration disease\",\n \"Years of education\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"### Functions & JS Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":461,"value":"function capitalizeFirstLetter(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"import { beeswarmX } from \"@fil/experimental-plot-beeswarm\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"import { beeswarmY } from \"@fil/experimental-plot-beeswarm\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"import { swatches as Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}