Modify log y-axis scale in dc.js

Question

I'm trying to format the y-axis number values to 1, 10, 100, 1,000, 10,000, and while the formatted values are displayed as hoped, I can't find a way to show only some of the tick labels. The goal is to show just 10, 100, 1,000 etc. and not 20, 30, 40, 50, 60, etc.

Using dc.js and crossfilter to define the dimensions and grouping:

var lineChart = dc.lineChart("#dc-line-chart");

    lineChart
            .width(500)
            .height(500)
            .margins({top: 10, right: 50, bottom: 30, left: 40})
            .dimension(yearValue)
            .group(yearValueGroup)
            .brushOn(false)
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .y(d3.scale.log().domain([.5, 1000000]))
            .x(d3.scale.linear().domain([2000, 2050]))
            .yAxis().tickFormat(d3.format(",.0f"));

I've seen examples of custom javascript solutions, but it seems there has to be a simpler solution. Any help is much appreciated.

If you know the exact ticks you want, you should be able to use d3.axis.tickValues. — Gordon
That worked, thank you! It limits the gridlines to the specified values, but it's close enough to what we need at this point. — Patrick Marcotte

Patrick Marcotte Patrick Marcotte · Accepted Answer · 2015-09-27T20:56:10

I was able to apply the example from http://bl.ocks.org/mbostock/5537697 to the dc.js chart. The updated code is below.

        var lineChart = dc.lineChart("#dc-line-chart");
        lineChart
            .width(550)
            .height(400)
            .margins({top: 10, right: 20, bottom: 30, left: 60})
            .dimension(yearValue)
            .group(yearValueGroup)
            .brushOn(false)
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .y(d3.scale.log().domain([.5, 1000000]))
            .x(d3.scale.linear().domain([2000, 2100]))          
            .yAxis().ticks(10, ",.0f").tickSize(5, 0);

EDIT: Given the flexibility offered by dc.js, it seems like a good idea to consider adding ".clamp(true)" whenever grouping data with unknown bounds or data that you know will sometimes yield results outside of your domain (i.e., zero in the case of log scaling). The .y line now reads:

.y(d3.scale.log().clamp(true).domain([.5, 1000000]))

More about this can be found at https://github.com/mbostock/d3/wiki/Quantitative-Scales#log_clamp.

Modify log y-axis scale in dc.js

1 Answers