function drawDemo5() {
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var data = [
{"date": "Apr 1, 1970", "event": "A"},
{"date": "Jun 15, 1971", "event": "B"},
{"date": "Mar 30, 1972", "event": "C"},
{"date": "Jan 1, 1973", "event": "D"},
{"date": "Jun 15, 1973", "event": "E"}
];
var parseTime = d3.timeParse("%b %d, %Y");
var dates = [];
for (let obj of data) {
dates.push(parseTime(obj.date));
}
var domain = d3.extent(dates);
domain = [d3.timeYear.floor(domain[0]), d3.timeYear.ceil(domain[1])];
var xScale = d3.scaleTime()
.domain(domain)
.range([25, 555]);
var xAxis = d3.axisBottom(xScale);
var svg = d3.select("#dateDemo5");
svg.append("g")
.attr("transform", "translate(0,60)")
.call(xAxis.ticks(d3.timeMonth));
svg.selectAll(".tick text").remove();
svg.append("g")
.attr("transform", "translate(0,60)")
.call(xAxis.ticks(d3.timeYear));
svg.append("text")
.attr("transform", "translate(300,95)")
.style("text-anchor", "middle")
.attr("fill", "black")
.text("Dates");
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 7)
.attr("fill", "black")
.attr("cx", (d) => xScale(parseTime(d.date)))
.attr("cy", 50)
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d.date)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
}