Old school D3 from simpler times

All examples By author By category About

emilyw15

Full window Github gist

Popout Scatter Plot

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>

https://d3js.org/d3.v4.min.js