I have 2 functions in Observable which each create a plot. I designed it so that when I click the squares in the legend of the first plot, it filters which data is displayed (there are 7 lines for each. of 7 object_types). That works! But I want to also filter the second plot based on the selections made in that first plot. The 2 functions use different datasets for their plots.
I combine the 2 functions with this code:
{
const { svg , selectedObjectsMap } = objects_over_time()
const vis_right = plot_objects(selectedObjectsMap);
return html`<div style="display: flex">${svg}${vis_right}</div>`;
}
The first function returns an svg element and a map which maps each of 7 object_types to either true or false.
The plot_objects() function is called with this true/false map as an argument whenever a square is clicked in the first plot.
function onclick(event, d) {
const selectedObjectType = d3.select(event.target).datum();
const isSelected = selected.get(selectedObjectType);
const square = d3.select(this);
square.attr('fill', isSelected ? 'white' : color(selectedObjectType));
selected.set(selectedObjectType, !isSelected);
const filteredData = new Map();
objects_grouped.forEach((group, object_type) => {
const includeObject = selected.get(object_type);
const filteredGroup = includeObject ? group.filter(obj => obj.location === selectedLocation) : [];
filteredData.set(object_type, filteredGroup);
});
svg.selectAll('#plot-line').remove();
drawLines(filteredData);
plot_objects(selected);
}
The plot_objects() function has a function updateVisualization() which draws new datapoints based on the filtering. This works for the location filter which is done in a separate drop-down menu. I’ve printed console.log statements and I can see it has the right data and filters it properly, but it just doesn’t update the data points.
function updateVisualization(location) {
svg.selectAll('#data-points').remove()
const filteredData = all_data.filter(d => d.location === location &&
selectedObjects.has(d.object_type) &&
selectedObjects.get(d.object_type));
console.log("plot_objects:", filteredData)
drawPoints(filteredData)
updateBackground(location)
}
updateVisualization(selectedLocation)
function drawPoints(data) {
console.log("in drawPoints function:", data)
svg.selectAll('rect:not(#tooltip-rect):not(#image)')
.data(data)
.join('rect')
.attr('id', 'data-points')
.attr('x', d => x_rv(d.x))
.attr('y', d => y_rv(d.y))
.attr('fill', d => color(d.object_type))
.attr('opacity', 0.5)
.attr('width', d => sizeScaleW(d.object_type))
.attr('height', d => sizeScaleH(d.object_type))
.on('mouseenter', handleMouseEnter)
.on('mouseleave', handleMouseLeave)
.raise();
}
Changing svg.selectAll('#data-points').remove() to d3.selectAll('#data-points').remove() in the updateVisualization function did finally remove all of the data points, but none are added back in. So it seems like all of the functions are being called as expected, but I must be missing a step to make the changes actually show up in the plot.
