simple x-y plot by pbogden

index.html

<!DOCTYPE html>
<meta charset='utf-8'>
<title>xy plot</title>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<body>
<script>

var outerWidth  = 960, outerHeight = 500;    // includes margins

var margin = {top: 100, right: 20, bottom: 80, left: 80};   // clockwise as in CSS

var width = outerWidth - margin.left - margin.right,       // width of plot inside margins
    height = outerHeight - margin.top - margin.bottom;     // height   "     "

document.body.style.margin="0px"; // Eliminate default margin from <body> element

var data = [ {x: 0, y: 00}, {x: 1, y: 30}, {x: 2, y: 40},
             {x: 3, y: 20}, {x: 4, y: 90}, {x: 5, y: 70} ];

function xValue(d) { return d.x; }      // accessors
function yValue(d) { return d.y; }

var x = d3.scaleLinear()                // interpolator for X axis -- inner plot region
    .domain(d3.extent(data,xValue))
    .range([0,width]);

var y = d3.scaleLinear()                // interpolator for Y axis -- inner plot region
    .domain(d3.extent(data,yValue))
    .range([height,0]);                  // remember, (0,0) is upper left -- this reverses "y"

var line = d3.line()                     // SVG line generator
    .x(function(d) { return x(d.x); } )
    .y(function(d) { return y(d.y); } );

var xAxis = d3.axisBottom(x)
    .ticks(5)                            // request 5 ticks on the x axis

var yAxis = d3.axisLeft(y)                // y Axis
    .ticks(4)

var svg = d3.select("body").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight);        // Note: ok to leave this without units, implied "px"

var g = svg.append("g")                  // <g> element is the inner plot area (i.e., inside the margins)
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

g.append("g")                            // render the Y axis in the inner plot area
    .attr("class", "y axis")
    .call(yAxis);

g.append("g")                            // render the X axis in the inner plot area
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")  // axis runs along lower part of graph
    .call(xAxis);

g.append("text")                         // inner x-axis label
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width - 6)
    .attr("y", height - 6)
    .text("inner x-axis label");

g.append("text")                         // outer x-axis label
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width/2)
    .attr("y", height + 2*margin.bottom/3 + 6)
    .text("outer x-axis label");

g.append("text")                         // plot title
    .attr("class", "x label")
    .attr("text-anchor", "middle")
    .attr("x", width/2)
    .attr("y", -margin.top/2)
    .attr("dy", "+.75em")
    .text("plot title");

g.append("text")                         // inner y-axis label
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("x", -6)
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("inner y-axis label");

g.append("text")                         // outer y-axis label
    .attr("class", "x label")
    .attr("text-anchor", "middle")
    .attr("x", -height/2)
    .attr("y", -6 - margin.left/3)
    .attr("dy", "-.75em")
    .attr("transform", "rotate(-90)")
    .text("outer y-axis label");

g.append("path")                         // plot the data as a line
    .datum(data)
    .attr("class", "line")
    .attr("d", line)
    .style('fill', 'none')
    .style('stroke', '#fff')
  .transition()
    .delay(500)
    .duration(1000)
    .style('stroke', '#000')

g.selectAll(".dot")                      // plot a circle at each data location
    .data(data)
  .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", function(d) { return x(d.x); } )
    .attr("cy", function(d) { return y(d.y); } )
    .attr("r", 5);

</script>