3e:null 3f:["$","title",null,{"children":"D3 Timeline | Daniela Galvez Vidal | Observable"}] 45:T7b5, 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); }); } 46:[] 43:{"id":"a8b65a145ce3c71c","slug":null,"title":"D3 Timeline","thumbnail":"2df1fd033b69e411f14a5959234454545d557621188e26908e36d42409eb79d9","access_level":"public","create_time":"$D2023-01-31T19:55:43.682Z","update_time":"$D2023-01-31T21:09:45.277Z","view_time":null,"first_public_time":"$D2023-01-31T19:55:43.682Z","has_unpublished_edits":null,"fork":false,"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":49,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Timeline","cells":[{"id":0,"value":"# D3 Timeline","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","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"