3e:null 3f:["$","title",null,{"children":"D3 Timeline vertical | Daniela Galvez Vidal | Observable"}] 45:T940, function drawDemo5() { // var width = 600, height = 500; // var svg = d3.select("body") // .append("svg") // .attr("width", width) // .attr("height", height); 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 yScale = d3.scaleTime() .domain(domain) .range([300, 0]); var yAxis = d3.axisLeft(yScale); var svg = d3.select("#dateDemo5"); svg.append("g") .attr("transform", "translate(100,0)") .call(yAxis); // svg.append("g") // .attr("transform", "translate(100,0)") // .call(yAxis.ticks(d3.timeMonth)); // svg.selectAll(".tick text").remove(); // svg.append("g") // .attr("transform", "translate(100,0)") // .call(yAxis.ticks(d3.timeYear)); // svg.append("text") // .attr("transform", "translate(80,120)") // .style("text-anchor", "middle") // .attr("fill", "black") // .text("Date"); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("r", 4) .attr("fill", "blue") .attr("cy", (d) => yScale(parseTime(d.date))) .attr("cx", 50) .on("mouseover", function(d) { tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(d.date) .style("top", (d3.event.pageY) + "px") .style("left", (d3.event.pageX /*- 28*/) + "px"); }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); }); } 46:[] 43:{"id":"ea24761deb301448","slug":null,"title":"D3 Timeline vertical","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-01-31T21:44:37.452Z","update_time":"$D2023-02-02T01:40:09.905Z","view_time":null,"first_public_time":"$D2023-01-31T21:44:37.452Z","has_unpublished_edits":null,"fork":{"id":"44892159faf2c6b8","slug":null,"title":"D3 Timeline","owner":{"id":"093f385adc70caad","login":"6f2942536be0501b","name":"Daniela Galvez Vidal"}},"stars":0,"starred":false,"owner":{"type":"team","id":"093f385adc70caad","login":"6f2942536be0501b","name":"Daniela Galvez Vidal","avatar_url":null,"tier":"starter_2024","bio":"","following":false},"version":197,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6f2942536be0501b","login":"6f2942536be0501b","name":"Daniela Galvez Vidal","avatar_url":null,"tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6f2942536be0501b","login":"6f2942536be0501b","name":"Daniela Galvez Vidal","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Timeline vertical","cells":[{"id":0,"value":"# D3 Timeline vertical","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"HTML\n\n\n \n \n \n Protests\n \n \n

Protests in the US from 2017 to 2022

\n \n \n \n \n \n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"