const dl = download(

() =>

new Blob(

[

d3.csvFormat(

facts.allFiltered().map(d => {

let res = {};

res["Treatment (per arm)"] = d.arms

.map((e, i) => `(${i + 1}) ${e["Treatment name"]}`)

.join(" vs ")

.replace(/\+/g, " + ");

res["Sample size"] = d["Total sample size"];

res["Severity at enrollment"] = String(d["Type of patients"])

.trim()

.replace(/ at enrollment$/, "")

.replace(/ disease$/, "");

res["Sponsor/Funder"] = d["Funding"];

res["Reg. number"] = d["Trial registration number"];

res["Full text link"] = d["Full text link"];

return res;

})

)

],

{

type: "text/csv"

}

),

`covid-nma-export-${d3.utcFormat("%Y%m%d-treatments")(new Date())}.csv`,

"Download the data"

);

d3.select(dl)

.style("position", "absolute")

.style("right", "2px")

.style("top", "5px")

.style("font-size", "10px")

.style("font-family", "sans-serif");

return dl;

breakLayoutAtCell: breakAfter,

hideAfter: hideAfter,

left: 53,

right: 42,

button: html`<button style="background: steelblue; color: white; font-size: 16px; /*position:fixed;right:20px;top:0;*/">Fullscreen`,

fsButtonText: "x"

map;

//d3.select("main.mw8").classed("mw8", false);

d3.selectAll("#loader").remove();

const charset = "utf-8"; // "iso-8859-1"

const url = document.location.search.match(/test/)

? "https://covid-nma.com/dataviz/data/database_test.csv"

: "https://covid-nma.com/dataviz/data/database_valid.csv",

cors_proxy = "https://cors-anywhere.herokuapp.com/"; //"https://observable-cors.glitch.me/";

try {

return await fetch(url)

.then((response) => response.arrayBuffer())

.then((buffer) => new TextDecoder(charset).decode(buffer))

.then((d) => d.replace(/^/, "")); // remove UTF8-BOM

} catch (e) {

return await fetch(`${cors_proxy}${url}`)

.then((response) => response.arrayBuffer())

.then((buffer) => new TextDecoder(charset).decode(buffer))

.then((d) => d.replace(/^/, "")); // remove UTF8-BOM

// return await FileAttachment("Database_covid_studies_registered@2.csv").text();

}

? d3.tsvParse

: dataText.match(/;.*;.*;.*;.*;.*;/)

? d3.dsvFormat(";").parse

: d3.csvParse

.filter(

(d) => d["Registration date"].trim() && !d["Trial ID"].trim().match(/^#/)

)

.filter((d) => d["Study design"] != "nonRCT")

.filter(

(d) =>

!d["Treatment category"].match("(^|/)Vaccine(/|$)") &&

!d["Treatment category"].match("(^|/)Vaccine comparator(/|$)")

)

.map((d) => {

d.Published = d["Publication date"] == "No" ? "Not published" : "Published";

if (!("Treatment category" in d))

d["Treatment category"] = d["Pharmacological treatment"]; // temp column renaming

// Reorder treatment types so that Treat1+Treat2 <=> Treat2+Treat1

d.treatment_type_ordered = d["Treatment type"]

.toLowerCase()

.split("+")

.sort()

.join("+");

// Recapitalize treatment types

d.treatment_type_ordered =

d.treatment_type_ordered.charAt(0).toUpperCase() +

d.treatment_type_ordered.slice(1);

return d;

})

date_reference = {

const d = allData.filter(d => d["Trial ID"].trim().match(/^#/)).pop();

if (!d) return null;

return timeParse(d["Trial registration number"]);

text = text.replace(/�/g, "◎");

return text;

const f1 = d3.timeParse("%Y-%m-%d"),

f2 = d3.timeParse("%d/%m/%Y"),

f3 = d3.timeParse("%m/%d/%Y");

return x => f1(x.substring(0, 10)) || (f2(x) > new Date() ? f3(x) : f2(x));

crossfilter(

d3

.groups(arms, d => d["Trial ID"])

.map(d => Object.assign({ arms: d[1] }, d[1][0]))

),

{ dispatch: d3.dispatch("redraw", "reset") }

reExport = {

const fmt = d3.timeFormat("%Y-%m-%d");

return arms.map(d => {

const countryCodes = identifyCountries(d).join(";");

return {

"Trial ID": d["Trial ID"],

countryCodes,

// Countries: d["Countries"],

"Recruitment status": d["Recruitment status"].replace(

"Not Recruiting",

"Not recruiting"

),

"Registration date": fmt(timeParse(d["Registration date"]))

};

});

["0", "no restriction"],

["1", "mild"],

["2", "mild/moderate"],

["3", "moderate"],

["4", "moderate/severe"],

["5", "moderate/severe/critical"],

["6", "severe"],

["7", "severe/critical"],

["8", "critical"],

["N/A", "N/A"]

["Prevention", "Treatment", "Post treatment"],

d3.range(10)

const { container, view, reset } = createView(options);

const uid = DOM.uid();

d3.select(container)

.attr("id", uid.id)

.append("style")

.text(`#${uid.id} g.row text {fill: black;}`);

const x = facts.dimension(accessor, options.multivalued),

y = x.group().reduceSum(reducer),

w = Math.min(width, options.width || 650);

const chart = new dc.RowChart(view)

.width(w)

.height(options.height || 330)

.rowsCap(options.rowsCap || 13)

.othersLabel(options.othersLabel || "Others")

.gap(0)

.dimension(x)

.group(y)

.ordinalColors(options.colors || d3.schemeSet1)

.label(d => d.key.replace(/^(\d+|N[/]A)\. /, ""))

.ordering(options.ordering == "key" ? d => d.key : d => -d.value)

.on("postRender", () =>

d3

.select(view)

.select("g.axis")

.selectAll(".legent")

.data([numberLabel])

.join("text")

.attr("class", "legent")

.style("fill", "#000")

.attr("x", w - 75)

.attr("dy", -4)

.attr("text-anchor", "end")

.text(d => d)

);

chart.xAxis().tickFormat(integerFormat);

if (reset) reset.on("click", () => (chart.filter(null), chart.redrawGroup()));

invalidate(invalidation, chart);

return container;

const { container, view, reset } = createView(options);

const uid = DOM.uid();

d3.select(container).attr("id", uid.id);

if (options.rotateX)

d3.select(container).append("style").text(`

const dim = facts.dimension(accessor, options.multivalued),

group = dim.group().reduceSum(reducer),

factsall = crossfilter(facts.all()),

static_group = factsall

.dimension(accessor, options.multivalued)

.group()

.reduceSum(reducer),

chart = new dc.CompositeChart(view);

if (reset) reset.on("click", () => (chart.filter(null), chart.redrawGroup()));

invalidate(invalidation, chart);

const w = options.width || 315,

h = options.height || 175,

values = [...new Set(facts.all().map(accessor))].sort(options.sort);

const xScale = d3.scaleBand().domain(values),

margins = options.margin || {

top: 10,

right: 10,

bottom: 40,

left: 40

},

gap =

(w - margins.right - margins.left) / (xScale.domain().length - 1.5) / 4;

// no click on phantoms

d3.select(container).append("style").text(`

const charts = [

dc

.barChart(chart)

.group(static_group)

.colors(colors.phantom)

.centerBar(false)

.barPadding(0.2)

.brushOn(false),

dc

.barChart(chart)

.dimension(null)

.colors(colors.solid)

.centerBar(false)

.barPadding(0.2)

.brushOn(false)

];

chart

.width(w)

.height(h)

.margins(margins)

.x(xScale)

.xUnits(dc.units.ordinal)

.dimension(dim) // the values across the x axis

.group(group) // the values on the y axis

.transitionDuration(300)

.compose(charts)

._rangeBandPadding(0.2)

.brushOn(false)

.on("postRender", () =>

d3

.select(container)

.select("g.axis")

.selectAll(".legent")

.data([numberLabel])

.join("text")

.attr("class", "legent")

.style("fill", "#000")

.attr("dx", 5)

.attr("dy", 8)

.attr("y", -h + margins.top + margins.bottom)

.attr("text-anchor", "start")

.text(d => d)

);

chart.xAxis().tickFormat(v => v);

chart.yAxis().tickFormat(integerFormat);

return container;

const { container, view, reset } = createView(options);

const uid = DOM.uid();

d3.select(container).attr("id", uid.id);

if (options.rotateX)

d3.select(container).append("style").text(`

if (options.barWidth)

d3.select(container).append("style").text(`

const dim = facts.dimension(accessor, options.multivalued),

group = dim.group().reduceSum(reducer),

factsall = crossfilter(facts.all()),

static_group = factsall

.dimension(accessor, options.multivalued)

.group()

.reduceSum(reducer),

chart = new dc.CompositeChart(view);

invalidate(invalidation, chart);

if (reset) reset.on("click", () => (chart.filter(null), chart.redrawGroup()));

const h = options.height || 200,

margins = options.margins || { top: 10, right: 10, bottom: 20, left: 45 };

const charts = [

dc

.barChart(chart)

.group(static_group)

.colors(colors.phantom)

.gap(options.gap || 2)

.centerBar(options.centerBar || false)

.brushOn(false),

dc

.barChart(chart)

.colors(colors.solid)

.gap(options.gap || 2)

.centerBar(options.centerBar || false)

.brushOn(false)

];

let domain = d3.extent(facts.all(), accessor);

domain = [

domain[0].setDate(domain[0].getDate() - 5),

domain[1].setDate(domain[1].getDate() + 5)

];

const scaleX = d3.scaleTime().domain(domain);

chart

.xAxis()

.tickFormat((d, i) => (i % 2 === 0 ? d3.timeFormat("%b %y")(d) : ""));

chart

.width(options.width || 500)

.height(h)

.x(scaleX)

.xUnits(

// to get days!!

() => (scaleX.domain()[1] - scaleX.domain()[0]) / (24 * 3600 * 1000)

)

.margins(margins)

.dimension(dim) // the values across the x axis

.group(group) // the values on the y axis

.transitionDuration(500)

.compose(charts)

.on("postRedraw", () => {

// alert the dispatch crowd

facts.dispatch.call("redraw", null, "DC");

})

.on("postRender", () => {

d3.select(container)

.select("g.axis")

.selectAll(".legent")

.data([numberLabel])

.join("text")

.attr("class", "legent")

.style("fill", "#000")

.attr("dx", 5)

.attr("dy", 8)

.attr("y", -h + margins.top + margins.bottom)

.attr("text-anchor", "start")

.text(d => d);

});

return container;

const { container, view, reset } = createView(options);

const uid = DOM.uid();

d3.select(container).attr("id", uid.id);

if (options.rotateX)

d3.select(container).append("style").text(`

const reducer = () => 1;

const dim = facts.dimension(accessor, options.multivalued),

group = dim.group().reduceSum(reducer),

factsall = crossfilter(facts.all()),

static_group = factsall

.dimension(accessor, options.multivalued)

.group()

.reduceSum(reducer),

chart = new dc.CompositeChart(view);

invalidate(invalidation, chart);

if (reset) reset.on("click", () => (chart.filter(null), chart.redrawGroup()));

const h = options.height || 200,

margins = options.margins || { top: 10, right: 10, bottom: 20, left: 35 };

const charts = [

dc

.barChart(chart)

.group(static_group)

.colors(colors.phantom)

.gap(options.gap || 2)

.brushOn(false),

dc

.barChart(chart)

.colors(colors.solid)

.gap(options.gap || 2)

.brushOn(false)

];

const scaleX = d3.scaleLinear().domain(d3.extent(facts.all(), accessor));

chart.xAxis().tickFormat(d => {

const a = d3.format("~s")(Math.pow(10, d));

if (["1", "5"].includes(a[0])) return a;

});

chart

.width(options.width || 500)

.height(h)

.x(scaleX)

.xUnits(() => 35)

.margins(margins)

.dimension(dim) // the values across the x axis

.group(group) // the values on the y axis

.transitionDuration(500)

.compose(charts)

.on("postRedraw", () => {

// alert the dispatch crowd

facts.dispatch.call("redraw", null, "DC");

})

.on("postRender", () => {

d3.select(container)

.select("g.axis")

.selectAll(".legent")

.data([/*numberLabel*/ "# of studies"])

.join("text")

.attr("class", "legent")

.style("fill", "#000")

.attr("dx", 5)

.attr("dy", 8)

.attr("y", -h + margins.top + margins.bottom)

.attr("text-anchor", "start")

.text(d => d);

});

return container;

const small = d3.format(",d"),

large = d3.format(",.2s"),

mix = d => (d < 1000 ? small(d) : large(d));

mix.small = small; // integerFormat.small

return mix;

accessor,

title,

width,

invalidation,

visibility

}) {

const dim = facts.dimension(accessor),

group = dim.group().reduceSum(reducer),

values = group

.all()

.map((d) => ({ key: d.key, value: d.value }))

.sort((a, b) => d3.descending(a.value, b.value)),

uid = "check" + dim.id();

invalidation &&

invalidation.then(() => {

dim.filterAll().dispose();

facts.dispatch

.on("redraw.view" + dim.id(), null)

.on("reset.view" + dim.id(), null);

});

let filter = null;

const { container, view, reset } = createView({ width, title, reset: true }),

form = d3

.select(view)

.append("div")

.append("form")

.html(

`${values

.map(

(d, i) =>

` <label>

addTitle(d.key) != "" ? "<span class='help-tip'></span>" : ""

)

.join("<br>")}

)

.on("change", () => {

const select = Array.prototype.filter

.call(form.node(), (d) => d.checked)

.map((i) => values[+i.value].key);

dim.filter(

(filter =

select.length > 0 && select.length < values.length

? (d) => select.includes(d)

: null)

);

facts.dispatch.call("redraw");

});

if (reset) reset.attr("href", "#void").on("click", () => (resetF(), false));

redraw();

facts.dispatch

.on("redraw.view" + dim.id(), redraw)

.on("reset.view" + dim.id(), resetF);

return container;

function redraw() {

const filteredValues = new Map(group.all().map((d) => [d.key, d.value]));

const label = patientsButton

? ["patients", "patient"]

: ["studies", "study"];

values.forEach((d, i) => {

const num = filteredValues.get(d.key),

aff =

num === d.value

? `(${integerFormat.small(d.value)} ${label[+(d.value == 1)]})`

: `(${integerFormat.small(num)}/${integerFormat.small(d.value)})`;

form.select(`#${uid}_${i}`).html(aff);

});

reset.style("visibility", filter ? "visible" : "hidden");

}

function resetF() {

form.selectAll('input[type="checkbox"]').property("checked", true);

dim.filter((filter = null));

facts.dispatch.call("redraw");

}

const titles = {

Suspended: "The study has stopped early but may start again.",

Terminated:

"The study has stopped early and will not start again. Participants are no longer being examined or treated.",

Recruiting: "The study is currently recruiting participants.",

"Not recruiting":

"The study has not started recruiting participants OR is ongoing, and participants are receiving an intervention or being examined, but potential participants are not currently being recruited or enrolled.",

"No longer available":

"Expanded access was available for this intervention previously but is not currently available and will not be available in the future.",

Completed:

"The study has ended normally, and participants are no longer being examined or treated (that is, the last participant's last visit has occurred).",

Withdrawn:

"The study stopped early, before enrolling its first participant.",

Published:

"This include studies published in peer-reviewed journals and preprints.",

"Variants of Concern (VOC)":

"We consider currently designated variants of concern : Alpha, Beta, Gamma, Delta, Omicron."

};

const a = titles[key];

if (a) return ` title="${a}"`;

return "";

const height = (Math.min(WIDTH, 954) * 0.55) | 0;

projection.fitExtent(

[

[margin, margin],

[WIDTH - margin, height - margin]

],

{

type: "Sphere"

}

);

const dim = dimCountries, // dimCountries = facts.dimension(identifyCountries, MULTIVALUED),

group = dim.group().reduceCount(), // not reducer

values = group

.all()

.slice()

.sort((a, b) => d3.descending(a.value, b.value)),

id = dim.id();

invalidation &&

invalidation.then(() => {

dim.filterAll().dispose();

facts.dispatch.on("redraw.view" + id, null).on("reset.view" + id, null);

});

facts.dispatch.on("redraw.view" + id, redraw).on("reset.view" + id, reset);

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, WIDTH, height])

.style("overflow", "visible")

.attr("id", "map"),

path = d3.geoPath().projection(projection);

let _circles,

_ghost_circles,

_links,

_labels,

_legend,

_sphere,

_countries,

_activeCountries;

let filter = null;

const ghost_values = new Map(

crossfilter(facts.all())

.dimension(dim.accessor, MULTIVALUED)

.group()

.reduceCount() // not reducer

.all()

.map((d) => [d.key, d.value])

),

active = [...centroids.values()]

.filter((d) => (d.total = ghost_values.get(d.iso) || 0))

.sort((a, b) => d3.descending(a.total, b.total));

// CREATE

function render() {

svg

.html("")

.append("defs")

.append("style")

.attr("type", "text/css")

.text(styleSvg);

_sphere = svg

.append("g")

.attr("id", "sphere")

.append("path")

.datum({ type: "Sphere" });

_countries = svg

.append("g")

.attr("id", "land")

.append("path")

.datum(countries)

.attr("d", path);

_activeCountries = svg

.append("g")

.attr("id", "activeCountries")

.selectAll("path")

.data(

countries.features.filter((d) => allCountries.has(d.properties.adm0_a3))

)

.join("path");

_links = svg.append("g").attr("id", "links");

const onClick = function (event, d) {

filter = filter && filter.includes(d.iso) ? null : [d.iso];

dim.filter(filter && ((d) => filter.includes(d)));

facts.dispatch.call("redraw");

d3.select(this).classed("selected", !!filter);

svg.select("#tooltip").attr("transform", `translate(-1000,-1000)`);

},

onMouseover = function () {

d3.select(this).classed("hover", true);

},

onMouseout = function () {

d3.select(this).classed("hover", false);

};

_ghost_circles = svg

.append("g")

.attr("id", "ghostCircles")

.selectAll("path")

.data(active)

.join("path");

_circles = svg

.append("g")

.attr("id", "circles")

.selectAll("path")

.data(active)

.join("path");

_circles

.merge(_ghost_circles)

.on("click", onClick)

.on("mouseover", onMouseover)

.on("mouseout", onMouseout);

_labels = svg

.append("g")

.attr("id", "labels")

.attr("fill", "white")

.selectAll("text")

.data(active)

.join("text");

_legend = svg.append("g").attr("id", "legend");

svg.call(addTooltip, _circles, _links);

svg.call(

zoom(projection)

.filter(() => viewof zoomButton.value)

.on("zoom.render", () => {

project();

redraw(true);

})

.on("end.render", () => {

project();

redraw(true);

})

);

project();

redraw();

}

// UPDATE PROJECTION

function project() {

_sphere.attr("d", path);

_countries.attr("d", path);

_activeCountries.attr("d", path);

}

// UPDATE

function redraw(immediate) {

// We group "by hand"

const trialCountries = facts.allFiltered().map(dim.accessor),

values = d3.rollup(

trialCountries.flat(),

(v) => v.length,

(d) => d

);

r.range([2, baseRadius * Math.sqrt(projection.scale())]);

_circles

.transition()

.duration(immediate ? 0 : 500)

.attr("d", (d) =>

path.pointRadius(values.get(d.iso) ? r(values.get(d.iso)) : 0)(d)

);

const ghost_values = d3.rollup(

facts.all().map(dim.accessor).flat(),

(v) => v.length,

(d) => d

);

_ghost_circles

.transition()

.duration(immediate ? 0 : 500)

.attr("d", (d) => path.pointRadius(r(ghost_values.get(d.iso) || 0))(d));

// links

const links = getLinks(trialCountries);

_links

.selectAll("path")

.data(links)

.join("path")

.attr("stroke", fillLinks)

.attr("fill", "none")

.attr("stroke-width", (d) => d.value / 8)

.attr("d", (d) =>

path({

type: "LineString",

coordinates: [

centroids.get(d.source).centroid,

centroids.get(d.target).centroid

]

})

);

_labels

.text((d) => {

d.trials = values.get(d.iso) || 0;

return r(d.trials) > 14 ? `${d.iso}: ${d.trials}` : d.trials;

})

.attr("transform", (d) => `translate(${projection(d.centroid)})`)

.style("opacity", (d) => (r(d.trials) > 6 ? 1 : 0));

//

_legend.call(legend, { width: WIDTH, height });

}

function reset() {

dim.filter((filter = null));

redraw();

}

render();

return html`<details open><summary class=h4>Map</summary>${svg.node()}`;

}

const L = {};

for (const ctrs of trialCountries) {

for (let [a, b] of d3.cross(ctrs, ctrs)) {

const idx = [a, b].sort().join("-");

if (a !== b) L[idx] = (L[idx] || 0) + 1;

}

}

return Object.keys(L)

.map((d) => [...d.split(/-/), L[d]])

.sort((a, b) => d3.descending(a[2], b[2]))

.map((d) => ({ source: d[0], target: d[1], value: d[2] / 6 }));

facts

.all()

.map(identifyCountries)

.map(l => l.map(d => continents.get(d)))

.flat(),

v => v.length,

d => d

.scaleSequential(t => d3.interpolateBlues(t / 2))

.domain([1, 8])

const W = 180,

H = 250;

if (!selection.select("g").size()) {

const g = selection

.append("g")

.attr("transform", `translate(${width - W / 2}, ${height - H})`);

if (true)

g.append("rect")

.attr("x", -W / 2)

.attr("y", H - 100)

.attr("width", W)

.attr("height", H)

.attr("fill", "rgba(255,255,255,0.8)");

g.append("text")

.classed("legend", true)

.text("Clinical Trials")

.attr("dy", H - 58);

g.append("text")

.text("per country")

.classed("legend", true)

.attr("dy", H - 45);

g.append("g").attr("id", "container");

g.append("path")

.attr("transform", `translate(0,${H - 10})`)

.attr("fill", "none")

.attr("stroke", fillLinks)

.attr("d", "M-50,0l100,0");

g.append("text")

.classed("legend", true)

.text("Partnerships")

.attr("dy", H - 20);

}

const c = selection

.select("#container")

.selectAll("g")

.data([20, 50, 100, 200].reverse())

.join(

enter => {

const g = enter

.append("g")

.attr("transform", `translate(0, ${H - 75})`);

g.append("circle")

.attr("r", d => r(d))

.attr("cy", d => -r(d))

.attr("fill", fillCircles)

.attr("stroke", "white");

g.append("text")

.attr("fill", "white")

.text(d => d)

.attr("dy", d => -1.9 * r(d) + r(4));

},

update => {

update

.select("circle")

.attr("r", d => r(d))

.attr("cy", d => -r(d));

update.select("text").attr("dy", d => -1.9 * r(d) + r(4));

}

);

const tooltip = svg.append("g").attr("id", "tooltip");

svg.on("touchmove mousemove", function(event) {

const m = d3.pointer(event);

const data = _circles.data(),

xy = data.map(d => projection(d.centroid));

const i = d3.scan(xy.map(d => Math.hypot(m[0] - d[0], m[1] - d[1]))),

dist = Math.hypot(m[0] - xy[i][0], m[1] - xy[i][1]),

d = data[i];

if (d.trials && dist < r(d.trials) + 3) {

const partners = [

...new Set(

_links

.selectAll("path")

.data()

.map(l => [l.source, l.target])

.filter(l => l.includes(d.iso))

.flat()

.sort()

.filter(l => l !== d.iso)

.map((l, i) => (!((i + 1) % 5) ? "\n" : "") + l)

)

],

partnersLines = partners.length