Published
Edited
Oct 21, 2021
Dot Plots in Table
plotcells = d3.selectAll(".table-plot").nodes()
//xAxisTicks = xScale.ticks(3)
xAxisRange = [d3.min(real_data.flat(), d => d.x), d3.max(real_data.flat(), d => d.x)]
xAxisTicks = [xAxisRange[0], (xAxisRange[0] + xAxisRange[1]) / 2, xAxisRange[1]]
xAxis = g => g
.attr("transform", "translate(" + margin.left + "," + 10 + ")")
.call(d3.axisTop(xScale)
.tickValues(xAxisTicks)
.tickFormat(d3.format(".2")))
create_dot_plot = {
// this works only if this cell runs after the markdown cell below!
d3.selectAll(".table-plot")
.html("")
.data(real_data)
.append("svg")
.attr("width", 200 + margin.left + margin.right)
.attr("height", 20 + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + 10 + ")")
.append("g")
.attr("stroke", "none")
.selectAll("circle")
.data((d) => d)
.join("circle")
.attr("cx", (d) => xScale(d.x))
.attr("cy", 0)
.attr("fill", (d) => colorScale(colorAccessor(d)))
.attr("r", 5)
.attr("opacity", "0.8")
.on('mousemove', nodeMouseOver)
.on('mouseout', nodeMouseOut );
}
{
d3.selectAll(".plot-title")
.append('svg')
//.attr("width", 800 + margin.left + margin.right)
.attr("height", 20 + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + 0 + "," + 10 + ")")
.append("g")
.call(xAxis)
}
toolTip = d3.select("body").append("div").attr("class", "toolTip")
function 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(`<strong>${d.group}:</strong> ${d.x}`);
// Optional cursor change on target
d3.select(event.target).style("cursor", "pointer");
}
function 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");
}
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>Plots<div class='plot-title' style="width:500px;"></div></th>
</tr>
<tr>
<td>1.04</td>
<td>1.02</td>
<td></td>
<td class="table-plot" style="width:500px;"></td>
</tr>
<tr>
<td>1.2</td>
<td>1.4</td>
<td>1.1</td>
<td class="table-plot" style="width:500px;"></td>
</tr>
<tr>
<td>1.01</td>
<td></td>
<td>1.12</td>
<td class="table-plot" style="width:500px;"></td>
</tr>
<tr>
<td></td>
<td>2</td>
<td></td>
<td class="table-plot" style="width:500px;"></td>
</tr>
<tr>
<td>1.1</td>
<td>1.5</td>
<td>1.12</td>
<td class="table-plot" style="width:500px;"></td>
</tr>
</table>
html`
<style>
.toolTip {
position: absolute;
display: none;
min-width: 30px;
max-width: 240px;
border-radius: 4px;
height: auto;
background: rgba(250,250,250, 0.9);
border: 1px solid #DDD;
padding: 4px 8px;
font-size: .85rem;
text-align: left;
z-index: 1000;
}
</style>
`
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.
