Dots on Lines

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Line Chart with Multiple Lines</title>

.linelabel {
				 font-family: "Open Sans", sans-serif;
				 font-size: 13px;

}

strong {
				font-weight: 600;
			}
		</style>
	</head>

<h1>Infant Mortality under 5 years old since 2000</h1>

<p>Although death among children has decreased around the world within the last decade, some countries, like India, keep an alarming infant mortality. This graphic shows the change in infant mortality since 2000 to 2013.</p>
		<div id="source">
		<p>Source: <a href="https://www.who.int/gho/en/">Global Health Observatory (GHO)</a>.</p>
		</div>
		</div>

groups.append("text")
						.datum(function(d) {
							console.log("Here", {name: d.key, values: d.values[0]});
							return {name: d.key, value: d.values[0]};
						})
						.attr("transform", function(d) {
							console.log("in transform", d);
							// error on some with no d.values - American Samoa, for instance.
							if (d.value) {
								return "translate(" + xScale(dateFormat.parse(d.value.Year)) + "," + yScale(+d.value.Total) + ")";
								}
							else {
								return null;
								}
							})
						.attr("x", 3)
						.attr("dy", ".30em")
						.text(function(d) {
							if (d.value && +d.value.Total > 500000) {
							return d.name;
							}
						})
						.attr("class", "linelabel");

svg.append("text")
						.attr("class", "y label")
						.attr("transform", "translate(" + (margin.left / 1.2) + " ," +
										(height / 2.3 + margin.top) + ") rotate(-90)")
						.style("text-anchor", "middle")
						.attr("dy", "-67")
						.text("Infant Mortality under 5 years old");

var gy = svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + margin.left + ",0)")
					.call(yAxis);
				gy.selectAll("g").filter(function(d) { return d; })
    			.classed("minor", true);
				gy.selectAll("text")
	    		.attr("x", -70)
	    		.attr("dy", 0);

circles
							.on("mouseover", mouseoverCircleFunc)
							.on("mousemove", mousemoveCircleFunc)
							.on("mouseout",	mouseoutCircleFunc);

d3.selectAll("g.lines")
									.on("mouseover", mouseoverLinesFunc)
									.on("mouseout", mouseoutLinesFunc)
									.on("mousemove", mousemoveLinesFunc);

function mouseoverLinesFunc(d) {
								// line styling:
								// this is the g element. select it, then the line inside it!
								//console.log(d, this);
								d3.selectAll("path.line").classed("unfocused", true);
								// now undo the unfocus on the current line and set to focused.
								d3.select(this).select("path.line").classed("unfocused", false).classed("focused", true);
								/*tooltip
									.style("display", null) // this removes the display none setting from it
									.html("<p><b>" + d.key + "</b></p>");*/
							}
							function mouseoutLinesFunc() {
									// this removes special classes for focusing from all lines. Back to default.
									d3.selectAll("path.line").classed("unfocused", false).classed("focused", false);
									/*tooltip.style("display", "none");  // this sets it to invisible!*/
							}

/*function mouseoverFunc(d) {
									// line styling:
									// this is the g element. select it, then the line inside it!
									//console.log(d, this);
									d3.selectAll("path.line").classed("unfocused", true);
									// now undo the unfocus on the current line and set to focused.
									d3.select(this).select("path.line").classed("unfocused", false).classed("focused", true);
								}
								function mouseoutFunc() {
										// this removes special classes for focusing from all lines. Back to default.
										d3.selectAll("path.line").classed("unfocused", false).classed("focused", false);
								}*/

});
		</script>
	 </div>
	</body>
</html>

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