index.html

## readMe.md

      
          Raw
        
        
              readMe.md
            
          
    A basic scatterplot that loads data, scales and axes and updates domains based on extrema. Uses Mike Bostock's margin conventions and the data for Anscombe's Quartet.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<style type="text/css">

  body {
    font-family: arial, sans;
    font-size: 11px;
  }

  svg {
    border: 1px solid #f0f;
  }

  .axis line,
  .axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

</style>

<body>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

<script type="text/javascript">

var margin = {top: 20, right: 50, bottom: 20, left: 10};

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xScale = d3.scale.linear()
    .range([0,width]);

var yScale = d3.scale.linear()
    .range([height,0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("right");

d3.tsv("quartet.tsv", ready);

function ready(error, data) {
  if (error) return console.warn(error);

  data.forEach(function(d) {
    d.xPos = +d.xPos;
    d.yPos = +d.yPos;
  });

  //update domains based on extrema, which has pluses and minuses
  xScale.domain(d3.extent(data, function(d) { return d.xPos; }));
  yScale.domain(d3.extent(data, function(d) { return d.yPos; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + width + ",0)")
      .call(yAxis);

  var circleGroup = svg.selectAll(".circle-group")
      .data(data)
    .enter()
      .append("g")
      .attr("class", "circle-group")
      .attr("transform", function(d) { return "translate(" + xScale(d.xPos) + "," + yScale(d.yPos) + ")"; });

  circleGroup.append("circle")
      .attr("r", 5);

  circleGroup.append("text")
      .text(function(d) { return d.xPos + "," + d.yPos; })
      .attr("dx", 5)
      .attr("dy", -5);

    }


</script>

## quartet.tsv

        
        group
        xPos
        yPos

        
        I
        10
        8.04

        
        I
        8
        6.95

        
        I
        13
        7.58

        
        I
        9
        8.81

        
        I
        11
        8.33

        
        I
        14
        9.96

        
        I
        6
        7.24

        
        I
        4
        4.26

        
        I
        12
        10.84

        
        I
        7
        4.82

        
        I
        5
        5.68

        
        II
        10
        9.14

        
        II
        8
        8.14

        
        II
        13
        8.74

        
        II
        9
        8.77

        
        II
        11
        9.26

        
        II
        14
        8.1

        
        II
        6
        6.13

        
        II
        4
        3.1

        
        II
        12
        9.13

        
        II
        7
        7.26

        
        II
        5
        4.74

        
        III
        10
        7.46

        
        III
        8
        6.77

        
        III
        13
        12.74

        
        III
        9
        7.11

        
        III
        11
        7.81

        
        III
        14
        8.84

        
        III
        6
        6.08

        
        III
        4
        5.39

        
        III
        12
        8.15

        
        III
        7
        6.42

        
        III
        5
        5.73

        
        IV
        8
        6.58

        
        IV
        8
        5.76

        
        IV
        8
        7.71

        
        IV
        8
        8.84

        
        IV
        8
        8.47

        
        IV
        8
        7.04

        
        IV
        8
        5.25

        
        IV
        19
        12.5

        
        IV
        8
        5.56

        
        IV
        8
        7.91

        
        IV
        8
        6.89