My iteration of me original scatterplot using the UN Intentional Homicide dataset.

It isn't perfect, I still haven't figured out how to make the country names more clear,

Based on the comment from a classmate: "Hello Lilly-beth, I was looking through your scatterplots and found the first one about homicide rates to be particularly interesting. I think if you decide to keep that viz as a scatterplot for your final project, an interesting iteration would be to highlight the outliers (perhaps display the name of the country, and the homicide count by gender for each). I noticed that there is a rather extreme outlier in 2003 and I would be interested in knowing which country that was. From there it would be interesting to see why it became such an outlier that year (if there was a war going on, or something)."

const voronoi = d3.Delaunay .from(data, d => x(d.Year), d => y(d.Value)) .voronoi([margin.left, margin.top, width - margin.right, height - margin.bottom]); // ensures voronoi is limited to the chart area

svg.append("g") .attr("class", "voronoiWrapper") .selectAll("path") .data(data) .join("path") .attr("opacity", 0.5) .attr("stroke", "#ff1493") // Hide overlay .attr("fill", "none") .style("pointer-events", "all") .attr("d", (d,i) => voronoi.renderCell(i)) .on("mouseover", (d, i) => { if (d.y > 1) { svg.append('g') .attr("class", "tooltip") .attr("transform", translate(${y(d.y)})) .call(popover, Country Name: ${d.x.toLocaleString(undefined, {Sex: "short", Crime: "numeric", year: "numeric"})} ${d.Country}) } }) .on("mouseout", () => svg.selectAll('.tooltip').remove());