Challenger

hello markdown

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

.axis text {
      font: 10px sans-serif;
    }
  </style>
</head>

<body>

// x and y scales, I've used linear here but there are other options
    // the scales translate data values to pixel values for you
    var x = d3.scale.linear()
              .domain([0, d3.max(data, x)])  // the range of the values to plot
              .range([ 0, width ]);        // the pixel range of the x-axis

var y = d3.scale.linear()
              .domain([0, d3.max(data, y)])
              .range([ height, 0 ]);

// the chart object, includes all margins
    var chart = d3.select('body')
        .append('svg:svg')
        .attr('width', width + margin.right + margin.left)
        .attr('height', height + margin.top + margin.bottom)
        .attr('class', 'chart')

// the main object where the chart and axis will be drawn
    var main = chart.append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
        .attr('width', width)
        .attr('height', height)
        .attr('class', 'main')

// draw the x axis
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom');

main.append('g')
        .attr('transform', 'translate(0,' + height + ')')
        .attr('class', 'main axis date')
        .call(xAxis);

// draw the y axis
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient('left');

main.append('g')
        .attr('transform', 'translate(0,0)')
        .attr('class', 'main axis date')
        .call(yAxis);

// draw the graph object
    var g = main.append("svg:g");

g.selectAll("scatter-dots")
      .data(ydata)  // using the values in the ydata array
      .enter().append("svg:circle")  // create a new circle for each value
          .attr("cy", function (d) { return y(d); } ) // translate y value to a pixel
          .attr("cx", function (d,i) { return x(xdata[i]); } ) // translate x value
          .attr("r", 10) // radius of circle
          .style("opacity", 0.6); // opacity of circle
      
    });
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js