Multiple layers with dc.js series charts - d3.js

Question

I'm struggling to get a dc.js plot to work. The data object contains 2 value fields, and I need to designate val to scatterPlot and smooth to lineChart. Example below and jsfiddle here.
<div id="series-chart"></div>
<style>div{ display: inline; }</style>
<script>
var datum = [
{date: "2018-01-01T00:00:00Z", val: 0, smooth: 3, type: "set1"},
{date: "2018-01-02T00:00:00Z", val: 7, smooth: 4, type: "set1"},
{date: "2018-01-03T00:00:00Z", val: 1, smooth: 6, type: "set1"},
{date: "2018-01-04T00:00:00Z", val: 4, smooth: 8, type: "set1"},
{date: "2018-01-05T00:00:00Z", val: 8, smooth: 11, type: "set1"},
{date: "2018-01-06T00:00:00Z", val: 15, smooth: 14, type: "set1"},
{date: "2018-01-07T00:00:00Z", val: 12, smooth: 17, type: "set1"},
{date: "2018-01-08T00:00:00Z", val: 20, smooth: 20, type: "set1"},
{date: "2018-01-01T00:00:00Z", val: 15, smooth: 12, type: "set2"},
{date: "2018-01-02T00:00:00Z", val: 10, smooth: 11, type: "set2"},
{date: "2018-01-03T00:00:00Z", val: 14, smooth: 9, type: "set2"},
{date: "2018-01-04T00:00:00Z", val: 7, smooth: 7, type: "set2"},
{date: "2018-01-05T00:00:00Z", val: 12, smooth: 5, type: "set2"},
{date: "2018-01-06T00:00:00Z", val: 8, smooth: 4, type: "set2"},
{date: "2018-01-07T00:00:00Z", val: 8, smooth: 3, type: "set2"},
{date: "2018-01-08T00:00:00Z", val: 5, smooth: 2, type: "set2"}
];
var data = crossfilter(datum);
var typeSeriesDimension = data.dimension(function(d){ return [d.type, new Date(d.date)]; });
var totalGroupRaw = typeSeriesDimension.group().reduceSum(function(d){ return d.val; });
var totalGroupSmooth = typeSeriesDimension.group().reduceSum(function(d){ return d.smooth; });
var composite = dc.compositeChart("#series-chart");
composite
.width(400)
.height(400)
.x(d3.time.scale().domain([new Date("2018-01-01T00:00:00Z"), new Date("2018-01-08T00:00:00Z")]))
.dimension(typeSeriesDimension)
.compose([
dc.lineChart(composite)
.dimension(typeSeriesDimension)
.group(totalGroupSmooth)
// .seriesAccessor(function(d) {return d.key[0];})
.keyAccessor(function(d) {return d.key[1];})
.valueAccessor(function(d) {return d.value;}) ,
dc.scatterPlot(composite)
.dimension(typeSeriesDimension)
.group(totalGroupRaw)
// .seriesAccessor(function(d) {return d.key[0];})
.keyAccessor(function(d) {return d.key[1];})
.valueAccessor(function(d) {return d.value;})
])
.legend(dc.legend().x(100).y(10).itemHeight(20).gap(5));
dc.renderAll();
</script>
The categorical colour mapping doesn't work without seriesAccessor, and uncommented these lines cause script to fail with:
Uncaught TypeError: dc.lineChart(...).dimension(...).group(...).seriesAccessor is not a function
Also the lines are for some reason I can't establish plotting in the wrong order.
All round fail. Any assistance much appreciated!

Answer 1

That dimension makes sense for the scatter plot, but it doesn't make sense for the line chart.
A line chart expects to have simple scalar keys like dates. But the scatter plot expects to have 2D keys like [type, Date].
Luckily the composite chart doesn't really mind if its child charts use different dimensions.
So define a new time dimension and use that for the line chart's group:
var timeSeriesDimension = data.dimension(function(d) { return new Date(d.date);})
var totalGroupSmooth = timeSeriesDimension.group().reduceSum(function(d){ return d.smooth; });
And drop your key and value accessors from the line chart, because the default behavior is fine now:
//.keyAccessor(function(d) {return d.key[1];})
//.valueAccessor(function(d) {return d.value;}) ,
As for seriesAccessor, that's only used with dc.seriesChart, so I'm afraid it won't help you here. It's probably possible to combine a scatter plot with a series chart, because the series chart is just a specialization of the composite chart, but I haven't tried that - and I'd rather leave that for another question if you want to try that out.