CanvasXpress Recipes https://neuhausi.github.io/canvasxpress-blog/js.html Interactive, reproducible scientific visualization with canvasXpress — in R, Python and JavaScript. quarto-1.6.39 Sat, 31 Oct 2026 04:00:00 GMT Interactive network graphs in JavaScript with CanvasXpress Isaac Neuhaus https://neuhausi.github.io/canvasxpress-blog/posts/js/network-graphs-in-javascript/ A network graph shows relationships: nodes connected by edges, laid out so connected things sit near each other. In the browser the common answer is to hand-roll a force simulation in D3 — a few hundred lines. CanvasXpress is a JavaScript library at heart, so the whole thing is a data object of nodes and edges plus a config.

Load the library

<link href="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@73.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@73.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.min.js"></script>

The markup and the spec

Nodes carry id, name, group; edges carry id1, id2, value. colorNodeBy colours by community and networkLayoutType: "forceDirected" runs the physics.

<canvas id="network" width="650" height="500"></canvas>
<script>
  var groups = ["Alpha", "Beta", "Gamma"], nodes = [], byGroup = {}, k = 0;
  groups.forEach(function (g) {
    byGroup[g] = [];
    for (var i = 0; i < 7; i++) {
      var nid = "n" + k; nodes.push({ id: nid, name: g + (i + 1), group: g });
      byGroup[g].push(nid); k++;
    }
  });

  var edges = [];
  groups.forEach(function (g) {                         // dense within a community
    var m = byGroup[g];
    for (var i = 0; i < m.length; i++)
      for (var j = i + 1; j < m.length; j++)
        if (Math.random() < 0.5)
          edges.push({ id1: m[i], id2: m[j], value: 1 + Math.floor(Math.random() * 5) });
  });
  for (var e = 0; e < 6; e++) {                         // a few cross-community links
    var pair = groups.slice().sort(function () { return Math.random() - 0.5; }).slice(0, 2);
    var a = byGroup[pair[0]], b = byGroup[pair[1]];
    edges.push({ id1: a[Math.floor(Math.random() * a.length)],
                 id2: b[Math.floor(Math.random() * b.length)], value: 1 });
  }

  var config = {
    graphType: "Network",
    networkLayoutType: "forceDirected",
    colorNodeBy: "group",
    nodeSize: 25,
    showAnimation: true,
    title: "A small community network"
  };

  new CanvasXpress("network", { nodes: nodes, edges: edges }, config);
</script>

Live result

Drag any node and the layout settles around it; hover to read the label. The three communities separate on their own because within-group edges outnumber the cross-group ones.

Why “reproducible”

The nodes, edges and config are the figure — one portable JSON spec that renders the same from R, Python, or a web page.

Next

]]> JavaScript CanvasXpress network visualization https://neuhausi.github.io/canvasxpress-blog/posts/js/network-graphs-in-javascript/ Sat, 31 Oct 2026 04:00:00 GMT Genome browser tracks in JavaScript with CanvasXpress Isaac Neuhaus https://neuhausi.github.io/canvasxpress-blog/posts/js/genome-tracks-in-javascript/ A genome browser view stacks tracks that share one coordinate axis: coverage, gene models, variants. Building one in the browser by hand is a lot of SVG and coordinate math. CanvasXpress is a JavaScript library at heart, so the whole view is a data object of tracks plus a config.

Load the library

<link href="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@73.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@73.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.min.js"></script>

The markup and the spec

Four tracks that share one coordinate axis: gene models (box, multi-exon, connected), coverage across three tissues (bar), an expression heatmap (heatmap), and variant markers (triangle).

<canvas id="genome" width="760" height="520"></canvas>
<script>
  // Gene models: each gene is a set of exon [start, end] intervals, drawn connected.
  var genes = [];
  for (var j = 0; j < 4; j++) {
    var start = 40 + j * 120, nex = 2 + Math.floor(Math.random() * 3), exons = [];
    for (var k = 0; k < nex; k++) exons.push([start + k * 30, start + k * 30 + 18]);
    genes.push({ id: "GENE" + (j + 1), dir: j % 2 === 0 ? "right" : "left",
                 fill: "rgb(70,130,220)", outline: "rgb(0,0,0)", data: exons });
  }

  // Coverage and expression: one entry per binned position, three tissues each.
  var coverage = [], express = [], rnd = function (a, b) { return a + Math.floor(Math.random() * (b - a + 1)); };
  for (var i = 0; i < 22; i++) {
    var o = 50 + i * 22;
    coverage.push({ id: "p" + i, offset: o, data: [rnd(8, 45), rnd(8, 45), rnd(8, 45)] });
    express.push({ id: "p" + i, offset: o,
                   data: [Math.round(Math.random() * 4 - 2), Math.round(Math.random() * 4 - 2),
                          Math.round(Math.random() * 4 - 2)] });
  }

  // Variants: point markers at genomic positions.
  var snps = [];
  for (var s = 0; s < 9; s++)
    snps.push({ id: "rs" + (1000 + s), offset: rnd(45, 520), fill: "rgb(200,40,40)", outline: "rgb(0,0,0)" });

  var data = { tracks: [
    { name: "Genes (exon models)", type: "box", connect: true, data: genes },
    { name: "Coverage — Heart / Liver / Kidney", type: "bar", height: 120,
      fill: "rgb(80,80,200)", outline: "rgb(60,60,60)", data: coverage },
    { name: "Expression (z-score)", type: "heatmap", height: 90, data: express },
    { name: "SNPs", type: "triangle", data: snps }
  ]};

  var config = { graphType: "Genome", background: "rgb(245,245,245)", featureStaggered: true,
                 title: "Multi-track genome browser: genes, coverage, expression and variants" };

  new CanvasXpress("genome", data, config);
</script>

Live result

Scroll/drag to pan and zoom into a region; every track stays locked to the shared coordinate axis, so the gene models, coverage, expression and variants line up position-for-position. Swap each track for your own pileup, annotation and VCF-derived data.

Why “reproducible”

The tracks and config are the figure — one portable JSON spec that renders the same from R, Python, or a web page.

Next

]]> JavaScript CanvasXpress genome bioinformatics visualization https://neuhausi.github.io/canvasxpress-blog/posts/js/genome-tracks-in-javascript/ Sat, 31 Oct 2026 04:00:00 GMT An interactive NGS sequencing-QC dashboard in JavaScript with CanvasXpress Isaac Neuhaus https://neuhausi.github.io/canvasxpress-blog/posts/js/linked-dashboards-in-javascript/ After a sequencing run you get a QC table — one row per sample, a dozen metrics — and you need to answer three questions fast: which samples fail, is a whole batch off, and are the failures correlated? A single scatter can’t do it; you want several views that talk to each other — select a suspicious sample in one and see it light up in the rest. In the browser that usually means wiring event handlers between chart libraries by hand. CanvasXpress does it for you: give every panel the same broadcast group and a selection broadcasts to all of them. Here we build a real QC dashboard for 96 RNA/exome samples.

Load the library and the data

The 96-sample QC table is published next to this post as a small JS object, qc-data.js — QC_DATA is a sample-centric CanvasXpress data object (each sample is a point; z holds its lane/batch/library).

<link href="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@73.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@73.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.min.js"></script>
<script src="qc-data.js"></script>

The panels

The overview heatmap transposes the data to metrics × samples and z-scores each metric. The four triage panels read QC_DATA directly and all share broadcastGroup: "qc" — select points in one and the same samples re-mark in the rest.

<canvas id="qcHeat" width="820" height="420"></canvas>
<canvas id="qcMap" width="640" height="360"></canvas>
<canvas id="qcContam" width="640" height="360"></canvas>
<canvas id="qcQ30" width="640" height="360"></canvas>
<canvas id="qcReads" width="820" height="300"></canvas>
<script>
  var metrics = QC_DATA.y.smps, samples = QC_DATA.y.vars, rows = QC_DATA.y.data;

  // Overview: transpose to metrics x samples and z-score each metric.
  var hmData = metrics.map(function (_, c) {
    var col = rows.map(function (r) { return r[c]; });
    var mean = col.reduce(function (a, b) { return a + b; }, 0) / col.length;
    var sd = Math.sqrt(col.reduce(function (a, b) { return a + (b - mean) * (b - mean); }, 0) / col.length) || 1;
    return col.map(function (v) { return Math.round((v - mean) / sd * 100) / 100; });
  });
  new CanvasXpress("qcHeat",
    { y: { vars: metrics, smps: samples, data: hmData },
      x: { Batch: QC_DATA.z.Batch, Library: QC_DATA.z.Library } },
    { graphType: "Heatmap", samplesClustered: true, variablesClustered: true,
      colorSpectrum: ["navy", "white", "firebrick3"],
      title: "QC metrics (z-scored) — 96 samples clustered" });

  // Linked triage panels (same QC_DATA, shared broadcast group).
  function panel(id, cfg) {
    new CanvasXpress(id, QC_DATA, Object.assign({ broadcast: true, broadcastGroup: "qc" }, cfg));
  }
  panel("qcMap", { graphType: "Scatter2D", xAxis: ["pct_duplication"], yAxis: ["pct_mapped"],
    colorBy: "Batch", sizeBy: "total_reads", title: "Mapping rate vs duplication — select bottom-right" });
  panel("qcContam", { graphType: "Scatter2D", xAxis: ["pct_mapped"], yAxis: ["contamination_freemix"],
    colorBy: "Batch", title: "Contamination (freemix) vs mapping rate" });
  panel("qcQ30", { graphType: "Scatter2D", xAxis: ["gc_content"], yAxis: ["pct_q30"],
    colorBy: "Library", title: "Q30 vs GC content, coloured by library" });
  panel("qcReads", { graphType: "Bar", graphOrientation: "vertical", xAxis: ["total_reads"],
    colorBy: "Batch", title: "Total reads per sample (flag the short ones)" });
</script>

Live result

Drag a selection box across the bad cluster in the mapping-vs-duplication panel — the other panels restrict to the same samples so you can read their contamination, library and depth.

The cross-filter is one shared broadcastGroup — no framework, no event wiring. Each panel stays a portable data + config spec.

Why “reproducible”

The same specs reproduce the dashboard from R, Python, or a web page, against the same QC table.

Next

]]> JavaScript CanvasXpress dashboard bioinformatics visualization https://neuhausi.github.io/canvasxpress-blog/posts/js/linked-dashboards-in-javascript/ Sat, 31 Oct 2026 04:00:00 GMT Oncoprints (mutation landscapes) in JavaScript with CanvasXpress Isaac Neuhaus https://neuhausi.github.io/canvasxpress-blog/posts/js/oncoprint-in-javascript/ An oncoprint is the standard way to show a mutation landscape: genes down one axis, tumours along the other, each cell stacking the alterations that gene carries in that sample — copy-number amplification/deletion plus mutation type. Building one in the browser from scratch is a lot of SVG and sorting logic. CanvasXpress is a JavaScript library at heart, so it’s a Heatmap with overlay matrices.

Load the library

<link href="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@73.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@73.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.min.js"></script>

The markup and the spec

The base matrix is data; same-shaped data2 (copy number) and data3 (mutation) are the overlays, each cell a string like "Amplification", "Missense", or "".

<canvas id="onco" width="820" height="440"></canvas>
<script>
  var genes = ["TP53","KRAS","PIK3CA","PTEN","EGFR","BRAF","APC","RB1","NF1","MYC","CDKN2A","ARID1A"],
      samples = [], CNA = ["Amplification","Deletion"], MUT = ["Missense","Nonsense","Truncating"];
  for (var i = 0; i < 28; i++) samples.push("T" + (i + 1 < 10 ? "0" : "") + (i + 1));
  function pick(a) { return a[Math.floor(Math.random() * a.length)]; }

  var base = [], cna = [], mut = [];
  genes.forEach(function (g, gi) {
    var rate = Math.max(0.05, 0.5 * (1 - gi / genes.length)), b = [], c = [], m = [];
    samples.forEach(function () {
      b.push(Math.round((Math.random() * 4 - 2) * 100) / 100);
      c.push(Math.random() < rate * 0.5 ? pick(CNA) : "");
      m.push(Math.random() < rate ? pick(MUT) : "");
    });
    base.push(b); cna.push(c); mut.push(m);
  });

  var data = { y: { vars: genes, smps: samples, data: base, data2: cna, data3: mut } };
  var config = { graphType: "Heatmap", oncoprintCNA: "data2", oncoprintMUT: "data3",
                 overlaysThickness: 100, xAxis: samples,
                 title: "Mutation landscape: 12 genes across 28 tumours" };

  new CanvasXpress("onco", data, config);
</script>

Live result

canvasXpress sorts the waterfall for you and shows the alteration frequency per row. Hover a cell to read the exact alteration; swap the overlays for your own MAF / CNA calls.

Why “reproducible”

The base matrix, the overlays and the config are the figure — one portable JSON spec that renders the same from R, Python, or a web page.

Next

]]> JavaScript CanvasXpress oncoprint bioinformatics visualization https://neuhausi.github.io/canvasxpress-blog/posts/js/oncoprint-in-javascript/ Wed, 28 Oct 2026 04:00:00 GMT Circular (Circos-style) multi-track plots in JavaScript with CanvasXpress Isaac Neuhaus https://neuhausi.github.io/canvasxpress-blog/posts/js/circos-plots-in-javascript/ A circular (Circos-style) plot wraps a genome — or any ordered set of segments — into a ring, stacks several data tracks around it, and draws ribbons for relationships between positions. Building one in the browser by hand is serious trigonometry. CanvasXpress is a JavaScript library at heart, so it’s a tracks × segments matrix plus a config.

Load the library

<link href="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@73.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@73.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.min.js"></script>

The markup and the spec

Rows are the tracks you draw, columns are the positions around the ring; Region segments the ring, and circularConnections is a list of [colour, from, to] ribbons.

<canvas id="circ" width="560" height="560"></canvas>
<script>
  var segments = [], tracks = ["Expression", "Methylation", "CopyNumber", "Density"],
      cols = ["rgb(220,40,40)", "rgb(40,120,220)", "rgb(40,160,60)", "rgb(240,150,20)"];
  for (var i = 0; i < 80; i++) segments.push("s" + (i + 1));
  function pick(a) { return a[Math.floor(Math.random() * a.length)]; }

  var data_m = tracks.map(function () {
    return segments.map(function () { return Math.round((Math.random() * 4 - 2) * 100) / 100; });
  });
  var region = segments.map(function (_, i) { return "chr" + (Math.floor(i / 20) + 1); });
  var conns = [];
  for (var c = 0; c < 18; c++) conns.push([pick(cols), pick(segments), pick(segments)]);

  var data = { y: { vars: tracks, smps: segments, data: data_m }, x: { Region: region } };
  var config = {
    graphType: "Circular",
    circularConnections: conns,
    circularTrackGraphType: ["bar", "heatmap", "line", "dot"],
    circularTrackGraphWeight: [30, 20, 25, 25],
    circularTrackName: [1, 2, 3, 4],
    segregateSamplesBy: ["Region"],
    title: "Circos-style multi-track plot with connections"
  };

  new CanvasXpress("circ", data, config);
</script>

Live result

Each ring is one track; the inner ribbons are the connections. Hover a segment to read its values; swap the matrix and ribbons for your own genomic tracks and interactions.

Why “reproducible”

The matrix, the connections and the config are the figure — one portable JSON spec that renders the same from R, Python, or a web page.

Next

]]> JavaScript CanvasXpress circos bioinformatics visualization https://neuhausi.github.io/canvasxpress-blog/posts/js/circos-plots-in-javascript/ Sun, 25 Oct 2026 04:00:00 GMT Choropleth maps in JavaScript with CanvasXpress Isaac Neuhaus https://neuhausi.github.io/canvasxpress-blog/posts/js/choropleth-maps-in-javascript/ A choropleth shades each region by a value — emissions, incidence, turnout, income. It is the most common map in data analysis and the easiest to get subtly wrong: most “my map is all one colour” complaints are not rendering bugs but scale bugs. CanvasXpress does the join and the colouring inside the render, so in the browser you pass one value per region and a topoJSON of boundaries and get an interactive, reproducible figure — and with the right colour scale it stays vivid on exactly the kind of heavy-tailed data that flattens naive maps.

First, the trap: colour encodes a rate, not a count

A choropleth fills an area, and area is a size channel your eye cannot help reading. Shade regions by a raw count — total cases, total emissions, total sales — and big, populous regions light up simply because they are big and populous. You have drawn a population map with extra steps. The fix is almost always to map a rate or density (per capita, per 100k); reserve raw counts for a proportional-symbol map, where a sized bubble carries the count honestly.

Load the library

<link href="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@71.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@71.3.0/inst/htmlwidgets/lib/canvasXpress/canvasXpress.min.js"></script>

The markup and the spec

The columns (smps) are the regions — they match the map by name — and the single row (vars) is the variable you colour by: CO₂ emissions per country for 2018. We fetch a prepared table and a small annotation table (continent, ISO code), parse the tab-separated text, and hand the matrix to CanvasXpress. The two choices that make this map work are in the colour scale: a seven-stop viridis colorSpectrum, and colorSpectrumBreaksMethod: "quantile", which puts an equal number of countries in every colour class — on skewed data that guarantee is what keeps all seven colours on the map.

<canvas id="co2quant" width="760" height="520"></canvas>
<script>
  var DATA = "https://www.canvasxpress.org/data/r/cX-CO2-dat.txt";
  var SMP  = "https://www.canvasxpress.org/data/r/cX-CO2-smp.txt";

  // split a tab-separated file into a list of cell-arrays (one per row)
  function rows(text) {
    return text.trim().split("\n").map(function (line) { return line.split("\t"); });
  }

  Promise.all([fetch(DATA).then(function (r) { return r.text(); }),
               fetch(SMP ).then(function (r) { return r.text(); })])
    .then(function (texts) {
      var d = rows(texts[0]);                      // [header, ["CO2", v1, v2, ...]]
      var countries = d[0].slice(1);               // header, minus the empty corner cell
      var values    = d[1].slice(1).map(Number);   // the CO2 values

      var s = rows(texts[1]);                       // header + one row per country
      var col = {};                                 // header name -> column index
      s[0].forEach(function (name, i) { col[name] = i; });
      var byCountry = {};
      s.slice(1).forEach(function (r) { byCountry[r[0]] = r; });
      var continent = countries.map(function (c) { return byCountry[c][col["Continent"] + 1]; });

      var data = {
        y: { vars: ["CO2"], smps: countries, data: [values] },
        x: { Continent: continent }
      };
      var config = {
        graphType: "Map",
        colorBy: "CO2",
        topoJSON: "https://www.canvasxpress.org/data/maps/WORLD.json",
        mapId: "co2Quantile",
        colorSpectrum: ["#440154", "#443983", "#31688e", "#21918c",
                        "#35b779", "#90d743", "#fde725"],
        colorSpectrumBreaksMethod: "quantile",
        mapColor: "#d9dde3",
        mapOutlineColor: "#ffffff",
        legendPosition: "bottom",
        title: "CO2 emissions per country (2018)",
        subtitle: "Seven quantile classes: each colour holds about 28 of 198 countries"
      };
      new CanvasXpress("co2quant", data, config);
    });
</script>

Live result

Every band of the ramp is doing work: the darkest purples are the smallest emitters, the yellows the largest, and the legend’s break values tell you the class edges are data-driven, not evenly spaced. Hover any country for its name, continent and value.

Why not just a plain linear ramp?

Because the data is heavy-tailed — a few countries emit thousands of megatonnes while most emit almost nothing. On a linear scale, 195 of these 198 countries fall into the bottom fifth of the range, so a continuous ramp paints nearly the whole world one pale tone and spends its colour on two or three outliers. See for yourself — same data, default scale:

This is the single most common choropleth failure. The cure is classing:

  • colorSpectrumBreaksMethod: "quantile" — equal counts per class. Every colour is used, by construction. The right default for skewed data and for “which regions rank high/low” questions.
  • colorSpectrumBreaksMethod: "jenks" — natural breaks that minimise within-class variance. Best when the data has genuine clusters with gaps between them; on smoothly heavy-tailed data like this it piles almost everything into the bottom class, so check the legend before you trust it.
  • Three to seven classes is the usable range — beyond that, readers cannot match colours to the legend.

Choose the palette on purpose

The palette is the scale’s grammar, not decoration:

  • Sequential (dark → light of ordered hues, like viridis above) for a quantity that only goes up: counts, rates, concentrations.

  • Diverging (two hues meeting at a neutral midpoint) when values are meaningful above and below a reference: change vs. last year, difference from a target, a signed index. Use a three-colour colorSpectrum and pin the midpoint:

    colorBy: "Change",
colorSpectrum: ["#2166ac", "#f7f7f7", "#b2182b"],  // blue - neutral - red
colorSpectrumZeroValue: 0                           // value mapped to the middle colour

    Never use a diverging palette for a purely positive quantity — the neutral midpoint invents a “normal” the data does not have. Viridis and the ColorBrewer ramps are colour-blind-safe and perceptually ordered; a rainbow ramp is neither. Keep the same scale across small multiples so maps stay comparable.

Beyond the world map

  • Other boundaries. Point topoJSON at any shape file — US states, a country’s provinces, counties, custom districts. The join key is just the shape name.
  • Projection. mapProjection: "albers" (equal-area) or "mercator". Equal-area projections matter for choropleths: Mercator inflates high latitudes and exaggerates their visual weight.
  • Categorical maps. Point colorBy at a categorical field for a qualitative choropleth with a discrete legend.
  • Polish. legendNumberFormat formats the ticks, legendInside floats the legend over ocean, showMapLabels draws region names (best on few-region maps), mapColor sets the no-data fill so missing reads as missing, and decorations drops labelled markers on cities.

The whole figure — data, boundaries, classing rule and palette — is one portable spec you can re-render from R or Python.

Next

]]> JavaScript CanvasXpress maps choropleth visualization https://neuhausi.github.io/canvasxpress-blog/posts/js/choropleth-maps-in-javascript/ Thu, 08 Oct 2026 04:00:00 GMT Sankey / alluvial diagrams in JavaScript with CanvasXpress Isaac Neuhaus https://neuhausi.github.io/canvasxpress-blog/posts/js/sankey-diagrams-in-javascript/ A Sankey (or alluvial) diagram shows how a quantity flows through a sequence of categorical stages — patients moving from a cohort, to a treatment, to an outcome. The width of each stream is the magnitude. CanvasXpress is a JavaScript library at heart, so in the browser it’s just a data object and a config.

Load the library

<link href="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@69.6.1/inst/htmlwidgets/lib/canvasXpress/canvasXpress.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@69.6.1/inst/htmlwidgets/lib/canvasXpress/canvasXpress.min.js"></script>

The markup and the spec

Each row is one path through the stages; the value (Freq) is the single variable, and the stages are sample annotations (x). sankeyAxes lists the stages in order.

<canvas id="sankey" width="700" height="500"></canvas>
<script>
  var cohorts = ["Cohort A", "Cohort B"],
      treats  = ["Drug 1", "Drug 2", "Placebo"],
      outcomes = ["Response", "Stable", "Progression"];

  var Cohort = [], Treatment = [], Outcome = [], Freq = [];
  cohorts.forEach(function (co) {
    treats.forEach(function (tr) {
      outcomes.forEach(function (ou) {
        var base = ou === "Response" ? 40 : ou === "Stable" ? 25 : 15;
        if (tr === "Placebo" && ou === "Response") base = 12;   // placebo responds less
        Cohort.push(co); Treatment.push(tr); Outcome.push(ou);
        Freq.push(base + Math.floor(Math.random() * 16));
      });
    });
  });

  var ids = Freq.map(function (_, i) { return "r" + (i + 1); });

  var data = {
    y: { vars: ["Freq"], smps: ids, data: [Freq] },
    x: { Cohort: Cohort, Treatment: Treatment, Outcome: Outcome }
  };

  var config = {
    graphType: "Sankey",
    sankeyAxes: ["Cohort", "Treatment", "Outcome"],
    xAxis: ["Freq"],
    colorBy: "Outcome",
    sankeyType: "proportional",
    graphOrientation: "horizontal",
    title: "Patient flow: cohort to treatment to outcome"
  };

  new CanvasXpress("sankey", data, config);
</script>

Live result

Hover any stream to see the count; the widths are proportional to the frequency. sankeyType can also be "aligned" (classic alluvial) or "equal".

Why “reproducible”

The data+config is the figure — one portable JSON spec that renders the same from R, Python, or a web page.

Next

]]> JavaScript CanvasXpress sankey visualization https://neuhausi.github.io/canvasxpress-blog/posts/js/sankey-diagrams-in-javascript/ Mon, 28 Sep 2026 04:00:00 GMT Violin and half (split) violin plots in JavaScript with CanvasXpress Isaac Neuhaus https://neuhausi.github.io/canvasxpress-blog/posts/js/violin-plots-in-javascript/ A violin plot shows the full shape of a distribution instead of collapsing it to a box’s quartiles. And a split (half) violin puts one condition on each half so you can compare two groups at the same position. CanvasXpress is a JavaScript library at heart, so in the browser it’s just a data object and a config.

Load the library

<link href="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@69.6.1/inst/htmlwidgets/lib/canvasXpress/canvasXpress.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@69.6.1/inst/htmlwidgets/lib/canvasXpress/canvasXpress.min.js"></script>

The markup and the spec

A violin is a Boxplot graph with the violin turned on. One measured variable (value) × N observations, with the grouping columns as sample annotations (x). For the split violin, group by both factors, colour by condition, and set violinSide: "split".

<canvas id="violin" width="650" height="500"></canvas>
<canvas id="violinSplit" width="650" height="500"></canvas>
<script>
  // standard normal via Box–Muller
  function gauss() {
    var u = 0, v = 0;
    while (u === 0) u = Math.random();
    while (v === 0) v = Math.random();
    return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
  }

  var doses = ["Low", "Medium", "High"], conds = ["Control", "Treated"];
  var mus = { Low: 6, Medium: 8, High: 10 };
  var value = [], Dose = [], Condition = [];
  doses.forEach(function (d) {
    conds.forEach(function (co) {
      var mu = mus[d] + (co === "Treated" ? 1.5 : 0);
      for (var i = 0; i < 40; i++) {
        value.push(Math.round((mu + 1.2 * gauss()) * 100) / 100);
        Dose.push(d); Condition.push(co);
      }
    });
  });
  var ids = value.map(function (_, i) { return "o" + (i + 1); });

  var data = { y: { vars: ["value"], smps: ids, data: [value] },
               x: { Dose: Dose, Condition: Condition } };

  // full violin
  new CanvasXpress("violin", data, {
    graphType: "Boxplot", showViolinBoxplot: true, violinScale: "area",
    groupingFactors: ["Dose"], xAxis: ["value"], smpTitle: "Dose",
    title: "Distribution of value by dose"
  });

  // split (half) violin comparing conditions
  new CanvasXpress("violinSplit", data, {
    graphType: "Boxplot", showViolinBoxplot: true, violinScale: "area",
    groupingFactors: ["Dose", "Condition"], colorBy: "Condition",
    violinSide: "split", violinTrim: false, xAxis: ["value"], smpTitle: "Dose",
    title: "Control vs Treated — split violin by dose"
  });
</script>

Live result

Hover to read the density and summary stats. violinSide can also be "lt" or "rb" for a one-sided half violin.

Why “reproducible”

The data+config is the figure — one portable JSON spec that renders the same from R, Python, or a web page.

Next

]]> JavaScript CanvasXpress violin visualization https://neuhausi.github.io/canvasxpress-blog/posts/js/violin-plots-in-javascript/ Sun, 27 Sep 2026 04:00:00 GMT Interactive volcano plots in JavaScript with CanvasXpress Isaac Neuhaus https://neuhausi.github.io/canvasxpress-blog/posts/js/volcano-plots-in-javascript/ A volcano plot puts log fold change on x, statistical significance on y, and pushes the interesting genes into the top corners. CanvasXpress is a JavaScript library at heart, so in the browser there’s no wrapper at all — you give a <canvas> a data object and a config, and you get an interactive, reproducible figure. The same spec renders identically from R and Python too.

Load the library

Drop one script tag (and the stylesheet) on your page. Here we pin to a released version on a CDN:

<link href="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@69.6.1/inst/htmlwidgets/lib/canvasXpress/canvasXpress.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@69.6.1/inst/htmlwidgets/lib/canvasXpress/canvasXpress.min.js"></script>

The markup and the spec

Give the page a canvas, then build the data (a value matrix plus annotations) and a config, and call new CanvasXpress(...):

<canvas id="volcano" width="650" height="500"></canvas>
<script>
  // Normal-distribution helpers (no stats library needed in the browser)
  function gauss() {                        // standard normal via Box–Muller
    var u = 0, v = 0;
    while (u === 0) u = Math.random();
    while (v === 0) v = Math.random();
    return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
  }
  function normCdf(x) {                      // standard normal CDF via an erf approximation
    var s = x < 0 ? -1 : 1, ax = Math.abs(x) / Math.SQRT2;
    var t = 1 / (1 + 0.3275911 * ax);
    var y = 1 - (((((1.061405429 * t - 1.453152027) * t + 1.421413741) * t - 0.284496736) * t + 0.254829592) * t) * Math.exp(-ax * ax);
    return 0.5 * (1 + s * y);
  }

  // Simulate a realistic volcano: most genes unchanged, a minority differentially
  // expressed; significance follows effect size / standard error. Genes are the
  // variables (rows); each row holds [logFC, -log-pVal].
  var genes = [], rows = [], group = [], fc = [];
  for (var i = 0; i < 1000; i++) {
    var de = Math.random() < 0.12;                          // ~12% truly changed
    var sgn = Math.random() < 0.5 ? -1 : 1;
    var effect = de ? sgn * (0.8 + 0.9 * Math.random()) : 0;
    var se = 0.22 + 0.5 * Math.random();                    // per-gene standard error
    var f = effect + se * gauss();                          // observed log2FC
    var praw = 2 * (1 - normCdf(Math.abs(f / se)));         // z-test p-value
    var p = Math.min(-Math.log(Math.max(praw, 1e-16)) / Math.LN10, 16);
    genes.push("Gene" + (i + 1));
    rows.push([Math.round(f * 1000) / 1000, Math.round(p * 1000) / 1000]);
    group.push(f > 1 && p > 1.3 ? "Increased" : f < -1 && p > 1.3 ? "Decreased" : "NoChange");
    fc.push(Math.round(Math.pow(2, Math.abs(f)) * 100) / 100);
  }

  var data = {
    y: { vars: genes, smps: ["logFC", "-log-pVal"], data: rows },
    z: { Group: group, FC: fc }
  };

  var config = {
    graphType: "Scatter2D",
    title: "Publication-ready volcano plot",
    xAxis: ["logFC"], yAxis: ["-log-pVal"],
    xAxisTitle: "log2 fold change", yAxisTitle: "-log10 p-value",
    colorBy: "Group",
    colorKey: { Group: { Increased: "rgba(197,27,38,0.75)",
                         Decreased: "rgba(33,102,172,0.75)",
                         NoChange:  "rgba(150,150,150,0.35)" } },
    sizeBy: "FC", sizes: [3, 6, 9, 12, 15],
    showDecorations: true,
    decorations: { line: [
      { color: "rgba(120,120,120,0.8)", width: 1, x: 1 },
      { color: "rgba(120,120,120,0.8)", width: 1, x: -1 },
      { color: "rgba(120,120,120,0.8)", width: 1, y: 1.301 }
    ] }
  };

  new CanvasXpress("volcano", data, config);
</script>

Live result

Here’s exactly that code, running on this page:

Hover a point for its gene and values, drag to zoom, or use the toolbar to filter by regulation group. The dashed guides mark the ±1 log2FC and p = 0.05 cutoffs.

Why “reproducible”

The data and config above are the figure — one portable JSON specification. Save it and the identical plot renders from the R (canvasXpress) and Python (canvasxpress) packages, and it can be validated against a published schema and re-rendered later, so a figure can be regenerated and audited rather than just viewed.

Next

]]> JavaScript CanvasXpress bioinformatics visualization https://neuhausi.github.io/canvasxpress-blog/posts/js/volcano-plots-in-javascript/ Tue, 22 Sep 2026 04:00:00 GMT Kaplan–Meier survival curves in JavaScript with CanvasXpress Isaac Neuhaus https://neuhausi.github.io/canvasxpress-blog/posts/js/kaplan-meier-in-javascript/ Kaplan–Meier curves summarize time-to-event data: the step-down survival probability over time, usually split by a group like treatment arm. CanvasXpress computes the survival steps for you — you give it a time column and a censoring column — so in the browser it’s just a data object and a config. The result is interactive and reproducible.

Load the library

<link href="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@69.6.1/inst/htmlwidgets/lib/canvasXpress/canvasXpress.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@69.6.1/inst/htmlwidgets/lib/canvasXpress/canvasXpress.min.js"></script>

The markup and the spec

Subjects are the variables (rows); each row holds [Time, Time-Censor] (1 = censored, 0 = event). The arm rides along as a variable annotation. The key is graphType: "KaplanMeier" and passing both columns to xAxis.

<canvas id="km" width="650" height="500"></canvas>
<script>
  var subj = [], rows = [], arm = [];
  for (var i = 0; i < 200; i++) {
    var a = Math.random() < 0.5 ? "Treatment" : "Control";
    var base = a === "Treatment" ? 60 : 40;                 // treatment survives longer
    var time = Math.round(-base * Math.log(Math.random()) * 10) / 10;  // exponential
    var cens = Math.random() < 0.3 ? 1 : 0;                 // 1 = censored, 0 = event
    subj.push("Subj" + (i + 1));
    rows.push([time, cens]);
    arm.push(a);
  }

  var data = {
    y: { vars: subj, smps: ["Time", "Time-Censor"], data: rows },
    z: { Arm: arm }
  };

  var config = {
    graphType: "KaplanMeier",
    xAxis: ["Time", "Time-Censor"],
    colorBy: "Arm",
    title: "Overall survival by treatment arm",
    xAxisTitle: "Time (weeks)", yAxisTitle: "Probability of survival",
    invertCensored: true,                 // draw censoring ticks
    showKMConfidenceIntervals: false
  };

  new CanvasXpress("km", data, config);
</script>

Live result

Hover any step for the time and survival probability; the tick marks are censored subjects. CanvasXpress derives the survival curve from the raw table, so you never precompute the steps — and the same spec re-renders the identical curve from R or Python.

A common gotcha

The survival transform only fires with graphType: "KaplanMeier". A bare "Scatter2D" gives a raw scatter of the censor values instead — survival probability is computed by the engine, not a column in your data.

Next

]]> JavaScript CanvasXpress survival bioinformatics visualization https://neuhausi.github.io/canvasxpress-blog/posts/js/kaplan-meier-in-javascript/ Mon, 21 Sep 2026 04:00:00 GMT Clustered heatmaps in JavaScript with CanvasXpress Isaac Neuhaus https://neuhausi.github.io/canvasxpress-blog/posts/js/clustered-heatmap-in-javascript/ The clustered heatmap is the default way to look at an expression matrix: rows and columns reordered by similarity, dendrograms on the margins, and sample metadata alongside. CanvasXpress clusters inside the render, so in the browser you pass a plain matrix and get an interactive, reproducible figure.

Load the library

<link href="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@69.6.1/inst/htmlwidgets/lib/canvasXpress/canvasXpress.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/neuhausi/canvasXpress@69.6.1/inst/htmlwidgets/lib/canvasXpress/canvasXpress.min.js"></script>

The markup and the spec

Genes are the variables (rows), samples the columns; the matrix goes in as data, and the sample annotation becomes a track over the columns. samplesClustered / variablesClustered turn on hierarchical clustering with dendrograms.

<canvas id="heatmap" width="650" height="550"></canvas>
<script>
  // standard normal via Box–Muller
  function gauss() {
    var u = 0, v = 0;
    while (u === 0) u = Math.random();
    while (v === 0) v = Math.random();
    return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
  }

  var ng = 40, ns = 30, genes = [], samps = [], cond = [], matrix = [];
  for (var j = 0; j < ns; j++) { samps.push("S" + (j + 1)); cond.push(j < ns / 2 ? "Tumor" : "Normal"); }
  for (var i = 0; i < ng; i++) {
    genes.push("Gene" + (i + 1));
    var row = [];
    for (var k = 0; k < ns; k++) {
      var val = gauss();
      if (i < 20 && cond[k] === "Tumor")   val += 2;        // first block up in Tumor
      if (i >= 20 && cond[k] === "Normal") val += 2;        // second block up in Normal
      row.push(Math.round(val * 1000) / 1000);
    }
    matrix.push(row);
  }

  var data = {
    y: { vars: genes, smps: samps, data: matrix },
    x: { Condition: cond }
  };

  var config = {
    graphType: "Heatmap",
    samplesClustered: true, variablesClustered: true,
    colorSpectrum: ["navy", "white", "firebrick3"],
    showSmpDendrogram: true, showVarDendrogram: true,
    title: "Clustered expression heatmap"
  };

  new CanvasXpress("heatmap", data, config);
</script>

Live result

Rows and columns are reordered by similarity, the dendrograms show the clustering, and the samples separate cleanly by condition. Hover a cell for its gene, sample and value; the whole figure is one portable spec you can store, validate and re-render from R or Python.

Next

]]> JavaScript CanvasXpress heatmap bioinformatics visualization https://neuhausi.github.io/canvasxpress-blog/posts/js/clustered-heatmap-in-javascript/ Sun, 20 Sep 2026 04:00:00 GMT