31:T923,chart = (data,height, chartTitle)=> { const svg = d3.select(DOM.svg(width,height)) .style("background-color","#51244f") svg.append("text") .attr("x",width/2) .attr("y",30) .text(chartTitle) .style("text-anchor","middle") .style("font-size","1.3em") .style("fill","#eaaa87") .style("font-family","Times New Roman") .style("font-weight","bold") const formatYear = d3.timeParse("%Y") const x = d3.scaleTime() .domain(d3.extent(data,d=>formatYear(d.Year))) .range([margin.left,width-margin.right]) const circle = svg.selectAll("circle") .data(data) .join("circle") .attr("r",radius) .attr("fill",d=>d.Abduction==1?"white":"none") .attr("stroke","#eaaa87") .attr("stroke-width",1.8) const simulation = d3.forceSimulation() .force("x",d3.forceX(d=>x(formatYear(d.Year))).strength(1.8)) .force("y",d3.forceY(height/2)) .force("collide",d3.forceCollide(radius+padding).strength(2)) simulation.nodes(data) .on("tick",d=>circle.attr("cx",(d,i)=>d.x) .attr("cy",(d,i)=>d.y)) .on("end",tooltip) function tooltip(d) { let labels = data.filter(d=>d.Abduction==1).map((d,i)=>{ return { x:d.x, y:d.y, dx:-20, dy:-20, color:"#eaaa87", note:{ label:d.Name, } } }) const type = d3.annotationCustomType( d3.annotationCalloutElbow, {"className":"custom", "connector":{"end":"dot"}, "note":{"lineType":"horizontal", "align":"middle"}}) let makeAnnot = d3.annotation() .editMode(true) .type(type) .textWrap(120) .annotations(labels) svg.append("g") .call(makeAnnot) } const xAxis = g => g.attr("transform", `translate(0,${height-margin.bottom})`) .call(d3.axisBottom(x)) svg.append("g") .call(xAxis) .attr("color","#eaaa87") .style("font-size","0.7em") return svg.node() }32:[{"id":"bf2bb81f0c3c53a4170979ced9ac41ddd6236a7f79c929d55f287e858f04f0bc6f0f2762f5c4d2911b45c49e9ab059e16380f474503d5add59df8d4d42257669","href":"https://static.observableusercontent.com/files/bf2bb81f0c3c53a4170979ced9ac41ddd6236a7f79c929d55f287e858f04f0bc6f0f2762f5c4d2911b45c49e9ab059e16380f474503d5add59df8d4d42257669","name":"test@1.csv","type":"text/csv","lastModified":1619682040850.972,"size":11461}] 2f:{"title":"UFOs and Alien Abductions","cells":[{"id":0,"value":"html`

UFOs and Alien Abductions

Week 5 :Uncertainties. Day 27 : Educational.

#30daychartchallenge

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"html\n`

\nAlien Abductions over the years from 1865 - 2004. Abductions have a white fill with annotations.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"html`

Data Credit:\nLarry Winner's\n,Miscellany dataset\non UFO's\n
\nand alien abductions.\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"chart(group.get(\"1800's\"),160,\"1865 - 1895\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"chart(group.get(\"1930's\"),150,\"1930's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"chart(group.get(\"1940's\"),180,\"1940's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"chart(group.get(\"1950's\"),250,\"1950's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"chart(group.get(\"1960's\"),350,\"1960's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"chart(group.get(\"1970's\"),400, \"1970's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"chart(group.get(\"1980's\"),350, \"1980's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"chart(group.get(\"1990's\"),260, \"1990's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"chart(group.get(\"2000's\"),230,\"2000's\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"padding = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"radius = 6.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"margin = ({left:50,right:50,top:30,bottom:50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"group = d3.group(data,d=>d.Period)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = FileAttachment('test@1.csv').csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@6',\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}