Get started with dc CDN

Apache-2.0 licensed

DC.js: Web data visualization toolkit, D3.js-based, simplifies data handling and chart creation.

Tags:
  • visualization
  • svg
  • animation
  • canvas
  • chart
  • dimensional
  • crossfilter
  • d3

Stable version

Copied!

How to start using dc CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with dc CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/dc/4.2.7/dc.min.js"></script>
  <style>
    #chart { width: 600px; height: 400px; }
  </style>
</head>
<body>
  <script>
    dc.scripts(["https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.5.0/crossfilter.min.js"]);

    // Sample data
    var data = [
      { category: "Fruit", sales: 120 },
      { category: "Fruit", sales: 110 },
      { category: "Vegetables", sales: 150 },
      { category: "Vegetables", sales: 130 },
      { category: "Fruit", sales: 100 },
      { category: "Vegetables", sales: 160 }
    ];

    // Initialize Crossfilter
    var cf = crossfilter(data);

    // Create a dimension and group
    var dimCategory = cf.dimension(function(d) { return d.category; });
    var grpSales = dimCategory.group();

    // Create a chart
    var chart = dc.barChart("#chart");

    // Set the data source and dimensions
    chart
      .width(600)
      .height(400)
      .margins({top: 20, right: 20, bottom: 30, left: 40})
      .dimension(dimCategory)
      .group(grpSales)
      .x(d3.scaleBand().rangeRound([0, 600]))
      .xUnits(dc.units.ordinal)
      .yAxisLabel("Sales")
      .title(function(d) { return d.key + ": " + d.value; })
      .render();

    // Update the chart with the data
    chart.redrawAll();
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions