| license: mit |
This scatter plot shows a visual popout. A visual popout is where a distinct item stands out among the other items in the set. In this case the red circle pops out from a small set of blue circles. More information on visual popout can be found in Chapter 5 of Visualization Analysis & Design by Tamara Munzner.
This block was inspired by bunkat's block
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <title>Popout Scatter Plot</title> | |
| <style> | |
| body { | |
| margin: 0px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var width = 960; | |
| var height = 500; | |
| var margin = { left: 100, right: 250, top: 20, bottom: 120 }; | |
| var innerWidth = width - margin.left - margin.right; | |
| var innerHeight = height - margin.top - margin.bottom; | |
| var data = [ | |
| [1,1.5],[1.75,.8],[3.25,1],[4.5,.9],[3.2,1.75],[4.75,2],[3.1,1.5],[2,2.9],[3.5,3],[4,2.9],[4,3.25],[5,4],[1,4.9],[2.5,5.15],[2.55,5],[4.5,4.75]]; | |
| var xScale = d3.scaleLinear().range([0,innerWidth]) | |
| .domain([0, 6]); | |
| var yScale = d3.scaleLinear() | |
| .range([innerHeight,0]) | |
| .domain([0,6]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| var g = svg.append('g') | |
| .attr('transform', "translate("+margin.left + "," + margin.top +")") | |
| .attr('width', innerWidth) | |
| .attr('height',innerHeight) | |
| var xAxis = d3.axisBottom() | |
| .scale(xScale) | |
| .tickPadding(15); | |
| var yAxis = d3.axisLeft() | |
| .scale(yScale) | |
| .tickPadding(15); | |
| var xAxisG = g.append('g') | |
| .attr("transform", "translate(0," + innerHeight + ")"); | |
| var yAxisG = g.append('g'); | |
| g.selectAll('circle') | |
| .data(data) | |
| .enter().append('svg:circle') | |
| .attr('cx', function (d,i) { return xScale(d[0]); } ) | |
| .attr('cy', function (d) { return yScale(d[1]); } ) | |
| .attr('r', 8) | |
| .attr("fill", function(d) { | |
| if(d[0]==1.75) { | |
| return "red"; | |
| } else { | |
| return "blue"; | |
| }}); | |
| xAxisG.attr("class","axis").call(xAxis); | |
| yAxisG.attr("class","axis").call(yAxis); | |
| </script> | |
| </body> | |
| </html> |
