d3 categorical axis with selection by timelyportfolio

Built with blockbuilder.org and d3v3

In a parallel coordinates chart, brushing a categorical axis does not seem intuitive. What if instead of brushing we offer a more traditional selection mechanism of clicking for selection? Then through some combination of parallel coordinates outside filter and possibly some changes around this line we can filter in a way that a user might enjoy more.

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <h4>Categorical Axis with Click Selection</h4>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 400)
    
    // just make up some categorical data
    var data = ["green", "purple", "blue", "gray"]
    
    // ordinal scale for our data
		var sc_y = d3.scale.ordinal()
    	.domain(data)
    	.rangeRoundBands([0,320])
    
    var ax_y = d3.svg.axis()
    	.scale(sc_y)
    	.orient("left")
    
    var g_ax = svg.append("g")
    	.attr("transform", "translate(100,20)")
    	.call(ax_y)
    
    g_ax.selectAll(".domain").style("display", "none")
    
    g_ax
    	.selectAll(".tick")
      .classed("selected", true)
    	.append("rect")
    	.attr("height", sc_y.rangeBand())
    	.attr("y", -sc_y.rangeBand()/2)
    	.attr("width", 10)
    	.attr("fill", function(d){return d})
    
    g_ax.selectAll(".tick")
      .style("opacity", 1)
    	.on("click", toggle)
    
    function toggle() {
      var selected = !d3.select(this).classed("selected")
      d3.select(this).classed("selected", selected)
      d3.select(this)
      	.style("opacity", selected ? 1 : 0.4)
    }
    
  </script>
</body>