dc.js example

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

<!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://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js"></script>
  <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  <style>
  </style>
</head>

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>

Updated missing url https://rawgit.com/crossfilter/reductio/master/reductio.js to https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js

https://unpkg.com/d3@5/dist/d3.js

https://unpkg.com/crossfilter2@1.4/crossfilter.js

https://unpkg.com/dc@3/dc.js

https://rawgit.com/crossfilter/reductio/master/reductio.js

https://npmcdn.com/universe@latest/universe.js