Is an NVD3 Line Plot with Markers Possible?

Question

I'm making an NVD3 line plot that will have significantly improved clarity if I can get markers to show for each data point instead of just the line itself. Unfortunately, I haven't been able to find an easy way to do this with NVD3 yet. I also considered using a scatter plot, but I couldn't figure out how to show connecting lines between the points. A third option I considered was to overlay a line and scatter plot, but this would show each series twice in the legend and may cause other unnecessary visual complications.

Is there a way to elegantly pull this off yet? Sample code of my formatting technique is listed below, but the 'size' and 'shape' attributes in test_data have no effect on the line plot with the current code.

test_data = [ {     key: 'series1',
            values: [
                { x: 1, y: 2.33, size:5, shape:"circle" },
                { x: 2, y: 2.34, size:5, shape:"circle" },
                { x: 3, y: 2.03, size:5, shape:"circle" },
        ] } ];


nv.addGraph(function() {
  var test_chart = nv.models.lineChart();
  test_chart.xAxis.axisLabel('Sample Number');
  test_chart.yAxis
        .axisLabel('Voltage (V)')
        .tickFormat(d3.format('.02f'));

  d3.select('#test_plot')
      .datum(test_data)
    .transition().duration(500)
      .call(test_chart);

  nv.utils.windowResize(test_chart.update);
  return test_chart;
});

Answer 1

I also wanted to add markers in a project I was working on. Here is a solution my partner and I found.

First, you have to select all of the points in your chart and set the fill-opacity to 1:

#my-chart .nv-lineChart circle.nv-point
{
    fill-opacity: 1;
}

Now your points will be visible. To adjust the size of each point you need to modify each one's "r" (for radius) attribute. This isn't a style so you can't do it with css. Here is some jQuery code that does the job. The 500 millisecond delay is so the code will not run before the chart is rendered. This snippet sets the radius to 3.5:

        setTimeout(function() {
            $('#my-chart .nv-lineChart circle.nv-point').attr("r", "3.5");
        }, 500);

Answer 2

This puzzled me until I got help from the community:

css styling of points in figure

So here is my solution, based on css:

.nv-point {
    stroke-opacity: 1!important;
    stroke-width: 5px!important;
    fill-opacity: 1!important;
}

If anyone has come here from rCharts, below is a rmarkdown template to create an nPlot with both lines and markers:

 ```{r 'Figure'}  
require(rCharts)
load("data/df.Rda") 
# round data for rChart tooltip display
df$value <- round(df$value, 2)
n <- nPlot(value ~ Year, group = 'variable', data = df, type = 'lineChart') 
n$yAxis(axisLabel = 'Labor and capital income (% national income)')
n$chart(margin = list(left = 100)) # margin makes room for label
n$yAxis(tickFormat = "#! function(d) {return Math.round(d*100*100)/100 + '%'} !#")
n$xAxis(axisLabel = 'Year')
n$chart(useInteractiveGuideline=TRUE)
n$chart(color = colorPalette)
n$addParams(height = 500, width = 800)
n$setTemplate(afterScript = '<style>
  .nv-point {
    stroke-opacity: 1!important;
    stroke-width: 6px!important;
    fill-opacity: 1!important;
  } 
</style>'
)
n$save('figures/Figure.html', standalone = TRUE)
```

Answer 3

The current version of nvd3 use path instead of circle to draw markers. Here is a piece of css code that i used to show markers.

#chart g.nv-scatter g.nv-series-0 path.nv-point
{
    fill-opacity: 1;
    stroke-opacity: 1;
}

And I also write something about this in https://github.com/novus/nvd3/issues/321, you could find that how i change the shape of makers.

I don't know how to change the size of markers. Trying to find a solution.

Answer 4

Selectively enable points to some series using the following logic in nvd3.

//i is the series number; starts with 0

var selector = 'g.nv-series-'+i+' circle';
d3.selectAll(selector).classed("hover",true);

However an additional parameter( like say 'enable_points':'true') in the data would make better sense. I will hopefully push some changes to nvd3 with this idea.

Answer 5

For current version of NVD3 (1.8.x), I use this D3-based solution (scripting only, no CSS file or style block required):

nv.addGraph(function() {
  // ...
  return chart;
},
function() {
  // this function is called after the chart is added to document
  d3.selectAll('#myChart .nv-lineChart .nv-point').style("stroke-width",
    "7px").style("fill-opacity", ".95").style("stroke-opacity", ".95");
}
);

The styles used are exactly the styles added by NVD3 by applying the "hover" class to each point (when hovered). Adjust them to your needs.