Bubble chart and rowchart are not sync, dc.js - reduce

Question

There is a simple bubble chart (dimension by level1, level2) and row chart(dimension by level_1)
see
https://codepen.io/shakraz/pen/dyYXxJy
var houseDim = ndx.dimension(d=>[d.district, d.name, d.price, d.flat_rate, d.building_rate]);
var districtDim = ndx.dimension(d=>[d.district])
When i click on row chart i expect to see only filtered bubbles, right? But it doesn't work.
But it works vice versa, clicking on bubble filters rowchart, why is that?
For sure it somehow related with reduce function.
Thank you for any advance.

Answer 1

It's a better practice to keep any measures in the value part of the crossfilter group, and leave only the index in the key.
Crossfilter will bin the groups according to the group and dimension key functions. Your instinct was correct that you should be able to use d.name because you want a bubble per row of your data, and d.name is a unique key.
var houseDim = ndx.dimension(d=>d.name);
Here is one simple way to copy each row into a group value:
var houseGroup=houseDim.group().reduce(
(p, d) => ({...p, ...d, count: (d.count || 0) + 1}), // add
(p, d) => ({...p, count: p.count - 1}), // remove
() => {} // init
);
When adding a row, it will copy the data from the row, adding a field called count. Since the keys are unique, the count will be either 1 or 0, depending whether the row is filtered in or out.
Now we can use descriptive field names instead of indexing arrays in the code:
.keyAccessor(function (p) {
return p.value.flat_rate;
})
.valueAccessor(function (p) {
return p.value.building_rate;
})
// ...
.title(function (p) {
return p.key + "\n"
+ "Индекс квартиры: " + p.value.flat_rate + "\n"
+ "Индекс дома: " + p.value.building_rate + " \n"
+ "Район: " + p.value.district + "\n"
+ "Цена: " + p.value.price
})
We also need to visually encode being excluded, by using d.value.count in some of the accessors. I like to send both radius and opacity to zero, but leaving the radius and only using opacity has a calm effect too.
.radiusValueAccessor(function (p) {
console.log('radius', p)
return p.value.count * priceScale(p.value.price);
})
// .colors(colorScale)
// .colorAccessor(function(p) {return p.value.district})
.colorCalculator(p => p.value.count ? colorScale(p.value.district) : 'rgba(0,0,0,0)')
The bubble chart doesn't expose opacity in its public api, but this colorCalculator trick sends opacity to zero when count is 0, and invokes the ordinary colorScale on the value otherwise.
I also had to point to correct dc.css URL in order to get selection behavior to work.
<link rel="stylesheet" href="https://unpkg.com/dc/dist/style/dc.css">
Working fork of your codepen