D3 Examples - First Gist... More to come

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
  <style>
    body { background-color: #C1CAD6; }
    .axis line,
    .axis path {
      fill: none;
      stroke: #000;
    }
    .axis > path { display: none; }
  </style>
  <h1 style="text-align:center;">Hello, world!</h1>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    var m = {l:20, t:20},
        w = 900 - m.l*2,
        h = 300 - m.t*2;
    var svg = d3.select("body").append("svg")
        .attr("width", w + m.l*2).attr("height", h + m.t*2)
        .style("margin", "0% calc(50% - " + w/2 + "px)")
      .append("g")
        .attr("transform", "translate(" + m.l + "," + m.t + ")");
​
    var data = []; for(i=0;i<10;i++) data.push(Math.floor(Math.random() * 10));
​
    var x = d3.scale.linear().range([0,w-m.l*2]).domain([0, data.length - 1]);
    var y = d3.scale.linear().range([h,m.t]).domain(d3.extent(data));
    var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(h);
    var yAxis = d3.svg.axis().scale(y).orient("left").tickSize(w);
​
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate("+m.l+","+0+")")
      .call(xAxis);
​
    svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate("+(w)+","+(-m.t)+")")
      .call(yAxis);
​
    var circles = svg.selectAll("circle")
        .data(data)
      .enter().append("circle")
        .attr("r", 5)
        .attr("cx", function(d,i) { return x(i) + m.l; })
        .attr("cy", function(d) { return y(d) - m.t; })
        .attr("fill", "#F03");
  </script>
</body>
​
    