D3 Examples - maniac

xxxxxxxxxx
 
<!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>
​
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script>
​
    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>
    