Is there a way to display only unique values in the legend for a scatterplot created in d3?
Another question I have is how can I remove commas from the axis labels?
To visualize this issue, here is the current look of the plot: https://i.sstatic.net/X1h0p.png
Shown below is the code snippet within the d3.csv function:
var x = d3.scaleLinear()
.domain([1900,d3.extent(data, d=> d.yearFilmed)[1]])
.range([0, width]);
svG
.append('g')
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
var y = d3.scaleLinear()
.domain([1900,d3.extent(data, d=> d.yearBuilt)[1]])
.range([height, 0]);
svG
.append('g')
.call(d3.axisLeft(y));
const colorScale = d3.scaleOrdinal()
.range(d3.schemeCategory10);
var plot = (data, svG) =>{
var circle = svG.selectAll('circle')
.data(data);
circle
.enter()
.append("circle")
.attr("cx", function(d){ return x(d.yearFilmed) })
.attr("cy", function(d){ return y(d.yearBuilt) })
.attr("r", 10)
.attr('fill', d => colorScale(d.filmGenre))
.on("mouseover", tipMouseover)
.on("mouseout", tipMouseout);
var rekt = svG.selectAll("rect")
.data(data)
.attr("class", "legend");
rekt
.enter()
.append('rect')
.attr("x", width+20)
.attr("transform", function(d, i) { return "translate(0, " + i * 20 + ")"; })
.attr("width", 18)
.attr("height", 18)
.attr("fill", d => colorScale(d.filmGenre));
svG.selectAll("text.legend")
rekt.enter()
.append("text")
.attr("class", "legend") // create a class for legend text. so when you make changes to it, other text on this pg won't be affected
.attr("y", 15)
.attr("x", width+45)
.attr("transform", function(d, i) { return "translate(0, " + i * 20 + ")"; })
.text(function(d) {return d.filmGenre;})
rekt
.exit()
.remove()
};
var archStyl = () => {
d3.selectAll('rect')
.attr("fill", d => colorScale(d.archStyle))
d3.selectAll('text.legend')
.text(function(d) {return d.archStyle;});
d3.selectAll("circle")
.transition()
.attr('fill', d => colorScale(d.archStyle));
plot(data, svG);
};
var filmGenr = () => {
d3.selectAll('rect')
.attr("fill", d => colorScale(d.filmGenre))
d3.selectAll('text.legend')
.text(function(d) {return d.filmGenre;});
d3.selectAll("circle")
.transition()
.attr('fill', d => colorScale(d.filmGenre));
plot(data, svG);
};
document.getElementById('archStyl').addEventListener('click', archStyl);
document.getElementById('filmGenr').addEventListener('click', filmGenr);
plot(data, svG);
});