customizing d3 stacked area chart

Question

i have tried the example of stacked charts http://bl.ocks.org/mbostock/3885211 and I like it. I'm just not sure how to customize it. For example if I need to change the order of how they stack. Sometimes data comes in an order that doesnt make sense stacking. Also, how do I change the color?

thanks!

Answer 1

Since you're using D3, you might find it a bit easier to use a higher level library to manipulate the charts, called c3js. Here's an example: http://c3js.org/samples/chart_area_stacked.html

The order of the stacking would depend on how you order the columns array:

var chart = c3.generate({
  data: {
    columns: [
        ['data1', 300, 350, 300, 0, 0, 120],
        ['data2', 130, 100, 140, 200, 150, 50]
      ],
    types: {
        data1: 'area-spline',
        data2: 'area-spline'
        // 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
           },
    groups: [['data1', 'data2']]
        }
    });

here is a larger data set:

[
  {
    "projectDate": "2015-10-29",
    "status": {
      "Backlog": 23
    }
  },
  {
    "projectDate": "2015-10-29",
    "status": {
      "Backlog": 23
    }
  },
  {
    "projectDate": "2015-10-30",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-10-30",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-10-31",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-10-31",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-11-01",
    "status": {
      "Backlog": 44,
      "In Progress": 11
    }
  },
  {
    "projectDate": "2015-11-01",
    "status": {
      "Backlog": 44,
      "In Progress": 11
    }
  },
  {
    "projectDate": "2015-11-02",
    "status": {
      "Backlog": 39,
      "In Progress": 19
    }
  },
  {
    "projectDate": "2015-11-02",
    "status": {
      "Backlog": 39,
      "In Progress": 19
    }
  },
  {
    "projectDate": "2015-11-03",
    "status": {
      "In Progress": 20,
      "Backlog": 40,
      "Selected for Development": 1
    }
  },
  {
    "projectDate": "2015-11-03",
    "status": {
      "In Progress": 20,
      "Backlog": 40,
      "Selected for Development": 1
    }
  },
  {
    "projectDate": "2015-11-04",
    "status": {
      "In Progress": 21,
      "Backlog": 49
    }
  },
  {
    "projectDate": "2015-11-04",
    "status": {
      "In Progress": 21,
      "Backlog": 49
    }
  },
  {
    "projectDate": "2015-11-05",
    "status": {
      "Backlog": 38,
      "In Progress": 31,
      "Merge Candidate": 5
    }
  },
  {
    "projectDate": "2015-11-05",
    "status": {
      "Backlog": 38,
      "In Progress": 31,
      "Merge Candidate": 5
    }
  },
  {
    "projectDate": "2015-11-06",
    "status": {
      "UX Review": 6,
      "In Progress": 27,
      "Selected for Development": 2,
      "Backlog": 35,
      "Merge Candidate": 2
    }
  },