corrHeatmap(correlations2,d3.range(correlations2[0].length), "navy")
correlations2 = matrix.map( (y,e)=> matrix.map((x,i)=> corr(matrix[e],matrix[i])))
// Import the d3-tip library
d3tip = require('d3-tip')
function corrHeatmap(matrix,idx, color){
// index of the rows based on cluster hierarchy
const svg = d3
.create("svg")
const color_scale = d3.scaleLinear()
.domain([-0.2,1])
.range(['#fff', `${color}`])
let y_scale = d3.scaleBand()
.domain(idx)
.range([ 0,200])
let x_scale = d3.scaleBand()
.domain(idx)
.range([0, 400])
const g = svg
.attr('width', 400 )
.attr('height', 200 )
.append('g')
.attr('transform', `translate(0, 0)`)
// .attr('transform', `translate(20, 0)`)
//text y axis
g.append('g')
.call(d3.axisLeft(y_scale))
const gPoints = g.append("g").attr("class", "gPoints");
const tooltip = d3tip()
.style('border', 'solid 3px black')
.style('background-color', 'white')
.style('border-radius', '10px')
.style('float', 'left')
.style('font-family', 'monospace')
.html((event, d) => `
<div style='float: right'>
corr: ${d.value.toFixed(2)} <br/>
samp:${idx[d.n]}, samp:${idx[d.t]}
</div>`)
// Apply tooltip to our SVG
svg.call(tooltip)
gPoints.selectAll()
.data(buildData(matrix))
.enter()
.append('rect')
.attr('x', (d) => x_scale(d.t) )
// .attr('x', (d) => x_scale(d.t) + 20)
.attr('y', (d) => y_scale(d.n))
.attr('width', 400/matrix[0].length)
.attr('height', 200/matrix.length)
.attr('fill', (d) => color_scale(d.value))
.on('mouseover', tooltip.show)
// Hide the tooltip when "mouseout"
.on('mouseout', tooltip.hide)
return svg.node()
}
buildData = (matrix) => {
let array = []
d3.range(matrix.length).map((d) => {
const o = d3.range(matrix[0].length).map((t) => ({
t: t,
n: d,
value: matrix[d][t]
}))
array = [...array,...o]
})
return array
}
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.
