| license: mit |
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.
| <!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> |
