Public
Edited
Sep 27, 2023
samples = {
let vars = Object.keys(data[0])
vars.shift()
return vars
}
genes = data.map(d => d["Gene"])
// format data to an array of objects, each object containing the gene name, the sample name and the value of one expression
data_formatted = {
let list = []
for (let i=0; i<data.length; i++) {
let obj = data[i]
for (let j=0; j<samples.length; j++) {
let sample = samples[j]
list.push({Gene: obj.Gene, Sample: sample, value: obj[sample]})
}
}
return list
}
// create a heatmap with the genes on one axis and the samples on the others. The values are displayed by different colors
heatmap = {
const svg = d3.create('svg')
.attr('width', svgSetting.width)
.attr('height', svgSetting.height)
var x = d3.scaleBand()
.range([svgSetting.margin.left, svgSetting.width - svgSetting.margin.right])
.domain(genes)
svg.append("g")
.attr("transform", `translate(0,${svgSetting.height - svgSetting.margin.bottom})`)
.call(d3.axisBottom(x))
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
var y = d3.scaleBand()
.range([ svgSetting.height - svgSetting.margin.bottom, svgSetting.margin.top ])
.domain(samples)
svg.append("g")
.attr("transform", `translate(${svgSetting.margin.left},0)`)
.call(d3.axisLeft(y));
let extent = d3.extent(data_formatted, (d => d['value']))
var myColor = d3.scaleLinear()
.range(["blue", "white", "red"])
.domain([extent[0], 0, extent[1]])
svg.selectAll()
.data(data_formatted)
.enter()
.append("rect")
.attr("x", function(d) { return x(d.Gene) })
.attr("y", function(d, i) { return y(d.Sample) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
return svg.node()
}
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.
