A basic scatterplot matrix allows for brushing of data points in a scatter plot and linking of corresponding subsets of the queried data. The VisDock toolkit has been integrated into the scatterpplot matrix example built with D3.js (found here) by M. Bostock. Using selection tools, brushing can be done in various shapes, ellipses, polygons, and lassos, to query a multi-variate scatterplot dataset.
Last active
January 3, 2016 01:29
-
-
Save VisDockHub/8389891 to your computer and use it in GitHub Desktop.
VisDock Scatterplot Matrix
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| sepal length | sepal width | petal length | petal width | species | |
|---|---|---|---|---|---|
| 5.1 | 3.5 | 1.4 | 0.2 | setosa | |
| 4.9 | 3.0 | 1.4 | 0.2 | setosa | |
| 4.7 | 3.2 | 1.3 | 0.2 | setosa | |
| 4.6 | 3.1 | 1.5 | 0.2 | setosa | |
| 5.0 | 3.6 | 1.4 | 0.2 | setosa | |
| 5.4 | 3.9 | 1.7 | 0.4 | setosa | |
| 4.6 | 3.4 | 1.4 | 0.3 | setosa | |
| 5.0 | 3.4 | 1.5 | 0.2 | setosa | |
| 4.4 | 2.9 | 1.4 | 0.2 | setosa | |
| 4.9 | 3.1 | 1.5 | 0.1 | setosa | |
| 5.4 | 3.7 | 1.5 | 0.2 | setosa | |
| 4.8 | 3.4 | 1.6 | 0.2 | setosa | |
| 4.8 | 3.0 | 1.4 | 0.1 | setosa | |
| 4.3 | 3.0 | 1.1 | 0.1 | setosa | |
| 5.8 | 4.0 | 1.2 | 0.2 | setosa | |
| 5.7 | 4.4 | 1.5 | 0.4 | setosa | |
| 5.4 | 3.9 | 1.3 | 0.4 | setosa | |
| 5.1 | 3.5 | 1.4 | 0.3 | setosa | |
| 5.7 | 3.8 | 1.7 | 0.3 | setosa | |
| 5.1 | 3.8 | 1.5 | 0.3 | setosa | |
| 5.4 | 3.4 | 1.7 | 0.2 | setosa | |
| 5.1 | 3.7 | 1.5 | 0.4 | setosa | |
| 4.6 | 3.6 | 1.0 | 0.2 | setosa | |
| 5.1 | 3.3 | 1.7 | 0.5 | setosa | |
| 4.8 | 3.4 | 1.9 | 0.2 | setosa | |
| 5.0 | 3.0 | 1.6 | 0.2 | setosa | |
| 5.0 | 3.4 | 1.6 | 0.4 | setosa | |
| 5.2 | 3.5 | 1.5 | 0.2 | setosa | |
| 5.2 | 3.4 | 1.4 | 0.2 | setosa | |
| 4.7 | 3.2 | 1.6 | 0.2 | setosa | |
| 4.8 | 3.1 | 1.6 | 0.2 | setosa | |
| 5.4 | 3.4 | 1.5 | 0.4 | setosa | |
| 5.2 | 4.1 | 1.5 | 0.1 | setosa | |
| 5.5 | 4.2 | 1.4 | 0.2 | setosa | |
| 4.9 | 3.1 | 1.5 | 0.2 | setosa | |
| 5.0 | 3.2 | 1.2 | 0.2 | setosa | |
| 5.5 | 3.5 | 1.3 | 0.2 | setosa | |
| 4.9 | 3.6 | 1.4 | 0.1 | setosa | |
| 4.4 | 3.0 | 1.3 | 0.2 | setosa | |
| 5.1 | 3.4 | 1.5 | 0.2 | setosa | |
| 5.0 | 3.5 | 1.3 | 0.3 | setosa | |
| 4.5 | 2.3 | 1.3 | 0.3 | setosa | |
| 4.4 | 3.2 | 1.3 | 0.2 | setosa | |
| 5.0 | 3.5 | 1.6 | 0.6 | setosa | |
| 5.1 | 3.8 | 1.9 | 0.4 | setosa | |
| 4.8 | 3.0 | 1.4 | 0.3 | setosa | |
| 5.1 | 3.8 | 1.6 | 0.2 | setosa | |
| 4.6 | 3.2 | 1.4 | 0.2 | setosa | |
| 5.3 | 3.7 | 1.5 | 0.2 | setosa | |
| 5.0 | 3.3 | 1.4 | 0.2 | setosa | |
| 7.0 | 3.2 | 4.7 | 1.4 | versicolor | |
| 6.4 | 3.2 | 4.5 | 1.5 | versicolor | |
| 6.9 | 3.1 | 4.9 | 1.5 | versicolor | |
| 5.5 | 2.3 | 4.0 | 1.3 | versicolor | |
| 6.5 | 2.8 | 4.6 | 1.5 | versicolor | |
| 5.7 | 2.8 | 4.5 | 1.3 | versicolor | |
| 6.3 | 3.3 | 4.7 | 1.6 | versicolor | |
| 4.9 | 2.4 | 3.3 | 1.0 | versicolor | |
| 6.6 | 2.9 | 4.6 | 1.3 | versicolor | |
| 5.2 | 2.7 | 3.9 | 1.4 | versicolor | |
| 5.0 | 2.0 | 3.5 | 1.0 | versicolor | |
| 5.9 | 3.0 | 4.2 | 1.5 | versicolor | |
| 6.0 | 2.2 | 4.0 | 1.0 | versicolor | |
| 6.1 | 2.9 | 4.7 | 1.4 | versicolor | |
| 5.6 | 2.9 | 3.6 | 1.3 | versicolor | |
| 6.7 | 3.1 | 4.4 | 1.4 | versicolor | |
| 5.6 | 3.0 | 4.5 | 1.5 | versicolor | |
| 5.8 | 2.7 | 4.1 | 1.0 | versicolor | |
| 6.2 | 2.2 | 4.5 | 1.5 | versicolor | |
| 5.6 | 2.5 | 3.9 | 1.1 | versicolor | |
| 5.9 | 3.2 | 4.8 | 1.8 | versicolor | |
| 6.1 | 2.8 | 4.0 | 1.3 | versicolor | |
| 6.3 | 2.5 | 4.9 | 1.5 | versicolor | |
| 6.1 | 2.8 | 4.7 | 1.2 | versicolor | |
| 6.4 | 2.9 | 4.3 | 1.3 | versicolor | |
| 6.6 | 3.0 | 4.4 | 1.4 | versicolor | |
| 6.8 | 2.8 | 4.8 | 1.4 | versicolor | |
| 6.7 | 3.0 | 5.0 | 1.7 | versicolor | |
| 6.0 | 2.9 | 4.5 | 1.5 | versicolor | |
| 5.7 | 2.6 | 3.5 | 1.0 | versicolor | |
| 5.5 | 2.4 | 3.8 | 1.1 | versicolor | |
| 5.5 | 2.4 | 3.7 | 1.0 | versicolor | |
| 5.8 | 2.7 | 3.9 | 1.2 | versicolor | |
| 6.0 | 2.7 | 5.1 | 1.6 | versicolor | |
| 5.4 | 3.0 | 4.5 | 1.5 | versicolor | |
| 6.0 | 3.4 | 4.5 | 1.6 | versicolor | |
| 6.7 | 3.1 | 4.7 | 1.5 | versicolor | |
| 6.3 | 2.3 | 4.4 | 1.3 | versicolor | |
| 5.6 | 3.0 | 4.1 | 1.3 | versicolor | |
| 5.5 | 2.5 | 4.0 | 1.3 | versicolor | |
| 5.5 | 2.6 | 4.4 | 1.2 | versicolor | |
| 6.1 | 3.0 | 4.6 | 1.4 | versicolor | |
| 5.8 | 2.6 | 4.0 | 1.2 | versicolor | |
| 5.0 | 2.3 | 3.3 | 1.0 | versicolor | |
| 5.6 | 2.7 | 4.2 | 1.3 | versicolor | |
| 5.7 | 3.0 | 4.2 | 1.2 | versicolor | |
| 5.7 | 2.9 | 4.2 | 1.3 | versicolor | |
| 6.2 | 2.9 | 4.3 | 1.3 | versicolor | |
| 5.1 | 2.5 | 3.0 | 1.1 | versicolor | |
| 5.7 | 2.8 | 4.1 | 1.3 | versicolor | |
| 6.3 | 3.3 | 6.0 | 2.5 | virginica | |
| 5.8 | 2.7 | 5.1 | 1.9 | virginica | |
| 7.1 | 3.0 | 5.9 | 2.1 | virginica | |
| 6.3 | 2.9 | 5.6 | 1.8 | virginica | |
| 6.5 | 3.0 | 5.8 | 2.2 | virginica | |
| 7.6 | 3.0 | 6.6 | 2.1 | virginica | |
| 4.9 | 2.5 | 4.5 | 1.7 | virginica | |
| 7.3 | 2.9 | 6.3 | 1.8 | virginica | |
| 6.7 | 2.5 | 5.8 | 1.8 | virginica | |
| 7.2 | 3.6 | 6.1 | 2.5 | virginica | |
| 6.5 | 3.2 | 5.1 | 2.0 | virginica | |
| 6.4 | 2.7 | 5.3 | 1.9 | virginica | |
| 6.8 | 3.0 | 5.5 | 2.1 | virginica | |
| 5.7 | 2.5 | 5.0 | 2.0 | virginica | |
| 5.8 | 2.8 | 5.1 | 2.4 | virginica | |
| 6.4 | 3.2 | 5.3 | 2.3 | virginica | |
| 6.5 | 3.0 | 5.5 | 1.8 | virginica | |
| 7.7 | 3.8 | 6.7 | 2.2 | virginica | |
| 7.7 | 2.6 | 6.9 | 2.3 | virginica | |
| 6.0 | 2.2 | 5.0 | 1.5 | virginica | |
| 6.9 | 3.2 | 5.7 | 2.3 | virginica | |
| 5.6 | 2.8 | 4.9 | 2.0 | virginica | |
| 7.7 | 2.8 | 6.7 | 2.0 | virginica | |
| 6.3 | 2.7 | 4.9 | 1.8 | virginica | |
| 6.7 | 3.3 | 5.7 | 2.1 | virginica | |
| 7.2 | 3.2 | 6.0 | 1.8 | virginica | |
| 6.2 | 2.8 | 4.8 | 1.8 | virginica | |
| 6.1 | 3.0 | 4.9 | 1.8 | virginica | |
| 6.4 | 2.8 | 5.6 | 2.1 | virginica | |
| 7.2 | 3.0 | 5.8 | 1.6 | virginica | |
| 7.4 | 2.8 | 6.1 | 1.9 | virginica | |
| 7.9 | 3.8 | 6.4 | 2.0 | virginica | |
| 6.4 | 2.8 | 5.6 | 2.2 | virginica | |
| 6.3 | 2.8 | 5.1 | 1.5 | virginica | |
| 6.1 | 2.6 | 5.6 | 1.4 | virginica | |
| 7.7 | 3.0 | 6.1 | 2.3 | virginica | |
| 6.3 | 3.4 | 5.6 | 2.4 | virginica | |
| 6.4 | 3.1 | 5.5 | 1.8 | virginica | |
| 6.0 | 3.0 | 4.8 | 1.8 | virginica | |
| 6.9 | 3.1 | 5.4 | 2.1 | virginica | |
| 6.7 | 3.1 | 5.6 | 2.4 | virginica | |
| 6.9 | 3.1 | 5.1 | 2.3 | virginica | |
| 5.8 | 2.7 | 5.1 | 1.9 | virginica | |
| 6.8 | 3.2 | 5.9 | 2.3 | virginica | |
| 6.7 | 3.3 | 5.7 | 2.5 | virginica | |
| 6.7 | 3.0 | 5.2 | 2.3 | virginica | |
| 6.3 | 2.5 | 5.0 | 1.9 | virginica | |
| 6.5 | 3.0 | 5.2 | 2.0 | virginica | |
| 6.2 | 3.4 | 5.4 | 2.3 | virginica | |
| 5.9 | 3.0 | 5.1 | 1.8 | virginica |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| svg { | |
| font: 10px sans-serif; | |
| Padding: 10px; | |
| } | |
| .axis, | |
| .frame { | |
| shape-rendering: crispEdges; | |
| } | |
| .axis line { | |
| stroke: #ddd; | |
| } | |
| .axis path { | |
| display: none; | |
| } | |
| .frame { | |
| fill: none; | |
| stroke: #aaa; | |
| } | |
| .Circ { | |
| fill-opacity: .7; | |
| } | |
| </style> | |
| <body> | |
| <link href="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js"></script> | |
| <script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js"></script> | |
| <script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js"></script> | |
| <script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js"></script> | |
| <script> | |
| var width = 960, | |
| size = 150, | |
| Padding = 19.5; | |
| VisDock.init("body", {width: 1000, height: 900}); | |
| var viewport = VisDock.getViewport(); | |
| var circle_query = []; | |
| var x = d3.scale.linear() | |
| .range([Padding / 2, size - Padding / 2]); | |
| var y = d3.scale.linear() | |
| .range([size - Padding / 2, Padding / 2]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .ticks(5); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(5); | |
| var color = d3.scale.category10(); | |
| d3.csv("flowers.csv", function(error, data) { | |
| VisDock.startChrome(); | |
| var domainByTrait = {}, | |
| traits = d3.keys(data[0]).filter(function(d) { return d !== "species"; }), | |
| n = traits.length; | |
| traits.forEach(function(trait) { | |
| domainByTrait[trait] = d3.extent(data, function(d) { return d[trait]; }); | |
| }); | |
| xAxis.tickSize(size * n); | |
| yAxis.tickSize(-size * n); | |
| var svg = viewport; | |
| svg.selectAll(".x.axis") | |
| .data(traits) | |
| .enter().append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; }) | |
| .each(function(d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); }); | |
| svg.selectAll(".y.axis") | |
| .data(traits) | |
| .enter().append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; }) | |
| .each(function(d) { y.domain(domainByTrait[d]); d3.select(this).call(yAxis); }); | |
| var cell = svg.selectAll(".cell") | |
| .data(cross(traits, traits)) | |
| .enter().append("g") | |
| .attr("class", "cell") | |
| .each(plot); | |
| // Titles for the diagonal. | |
| cell.filter(function(d) { return d.i === d.j; }).append("text") | |
| .attr("x", Padding) | |
| .attr("y", Padding) | |
| .attr("dy", ".71em") | |
| .attr("transform", function(d) { | |
| return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; }) | |
| .text(function(d) { return d.x; }); | |
| function plot(p) { | |
| VisDock.startChrome(); | |
| var cell = d3.select(this); | |
| x.domain(domainByTrait[p.x]); | |
| y.domain(domainByTrait[p.y]); | |
| cell.append("rect") | |
| .attr("class", "frame") | |
| .attr("x", Padding / 2) | |
| .attr("y", Padding / 2) | |
| .attr("width", size - Padding) | |
| .attr("height", size - Padding) | |
| .attr("transform", function(d) { | |
| return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; }); | |
| cell.selectAll("circle") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "Circ") | |
| .attr("cx", function(d) { return (n - p.i - 1) * size + x(d[p.x]); }) | |
| .attr("cy", function(d) { return p.j * size+y(d[p.y]); }) | |
| .attr("r", 3) | |
| .style("fill", function(d) { return color(d.species); }); | |
| VisDock.finishChrome(); | |
| } | |
| function cross(a, b) { | |
| var c = [], n = a.length, m = b.length, i, j; | |
| for (i = -1; ++i < n;) for (j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j}); | |
| return c; | |
| } | |
| //d3.select(self.frameElement).style("height", size * n + Padding + 20 + "px"); | |
| VisDock.finishChrome(); | |
| }); | |
| VisDock.eventHandler = { | |
| getHitsPolygon: function(points, inclusive){ | |
| var shapebound = new createPolygon(points); | |
| return selectionLoop(shapebound, inclusive); | |
| }, | |
| getHitsEllipse: function(points, inclusive){ | |
| var shapebound = new createEllipse(points); | |
| return selectionLoop(shapebound, inclusive); | |
| }, | |
| getHitsLine: function(points, inclusive){ | |
| alert("Please use a different selection tool") | |
| }, | |
| setColor: function(hits){ | |
| var query = brushed(hits) | |
| for (var i = 0; i < query.length; i++){ | |
| VisDock.utils.addEllipseLayer(query[i], null, num - 1); | |
| } | |
| }, | |
| changeColor: function(color, query, index){ | |
| var visibility = VisDock.utils.getQueryVisibility(index); | |
| for (var i = 0; i < query.length; i++){ | |
| query[i].attr("style", "opacity:" + visibility + "; fill: " + color) | |
| } | |
| }, | |
| changeVisibility: function(vis, query, index){ | |
| var color = VisDock.utils.getQueryColor(index); | |
| for (var i = 0; i < query.length; i++){ | |
| query[i].attr("style", "opacity: " + vis + ";fill: " + color) | |
| } | |
| }, | |
| removeColor: function(hits, index){ | |
| for (var i = 0; i < hits.length; i++){ | |
| hits[i].remove(); | |
| } | |
| } | |
| } | |
| function selectionLoop(shapebound, inclusive){ | |
| var cells = d3.selectAll(".cell")[0] | |
| var hits = []; | |
| if (circle_query[num] == undefined) circle_query[num] = []; | |
| for (var i = 0; i < cells.length; i++){ | |
| for (var j = 1; j < cells[i].children.length; j++){ | |
| var circles = cells[i].children[j] | |
| var captured = shapebound.intersectEllipse([circles], inclusive) | |
| if (captured.length == 1){ | |
| hits.push(captured[0]) | |
| if (circle_query[num].indexOf(j) == -1) circle_query[num].push(j) | |
| } | |
| } | |
| } | |
| return hits; | |
| } | |
| function brushed(hits){ | |
| var cells = d3.selectAll(".cell")[0] | |
| var query = hits; | |
| if (circle_query[num-1] == undefined) circle_query[num-1]=[]; | |
| for (var i=0;i<cells.length;i++){ | |
| for (var j=1;j<cells[i].children.length;j++){ | |
| if (circle_query[num-1].length >= 1){ | |
| if (circle_query[num-1].indexOf(j) != -1){ | |
| query.push(cells[i].children[j]) | |
| } | |
| } | |
| } | |
| } | |
| return query; | |
| } | |
| BirdView.init(viewport, 1000, 900) | |
| d3.select(self.frameElement).style("width", "1000px") | |
| d3.select(self.frameElement).style("height", "900px") | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment