Flipping a Stacked Area Chart

Sometimes the need arises to flip the x/y axes on a chart. Based on the Simple Stacked Area Chart Example, swapping the x/y keys in the data array:

var data = [
  {id: "alpha", x:  7, y: 4},
  {id: "alpha", x: 25, y: 5},
  {id: "alpha", x: 13, y: 6},
  {id: "beta",  x: 17, y: 4},
  {id: "beta",  x:  8, y: 5},
  {id: "beta",  x: 13, y: 6}

We can flip the axes be overriding the .discrete( ) method, which defaults to “x”:

new d3plus.StackedArea()