Stack Overflow - Appending circles to each point.

by Blake Dietz

HTML

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="legend">
    <h3>Cholera No Of Deaths & Cases</h3>
</div>

CSS

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none ;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;

}

    #legend {
        margin-left:220px;
    }

JavaScript

var margin = { top: 30, right: 40, bottom: 30, left: 50 },
        width = 600 - margin.left - margin.right,
        height = 270 - margin.top - margin.bottom;

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Blah:</strong> <span style='color:red'>" + d.value + "</span>";
  });

var tip1 = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Blah:</strong> <span style='color:red'>" + d.value2 + "</span>";
  });


    var parseDate = d3.time.format("%Y").parse;

    var x = d3.time.scale()
        .range([0, width]);

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

    var y1= d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom").ticks(5);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left").ticks(5);

    var yAxis1 = d3.svg.axis()
        .scale(y1)
        .orient("right").ticks(5);

    var line = d3.svg.line()
        .x(function (d) { return x(d.year); })
        .y(function (d) { return y(d.value); });

    var line2 = d3.svg.line()
    .x(function (d) { return x(d.year); })
    .y(function (d) { return y1(d.value2); });

    var svg = d3.select("body").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.call(tip).call(tip1);

        var data = [{"country":"Singapore","year": "1960", "value":"887", "value2": "199"},
{"country":"Singapore","year": "1965", "value":"218", "value2": "55"},
{"country":"Singapore","year": "1993", "value":"37046", "value2": "931"},
{"country":"Singapore","year": "1994", "value":"38735", "value2": "118"},
{"country":"Singapore","year": "1995", "value":"19903", "value2": "624"},
{"country":"Singapore","year": "1997", "value":"4170", "value2":...