mattsrinc/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is an example of a dc.js chart in a bl.ock - please fork
this bl.ock when asking for help on Stack Overflow or the dc.js user group, or to demonstrate bugs when filing an issue on GitHub.
This was created with blockbuilder.org - you can use blockbuilder to fork and edit this bl.ock interactively. Or you can edit your fork using gist.github.com, or even clone the gist as a git repository.
Notice that this bl.ock loads its data from an asset named morley.csv within the gist - that's one advantage of using bl.ocks instead of fiddles.
forked from gordonwoodhull's block: dc.js example

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3/dc.css" />
  <script src="https://unpkg.com/d3@5/dist/d3.js"></script>
  <script src="https://unpkg.com/crossfilter2@1.4/crossfilter.js"></script>
  <script src="https://unpkg.com/dc@3/dc.js"></script>
  <script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
  <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  <style>
  </style>
</head>

<body>
  <div id="test"></div>

  <script>
    var chart = dc.barChart("#test");
    d3.csv("morley.csv").then(function(experiments) {

      experiments.forEach(function(x) {
        x.Speed = +x.Speed;
      });

      var ndx                 = crossfilter(experiments),
          runDimension        = ndx.dimension(function(d) {return +d.Run;}),
          speedSumGroup       = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 1000;});

      chart
        .width(768)
        .height(480)
        .x(d3.scaleLinear().domain([0,20]))
        .brushOn(false)
        .yAxisLabel("This is the Y Axis!")
        .dimension(runDimension)
        .group(speedSumGroup)
        .on('renderlet', function(chart) {
            chart.selectAll('rect').on("click", function(d) {
                console.log("click!", d);
            });
        });
        chart.render();
    });

  </script>
</body>

## morley.csv

          
            Expt
            Run
            Speed

            
              1
              1
              850

            
              1
              2
              740

            
              1
              3
              900

            
              1
              4
              1070

            
              1
              5
              930

            
              1
              6
              850

            
              1
              7
              950

            
              1
              8
              980

            
              1
              9
              980

            
              1
              10
              880

            
              1
              11
              1000

            
              1
              12
              980

            
              1
              13
              930

            
              1
              14
              650

            
              1
              15
              760

            
              1
              16
              810

            
              1
              17
              1000

            
              1
              18
              1000

            
              1
              19
              960

            
              1
              20
              960

            
              2
              1
              960

            
              2
              2
              940

            
              2
              3
              960

            
              2
              4
              940

            
              2
              5
              880

            
              2
              6
              800

            
              2
              7
              850

            
              2
              8
              880

            
              2
              9
              900

            
              2
              10
              840

            
              2
              11
              830

            
              2
              12
              790

            
              2
              13
              810

            
              2
              14
              880

            
              2
              15
              880

            
              2
              16
              830

            
              2
              17
              800

            
              2
              18
              790

            
              2
              19
              760

            
              2
              20
              800

            
              3
              1
              880

            
              3
              2
              880

            
              3
              3
              880

            
              3
              4
              860

            
              3
              5
              720

            
              3
              6
              720

            
              3
              7
              620

            
              3
              8
              860

            
              3
              9
              970

            
              3
              10
              950

            
              3
              11
              880

            
              3
              12
              910

            
              3
              13
              850

            
              3
              14
              870

            
              3
              15
              840

            
              3
              16
              840

            
              3
              17
              850

            
              3
              18
              840

            
              3
              19
              840

            
              3
              20
              840

            
              4
              1
              890

            
              4
              2
              810

            
              4
              3
              810

            
              4
              4
              820

            
              4
              5
              800

            
              4
              6
              770

            
              4
              7
              760

            
              4
              8
              740

            
              4
              9
              750

            
              4
              10
              760

            
              4
              11
              910

            
              4
              12
              920

            
              4
              13
              890

            
              4
              14
              860

            
              4
              15
              880

            
              4
              16
              720

            
              4
              17
              840

            
              4
              18
              850

            
              4
              19
              850

            
              4
              20
              780

            
              5
              1
              890

            
              5
              2
              840

            
              5
              3
              780

            
              5
              4
              810

            
              5
              5
              760

            
              5
              6
              810

            
              5
              7
              790

            
              5
              8
              810

            
              5
              9
              820

            
              5
              10
              850

            
              5
              11
              870

            
              5
              12
              870

            
              5
              13
              810

            
              5
              14
              740

            
              5
              15
              810

            
              5
              16
              940

            
              5
              17
              950

            
              5
              18
              800

            
              5
              19
              810

            
              5
              20
              870
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3/dc.css" />
	<script src="https://unpkg.com/d3@5/dist/d3.js"></script>
	<script src="https://unpkg.com/crossfilter2@1.4/crossfilter.js"></script>
	<script src="https://unpkg.com/dc@3/dc.js"></script>
	<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
	<script src="https://npmcdn.com/universe@latest/universe.js"></script>
	<style>
	</style>
	</head>

	<body>
	<div id="test"></div>

	<script>
	var chart = dc.barChart("#test");
	d3.csv("morley.csv").then(function(experiments) {

	experiments.forEach(function(x) {
	x.Speed = +x.Speed;
	});

	var ndx = crossfilter(experiments),
	runDimension = ndx.dimension(function(d) {return +d.Run;}),
	speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 1000;});

	chart
	.width(768)
	.height(480)
	.x(d3.scaleLinear().domain([0,20]))
	.brushOn(false)
	.yAxisLabel("This is the Y Axis!")
	.dimension(runDimension)
	.group(speedSumGroup)
	.on('renderlet', function(chart) {
	chart.selectAll('rect').on("click", function(d) {
	console.log("click!", d);
	});
	});
	chart.render();
	});

	</script>
	</body>
Expt	Run	Speed
1	1	850
1	2	740
1	3	900
1	4	1070
1	5	930
1	6	850
1	7	950
1	8	980
1	9	980
1	10	880
1	11	1000
1	12	980
1	13	930
1	14	650
1	15	760
1	16	810
1	17	1000
1	18	1000
1	19	960
1	20	960
2	1	960
2	2	940
2	3	960
2	4	940
2	5	880
2	6	800
2	7	850
2	8	880
2	9	900
2	10	840
2	11	830
2	12	790
2	13	810
2	14	880
2	15	880
2	16	830
2	17	800
2	18	790
2	19	760
2	20	800
3	1	880
3	2	880
3	3	880
3	4	860
3	5	720
3	6	720
3	7	620
3	8	860
3	9	970
3	10	950
3	11	880
3	12	910
3	13	850
3	14	870
3	15	840
3	16	840
3	17	850
3	18	840
3	19	840
3	20	840
4	1	890
4	2	810
4	3	810
4	4	820
4	5	800
4	6	770
4	7	760
4	8	740
4	9	750
4	10	760
4	11	910
4	12	920
4	13	890
4	14	860
4	15	880
4	16	720
4	17	840
4	18	850
4	19	850
4	20	780
5	1	890
5	2	840
5	3	780
5	4	810
5	5	760
5	6	810
5	7	790
5	8	810
5	9	820
5	10	850
5	11	870
5	12	870
5	13	810
5	14	740
5	15	810
5	16	940
5	17	950
5	18	800
5	19	810
5	20	870