ayapi/dcjs_scatterAndLineRightAxis.html

## dcjs_scatterAndLineRightAxis.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>dc.js - Scatter And Line Plot</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/dc.css"/>
<style>
body{
  background: black;
}
svg text{
  fill: white;
}
.dc-chart .axis path, .axis line{
  stroke: white;
}
</style>
</head>
<body>
<div id="scatterAndLine"></div>

<script src="../js/d3.js"></script>
<script src="../js/crossfilter.js"></script>
<script src="../js/dc.js"></script>
<script>

var chart = dc.compositeChart("#scatterAndLine");
d3.tsv("scatter_testdata.tsv", function(scatter_data) {
  d3.tsv("line_testdata.tsv", function(line_data) {
    var ndx              = crossfilter(scatter_data),
        scatterDimension = ndx.dimension(function(d){ return [+d.x, +d.y] }),
        scatterGroup     = scatterDimension.group();

    var ndx2          = crossfilter(line_data),
        lineDimension = ndx2.dimension(function(d){ return +d.x }),
        lineGroup     = lineDimension.group().reduceSum(function(d){ return +d.y });

    chart
        .compose([
            dc.scatterPlot(chart)
                .dimension(scatterDimension)
                .group(scatterGroup, "Scatter")
                .keyAccessor(function(p) {return p.key[0]})
                .valueAccessor(function(p) {return Math.abs(p.key[1])})
                .symbol("square")
                .symbolSize(5)
                .colors(["white", "magenta"])
                .colorAccessor(function (d) {
                  return d && d.key[1] > 0 ? 1 : 0;
                }),
            dc.lineChart(chart)
                .dimension(lineDimension)
                .group(lineGroup, "Line")
                .colors("cyan")
                .useRightYAxis(true)
        ])
        .width(640)
        .height(320)
        .x(d3.scale.linear().domain([0,30]))
        .renderHorizontalGridLines(true)
        .brushOn(false);

    chart.render();
  });
});

</script>
</body>
</html>

## line_testdata.tsv

          
            x
            y

            
              0
              -3

            
              1
              -2

            
              2
              -1

            
              3
              0

            
              4
              1

            
              5
              2

            
              6
              2

            
              7
              4

            
              8
              8

            
              9
              12

            
              10
              18

            
              11
              20

            
              12
              10

            
              13
              8

            
              14
              12

            
              15
              14

            
              16
              22

            
              17
              4

            
              18
              5

            
              19
              8

            
              20
              10

            
              21
              19

            
              22
              14

            
              23
              10

            
              24
              4

            
              25
              6

            
              26
              8

            
              27
              10

            
              28
              11

            
              29
              5

            
              30
              4

## scatter_testdata.tsv

          
            x
            y

            
              10.4
              -5.4

            
              5.2
              4.5

            
              12.8
              3.2

            
              20.4
              14.8

            
              2.1
              1.4

            
              29.4
              10.4

            
              20.8
              20.9

            
              12.1
              -10.4

            
              3.2
              -4.5

            
              4.4
              -9.4

            
              4.8
              -6.8

            
              9.7
              7.9

            
              18.4
              5.9

            
              23.8
              13.9

            
              8.9
              5.74

            
              27.4
              9.8

            
              17.5
              14.4

            
              10.74
              -12.8

            
              5.2
              -8.97

            
              8.5
              -10.4

            
              2.4
              -3.8

            
              4.3
              4.4

            
              1.4
              1.38

            
              2.2
              0

            
              5.8
              1.8

            
              6.4
              4.34

            
              4.9
              2.8

            
              1.1
              -9.4

            
              3.3
              -3.6

            
              4.8
              -7.4

            
              4.9
              -5.6

            
              9.4
              6.7

            
              1.5
              4.9

            
              0
              8.4

            
              1.4
              4.6

            
              2.5
              7.7

            
              15.7
              3.9

            
              6.7
              -12.4

            
              2.6
              -4.6

            
              8.9
              -10.9
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>dc.js - Scatter And Line Plot</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../css/dc.css"/>
	<style>
	body{
	background: black;
	}
	svg text{
	fill: white;
	}
	.dc-chart .axis path, .axis line{
	stroke: white;
	}
	</style>
	</head>
	<body>
	<div id="scatterAndLine"></div>

	<script src="../js/d3.js"></script>
	<script src="../js/crossfilter.js"></script>
	<script src="../js/dc.js"></script>
	<script>

	var chart = dc.compositeChart("#scatterAndLine");
	d3.tsv("scatter_testdata.tsv", function(scatter_data) {
	d3.tsv("line_testdata.tsv", function(line_data) {
	var ndx = crossfilter(scatter_data),
	scatterDimension = ndx.dimension(function(d){ return [+d.x, +d.y] }),
	scatterGroup = scatterDimension.group();

	var ndx2 = crossfilter(line_data),
	lineDimension = ndx2.dimension(function(d){ return +d.x }),
	lineGroup = lineDimension.group().reduceSum(function(d){ return +d.y });

	chart
	.compose([
	dc.scatterPlot(chart)
	.dimension(scatterDimension)
	.group(scatterGroup, "Scatter")
	.keyAccessor(function(p) {return p.key[0]})
	.valueAccessor(function(p) {return Math.abs(p.key[1])})
	.symbol("square")
	.symbolSize(5)
	.colors(["white", "magenta"])
	.colorAccessor(function (d) {
	return d && d.key[1] > 0 ? 1 : 0;
	}),
	dc.lineChart(chart)
	.dimension(lineDimension)
	.group(lineGroup, "Line")
	.colors("cyan")
	.useRightYAxis(true)
	])
	.width(640)
	.height(320)
	.x(d3.scale.linear().domain([0,30]))
	.renderHorizontalGridLines(true)
	.brushOn(false);

	chart.render();
	});
	});

	</script>
	</body>
	</html>
	x	y
	0	-3
	1	-2
	2	-1
	3	0
	4	1
	5	2
	6	2
	7	4
	8	8
	9	12
	10	18
	11	20
	12	10
	13	8
	14	12
	15	14
	16	22
	17	4
	18	5
	19	8
	20	10
	21	19
	22	14
	23	10
	24	4
	25	6
	26	8
	27	10
	28	11
	29	5
	30	4
	x	y
	10.4	-5.4
	5.2	4.5
	12.8	3.2
	20.4	14.8
	2.1	1.4
	29.4	10.4
	20.8	20.9
	12.1	-10.4
	3.2	-4.5
	4.4	-9.4
	4.8	-6.8
	9.7	7.9
	18.4	5.9
	23.8	13.9
	8.9	5.74
	27.4	9.8
	17.5	14.4
	10.74	-12.8
	5.2	-8.97
	8.5	-10.4
	2.4	-3.8
	4.3	4.4
	1.4	1.38
	2.2	0
	5.8	1.8
	6.4	4.34
	4.9	2.8
	1.1	-9.4
	3.3	-3.6
	4.8	-7.4
	4.9	-5.6
	9.4	6.7
	1.5	4.9
	0	8.4
	1.4	4.6
	2.5	7.7
	15.7	3.9
	6.7	-12.4
	2.6	-4.6
	8.9	-10.9