d3 demo

by dirkk0

HTML

<script src="https://raw.github.com/HumbleSoftware/d3/master/d3.v2.min.js"></script>
<div id="trig"> </div>

CSS

.title{text-align:center}.subTitle{font-size:16px}#finance{position:relative;margin:40px 0;border:1px solid #9cf}#labels{position:absolute;width:800px;z-index:10}#financeTitle{position:absolute;top:-20px}#summaryGraph .flotr-grid-label{margin-top:-16px;background:transparent;text-align:left}.documentation p{font-size:14px;padding-left:20px;padding-right:8px}.documentation ol{font-size:14px}.documentation h3{padding-top:12px}.documentation h4{padding-left:20px;font-size:14px}.documentation p code{font-size:12px}.documentation .snippet{margin-left:20px}label{float:none}input{width:auto}#trig{margin:20px}.trig path,.trig circle,.trig line{stroke:steelblue;stroke-width:2px;fill:none}.trig .axis{stroke:#999}.trig text{fill:#444;font-family:sans-serif;font-size:22}.chart{position:relative;height:524px;padding-top:54px}.fortune p{font-size:14px}.fortune h3{margin-bottom:8px}.fortune ul{font-size:14px;margin-bottom:20px}.controls{position:absolute;top:0;right:0;font-size:12px;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.control,.controls .label{float:left;text-align:center}.controls .label{padding-top:2px}.control{font-size:14px}.control.rank{width:52px}.control.revenue{width:70px}.control.profit{width:52px}.control{cursor:pointer}.control.selected{font-weight:bold}.inflation{position:absolute;top:20px;right:0;font-size:12px;width:200px;text-align:right;padding-right:10px}.inflation label{display:inline-block;width:auto;padding-bottom:2px;cursor:pointer}.inflation input{position:relative;bottom:-2px}.company{font-size:12px;display:none;color:#222;position:absolute;margin-top:54px}.company-arrow{background:url(../home/cesutherland/HSD/images/demos/fortune-arrow.png) top center no-repeat;position:absolute;left:50%;margin-left:-6px;width:13px;height:7px;top:0}.company-content{margin-top:5px;border:2px solid #4863a0;padding:6px 6px 8px 6px;background:#fff;border-radius:5px}.company...

JavaScript

//
// Trig
//

(function () {

  var
    ID_TRIG = '#trig',
    X1      = 'x1',
    X2      = 'x2',
    Y1      = 'y1',
    Y2      = 'y2';

  var
    data    = [],
    width   = 760,
    height  = 260,
    xmin    = -1.2,
    xmax    = 5,
    ymin    = -height * (xmax - xmin) / width / 2,
    ymax    = -ymin,
    xScale  = d3.scale.linear(),
    yScale  = d3.scale.linear(),
    vis     = d3.select(ID_TRIG).append('svg:svg'),
    decor   = vis.append('svg:g'),
    graph   = vis.append('svg:g'),
    path    = graph.append('svg:path'),
    b       = graph.append('svg:line'),
    c       = graph.append('svg:line'),
    circle  = graph.append('svg:circle'),
    dot     = graph.append('svg:circle'),
    label   = graph.append('svg:text'),
    sine    = d3.svg.line(),
    time    = 0,
    i;

  for (i = 0; i < 84; i++) {
    data.push(i * 10 / 84);
  }

  xScale
    .domain([xmin, xmax])
    .range([0, width]);

  yScale
    .domain([ymin, ymax])
    .range([0, height]);

  vis
    .attr('class', 'trig')
    .attr('width', width)
    .attr('height', height);
   
  sine
    .x(function (d, i) { return xScale(d); })
    .y(function (d, i) { return yScale(Math.sin(d - time)); });

  // X-Axis
  decor.append('svg:line')
    .attr('class', 'axis')
    .attr(X1, xScale(xmin))
    .attr(Y1, yScale(0))
    .attr(X2, xScale(xmax))
    .attr(Y2, yScale(0));

  decor.append('svg:line')
    .attr('class', 'axis')
    .attr(X1, xScale(Math.PI))
    .attr(Y1, yScale(0))
    .attr(X2, xScale(Math.PI))
    .attr(Y2, yScale(0) + 8);

  decor.append("svg:text")
    .text(String.fromCharCode(960))
    .attr("x", Math.round(xScale(Math.PI)))
    .attr("y", (yScale(0)) + 24)
    .attr("text-anchor", "middle");

  // Y-Axis
  decor.append('svg:line')
    .attr('class', 'axis')
    .attr(X1, xScale(0))
    .attr(Y1, yScale(ymin))
    .attr(X2, xScale(0))
    .attr(Y2, yScale(ymax));

  // Time
  label
    .attr("x", 2)
    .attr("y", 24);

  // Circle
  circle
    .attr('cx', xScale(0))
   ...