D3.js v3 Dot Plot Histogram Duplicating Values

I am building a dot plot histogram with d3.js v3 and I have pretty much finished everything up - except for whatever reason some of my data points are duplicating (certain circles repeating themselves - not all of them, just some). I tried tweaking the axis parameters, as well as the data itself [deleted rows with null values, etc]- however sadly to no avail.

Any help would be immensely appreciated.

Here's my relevant code:

<div id="dotHappy"></div>

var data = d3.csv('happy_dot_modified.csv', function(data) {

 data.forEach(function(d) {
    d["city"] = d["city"];
    d["Happy"] = +d["Happy"];
    d["thc"] = +d["thc"];
 });

 var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
},
width = 1560 - margin.left - margin.right,
height = 1260 - margin.top - margin.bottom;

I tried this coder block but it wasn't working. (Not sure if this is even what's giving me the issue anyways - perhaps not).

// var x = d3.scale.linear()
//     .range([0, width]);

So I went with this:

var x = d3.scale.ordinal()
.rangePoints([0, width])

var y = d3.scale.linear()
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var svg = d3.select("#dotHappy")
 .append("svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var chart = svg.append("g")
 .attr("id", "chart");

Also tried tweaking this, which may or may not even be part of the problem.

x.domain(data.map(d => d.Happy));
y.domain([5, 33]);
// y.domain(data.map(d => d.city));

svg.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(xAxis)
 // .append("text")
 .attr("class", "label")
 .attr("x", width)
 .attr("y", -6)
 .style("text-anchor", "end")
 .text("Happy");

svg.append("g")
 .attr("class", "y axis")
 // .attr("transform", "translate(0," + width + ")")
 .call(yAxis)
 // .append("text")
 .attr("class", "label")
 .attr("transform", "rotate(-90)")
 .attr("y", 6)
 .attr("dy", ".71em")
 .style("text-anchor", "end")
 .text("THC");

var groups = svg.selectAll(".groups")
 .data(data)
 .enter()
 .append("g")
 .attr("transform", function(d) {
    return "translate(" + x(d.Happy) + ".0)";
 });

var dots = groups.selectAll("circle")
.data(function(d) {
    return d3.range(1, +d.thc + 1)
    // return d3.range(d.thc)
})
.enter().append("circle")
.transition().duration(1000)
.attr("class", "dot")
.attr("r", 10)
.attr("cy", function(d) {
    return y(d)
})
.style("fill", "blue")
.style("opacity", 1);

})

Here is a snapshot of my csv file:

city.  |.   Happy.    | thc
Boston.       37.        23
NYC.          22.        30
Chicago.      88.        5

Following is a screenshot of what it currently looks like. So in this case, the tooltip displaying the text box 'The Sister' should be only for one circle (because it should only be one data point), however if you hover over the other 10 orange circles below it, it's all the same - indicating it has been repeated 11 times total:

from D3.js v3 Dot Plot Histogram Duplicating Values