surjikal · May 4, 2019 20:32
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Line Chart</title>
    <link type="text/css" rel="stylesheet" href="line.css"/>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
  </head>
  <body>
    <script type="text/javascript" src="line.js"></script>
  </body>
 </html>
diff --git a/line.css b/line.css
 .rule line {
  stroke: #eee;
  shape-rendering: crispEdges;
 }

 .line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
 }
diff --git a/line.js b/line.js
 (function () {
  // Set up the parameters of the chart object.
  var rate    = 500   // The scroll and update speed of the graph (ms)
  ,   points  =  20   // The number of points to generate
  ,   width   = 550   // Chart width
  ,   height  = 275   // Chart height
  ,   padding =  40   // Visual padding for the axis labels
  ,   updates =   0   // The number of updates that have been performed

  // These appear to be factories for generaring values.  Will look more at
  // it later.
  ,   x       = d3.scale.linear().domain([0, 1]).range([0, width])
  ,   y       = d3.scale.linear().domain([-0.5, 0.5]).range([height, 0]) 

  // Get a data set.  10 points.
  function _getData () {
    return d3.range(points + 2).map(function(i) {return _getDataPoint(i)})
  }

  // Get a single point of data.
  function _getDataPoint(i) {
    return {x: (i)/points, y: (Math.random() - 0.5)}
  }

  // Add a data point to the right of the graph and slide the line to the
  // left.
  var addData = function() {
    // Grab the path
    var path = d3.select("path")
    // Grab the data from the path
    var data = path[0][0].__data__

    // Slap a new random point to the end of the data
    data.push(_getDataPoint(data.length))

    // Increment the total number of updates.  This lets us know how much to
    // move the path.  This is a sub-optimal solution.
    updates++

    // Apply the new data to the path and re-draw. 
    path
      .data([data])
      .transition()
        .duration(rate)
        // Use a linear easing to keep an even scroll
        .ease("linear")
        .attr("d", d3.svg.line()
          .x(function(d,i) { return x(d.x - updates/points) })
          .y(function(d) {return y(d.y)})
          // I'm not sure if this is the interpolation that works best, but I
          // can't find a better one...
          .interpolate("basis")
        )   
  }

  // Create the chart object to the desired parameters.
  var chart = d3.select("body")
      .data([_getData()])
      .append("svg:svg")
        .attr("width",  width  + padding)
        .attr("height", height + padding * 2)
      .append("svg:g")
        // I have no idea what this does yet.
        .attr("transform", "translate(" + padding + "," + padding + ")")

  // Creating rules for the background grid. 
  var rules = chart.selectAll("g.rule")
    .data(x.ticks(10))
    .enter()
      .append("svg:g")
        .attr("class","rule")

  // This seems to add the vertical lines.
  rules
    .append("svg:line")
      .attr("x1", x)
      .attr("x2", x)
      .attr("y1", 0)
      .attr("y2", height - 1)

  // Horizontal lines
  rules
    .append("svg:line")
      .attr("class", function(d) {return d ? null : "axis"})
      .attr("y1", y)
      .attr("y2", y)
      .attr("x1", 0)
      .attr("x2", width + 1)

  // X-axis labels
  rules
    .append("svg:text")
      .attr("x", x)
      .attr("y", height + 3)
      .attr("dy", ".71em")
      .attr("text-anchor", "middle")
      .text(x.tickFormat(10))

  // Y-axis labels
  rules
    .append("svg:text")
      .attr("y",  y)  
      .attr("x", -3) 
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .text(x.tickFormat(10))

  // Now add the line.  This should be last so it sits on top of the
  // reference rulers.
  chart
    .append("svg:path")
      .attr("class", "line")
      .attr("d", d3.svg.line()
        .x(function(d) {return x(d.x)})
        .y(function(d) {return y(d.y)})
        .interpolate("basis")
      )

  // Make it a "live" updating chart.
  window.setInterval(addData, rate)
 })()
	<!DOCTYPE html>
	<html>
	<head>
	<title>Line Chart</title>
	<link type="text/css" rel="stylesheet" href="line.css"/>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	</head>
	<body>
	<script type="text/javascript" src="line.js"></script>
	</body>
	</html>
	.rule line {
	stroke: #eee;
	shape-rendering: crispEdges;
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}
	(function () {
	// Set up the parameters of the chart object.
	var rate = 500 // The scroll and update speed of the graph (ms)
	, points = 20 // The number of points to generate
	, width = 550 // Chart width
	, height = 275 // Chart height
	, padding = 40 // Visual padding for the axis labels
	, updates = 0 // The number of updates that have been performed

	// These appear to be factories for generaring values. Will look more at
	// it later.
	, x = d3.scale.linear().domain([0, 1]).range([0, width])
	, y = d3.scale.linear().domain([-0.5, 0.5]).range([height, 0])

	// Get a data set. 10 points.
	function _getData () {
	return d3.range(points + 2).map(function(i) {return _getDataPoint(i)})
	}

	// Get a single point of data.
	function _getDataPoint(i) {
	return {x: (i)/points, y: (Math.random() - 0.5)}
	}

	// Add a data point to the right of the graph and slide the line to the
	// left.
	var addData = function() {
	// Grab the path
	var path = d3.select("path")
	// Grab the data from the path
	var data = path[0][0].__data__

	// Slap a new random point to the end of the data
	data.push(_getDataPoint(data.length))

	// Increment the total number of updates. This lets us know how much to
	// move the path. This is a sub-optimal solution.
	updates++

	// Apply the new data to the path and re-draw.
	path
	.data([data])
	.transition()
	.duration(rate)
	// Use a linear easing to keep an even scroll
	.ease("linear")
	.attr("d", d3.svg.line()
	.x(function(d,i) { return x(d.x - updates/points) })
	.y(function(d) {return y(d.y)})
	// I'm not sure if this is the interpolation that works best, but I
	// can't find a better one...
	.interpolate("basis")
	)
	}

	// Create the chart object to the desired parameters.
	var chart = d3.select("body")
	.data([_getData()])
	.append("svg:svg")
	.attr("width", width + padding)
	.attr("height", height + padding * 2)
	.append("svg:g")
	// I have no idea what this does yet.
	.attr("transform", "translate(" + padding + "," + padding + ")")

	// Creating rules for the background grid.
	var rules = chart.selectAll("g.rule")
	.data(x.ticks(10))
	.enter()
	.append("svg:g")
	.attr("class","rule")

	// This seems to add the vertical lines.
	rules
	.append("svg:line")
	.attr("x1", x)
	.attr("x2", x)
	.attr("y1", 0)
	.attr("y2", height - 1)

	// Horizontal lines
	rules
	.append("svg:line")
	.attr("class", function(d) {return d ? null : "axis"})
	.attr("y1", y)
	.attr("y2", y)
	.attr("x1", 0)
	.attr("x2", width + 1)

	// X-axis labels
	rules
	.append("svg:text")
	.attr("x", x)
	.attr("y", height + 3)
	.attr("dy", ".71em")
	.attr("text-anchor", "middle")
	.text(x.tickFormat(10))

	// Y-axis labels
	rules
	.append("svg:text")
	.attr("y", y)
	.attr("x", -3)
	.attr("dy", ".35em")
	.attr("text-anchor", "end")
	.text(x.tickFormat(10))

	// Now add the line. This should be last so it sits on top of the
	// reference rulers.
	chart
	.append("svg:path")
	.attr("class", "line")
	.attr("d", d3.svg.line()
	.x(function(d) {return x(d.x)})
	.y(function(d) {return y(d.y)})
	.interpolate("basis")
	)

	// Make it a "live" updating chart.
	window.setInterval(addData, rate)
	})()