Skip to content

Instantly share code, notes, and snippets.

@emilyw15
Last active September 27, 2017 16:42
Show Gist options
  • Save emilyw15/6a30e3d3474efc7bb34f3a620a474103 to your computer and use it in GitHub Desktop.
Save emilyw15/6a30e3d3474efc7bb34f3a620a474103 to your computer and use it in GitHub Desktop.
Popout Scatter Plot
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment