maniac

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body {
        font: 12px sans-serif;
        margin: 0;
      }
      text {
        fill:darkgray;
      }
      .axis path,
      .axis line {
        stroke: darkgray;
        fill: none;
      }
      .background-rect{
        fill:whitesmoke;
      }
      .price-dot{
        fill:orangered;
      }
      .bid-line{
        stroke:deepskyblue;
        stroke-width:3px;
      }
    </style>
  </head>
  <body>
    <div id="viz_main"></div>
  </body>

var margin = {top:20,bottom:20,right:20,left:50}
    var height = 480-margin.top-margin.bottom;
    var width = 960-margin.left-margin.right;

var format = d3.time.format('%-I:%m')

var price_dot_radius = 3

// For imagination sake, the bid happened at 9:15am and will expire tomorrow at the same time
    var now = new Date();
    bid_time = new Date(now.getFullYear(),now.getMonth(),now.getDate(),9,15); 
    bid_expire_time = new Date(now.getFullYear(),now.getMonth(),now.getDate()+1,9,15);

var bid_amount = 750;

// setting up the x axis to be a time scale
    var x = d3.time.scale()
	.range([0,width])
	.domain([bid_time,bid_expire_time]);
    var x_axis = d3.svg.axis()
	.scale(x)
	.ticks(14)

// and the y axis
    var y = d3.scale.linear()
	.range([height,0])
	.domain([bid_amount-bid_amount/5,bid_amount*1.25])
    var y_axis = d3.svg.axis()
	.scale(y)
	.orient('left')
	.ticks(10)

// generated some fake random data, which looks bad but just for the idea
    // this is the data that will be bound to the elements later
    // each element has a time (starting 5 minutes after the bid) and a price
    var some_prices = []
    for (var i=1;i<100;i++){
	price = Math.floor(Math.random()*(bid_amount/4-30)+bid_amount+20);
	time = new Date(bid_time.getTime() + i*5*60000);
	some_prices.push({'time':time,'price':price})
    }

var svg = d3.select('#viz_main').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+')')
    
    svg.append('rect')
	.attr('class','background-rect')
	.attr('width',width)
	.attr('height',height)

svg.append('g')
	.attr('class','x axis')
	.attr('transform','translate(0,'+height+')')
	.call(x_axis)

svg.append('g')
	.attr('class','y axis')
	.call(y_axis)

svg.selectAll('circle')
	.data(some_prices)
	.enter()
	.append('circle')
	.attr('class','price-dot')
	.attr('cx',function(d){return x(d.time)})
	.attr('cy',function(d){return y(d.price)})
	.attr('r',price_dot_radius)

svg.append('line')
	.attr('class','bid-line')
	.attr('x1',x(bid_time))
	.attr('y1',y(bid_amount))
	.attr('x2',x(bid_expire_time))
	.attr('y2',y(bid_amount))

</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js