Simple line with hover

forked & adapted from d3noob's block: Simple line with hover

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 16px Helvetica;}

path { 
	stroke: #ff0000;
	stroke-width: 2;
	fill: none;
}

circle { 
	stroke: #ffffff;
  stroke-width: 3;
	fill: #cc0000;
  }  
  
.axis path,
.axis line {
	fill: none;
	stroke: #000;
	stroke-width: 1;
	shape-rendering: crispEdges;
}

div.tooltip {
     position:absolute;
        top:-10px; 
        right:9999px;
        width:120px;
        margin-right:-220px;
        padding:10px;
        color:#fff;
        background:#333;
        opacity:0;
       
    					
}

</style>
<body>

<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>

// Set the dimensions of the canvas / graph
var	margin = {top: 30, right: 20, bottom: 30, left: 50},
	width = 800 - margin.left - margin.right,
	height = 400 - margin.top;
 padding = 5; // space around the chart, not including labels
  
// Set the ranges
var	x = d3.scale.linear().range([padding, width-padding]);
var	y = d3.scale.linear().range([height, padding]).nice();

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

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

// Define the line
var	valueline = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.severity); });

// Define 'div' for tooltips
var div = d3.select("body")
	.append("div")  // declare the tooltip div 
	.attr("class", "tooltip")              // apply the 'tooltip' class
	.style("opacity", 0);                  // set the opacity to nil

// Adds the svg canvas
var	svg = d3.select("body")
	.append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom + padding*5)
	.append("g")
		.attr("transform", 
		      "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("data.csv", function(error, data) {
	data.forEach(function(d) {
		d.date = +d.date;
		d.close = +d.severity;
	});

// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain([0, d3.max(data, function(d) { return d.close; })]);

// Add the valueline path.
	svg.append("path")		
		.attr("class", "line")
		.attr("d", valueline(data));

// draw the scatterplot
	svg.selectAll("dot")									
		.data(data)											
	.enter().append("circle")								
		.attr("r", 7)	
		.attr("cx", function(d) { return x(d.date); })		 
		.attr("cy", function(d) { return y(d.close); })
  // Tooltip stuff after this
    .on("mouseover", function(d) {
                d3.select(this)
                .attr("r", 12);
             div.transition()     
                .duration(400)      
                .style("opacity", .9);      
             div.html("Week = " + 
                      +d.date + 
                      "<br/>" + 
                      "Severity = " + 
                      +d.severity)  
                .style("left", (d3.event.pageX+7) + "px")     
                .style("top", (d3.event.pageY-60) + "px");
            })        
            .on("mouseout", function(d) {
                d3.select(this)
                  .attr("r", 7);
            div.transition()        
                .duration(500)      
                .style("opacity", 0);

});

// Add the X Axis
	svg.append("g")	
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis);

// Add the Y Axis
	svg.append("g")	
		.attr("class", "y axis")
		.call(yAxis);

});

// now add titles to the axes
 svg.append("text")
    .attr("text-anchor", "middle")
    .attr("transform", "translate("+","+(height/2)+")rotate(-90)")       .text("Value");

svg.append("text")
            .attr("text-anchor", "middle")
            .attr("transform", "translate("+ (width/2) +","+ 
                  (height+padding*8)+")")  
            .text("Week");

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js