30:T63c,{ const nTicks = (( dataSet === "Business (67)" ) ? 2 : 3 ); const format = ( x ) => (( dataSet === "Business (67)" ) ? x.toFixed( 0 ) : x ); const svg = d3 .create("svg") .attr("width", 740) .attr("viewBox", [0, 0, 740, 320]); svg .append("g") .call(d3.axisBottom(xs).tickSizeOuter( 0 ).ticks( nTicks ).tickFormat( format )) .attr("transform", `translate(0, 300)`); svg .append("g") .call(d3.axisLeft(ys).tickSizeOuter( 0 ).ticks( nTicks ).tickFormat( format )) .attr("transform", `translate(40, 0)`); svg .append("g") .call(d3.axisBottom(xs).tickSizeOuter( 0 ).ticks( nTicks ).tickFormat( format )) .attr("transform", `translate(400, 300)`); svg .append("g") .call(d3.axisLeft(ys).tickSizeOuter( 0 ).ticks( nTicks ).tickFormat( format )) .attr("transform", `translate(440, 0)`); svg .append("g") .attr("stroke", "black") .attr("fill", "none") .selectAll() .data(data) .join("path") .attr("transform", d => `translate(${xs(x(d))}, ${ys(y(d))})`) .attr("d", d => d3.symbol(zc(z(d))).size( size * size )()) .style( "opacity", 1 - transparency ) .style( "stroke-width", strokeWidth ) ; svg .append("g") .attr("stroke", "black") .attr("fill", "none") .selectAll() .data(data) .join("path") .attr("transform", d => `translate(${400 + xs(x(d))}, ${ys(y(d))})`) .attr("d", d => d3.symbol(zp(z(d))).size( size * size )()) .style( "opacity", 1 - transparency ) .style( "stroke-width", strokeWidth ) ; return svg.node(); }31:Tbe8,/* circle, plus, x, triangle, asterisk, square, diamond */ preSymbols = [ { name: "circle", draw: function(g, size) { if (size > 0) { const s = Math.sqrt(size / Math.PI); // radius g.arc(0, 0, s, 0, 2 * Math.PI); g.closePath(); } } }, { name: "plus", draw: function(g, size) { if (size > 0) { const r = Math.sqrt(size / Math.PI); // radius const s = Math.max(1.5, (r * Math.PI) / 2 - 0.25); // -0.25 accounts for center pixel. g.moveTo(-s, 0); g.lineTo(s, 0); g.closePath(); g.moveTo(0, s); g.lineTo(0, -s); g.closePath(); } } }, { name: "x", draw: function(g, size) { if (size > 0) { const r = Math.sqrt(size / Math.PI); // radius const s = (r * Math.PI) / 2 + 0.25; // +0.25 accounts for center pixel and line width. const t = Math.max(1, s / Math.SQRT2); g.moveTo(-t, -t); g.lineTo(t, t); g.closePath(); g.moveTo(-t, t); g.lineTo(t, -t); g.closePath(); } } }, { name: "triangle", draw: function(g, size) { if (size > 0) { const r = Math.sqrt(size / Math.PI); // radius const s = (r * Math.PI) / 3 + 0.5; // +0.5 accounts for overlap. const t = s * Math.sin(Math.PI / 6); const u = s * Math.cos(Math.PI / 6); g.moveTo(0, -s); g.lineTo(u, t); g.lineTo(-u, t); g.closePath(); } } }, { name: "asterisk", draw: function(g, size) { if (size > 0) { const r = Math.sqrt(size / Math.PI); // radius const s = Math.max(1.5, (r * Math.PI) / 3 + 0.5); // +0.5 accounts for overlap. const t = s * Math.sin(Math.PI / 6); const u = s * Math.cos(Math.PI / 6); g.moveTo(0, s); g.lineTo(0, -s); g.closePath(); g.moveTo(-u, -t); g.lineTo(u, t); g.closePath(); g.moveTo(-u, t); g.lineTo(u, -t); g.closePath(); } } }, { name: "square", draw: function(g, size) { if (size > 0) { const r = Math.sqrt(size / Math.PI); // radius const s = (r * Math.PI) / 4 + 0.25; // +0.25 accounts for overlap. g.moveTo(s, s); g.lineTo(s, -s); g.lineTo(-s, -s); g.lineTo(-s, s); g.closePath(); } } }, { name: "diamond", draw: function(g, size) { if (size > 0) { const r = Math.sqrt(size / Math.PI); // radius const s = (r * Math.PI) / (2 * Math.SQRT2) + 0.5; // +0.5 accounts for overlap. const t = 1 / (2 * Math.SQRT2); // t accounts for line width. g.moveTo(-t, -s - t); g.lineTo(s + t, t); g.closePath(); g.moveTo(s + t, -t); g.lineTo(-t, s + t); g.closePath(); g.moveTo(t, s + t); g.lineTo(-s - t, -t); g.closePath(); g.moveTo(-s - t, t); g.lineTo(t, -s - t); g.closePath(); } } } ]32:T4212,dataValues = { return { "Business (67)": [ [ "Pharma", 9844, 83100 ], [ "Pharma", 9422, 54100 ], [ "Pharma", 6747, 50816 ], [ "Pharma", 6698.4, 34400 ], [ "Pharma", 5903.7, 42100 ], [ "Pharma", 5453.5, 40929 ], [ "Pharma", 4272, 33000 ], [ "Pharma", 4175.6, 28200 ], [ "Pharma", 3243, 21300 ], [ "Pharma", 2916.3, 20100 ], [ "Pharma", 1198.3, 8527 ], [ "Pharma", 969.2, 3418 ], [ "Aerospace", 20276, 159200 ], [ "Aerospace", 19765.5, 201400 ], [ "Aerospace", 14995, 127926 ], [ "Aerospace", 12633.1, 108715 ], [ "Aerospace", 12021, 107100 ], [ "Aerospace", 10053.2, 102200 ], [ "Aerospace", 9932, 82500 ], [ "Aerospace", 7440.1, 58000 ], [ "Aerospace", 5814.3, 65500 ], [ "Aerospace", 5200, 41100 ], [ "Aerospace", 3558.8, 28900 ], [ "Aerospace", 2072.8, 17700 ], [ "Aerospace", 2001, 15100 ], [ "Aerospace", 1693, 11400 ], [ "Aerospace", 1666.1, 13700 ], [ "Aerospace", 1455.6, 10737 ], [ "Aerospace", 1047.7, 12000 ], [ "Aerospace", 801.8, 6424 ], [ "Oil", 86656, 104000 ], [ "Oil", 50976, 67900 ], [ "Oil", 32416, 37067 ], [ "Oil", 29443, 54826 ], [ "Oil", 24214, 53648 ], [ "Oil", 21703, 31338 ], [ "Oil", 17755, 53610 ], [ "Oil", 15905, 26600 ], [ "Oil", 12492, 21800 ], [ "Oil", 10417, 17286 ], [ "Oil", 9927, 21600 ], [ "Oil", 8685.6, 13232 ], [ "Oil", 8016.6, 37800 ], [ "Oil", 5589, 8740 ], [ "Oil", 4941.2, 3300 ], [ "Oil", 3122, 7942 ], [ "Oil", 3057.6, 3347 ], [ "Oil", 2750, 10700 ], [ "Oil", 2090.9, 4800 ], [ "Oil", 2018.7, 5994 ], [ "Oil", 1683.7, 4538 ], [ "Oil", 1440.5, 1680 ], [ "Oil", 1402.8, 5745 ], [ "Oil", 941.3, 1816 ], [ "Oil", 819.3, 5628 ], [ "Oil", 773.3, 1800 ], [ "Oil", 663.2, 560 ], [ "Soap", 21689, 79300 ], [ "Soap", 8113.8, 30567 ], [ "Soap", 5110.2, 24100 ], [ "Soap", 3395.9, 28400 ], [ "Soap", 1471.2, 5300 ], [ "Soap", 869.5, 4217 ], [ "Soap", 717.4, 5600 ], [ "Soap", 629.2, 2900 ], [ "Soap", 594.4, 5721 ], [ "Soap", 576.9, 4000 ] ], "Iris (150)": [ [ "versicolor", 7, 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, 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 ], [ "versicolor", 6.6, 2.9, 4.6, 1.3 ], [ "versicolor", 5.2, 2.7, 3.9, 1.4 ], [ "versicolor", 5, 2, 3.5, 1 ], [ "versicolor", 5.9, 3, 4.2, 1.5 ], [ "versicolor", 6, 2.2, 4, 1 ], [ "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, 4.5, 1.5 ], [ "versicolor", 5.8, 2.7, 4.1, 1 ], [ "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, 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, 4.4, 1.4 ], [ "versicolor", 6.8, 2.8, 4.8, 1.4 ], [ "versicolor", 6.7, 3, 5, 1.7 ], [ "versicolor", 6, 2.9, 4.5, 1.5 ], [ "versicolor", 5.7, 2.6, 3.5, 1 ], [ "versicolor", 5.5, 2.4, 3.8, 1.1 ], [ "versicolor", 5.5, 2.4, 3.7, 1 ], [ "versicolor", 5.8, 2.7, 3.9, 1.2 ], [ "versicolor", 6, 2.7, 5.1, 1.6 ], [ "versicolor", 5.4, 3, 4.5, 1.5 ], [ "versicolor", 6, 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, 4.1, 1.3 ], [ "versicolor", 5.5, 2.5, 4, 1.3 ], [ "versicolor", 5.5, 2.6, 4.4, 1.2 ], [ "versicolor", 6.1, 3, 4.6, 1.4 ], [ "versicolor", 5.8, 2.6, 4, 1.2 ], [ "versicolor", 5, 2.3, 3.3, 1 ], [ "versicolor", 5.6, 2.7, 4.2, 1.3 ], [ "versicolor", 5.7, 3, 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, 1.1 ], [ "versicolor", 5.7, 2.8, 4.1, 1.3 ], [ "virginica", 6.3, 3.3, 6, 2.5 ], [ "virginica", 5.8, 2.7, 5.1, 1.9 ], [ "virginica", 7.1, 3, 5.9, 2.1 ], [ "virginica", 6.3, 2.9, 5.6, 1.8 ], [ "virginica", 6.5, 3, 5.8, 2.2 ], [ "virginica", 7.6, 3, 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 ], [ "virginica", 6.4, 2.7, 5.3, 1.9 ], [ "virginica", 6.8, 3, 5.5, 2.1 ], [ "virginica", 5.7, 2.5, 5, 2 ], [ "virginica", 5.8, 2.8, 5.1, 2.4 ], [ "virginica", 6.4, 3.2, 5.3, 2.3 ], [ "virginica", 6.5, 3, 5.5, 1.8 ], [ "virginica", 7.7, 3.8, 6.7, 2.2 ], [ "virginica", 7.7, 2.6, 6.9, 2.3 ], [ "virginica", 6, 2.2, 5, 1.5 ], [ "virginica", 6.9, 3.2, 5.7, 2.3 ], [ "virginica", 5.6, 2.8, 4.9, 2 ], [ "virginica", 7.7, 2.8, 6.7, 2 ], [ "virginica", 6.3, 2.7, 4.9, 1.8 ], [ "virginica", 6.7, 3.3, 5.7, 2.1 ], [ "virginica", 7.2, 3.2, 6, 1.8 ], [ "virginica", 6.2, 2.8, 4.8, 1.8 ], [ "virginica", 6.1, 3, 4.9, 1.8 ], [ "virginica", 6.4, 2.8, 5.6, 2.1 ], [ "virginica", 7.2, 3, 5.8, 1.6 ], [ "virginica", 7.4, 2.8, 6.1, 1.9 ], [ "virginica", 7.9, 3.8, 6.4, 2 ], [ "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, 6.1, 2.3 ], [ "virginica", 6.3, 3.4, 5.6, 2.4 ], [ "virginica", 6.4, 3.1, 5.5, 1.8 ], [ "virginica", 6, 3, 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, 5.2, 2.3 ], [ "virginica", 6.3, 2.5, 5, 1.9 ], [ "virginica", 6.5, 3, 5.2, 2 ], [ "virginica", 6.2, 3.4, 5.4, 2.3 ], [ "virginica", 5.9, 3, 5.1, 1.8 ], [ "setosa", 5.1, 3.5, 1.4, 0.2 ], [ "setosa", 4.9, 3, 1.4, 0.2 ], [ "setosa", 4.7, 3.2, 1.3, 0.2 ], [ "setosa", 4.6, 3.1, 1.5, 0.2 ], [ "setosa", 5, 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, 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, 1.4, 0.1 ], [ "setosa", 4.3, 3, 1.1, 0.1 ], [ "setosa", 5.8, 4, 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.2 ], [ "setosa", 5.1, 3.3, 1.7, 0.5 ], [ "setosa", 4.8, 3.4, 1.9, 0.2 ], [ "setosa", 5, 3, 1.6, 0.2 ], [ "setosa", 5, 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, 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, 1.3, 0.2 ], [ "setosa", 5.1, 3.4, 1.5, 0.2 ], [ "setosa", 5, 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, 3.5, 1.6, 0.6 ], [ "setosa", 5.1, 3.8, 1.9, 0.4 ], [ "setosa", 4.8, 3, 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, 3.3, 1.4, 0.2 ] ], "Cells (300)": [ [ 1, -1.801, -2.277 ], [ 1, -1.576, -2.498 ], [ 1, -1.421, -2.865 ], [ 1, -1.604, -2.351 ], [ 1, -1.367, -2.439 ], [ 1, -1.517, -2.036 ], [ 1, -1.933, -2.025 ], [ 1, -1.792, -1.243 ], [ 1, -1.203, -2.191 ], [ 1, -0.872, -2.554 ], [ 1, -1.335, -1.799 ], [ 1, -1.268, -2.012 ], [ 1, -1.498, -1.92 ], [ 1, -0.513, -2.249 ], [ 1, -0.384, -2.695 ], [ 1, -1.379, -1.424 ], [ 1, -1.767, -1.105 ], [ 1, -0.032, -2.609 ], [ 1, -0.883, -2.447 ], [ 1, -1.639, -1.868 ], [ 1, -0.959, -1.976 ], [ 1, -1.474, -1.892 ], [ 1, -1.183, -1.608 ], [ 1, -0.286, -1.853 ], [ 1, -1.142, -1.739 ], [ 1, -1.255, -1.544 ], [ 1, -1.042, -1.427 ], [ 1, 0.178, -1.938 ], [ 1, -0.73, -2.023 ], [ 1, -0.551, -2.505 ], [ 1, -0.763, -2.302 ], [ 1, -1.293, -1.665 ], [ 1, -1.628, -0.666 ], [ 1, -0.922, -1.591 ], [ 1, -0.204, -2.288 ], [ 1, -1.405, -1.483 ], [ 1, -1.124, -1.314 ], [ 1, -1.265, -1.499 ], [ 1, -1.402, -1.076 ], [ 1, -0.748, -1.858 ], [ 1, -0.979, -1.574 ], [ 1, -1.339, -0.875 ], [ 1, -0.929, -1.461 ], [ 1, -0.63, -1.676 ], [ 1, -1.212, -1.344 ], [ 1, -1.049, -1.542 ], [ 1, -1.412, -1.012 ], [ 1, -0.967, -1.602 ], [ 1, 0.106, -2.452 ], [ 1, -1.051, -1.303 ], [ 1, -1.195, -0.86 ], [ 1, -1.892, 0.763 ], [ 1, -0.361, -1.637 ], [ 1, -0.402, -1.609 ], [ 1, -1.24, -1.334 ], [ 1, -0.903, -1.233 ], [ 1, -0.957, -1.299 ], [ 3, -0.971, -0.745 ], [ 3, -1.082, -0.341 ], [ 3, -1.546, -0.144 ], [ 3, -1.822, 1.036 ], [ 3, -0.63, -0.723 ], [ 3, -0.604, -0.651 ], [ 3, -0.903, -0.127 ], [ 3, -0.685, -0.7 ], [ 3, -1.041, -0.14 ], [ 3, -0.542, -1.042 ], [ 3, -1.457, -0.445 ], [ 3, -1.176, 0.171 ], [ 3, -1.1, 0.118 ], [ 3, -1.072, 0.165 ], [ 3, -0.834, -0.046 ], [ 3, -0.449, -0.565 ], [ 3, -1.342, -0.547 ], [ 3, -1.365, 0.22 ], [ 3, -0.839, -0.229 ], [ 3, -1.048, 0.289 ], [ 3, -1.024, 0.256 ], [ 3, -1.192, 0.317 ], [ 3, -0.946, 0.163 ], [ 3, -1.142, 0.487 ], [ 3, -0.646, 0.089 ], [ 3, -0.483, -0.052 ], [ 3, -1.151, 0.221 ], [ 3, -0.776, 0.367 ], [ 3, -0.853, 0.088 ], [ 3, -0.671, 0.215 ], [ 3, -1.475, -0.032 ], [ 3, -1.18, 0.152 ], [ 3, -1.234, 0.806 ], [ 3, -0.773, 0.336 ], [ 3, -0.903, -0.028 ], [ 3, -0.966, 0.382 ], [ 3, -0.996, 0.223 ], [ 3, -0.996, 0.41 ], [ 3, -0.834, 0.359 ], [ 3, -0.631, 0.012 ], [ 3, -0.757, 0.37 ], [ 3, -1.043, 0.926 ], [ 3, -0.78, 0.478 ], [ 3, -1.317, 0.505 ], [ 3, -0.908, 0.414 ], [ 3, -0.648, 0.251 ], [ 3, -0.827, -0.322 ], [ 3, -1.061, 0.677 ], [ 3, -1.436, 0.336 ], [ 3, -0.804, 0.449 ], [ 3, -0.788, -0.356 ], [ 3, -0.618, 0.3 ], [ 3, -0.949, 0.582 ], [ 3, -1.252, 0.774 ], [ 3, -1.217, 0.626 ], [ 3, -0.789, 0.005 ], [ 3, -0.963, 0.528 ], [ 3, -0.768, 0.702 ], [ 3, -0.621, 0.353 ], [ 3, -0.03, -0.448 ], [ 3, -1.106, 0.307 ], [ 3, -1.104, 0.738 ], [ 3, -0.901, 0.635 ], [ 3, -0.572, 0.37 ], [ 3, -0.537, 0.735 ], [ 2, 0.701, 0.909 ], [ 3, -0.498, 0.606 ], [ 3, -0.798, 0.822 ], [ 2, 1.07, -0.795 ], [ 3, -1.235, 0.975 ], [ 3, -0.643, 0.896 ], [ 3, -0.764, 0.996 ], [ 2, 1.09, -0.182 ], [ 3, -1, 1.144 ], [ 3, -0.698, 0.62 ], [ 2, 1.195, -0.307 ], [ 2, 1.406, -0.467 ], [ 4, -1.114, 1.39 ], [ 4, 0.012, -0.535 ], [ 3, 0.496, -0.396 ], [ 2, 1.174, -0.139 ], [ 2, 0.702, -0.375 ], [ 2, 1.101, -0.335 ], [ 2, 1.646, -0.704 ], [ 2, 1.439, -0.023 ], [ 4, -1.325, 1.11 ], [ 2, 1.594, -0.895 ], [ 2, 1.289, -0.207 ], [ 2, 1.454, -0.518 ], [ 4, -0.598, 1.277 ], [ 2, 1.435, -0.743 ], [ 2, 1.635, -0.291 ], [ 2, 1.611, -0.801 ], [ 2, 1.112, 0.159 ], [ 2, 1.625, -0.33 ], [ 2, 1.151, 0.271 ], [ 2, 1.123, 0.07 ], [ 4, -0.685, 1.23 ], [ 2, 1.739, -0.864 ], [ 4, -0.381, 1.837 ], [ 2, 1.088, 0.253 ], [ 2, 1.31, 0.093 ], [ 4, 0.168, -0.393 ], [ 4, 0.666, -0.556 ], [ 4, -0.452, 1.64 ], [ 2, 1.553, -0.76 ], [ 2, 1.184, 0.24 ], [ 2, 1.579, -0.404 ], [ 2, 1.638, -0.432 ], [ 4, -0.957, 1.389 ], [ 2, 1.102, 0.116 ], [ 2, 1.198, 0.321 ], [ 2, 1.923, -1.003 ], [ 4, -0.415, -0.052 ], [ 4, -0.343, 1.024 ], [ 4, -0.758, 1.223 ], [ 2, 1.381, 0.156 ], [ 2, 2.024, -0.691 ], [ 2, 1.601, -0.175 ], [ 2, 0.954, 1.07 ], [ 2, 1.454, -0.116 ], [ 2, 1.076, 0.697 ], [ 2, 1.364, 0.215 ], [ 2, 1.746, -0.477 ], [ 2, 1.889, -0.665 ], [ 2, 1.587, -0.011 ], [ 2, 1.5, 0.214 ], [ 4, -0.849, 0.954 ], [ 4, -0.792, 1.308 ], [ 2, 1.314, 0.203 ], [ 2, 1.836, -0.766 ], [ 2, 1.543, -0.015 ], [ 2, 1.441, -0.26 ], [ 2, 1.334, 0.308 ], [ 2, 1.831, -0.562 ], [ 2, 1.926, -0.73 ], [ 2, 0.717, 1.625 ], [ 2, 1.559, 0.164 ], [ 4, -0.1, 0.11 ], [ 2, 1.285, 0.394 ], [ 2, 1.623, -0.198 ], [ 2, 1.81, -0.283 ], [ 2, 1.603, 0.129 ], [ 4, -0.905, 1.205 ], [ 2, 1.408, -0.516 ], [ 2, 1.62, -0.237 ], [ 2, 1.475, 0.114 ], [ 2, 1.412, 0.265 ], [ 2, 1.411, -0.06 ], [ 2, 1.44, 0.434 ], [ 2, 1.194, -0.143 ], [ 2, 1.915, -0.531 ], [ 4, -0.891, 1.573 ], [ 4, -0.911, 1.769 ], [ 4, -0.742, 1.66 ], [ 2, 1.623, -0.072 ], [ 2, 1.944, -0.589 ], [ 2, 2.033, -0.717 ], [ 4, -0.752, 1.296 ], [ 2, 1.635, -0.031 ], [ 2, 2.147, -0.959 ], [ 2, 1.98, -0.363 ], [ 4, -0.941, 1.407 ], [ 4, -0.892, 1.688 ], [ 4, -0.391, 1.533 ], [ 2, 1.24, 0.491 ], [ 2, 1.678, 0.146 ], [ 4, -0.809, 1.513 ], [ 4, -0.43, 1.131 ], [ 4, -0.593, 1.458 ], [ 4, -0.32, 1.554 ], [ 2, 1.548, 0.228 ], [ 2, 1.646, 0.141 ], [ 2, 1.718, -0.034 ], [ 2, 1.563, 0.423 ], [ 2, 1.64, 0.304 ], [ 2, 1.769, 0.158 ], [ 4, -0.973, 1.452 ], [ 2, 0.552, 1.783 ], [ 2, 1.695, -0.056 ], [ 2, 1.75, -0.003 ], [ 4, -0.662, 1.684 ], [ 2, 1.928, -0.339 ], [ 2, 1.576, 0.115 ], [ 2, 1.609, 0.081 ], [ 2, 1.854, -0.017 ], [ 4, -0.495, 1.39 ], [ 4, -0.124, 1.602 ], [ 2, 1.644, 0.25 ], [ 4, -1.019, 1.393 ], [ 4, -0.833, 1.323 ], [ 4, -0.703, 1.291 ], [ 2, 1.422, -0.328 ], [ 2, 1.787, -0.206 ], [ 4, -0.818, 1.591 ], [ 4, 0.754, -0.178 ], [ 2, 1.564, 0.216 ], [ 4, -0.981, 1.448 ], [ 4, -0.787, 1.452 ], [ 4, -1.015, 1.671 ], [ 4, 0.063, 0.015 ], [ 2, 1.153, 0.448 ], [ 2, 1.8, -0.277 ], [ 4, -0.549, 1.52 ], [ 2, 1.605, 0.451 ], [ 2, 1.797, 0.017 ], [ 2, 1.512, -0.021 ], [ 2, 1.906, 0.132 ], [ 4, -0.845, 1.11 ], [ 4, -0.908, 1.651 ], [ 4, -0.534, 1.22 ], [ 2, 2.442, -1.211 ], [ 2, 2.276, -0.631 ], [ 2, 2.286, -0.477 ], [ 4, -0.65, 1.48 ], [ 2, 2.075, -0.268 ], [ 2, 2.229, -0.586 ], [ 4, -0.627, 1.26 ], [ 2, 2.039, -0.199 ], [ 4, 0.574, -0.582 ], [ 4, 0.183, 0.769 ], [ 4, -0.71, 1.642 ], [ 2, 2.133, -0.283 ], [ 4, -0.297, 1.235 ], [ 4, -0.701, 2.092 ], [ 2, 0.739, 2.038 ], [ 4, 0.716, -0.463 ], [ 4, -0.923, 1.759 ], [ 4, -0.67, 1.734 ], [ 4, -0.254, 2.032 ], [ 4, -0.5, 1.643 ], [ 4, 0.039, 1.502 ], [ 4, -0.541, 1.744 ], [ 4, -0.504, 1.64 ], [ 4, 0.519, -0.069 ], [ 4, -0.431, 2.019 ], [ 4, -0.551, 1.865 ], [ 4, -0.333, 1.85 ], [ 4, -0.694, 1.851 ], [ 4, -0.356, 2.227 ], [ 2, 0.999, 2.629 ], [ 4, -1.007, 2.806 ], [ 4, -0.11, 2.537 ] ] } }33:Tc0b,

34:[{"id":"1c0c94a4b745e014a98aba4da7313c2d9e34bb442fc74d4cb2dd13bc6efa2abaa41ac5a5f44019a5177a2cdf5436cd2d1d24479865629dc04702136cfdcb2fb7","href":"https://static.observableusercontent.com/files/1c0c94a4b745e014a98aba4da7313c2d9e34bb442fc74d4cb2dd13bc6efa2abaa41ac5a5f44019a5177a2cdf5436cd2d1d24479865629dc04702136cfdcb2fb7","name":"github.svg","type":"image/svg+xml","lastModified":1716834327862.569,"size":1850},{"id":"54dbeb98d47c4d1a1265cb33694096ea19d3ce24cde94779a25acd9ae1612f81d1831f05219754dc0e51b73ed3d7c555e0ea79428af46d2f7bc02d6e40b5e173","href":"https://static.observableusercontent.com/files/54dbeb98d47c4d1a1265cb33694096ea19d3ce24cde94779a25acd9ae1612f81d1831f05219754dc0e51b73ed3d7c555e0ea79428af46d2f7bc02d6e40b5e173","name":"treisman@4.png","type":"image/png","lastModified":1623508841641.869,"size":272217},{"id":"d103a09458bf59b956f561b00daa58e97801b7de61470bdaf93f72625cdf2f97a374aa7d688e5209bea8f13c14084a2d7d2a836c0b8b2cd6e98132cfef3089e8","href":"https://static.observableusercontent.com/files/d103a09458bf59b956f561b00daa58e97801b7de61470bdaf93f72625cdf2f97a374aa7d688e5209bea8f13c14084a2d7d2a836c0b8b2cd6e98132cfef3089e8","name":"test.png","type":"image/png","lastModified":1623507999275.241,"size":54826},{"id":"f8621cf0d45decc95b9d73555b6c2910b31a551aa89c078a2980e3e8f68d0966275f00b629e2310d23ddb84dd8bea9bad7bc40f2319e61818e500699b94afdc6","href":"https://static.observableusercontent.com/files/f8621cf0d45decc95b9d73555b6c2910b31a551aa89c078a2980e3e8f68d0966275f00b629e2310d23ddb84dd8bea9bad7bc40f2319e61818e500699b94afdc6","name":"cleveland.png","type":"image/png","lastModified":1671734026293.891,"size":79149},{"id":"440a0a652f5184b3135cd012adbf09042f981583a50059d0b95847ad6a03b21a37716eda05f61ef8ce743224c59c99edf2460d8a051809563658543434bade66","href":"https://static.observableusercontent.com/files/440a0a652f5184b3135cd012adbf09042f981583a50059d0b95847ad6a03b21a37716eda05f61ef8ce743224c59c99edf2460d8a051809563658543434bade66","name":"symbolsPreattentive@1.png","type":"image/png","lastModified":1707494926584.192,"size":10653},{"id":"f4823cbeabe722e77b88b5580b30a3dad10a4f68bb8f6f5d98db368bc9674237202bff4e79cebd181cb72adaf6bb87986ae925ba58fae066d91f1c1c71b5d00a","href":"https://static.observableusercontent.com/files/f4823cbeabe722e77b88b5580b30a3dad10a4f68bb8f6f5d98db368bc9674237202bff4e79cebd181cb72adaf6bb87986ae925ba58fae066d91f1c1c71b5d00a","name":"symbolsDiscriminable.png","type":"image/png","lastModified":1671303528163.033,"size":16390}] 2e:{"title":"Good Plot Symbols (176)","cells":[{"id":723,"value":"# Good Plot Symbols [(176)](https://github.com/d3/d3-shape/pull/176)","pinned":false,"hidden":false,"mode":"md"},{"id":577,"value":"

Plot symbols with preattentive features improve our ability to detect patterns in data. Use the controls below to explore symbols for plotting.

","pinned":false,"hidden":false,"mode":"html"},{"id":19,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"viewof dataSet = Inputs.select([ \n \"Business (67)\", \"Iris (150)\", \"Cells (300)\"\n], {label: \"Data Set:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"viewof offset = Inputs.button( \"Rotate\", { label: \"Offset:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"viewof size = Inputs.range([1, 20], {value: 10, step: 1, label: \"Size:\", format: ( value ) => value * value })","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof transparency = Inputs.range([0, 0.99], {value: 0, step: 0.01, label: \"Transparency:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"viewof strokeWidth = Inputs.range([.1, 4], {value: 1, step: .05, label: \"Stroke Width:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"

User Interface

","pinned":false,"hidden":false,"mode":"html"},{"id":413,"value":"md`This is Anne Treisman, receiving the National Science Award. At the end of a great career, you want a big hunk of metal, and she got hers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`Dr. Treisman and other cognitive psychologists studied figures like the one below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"

\n They wondered: why do most people perceive the asterisks, on the right, more quickly than the down-pointing triangles, on the left? All three figures are composed of the same three lines, at the same angles.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":440,"value":"

\n Dr. Treisman showed that our brains perform visual processing in two stages. Some features are perceived only when we pay attention. Other features, including line length, orientation, and number of terminations, are perceived pre-attentively -- before normal visual processing takes place (Treisman, 1985).\n

\n The preattentive literature has many contributors, including (Beck, Prazdny, and Rosenfeld, 1983), (Healey, Booth, and Enns, 1996), (Julesz and Bergen, 1983), (Krose, 1987), (Malik and Perona, 1990), (Triesman and Gormican, 1988) (Wolfe and Friedman-Hill, 1992). Dr. Christopher Healey provides a detailed bibliography with examples (Healey and Enns, 2012).\n

","pinned":false,"hidden":false,"mode":"html"},{"id":617,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"

\n Statisticians, of course, have long been interested in plot symbols. William Cleveland used the work of the psychologists to improve pattern detection in plots. At the top of this page, the scatter plot on the right extends Dr. Cleveland's work.\n

\n Jacques Bertin, Cleveland, and Leland Wilkinson suggested the Circle, Plus, and X symbols. The Circle is considered the best symbol when data have only one category, because it minimizes overlap.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":608,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":592,"value":"

\n The most discriminable symbols are not the most popular. Of the symbols above, the circle, plus, and X are used frequently; the others only rarely.\n

\n For this reason, a study was conducted to find plot symbols that are both popular and disciminable. Polling determined the most popular symbols; then usability testing found the most discriminable among them (Robinson, 2019).\n

\n The study found statistically significant differences in perception times for up to six symbols.\n

\n The symbols are equally weighted by pixel count, so that no category biases the plot.\n

\n As in baseball, the best symbols are at the top of the order. Ordering the symbols enables software to automatically assign the two best symbols for two categories, the three best for three categories, and so on. \n

","pinned":false,"hidden":false,"mode":"html"},{"id":695,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":704,"value":"

Implementation

","pinned":false,"hidden":false,"mode":"html"},{"id":686,"value":"

\nThis project uses React, Material-UI, and d3.\n

\nThese symbols have been contributed to d3, which now supports both filled and stroked symbols (d3.symbolsFill and d3.symbolsStroke). When there are few categories and little overlap, filled symbols emphasize the data. When there are many categories or significant overlap, stroked symbols with preattentive features help users detect patterns in their data.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":661,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"data = dataValues[ dataSet ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"x = d => d[ 2 ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"y = d => d[ 1 ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"z = d => d[ 0 ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"axisScale = ( dataSet === \"Business (67)\" ) ? d3.scaleLog : d3.scaleLinear","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"rotate = ( a, m ) => {\n let b = a.concat(),\n n = m % a.length;\n for( let i = 0; ( i < n ); i++ ) {\n b.push( b.shift());\n }\n return b;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"xs = axisScale( d3.extent( data, x ), [ 50, 330 ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"ys = axisScale( d3.extent( data, y ), [ 290, 10 ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"zc = d3.scaleOrdinal( data.map( z ), rotate( d3.symbols.slice( 0, d3.group( data, z ).size ), offset ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"zp = d3.scaleOrdinal( data.map( z ), rotate( preSymbols.slice( 0, d3.group( data, z ).size ), offset ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require( \"d3@6\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"\npageAnalytics = {\n await require(`https://www.googletagmanager.com/gtag/js?id=G-0MYTJ242GQ`).catch(() => {});\n const dataLayer = window.dataLayer = window.dataLayer || [];\n const location = html``;\n gtag('js', new Date());\n gtag('config', 'G-0MYTJ242GQ', {\n 'page_path': location.pathname,\n 'page_location' : location.href\n });\n return md`^{[Google Analytics](https://beta.observablehq.com/@peter-hartmann/page-analytics)}`;\n function gtag() { dataLayer.push(arguments); }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"$33","pinned":false,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}

Further Reading

User Interface

Implementation