Commas appearing in my Years axis

New To Observable
1

Hi, I’ve got data in the format:

Year,Lady Gaga,Kay Perry,Beyonce
2005,0.37,0.43,0.42
2006,0.72,0.85,0.83
2007,1.05,1.24,1.23

When I create a graph the Years appear as: 2,005, 2,006, 2,007 - eg a thousand separator has appeared.

How do I remove it? I’ve tried adding scaleTime(domain, range) and scaleUtc(domain, range) but these just break the chart.

Here’s my code for the x-axis. Thanks :slightly_smiling_face:

    // Add X axis 
    var x = d3
    .scaleLinear()
    .domain(d3.extent(data, function(d) { return +d.year; }))
    .range([ 0, width ]);
    svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));
2

You can set the format with d3-axis | D3 by Observable

PS.: For future questions please open a GitHub discussion.

1 Like
3

Thanks, I found the answer:

// Add X axis 
var x = d3
.scaleLinear()
.domain(d3.extent(data, function(d) { return +d.year; }))
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(d3.format("y"))); //tickFormat worked

I’ll ask questions on Github in future.

1 Like