<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* set the CSS */
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
/* pointer-events: none; This line needs to be removed */
}
</style>
<body>
<!-- load the d3.js library -->
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js">
</script>
<div>
<select id="inds">
<option value=2.5 selected="selected">0.5</option>
<option value=5>1</option>
<option value="10">2</option>
</select>
</div>
<script>
// Set the dimensions of the canvas / graph
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B"); // Format tooltip date / time
// Set the ranges
var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// 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.close);
});
// 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)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Get the data
var datajson = '[ { "date": "1", "close": 58.13 }, { "date": "2", "close": 53.98 }, { "date": "3", "close": 67 }, { "date": "4", "close": 89.7 }, { "date": "5", "close": 99 }, { "date": "6", "close": 130.28 }, { "date": "7", "close": 166.7 }, { "date": "8", "close": 234.98 }, { "date": "9", "close": 345.44 }, { "date": "10", "close": 443.34 }, { "date": "11", "close": 543.7 }, { "date": "12", "close": 580.13 }, { "date": "13", "close": 605.23 }, { "date": "14", "close": 622.77 }, { "date": "15", "close": 626.2 }, { "date": "16", "close": 628.44 }, { "date": "17", "close": 636.23 }, { "date": "18", "close": 633.68 }, { "date": "19", "close": 624.31 }, { "date": "20", "close": 629.32 }, { "date": "21", "close": 618.63 }, { "date": "22", "close": 609.86 }, { "date": "23", "close": 617.62 }, { "date": "24", "close": 606.98}]';
var data = JSON.parse(datajson);
data.forEach(function(d) {
d.date = d.date;
d.close = +d.close;
});
// Scale the range of the data
x.domain([0, Math.floor(2.5)]);
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", 5)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.close);
})
// 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);
d3.select('#inds').on("change", function() {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
x.domain([0, Math.floor(section)]);
d3.select(".x.axis").call(xAxis);
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// draw the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d) {
return y(d.close);
})
});
</script>
</body>
