Filter data by interactive legend on same svg plot

Community Help
1

Hello,

I am attempting to filter a dataset based on a clickable legend embedded in the same svg plot as the graph, I can create the graph, interactive legend and import the data all successfully but when I try to combine the legend with the graph the interactivity fails to filter the data.

I currently have it working by having the interactive legend in one cell and then calling the filter in the graph cell but I want the legend to be on the graph and not above it in another cell.

Link to notebook: Interactive colour legend for provinces / quackas / Observable

The horizontal legend will filter correctly, but the legend on the plot while interactive does not filter and I cannot call the array within the same cell it is created.

Any help as to how to best implement this would be greatly appreciated!

1 Like
2

Can I delete this post? I don’t see the option…

I have moved onto another way of implementing this based off the Introduction to D3, Part 2 / UW Interactive Data Lab / Observable notebook;
but like the above implementation I can get close to what I want but not quite there. Learning d3 is proving more difficult than I had anticipated.

My new approach is failing in the SelectionModel for the graph always evaluating to false with the line:

//help…
selmodel.on(‘change.chart’, () => {
counties.attr(‘fill’, d => selmodel.has(d.prname) ? color(d.prname) : ‘#ccc’); //selection model never evaluates
//to true…
});

being where I think the issue lies but I can’t pin down.

The notebook is here: Interactive colour legend for provinces / quackas / Observable

I am trying to use a Canadian covid 19 dataset instead of the gapminder one in the tutorial notebook.

Again, ANY help on this would be greatly appreciated…

3

This response is based on your first post. Judging from your second post, you’re closer but not quite there yet. The approach described here is quite general, though.

If you have two outputs that you’d like to display as one, you can always combine them into a single DIV and use CSS to display them however you like. Here’s an example using a fork of your first notebook:

Personally, I rarely do this in a notebook, preferring to do so when I embed the output in a webpage using the Javascript runtime. The idea is the same, though.

1 Like
4

Thank you for this! I knew there had to be some way of combining multiple viewof in a container but I am so new to d3 and javascript I didn’t even know where to begin looking for a solution.

1 Like