block by sxywu 08e7b999c0a5c1977b34edc7870071e4

Basic starter code for many simple D3 charts, v4

Full Screen

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.

forked from kpq‘s block: Basic starter code for many simple D3 charts

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://d3js.org/d3.v4.min.js"></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.scaleLinear()
    .range([0,width]);

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

var xAxis = d3.axisBottom()
    .scale(xScale);

var yAxis = d3.axisRight()
    .scale(yScale);

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