Public
Edited
Mar 23, 2023
chart = {
const svg = DOM.svg();
svg.setAttribute("viewBox", "-80 -50 700 350");
const profile1MinMax = d3.extent(data, d=> Math.abs(d[p]));
const profile1ColorScale = d3.scaleThreshold().domain([0]).range([colorNeg, colorPos])
const profile1Scale= d3.scaleLinear().domain(profile1MinMax).range([5,40])
// const d=data[5]
const bubbleData= _.map(data, d=>{
const prColor = profile1ColorScale(d[p]);
const size = profile1Scale(Math.abs(d[p]));
const label = d.Attribute
const shapValue= d[p]
const profileNum = p
console.log(size, prColor, label)
return{
prColor,
shapValue,
size,
label,
profileNum,
}
});
console.log(bubbleData)
const bubbles= d3.select(svg)
.selectAll('g')
.data(bubbleData)
.enter()
.append('g')
.attr('transform', (d,i) =>
`translate(${(i % 5)*bubbleSize}, ${Math.floor(i/5)*bubbleSize})`)
bubbles.append('circle')
.attr('r', d=>d.size)
.attr('cx', 0)
.attr('cy', 0)
.attr('fill', d=>d.prColor)
bubbles.append("text")
.attr("x",0)
.attr("y", 50)
.attr('font-size', 10)
.attr('text-anchor', 'middle')
.text(function(d) { return d.label; })
return svg
}
tooltip = {
chart;
const tooltip = d3
.select("body")
.append("div")
.attr("class", "svg-tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
.text("Shapvalue!!!");
// select all circles
d3.selectAll("circle")
.on("mouseover", function(d) {
// change the selection style
const shapV = d.toElement.__data__.shapValue
const profNum = d.toElement.__data__.profileNum
const attribute = d.toElement.__data__.label
d3.select(this)
.attr("opacity", 0.6)
// make the tooltip visible and update its text
tooltip
.style("visibility", "visible")
.text(`${profNum} \n ${attribute} \n Shapvalue = ${shapV.toFixed(2)} ` )
})
.on("mousemove", function(d) {
return tooltip.style("top", (d.pageY-10)+"px").style("left",(d.pageX+10)+"px");
})
.on("mouseout", function() {
// change the selection style
d3.select(this).attr("opacity", 1);
tooltip.style("visibility", "hidden");
});
}
shapvalues_transposed@9.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
df_profile_names.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
bubbleSize =100
profileArray= ["profile0", "profile1", "profile2", "profile3","profile4", "profile5", "profile6", "profile7","profile8", "profile9", "profile10", "profile11", "profile12", "profile13", "profile14", "profile15"]
shapvalues.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
profileArray
_= require('lodash')
d3 = require('d3');
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.
