Public
Edited
Jun 8, 2023
1 star
fake_clin_data = [{avisit: 1, cluster: "Category_1", Cluster: 1, size: 3, flags: [
{name: 'critfl', value: 'blah blah ULN > 20'},
{name: 'critfl', value: 'blah blah ULN > 20'},
{name: 'critfl', value: 'blah blah ULN > 20'}
]},
{avisit: 2, cluster: "Category_1", Cluster: 1, name: 'flag1', size: 1},
{avisit: 3, cluster: "Category_1", Cluster: 1, name: 'flag1', size: 3},
{avisit: 3, cluster: "Category_2", Cluster: 2, name: 'flag3', size: 5},
{avisit: 3, cluster: "Category_3", Cluster: 3, name: 'flag3', size: 1},
{avisit: 3, cluster: "Category_4", Cluster: 4, name: 'flag1', size: 3},
{avisit: 3, cluster: "Category_5", Cluster: 5, name: 'flag3', size: 5},
{avisit: 3, cluster: "Category_6", Cluster: 6, name: 'flag3', size: 1},
{avisit: 4, cluster: "Category_1", Cluster: 1, name: 'flag1', size: 3},
{avisit: 4, cluster: "Category_2", Cluster: 2, name: 'flag3', size: 5},
{avisit: 4, cluster: "Category_3", Cluster: 3, name: 'flag3', size: 1},
{avisit: 5, cluster: "Category_1", Cluster: 1, name: 'flag1', size: 3},
{avisit: 6, cluster: "Category_1", Cluster: 1, name: 'flag1', size: 3},
{avisit: 6, cluster: "Category_2", Cluster: 2, name: 'flag3', size: 5},
{avisit: 6, cluster: "Category_3", Cluster: 3, name: 'flag3', size: 1},
{avisit: 7, cluster: "Category_1", Cluster: 1, name: 'flag1', size: 3},
{avisit: 8, cluster: "Category_1", Cluster: 1, name: 'flag1', size: 3},
{avisit: 9, cluster: "Category_7", Cluster: 7, name: 'flag3', size: 5},
{avisit: 10, cluster: "Category_6", Cluster: 6, name: 'flag3', size: 1}
]
pharmatest = wordCloud(fake_clin_data, xScale, xAxis1, 'name', 'Cluster', 'avisit')
wordCloud = (data, xScale, xAxis, word, type, year) => {
if (type===undefined) {
data.map(d => d.Cluster = 0)
}
const radius = 5
const padding = 1;
// create the SVG container
let svg = d3.select(html`<svg></svg>`)
.attr('width', width)
.attr('height', height)
// Jiwan TODO: explain all of this code to me
const simulation = d3.forceSimulation(data)
.force("x", d3.forceX(d => xScale(d[year])).strength(3))
.force("y", d3.forceY(d => yScale(d[type])).strength(0.6))
.force("collide", d3.forceCollide().radius(d=> rScale(+d['size']) + padding).iterations(1))
//.restart() ?
// create a layer or group
let gBubble = svg
.selectAll('gBubble')
.data(data)
.enter()
.append('g')
.classed('gBubble', true)
.attr('id',d => d[word]);
gBubble
.append('circle')
.attr('r', d => rScale(+d['size']))
.attr('fill', d => colors(+d[type]))
.attr('stroke', d => colors[+d[type]])
.attr('stroke-width', 1)
.on('mousemove', nodeMouseOver)
.on('mouseout', nodeMouseOut );
simulation.nodes(data)
// what iss the tick evt?
.on('tick', () => {
gBubble
.attr('transform', d => 'translate('+ (d.x) +','+ (d.y)+')');
})
//axis
svg.append("g").call(xAxis);
;
return Object.assign(svg.node());
}
xScale = d3.scaleLinear().domain(d3.extent(fake_clin_data.map(d => d.avisit))).range([0+ margin.l, width - margin.r])
colors = d3.scaleOrdinal().domain(d3.extent(fake_clin_data, d => +d.cluster)).range(["#648FFF", "#785EF0", "#DC267F", "#FE6100", "#FFB000"]);
/*x1 = d3.scaleLinear()
.domain(d3.extent(fake_clin_data.map(d => d.avisit)))
.range([margin.l, width - margin.r]) */
yScale = d3.scaleLinear()
.domain(d3.extent(fake_clin_data, d => +d.Cluster))
.range([(height - margin.t - margin.b)/2, (height - margin.t - margin.b)/2]);
xAxis1 = g => g
.attr("transform", `translate(0,${height - margin.b})`)
.call(d3.axisBottom(xScale).ticks(10))
rScale = d3.scaleSqrt()
.domain(d3.extent(fake_clin_data.map(d => d.size)))
.range([15,30]);
toolTip = d3.select("body").append("div").attr("class", "toolTip")
nodeMouseOver = (event, d) => {
// Get the toolTip, update the position, and append the inner html depending on your content
// I tend to use template literal to more easily output variables.
toolTip.style("left", event.pageX + 18 + "px")
.style("top", event.pageY + 18 + "px")
.style("display", "block")
.html(
`
${d.flags}
`
);
// Optional cursor change on target
d3.select(event.target).style("cursor", "pointer");
// Optional highlight effects on target
d3.select(event.target)
.transition()
.attr('stroke', 'black')
.attr('stroke-width', 3);
}
nodeMouseOut = (event, d) => {
// Hide tooltip on mouse out
toolTip.style("display", "none"); // Hide toolTip
// Optional cursor change removed
d3.select(event.target).style("cursor", "default");
// Optional highlight removed
d3.select(event.target)
.transition()
.attr('stroke', '#fff')
.attr('stroke-width', 0);
}
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.
