Public
Edited
May 20, 2021
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data3
Insert cell
sortByTaxon = function(taxon) {
console.log("taxon:");console.log(taxon);
//data3.map(function(d){
// //console.log("d:");console.log(d);
// return d.values.sort(function(a, b) { return b[taxon] - a[taxon]; });
//});
var sorted = data3.sort(function(a, b) { return b[taxon] - a[taxon]; });
chart.updateData(sorted);
}

Insert cell
xScale = d3.scaleBand()
.range([0, width - margin.right])
.round(false)
.paddingInner(0.1)
.paddingOuter(0.1)
.align(0.1);
Insert cell
yScale = d3.scaleLinear()
.rangeRound([height - margin.bottom, 0]);
Insert cell
zScale = d3.scaleOrdinal()
.range(fillColors);
Insert cell
margin = ({top: 30, right: 50, bottom: 80, left: 50});
Insert cell
height = 250
Insert cell
data = d3.tsvParse(await FileAttachment("otu_table_final_normalized_L6.txt").text())
Insert cell
Insert cell
data1 = computeTotalAndSort(data);
Insert cell
function computeTotalAndSort(data){
var keys = data.columns.slice(1);
var columns = data.columns.slice(0);

for(var key in data){
var curr_obj = data[key];
for (var i = 1, t = 0; i < columns.length; ++i){
t += curr_obj[columns[i]] = +curr_obj[columns[i]];
}
data[key]['total'] = t;
}
data.sort(function(a, b) { return b.total - a.total; });
return data;
}
Insert cell
md`We will only keep the most abundant 20 taxa for clarity sake - and also limitation of colors downstream`
Insert cell
data2 = data1.slice(0,20);
Insert cell
md`We then transform the data to make it compatible with the d3 bar chart syntax`
Insert cell
data3 = processDataForBarChart(data2)
Insert cell
md`Store taxa names (i.e. identifiers of each bar) in keys array`
Insert cell
keys = data3.columns.slice(1);
Insert cell
function processDataForBarChart(data){
// Get sample names and remove unwanted keys;
var sampleNames = Object.keys(data[0]);
sampleNames.splice( sampleNames.indexOf('Taxon'), 1 )
sampleNames.splice( sampleNames.indexOf('total'), 1 )

var data2 = new Array(sampleNames.length);
var taxa_list = {};
// loop per sampleNames.
for(var k=0; k<sampleNames.length; k++){
var currSample = sampleNames[k];
var newElement = {};
newElement['Sample'] = currSample;

for(var i=0; i<data.length; i++){
var abundance = ((data[i][currSample]) * 100 / 100).toFixed(2);
var taxon = data[i]['Taxon'];
taxa_list[taxon] = 1;
newElement[taxon] = abundance;
}
data2[k] = newElement;
}
taxa_list = Object.keys(taxa_list);
taxa_list.unshift("Taxon");
//console.log("taxa_list:");
//console.log(taxa_list);
data2['columns'] = taxa_list;
var columns = taxa_list;
// add total and columns
for(var key in data2){
if(key != 'columns'){
var curr_obj = data2[key];
for (var i = 1, t = 0; i < columns.length; ++i){
t += curr_obj[columns[i]] = +curr_obj[columns[i]];
}
data2[key]['total'] = t;
}
}
data2.sort(function(a, b) { return b.total - a.total; });
return data2;
}
Insert cell
fillColors = [
"#0000CD", "#00FF00", "#FF0000", "#808080", "#000000", "#B22222", "#DAA520",
"#DDA0DD", "#FF00FF", "#00FFFF", "#4682B4", "#E6E6FA", "#FF8C00", "#80008B", "#8FBC8F",
"#00BFFF", "#FFFF00", "#808000", "#FFCCCC", "#FFE5CC", "#FFFFCC", "#E5FFCC", "#CCFFCC"]
Insert cell
d3 = require("d3@6")
Insert cell
import {slider} from "@jashkenas/inputs"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more