Public
Edited
Jan 31, 2023
1 fork
Insert cell
Insert cell
Insert cell
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);
});
}



Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more