StackedBar

A dc.js stacked bar chart, that I am having trouble wrapping my head around how to make filterable.

by spacarar

HTML

<script src="https://unpkg.com/crossfilter2@1.4.8/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.5/dc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.5/dc.css">
<div class="chart-container">
  <div id="changeset-edits">
  </div>
  <div id="changeset-km-edits">
  </div>
  <div id="changeset-hashtags">
  </div>
</div>

CSS

.chart-container {
  margin: 20px;
}
.dc-chart rect.stack-deselected {
  opacity: 0.2;
}

JavaScript

// changesets can be any or all of add/mod/delete
var changesets = [
  {id: 86086947, created_at: "2020-06-02T15:24:22", num_changes: 47, first_name: "Matthew", last_name: "Bonner-Moss", user_id: 52, hashtags: ["#Kaart"], total_add: 0, total_mod: 1, total_del: 0, buildings_add: 1, buildings_mod: 0, buildings_del: 0, pois_add: 0, pois_mod: 0, pois_del: 0, roads_add: 0, roads_mod: 1, roads_del: 0, road_km_add: 0, road_km_mod: 0.0044, road_km_del: 0, waterways_add: 0, waterways_mod: 0, waterways_del: 0, waterway_km_add: 0, waterway_km_mod: 0, waterway_km_del: 0},
	{id: 86087166, created_at: "2020-06-02T15:31:37", num_changes: 152, first_name: "Dain", last_name: "Maher", user_id: 221, hashtags: ["#Kaart"], total_add: 0, total_mod: 3, total_del: 0, buildings_add: 0, buildings_mod: 0, buildings_del: 0, pois_add: 0, pois_mod: 0, pois_del: 0, roads_add: 0, roads_mod: 3, roads_del: 0, road_km_add: 0, road_km_mod: 0.0161, road_km_del: 0, waterways_add: 0, waterways_mod: 0, waterways_del: 0, waterway_km_add: 0, waterway_km_mod: 0, waterway_km_del: 0},
	{id: 86091831, created_at: "2020-06-02T17:40:52", num_changes: 8, first_name: "Tim", last_name: "McGreer", user_id: 111, hashtags: ["#Kaart"], total_add: 0, total_mod: 1, total_del: 0, buildings_add: 0, buildings_mod: 0, buildings_del: 0, pois_add: 0, pois_mod: 0, pois_del: 0, roads_add: 0, roads_mod: 0, roads_del: 0, road_km_add: 0, road_km_mod: 0, road_km_del: 0, waterways_add: 0, waterways_mod: 0, waterways_del: 0, waterway_km_add: 0, waterway_km_mod: 0, waterway_km_del: 0},
	{id: 86093748, created_at: "2020-06-02T18:42:03", num_changes: 121, first_name: "Lucas", last_name: "Bingham", user_id: 42, hashtags: ["#Kaart"], total_add: 0, total_mod: 1, total_del: 0, buildings_add: 11, buildings_mod: 0, buildings_del: 0, pois_add: 0, pois_mod: 0, pois_del: 0, roads_add: 0, roads_mod: 1, roads_del: 0, road_km_add: 0, road_km_mod: 0.1023, road_km_del: 0, waterways_add: 0, waterways_mod: 0, waterways_del: 0, waterway_km_add: 0,...