31:T7b2,viewof barFilters = { const makeHist = (base, filter, crossfilter) => { return vl.layer( base.select(filter).encode(vl.color().value("#ddd")), base.encode(vl.color().value(defaultColor)).transform(vl.filter(crossfilter)) ) .height(400) .width(200); }; const filterEdad = vl.selectMulti("Edad").encodings("y"), // filterEstado = vl.selectMulti("Estado").encodings("y"), // filterUbicacion = vl.selectMulti("Location").encodings("y"), filterDepto = vl.selectMulti("Departamento").encodings("y"); const andFilters = vl.and( filterEdad, filterDepto); // const andFilters = vl.and(filterEstado, filterEdad, filterEstado, filterDepto); const histEdad = makeHist( vl.markBar({tooltip: true}) .encode( vl.y().fieldQ("Edad").bin({step: 10}).title("Age (binned)"), vl.x().count() ) , filterEdad, andFilters ), // histEstado = makeHist( // vl.markBar({tooltip: true}) // .encode( // vl.y().fieldN("Estado").title("Current Status"), // vl.x().count() // ) // , // filterEstado, // andFilters // ), // histUbicacion = makeHist( // vl.markBar({tooltip: true}) // .encode( // vl.y().fieldN("Location"), // vl.x().count() // ) // , // filterUbicacion, // andFilters // ), histDepto = makeHist( vl.markBar({tooltip: true}) .encode( vl.y().fieldN("Departamento"), vl.x().count() ).height(400) , filterDepto, andFilters ); return vl.concat( histEdad, // histEstado, // histUbicacion, histDepto ) .columns(3) .data(data) .render(); }32:Tf82,chart = { const highlight = vl.selectSingle("highlight") .fields("Conditions") .on("mouseover") .init({"Conditions":[]}) .empty("none") // .nearest(true); const sortAttr = sortBy === "Degree" ? vl.max().field("Degree").order("descending") : vl.fieldQ("Prevalence").order("descending"); const filteredDataBySymptoms = dataBySymptoms.filter(d => d.Degree >= minDegree); const filteredDataByEachSymptom = dataByEachSymptom.filter(d => d.Degree >= minDegree); const barChart = vl .data(filteredDataBySymptoms) .encode( vl.x().fieldN("Conditions") .sort(sortAttr) .axis(null), vl.y().fieldQ("Prevalence") .title("Prevalence of Intersection %" ) .axis({format : ".2%", orient: "left"}), vl.tooltip(["Conditions", vl.tooltip().fieldQ("Prevalence").format( ".5%"), "Count", "Degree"]) ) .layer( vl.markBar({tooltip: true}) .select(highlight) .encode( vl.color().value(defaultColor) .if(highlight, vl.value("firebrick")) ), vl.markText({dy: -5, fontSize: 8}) .encode( vl.text() .fieldQ("Prevalence") .title("Prevalence of Intersection %") .format(".1%") ) ) // .width({step: 20}) .height(200); const circles = vl.markCircle({tooltip: true, size:100, opacity: 1}) .encode( vl.x().fieldN("Conditions") .sort(sortAttr) .axis(null), vl.y() .fieldN("Condition") .sort(vl.max("Prevalence").order("descending")) .title(null), vl.tooltip(["Conditions", "Condition", "Degree", "Count"]) ); const dotsIntersectionChart = vl .data(filteredDataByEachSymptom) .layer( circles .markLine({ size: 5}) // Intersecting lines .encode( vl.y() .fieldN("Condition") .sort(vl.max("Prevalence").order("descending")), vl.y2().fieldN("Condition"), vl.color().value(defaultColor) .if(highlight, vl.value("firebrick")), vl.detail().fieldN("Conditions") ), circles .select(highlight) .encode( vl.color().fieldN("Condition") .scale({ domain:colorScaleSymptoms.domain(), range: colorScaleSymptoms.range() }) .legend(null) // vl.color().value(defaultColor) .if(highlight, vl.value("firebrick")) ), ); const countBySymBase = vl .markBar( { tooltip: true}) .data(dataByEachSymptom) .encode( vl.x().max("Prevalence").title("Prevalence of Condition %").axis({format : ".2%"}), vl.y().fieldN("Condition") .sort(vl.max("Prevalence").order("descending")) .title(null), vl.color().fieldN("Condition") .scale({ domain:colorScaleSymptoms.domain(), range: colorScaleSymptoms.range() }) .legend(null), vl.tooltip(["Condition", vl.tooltip().max("Count").title("Count"), vl.tooltip().max("Prevalence").format("0.5%")]) ) .width(150); const countBySym = vl.layer( countBySymBase.markText({dx: 2, align: "left", tooltip: true}) .encode( vl.text().max("Prevalence").format(".2%"), vl.color() // clear up color ), countBySymBase ); // yield countBySym.render(); const pointsChart = vl .hconcat( dotsIntersectionChart, countBySym, ) .spacing(0) .resolve({scale: {y: "shared"}}); return vl.vconcat( barChart, pointsChart ) .resolve({scale: {x: "shared"}}) .spacing(0) .config( { stroke: null }) .title({ text: `Morbidities interactions`, subtitle: `%s out of ${filteredData.length} filtered people. Latest update ${data[data.length-1]["Fecha de diagnóstico"]}` }) .render() }33:[{"id":"c41e92c3942a783d02870eea7c15c6ee1f6abc8e8baa9b8321e62da2216e5112fd52b01e7aa5bd3da78c44b8ad82a70dc4f4c4ed1f1a7c5e751ddd173db86792","href":"https://static.observableusercontent.com/files/c41e92c3942a783d02870eea7c15c6ee1f6abc8e8baa9b8321e62da2216e5112fd52b01e7aa5bd3da78c44b8ad82a70dc4f4c4ed1f1a7c5e751ddd173db86792","name":"Covid19_deaths_Colombia_2020_june_11.csv","type":"text/csv","lastModified":1666109385501.611,"size":315526}] 2f:{"title":"Multimorbidity patterns for COVID-19 deaths in Colombia","cells":[{"id":0,"value":"intro = md`# Multimorbidity patterns for COVID-19 deaths in Colombia\n\nTool for exploring morbidities of the the patients dead by COVID19 in Colombia.\n\nCompanion visualization for the paper (in press):\n
\n**Multimorbidity patterns of COVID-19 infections and its impact on fatality risk: considerations for a better medical practice**
\n*Julián A. Fernández-Niño, [John A. Guerra-Gomez](https://johnguerra.co), Alvaro J. Idrovo.*\n\nVisualization developed by [John A. Guerra-Gómez](https://johnguerra.co), based on the [UpSet Visualization](https://caleydo.org/tools/upset/) and the [UpSet Altair implementation](https://github.com/hms-dbmi/upset-altair-notebook)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"md`

Filter the data by clicking on any of the following bars

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"viewof selectedSymptoms = checkbox({\n title: \"Select Morbidities\",\n description: \"The following charts will update with your selection\",\n options: Object.values(sortedSymptomsEN),\n value: Object.values(symptomsEN).slice(0, symptoms.length-5)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1535,"value":"individualMorbidities = {\n const countBySymBase = vl\n .markBar({ tooltip: true})\n .data(dataByEachSymptom) \n .encode(\n vl.x().max(\"Prevalence\").title(\"Prevalence of Condition %\").axis({format : \".2%\"}),\n vl.y().fieldN(\"Condition\")\n .sort(vl.max(\"Prevalence\").order(\"descending\"))\n .title(null),\n vl.color().fieldN(\"Condition\")\n .scale({ domain:colorScaleSymptoms.domain(), range: colorScaleSymptoms.range() }).legend(null),\n vl.tooltip([\"Condition\", vl.tooltip().max(\"Count\").title(\"Count\"), vl.tooltip().max(\"Prevalence\").format(\"0.5%\")])\n );\n \n const countBySym = vl.layer(\n countBySymBase.markText({dx: 2, align: \"left\", tooltip: true})\n .encode(\n vl.text().max(\"Prevalence\").format(\".2%\"),\n vl.color() // clear up color\n ),\n countBySymBase \n ).title(\"Individual Prevalence for each Morbidity\");\n \n return countBySym.render()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"viewof sortBy = select({\n title: \"Sort by\",\n options: [ \"Prevalence\", \n \"Degree\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"viewof minDegree = slider({\n title:\"Minimum Degree\", \n step:1,\n value:2,\n min:1,\n max:selectedSymptoms.length\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"md`## Summary of the data\n\nThe following is a visualization of the raw data. It represents all the ${data.length} records processed up to ${data[data.length-1][\"Fechadiagnostico\"]}. You can use it to explore the whole dataset by sorting and filtering.\n* You can click on any of the column's titles to sort by that column.\n* If you click and drag over the visualization you can range select.\n* Hover your mouse over any of the rows for inspecting it's values. If you click over a value you can filter over it.\n* You can also use the *shift* key for appending to the filter, or the *alt* key for substracting.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"nv = {\n const target = html`

`;\n \n new navio(target, 600).data(data).addAllAttribs();\n \n \n return target;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"defaultColor = \"#999\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"selection = Generators.observe(notify => {\n let compoundValue = {};\n \n const signaled = (name, value) => {\n console.log(\"signaled\", name, value);\n if (Object.keys(value).length === 0 ) { //empty object\n delete compoundValue[name];\n } else {\n compoundValue[name] = value;\n }\n return notify(compoundValue);\n }; \n \n barFilters.addSignalListener(\"Edad\", signaled); \n // barFilters.addSignalListener(\"Estado\", signaled); \n // barFilters.addSignalListener(\"Location\", signaled); \n barFilters.addSignalListener(\"Departamento\", signaled); \n \n notify(barFilters.signal(\"Edad\")); \n // notify(barFilters.signal(\"Estado\")); \n // notify(barFilters.signal(\"Location\")); \n notify(barFilters.signal(\"Departamento\")); \n \n return () => { \n barFilters.removeSignalListener(\"Edad\", signaled); \n // barFilters.removeSignalListener(\"Estado\", signaled); \n // barFilters.removeSignalListener(\"Location\", signaled);\n barFilters.removeSignalListener(\"Departamento\", signaled);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"filteredData = data.filter(d => {\n const filtered = Object.keys(selection).map(key => {\n if (key===\"Edad\") { //TODO automatically check for quantitative vs categorical\n return (selection[key][key][0] <= d[key]) && (d[key] < selection[key][key][1]);\n } else { \n return selection[key][key].indexOf(d[key]) !== -1;\n }\n });\n \n // console.log(d.Edad, filtered);\n return filtered.reduce((p, n) => p && n, true);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = // d3.json(\"https://atlas.jifo.co/api/connectors/e160e2f9-a7b9-4f01-879e-cc497cb279eb\")\nFileAttachment(\"Covid19_deaths_Colombia_2020_june_11.csv\")\n .csv()\n // .then((res) => {\n // const columns = res.data[1][0];\n // return res.data[1]\n // .slice(1) // header comes in row 1\n // .map((row) => Object.fromEntries(row.map((d, i) => [columns[i], d])))\n // .map((d) => {\n // d[\"Días entre la hospitalizacion y la muerte\"] =\n // d[\"Días entre la hospitalizacion y la muerte\"] !== \"\"\n // ? +d[\"Días entre la hospitalizacion y la muerte\"]\n // : null;\n // d.Edad = +d.Edad;\n // d.Estado = d.Estado.trim().toLowerCase();\n // d.Location = d[\"Ubicacion\"];\n // Object.keys(symptomsEN).forEach((sym) => (d[symptomsEN[sym]] = d[sym]));\n\n // return d;\n // });\n // })\n // .then((data) => data.filter((d) => d.Estado === \"fallecido\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1252,"value":"rawSymps = filteredData.map(row => \n { \n const res = {\n symptoms: selectedSymptoms\n .map(s => [s, row[s]])\n .filter(st => +st[1]===1)\n .map(st => st[0]),\n row: row\n };\n res.degree=res.symptoms.length;\n return res;\n }\n )\n.filter(d => d.symptoms.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"countsBySymptoms = {\n const countBySymptoms = new Map(); \n for (let i = 0; i < rawSymps.length; i++) {\n for (let j = 1; j <= rawSymps[i].symptoms.length; j++) { \n // Get all the combinations for size j\n for (let comb of getCombinations(rawSymps[i].symptoms, j)) {\n const symList = comb.join(\", \");\n\n const prev = countBySymptoms.has(symList) ? countBySymptoms.get(symList) : [];\n countBySymptoms.set(symList, prev.concat([rawSymps[i].row])); \n }\n \n }\n }\n\n return countBySymptoms;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1199,"value":"dataBySymptoms = Array.from(countsBySymptoms.entries())\n .map(row => {\n const condsList = row[0].split(\", \");\n return {\n \"Conditions\": row[0],\n \"ConditionsList\": condsList,\n \"Degree\": condsList.length,\n \"Count\": row[1].length,\n \"Prevalence\": row[1].length / filteredData.length\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"dataByEachSymptom = dataBySymptoms\n .map(row => row[\"Conditions\"]\n .split(\", \")\n .map((s, _, all) => \n ({\n \"Condition\": s, \n \"Conditions\": row[\"Conditions\"],\n \"Count\": row.Count,\n \"Prevalence\": row.Prevalence,\n \"Degree\": all.length\n })\n )\n )\n .flat();","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"symptoms = {\n const symptoms = Object.keys(data[0]).slice(18, 32);\n data.forEach(d => symptoms.forEach(sym => d[symptomsEN] = d[sym]));\n return symptoms\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1401,"value":"colorScaleSymptoms = d3.scaleOrdinal()\n .domain(sortedSymptomsEN)\n // .domain(dataByEachSymptom.sort((a,b) => d3.descending(a.Count, b.Count)).map(d => d.Condition))\n .range(d3.quantize(d3.interpolateSpectral, sortedSymptomsEN.length).map(c => lighten(c, 0.7)))\n // .range(d3.schemeAccent.concat(d3.schemeCategory10).concat(d3.schemePastel1).map(c => lighten(c, 0.8)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"// sortedSymptomsEN = [\"High Blood Pressure\",\"Diabetes\",\"Under study\",\"Respiratory Disease\",\"Cardiovascular Disease\",\"Chronic Kidney Disease\",\"Obesity\",\"None\",\"Smoking\",\"Others\",\"Thyroid Disease\",\"Cancer\",\"Cerebrovascular\",\"Autoimmune Disease\",\"HIV\"]\nsortedSymptomsEN = [\"High Blood Pressure\",\"Under study\",\"Diabetes\",\"Respiratory Disease\",\"Cardiovascular Disease\",\"Chronic Kidney Disease\",\"Obesity\",\"Others\",\"None\",\"Smoking\",\"Thyroid Disease\",\"Cerebrovascular\",\"Cancer\",\"Autoimmune Disease\",\"HIV\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"JSON.stringify(dataByEachSymptom.filter(d => d.Degree === 1).sort((a,b) => b.Count-a.Count).map(d => d.Conditions))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1450,"value":"function lighten(color, k = 1) {\n const {l, c, h} = d3.lch(color);\n return d3.lch(l + 18 * k, c , h).hex();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1426,"value":"colorScaleSymptoms.domain()","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"symptomsEN = ({\n\"Cerebrovascular\":\"Cerebrovascular\",\n\"HTA\":\"High Blood Pressure\",\n\"DM\":\"Diabetes\",\n\"Renal\":\"Chronic Kidney Disease\",\n\"Tiroides\":\"Thyroid Disease\",\n\"Obesidad\":\"Obesity\",\n\"Fumar\":\"Smoking\",\n\"Cardiaca\":\"Cardiovascular Disease\",\n\"Respiratoria\":\"Respiratory Disease\",\n\"Cancer\":\"Cancer\",\n\"Autoinmune\":\"Autoimmune Disease\",\n\"VIH\":\"HIV\",\n\"Otros\":\"Others\",\n\"Ninguna\":\"None\",\n\"En estudio\":\"Under study\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"getCombinations = (list , size) => {\n const removeOne = (list, indexToRemove) => list.slice(0, indexToRemove).concat(list.slice(indexToRemove+1))\n \n const getCombinations = (list, size) => {\n if (size > list.length) return [];\n \n if (size === list.length) return [list];\n \n if (size === 1 ) {\n return list.map(d => [d])\n }\n\n const res = [];\n // Adapted from https://gist.github.com/axelpale/3118596\n for (let i = 0; i < list.length - size + 1; i++) {\n const head = list.slice(i, i+1);\n for(let subRes of getCombinations(removeOne(list, i), size-1)) {\n res.push(head.concat(subRes));\n }\n }\n \n return res;\n };\n \n return getCombinations(list, size);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"navio = require(\"navio\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"import {checkbox, select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import {vl} from \"@john-guerra/vega-lite-api\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"embed = require(\"vega-embed\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}