where vertical line intersects graph

by Igor Cuckovic

HTML

<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>

CSS

/* tell the SVG path to be a thin blue line without any area fill */
  path {
      stroke: steelblue;
      stroke-width: 1;
      fill: none;
  }
  .axis {
      shape-rendering: crispEdges;
  }
  .x.axis line {
      stroke: lightgrey;
  }
  .x.axis .minor {
      stroke-opacity: .5;
  }
  .x.axis path {
      display: none;
  }
  .y.axis line, .y.axis path {
      fill: none;
      stroke: #000;
  }

JavaScript

/* implementation heavily influenced by http://bl.ocks.org/1166403 */

// define dimensions of graph
var m = [80, 80, 80, 80]; // margins
var w = 1000 - m[1] - m[3]; // width
var h = 400 - m[0] - m[2]; // height

// create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)
var data = [3, 6, 2, 7, 5, 2, 0, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7];

// X scale will fit all values from data[] within pixels 0-w
var xScale = d3.scale.linear().domain([0, data.length]).range([0, w]);
// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
var yScale = d3.scale.linear().domain([0, 10]).range([h, 0]);
// automatically determining max range can work something like this
// var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);

// create a line function that can convert data[] into x and y points
var line = d3.svg.line()
// assign the X function to plot our line as we wish
.x(function (d, i) {
    // verbose logging to show what's actually being done
    //  console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
    // return the X coordinate where we want to plot this datapoint
    return xScale(i);
})
    .y(function (d) {
    // verbose logging to show what's actually being done
    //  console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
    // return the Y coordinate where we want to plot this datapoint
    return yScale(d);
});

// Add an SVG element with the desired dimensions and margin.
var graph = d3.select("#graph").append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
    .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

// create yAxis
var xAxis = d3.svg.axis().scale(xScale).tickSize(-h).tickSubdivide(true);
//...