bhvaleri/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<style>
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke-width: 1.5px;
  cursor: pointer;
}

.split-group {
  float: left;
}

</style>

<body>
  <button onClick=drawSplit()>split</button>
  <button onClick=drawSeperate()>seperate</button>
</body>

<script src="http://d3js.org/d3.v3.js"></script>

<script>
var parseDate = d3.time.format("%A");

var data = [
  {
    date: "1-Jan-15",
    children: [
      {
        sales: 100,
        name: "A"
      },
      {
        sales: 150,
        name: "B",
      },
      {
        sales: 50,
        name: "C"
      }
    ]
  },
  {
    date: "2-Jan-15",
    children: [
      {
        sales: 100,
        name: "A"
      },
      {
        sales: 0,
        name: "B",
      },
      {
        sales: 0,
        name: "C"
      }
    ]
  },
  {
    date: "3-Jan-15",
    children: [
      {
        sales: 50,
        name: "A"
      },
      {
        sales: 200,
        name: "B",
      },
      {
        sales: 400,
        name: "C"
      }
    ]
  },
  {
    date: "4-Jan-15",
    children: [
      {
        sales: 75,
        name: "A"
      },
      {
        sales: 150,
        name: "B",
      },
      {
        sales: 100,
        name: "C"
      }
    ]
  },
  {
    date: "5-Jan-15",
    children: [
      {
        sales: 250,
        name: "A"
      },
      {
        sales: 200,
        name: "B",
      },
      {
        sales: 400,
        name: "C"
      }
    ]
  },
  {
    date: "6-Jan-15",
    children: [
      {
        sales: 100,
        name: "A"
      },
      {
        sales: 200,
        name: "B",
      },
      {
        sales: 100,
        name: "C"
      }
    ]
  },
  {
    date: "7-Jan-15",
    children: [
      {
        sales: 100,
        name: "A"
      },
      {
        sales: 50,
        name: "B",
      },
      {
        sales: 300,
        name: "C"
      }
    ]
  }
]

summedData = data.map(function (d) {
  return {
    date: new Date(d.date),
    sales: d3.sum(d.children, function (child) { return child.sales; })
  };
})

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 900 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);
var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = function(scale, format) {
  if (format == null || format == undefined) {
    format = function (d) {
      return parseDate(d);
    };
  };

  return d3.svg.axis()
      .scale(scale)
      .orient('bottom')
      .ticks(function () { return summedData.map(function(d) { return d.date; })})
      .tickFormat(format);
}

var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left');

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.sales); });

var svg = d3.select('body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

x.domain(d3.extent(summedData, function(d) { return d.date; }));
y.domain([0, d3.max(summedData, function(d) { return d.sales; })]);

drawXAxis = function () {
  svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + height + ')')
    .attr('width', 200)
    .call(xAxis(x));
}

drawYAxis = function () {
  svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis)
    .append('text')
      .attr('tranform', 'rotate(-90)')
      .attr('y', 6);
}

drawAxis = function () {
  drawXAxis();
  drawYAxis();
};

drawLine = function (lineData, colour, name) {
  newLine = svg.append('g').classed('group-' + name, true)
    .append('path')
    .datum(lineData)
    .attr('class', 'line ' + name)
    .attr('d', line)
    .style('stroke', colour);

  return newLine;
}

drawAnimationLine = function (startLineData, splitData, name) {
  var overlay = svg.append('g');

  lines = overlay.selectAll('.' + name)
            .data([startLineData]);


  lines.enter().append('path').attr('class', 'newLine line ' + name)
      .attr('d', function(d) { return line(d); })
      .style('stroke', colours[name]);

  lines.data([splitData]).transition()
      .attr('d', function(d) { return line(d); });

  lines.exit().remove();
};

groups = ["A", "B", "C"];
colours = {
  A: "steelblue",
  B: "slategray",
  C: "teal"
};

splitData = [];
groups.forEach(function(group, i) {
  splitData.push({
    name: group,
    sales: data.map(function(d){
      return {
      date: new Date(d.date),
      sales: d.children[i].sales
    };
  })}
  );
});

console.log(splitData);

drawAll = function () {
  allLine = drawLine(summedData, 'tomato', 'total');
};

drawSplit = function () {
  splitData.forEach(function (data) {
    drawAnimationLine(summedData, data.sales, data.name);
  });
};

drawSeperate = function () {
  //clear out xAxis
  d3.selectAll('.x').remove();

  //clear out summed line
  d3.selectAll('.group-total').remove();

  splitScale = d3.time.scale()
    .range([0, width / splitData.length])
    .domain(d3.extent(summedData, function(d) { return d.date; }));

  splitLine = d3.svg.line()
    .x(function(d) { return splitScale(d.date); })
    .y(function(d) { return y(d.sales); });

  splitData.forEach(function (data, i) {
    var splitGroup = svg.append('g').classed('split-group group-' + data.name, true)
      .attr('transform', 'translate(' + (i*width/splitData.length + (10 * i) + ',0)'))

      splitGroup.append('path')
        .datum(data.sales)
        .attr('class', 'line ' + data.name)
        .attr('d', splitLine)
        .style('stroke', 'steelblue');

      splitGroup.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .attr('width', 200)
        .call(xAxis(splitScale, function (d) { return '';}));


  return newLine;
  });
};

drawAxis();
drawAll();
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	.line {
	fill: none;
	stroke-width: 1.5px;
	cursor: pointer;
	}

	.split-group {
	float: left;
	}

	</style>

	<body>
	<button onClick=drawSplit()>split</button>
	<button onClick=drawSeperate()>seperate</button>
	</body>

	<script src="http://d3js.org/d3.v3.js"></script>

	<script>
	var parseDate = d3.time.format("%A");

	var data = [
	{
	date: "1-Jan-15",
	children: [
	{
	sales: 100,
	name: "A"
	},
	{
	sales: 150,
	name: "B",
	},
	{
	sales: 50,
	name: "C"
	}
	]
	},
	{
	date: "2-Jan-15",
	children: [
	{
	sales: 100,
	name: "A"
	},
	{
	sales: 0,
	name: "B",
	},
	{
	sales: 0,
	name: "C"
	}
	]
	},
	{
	date: "3-Jan-15",
	children: [
	{
	sales: 50,
	name: "A"
	},
	{
	sales: 200,
	name: "B",
	},
	{
	sales: 400,
	name: "C"
	}
	]
	},
	{
	date: "4-Jan-15",
	children: [
	{
	sales: 75,
	name: "A"
	},
	{
	sales: 150,
	name: "B",
	},
	{
	sales: 100,
	name: "C"
	}
	]
	},
	{
	date: "5-Jan-15",
	children: [
	{
	sales: 250,
	name: "A"
	},
	{
	sales: 200,
	name: "B",
	},
	{
	sales: 400,
	name: "C"
	}
	]
	},
	{
	date: "6-Jan-15",
	children: [
	{
	sales: 100,
	name: "A"
	},
	{
	sales: 200,
	name: "B",
	},
	{
	sales: 100,
	name: "C"
	}
	]
	},
	{
	date: "7-Jan-15",
	children: [
	{
	sales: 100,
	name: "A"
	},
	{
	sales: 50,
	name: "B",
	},
	{
	sales: 300,
	name: "C"
	}
	]
	}
	]

	summedData = data.map(function (d) {
	return {
	date: new Date(d.date),
	sales: d3.sum(d.children, function (child) { return child.sales; })
	};
	})

	var margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = 900 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.time.scale()
	.range([0, width]);
	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = function(scale, format) {
	if (format == null \|\| format == undefined) {
	format = function (d) {
	return parseDate(d);
	};
	};

	return d3.svg.axis()
	.scale(scale)
	.orient('bottom')
	.ticks(function () { return summedData.map(function(d) { return d.date; })})
	.tickFormat(format);
	}

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient('left');

	var line = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.sales); });

	var svg = d3.select('body').append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

	x.domain(d3.extent(summedData, function(d) { return d.date; }));
	y.domain([0, d3.max(summedData, function(d) { return d.sales; })]);

	drawXAxis = function () {
	svg.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,' + height + ')')
	.attr('width', 200)
	.call(xAxis(x));
	}

	drawYAxis = function () {
	svg.append('g')
	.attr('class', 'y axis')
	.call(yAxis)
	.append('text')
	.attr('tranform', 'rotate(-90)')
	.attr('y', 6);
	}

	drawAxis = function () {
	drawXAxis();
	drawYAxis();
	};

	drawLine = function (lineData, colour, name) {
	newLine = svg.append('g').classed('group-' + name, true)
	.append('path')
	.datum(lineData)
	.attr('class', 'line ' + name)
	.attr('d', line)
	.style('stroke', colour);

	return newLine;
	}

	drawAnimationLine = function (startLineData, splitData, name) {
	var overlay = svg.append('g');

	lines = overlay.selectAll('.' + name)
	.data([startLineData]);


	lines.enter().append('path').attr('class', 'newLine line ' + name)
	.attr('d', function(d) { return line(d); })
	.style('stroke', colours[name]);

	lines.data([splitData]).transition()
	.attr('d', function(d) { return line(d); });

	lines.exit().remove();
	};

	groups = ["A", "B", "C"];
	colours = {
	A: "steelblue",
	B: "slategray",
	C: "teal"
	};

	splitData = [];
	groups.forEach(function(group, i) {
	splitData.push({
	name: group,
	sales: data.map(function(d){
	return {
	date: new Date(d.date),
	sales: d.children[i].sales
	};
	})}
	);
	});

	console.log(splitData);

	drawAll = function () {
	allLine = drawLine(summedData, 'tomato', 'total');
	};

	drawSplit = function () {
	splitData.forEach(function (data) {
	drawAnimationLine(summedData, data.sales, data.name);
	});
	};

	drawSeperate = function () {
	//clear out xAxis
	d3.selectAll('.x').remove();

	//clear out summed line
	d3.selectAll('.group-total').remove();

	splitScale = d3.time.scale()
	.range([0, width / splitData.length])
	.domain(d3.extent(summedData, function(d) { return d.date; }));

	splitLine = d3.svg.line()
	.x(function(d) { return splitScale(d.date); })
	.y(function(d) { return y(d.sales); });

	splitData.forEach(function (data, i) {
	var splitGroup = svg.append('g').classed('split-group group-' + data.name, true)
	.attr('transform', 'translate(' + (iwidth/splitData.length + (10 i) + ',0)'))

	splitGroup.append('path')
	.datum(data.sales)
	.attr('class', 'line ' + data.name)
	.attr('d', splitLine)
	.style('stroke', 'steelblue');

	splitGroup.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,' + height + ')')
	.attr('width', 200)
	.call(xAxis(splitScale, function (d) { return '';}));


	return newLine;
	});
	};

	drawAxis();
	drawAll();
	</script>