ranimolla/data.csv

## data.csv

          
            date
            BlackBerry sales market share
            Microsoft sales market share
            HTC sales market share
            Sony sales market share
            Motorola sales market share
            LG sales market share
            Samsung sales market share
            Apple sales market share

            
              1/1/06
              2
              42
              0
              13
              34
              8
              0
              0

            
              3/1/06
              2
              41
              0
              14
              34
              8
              0
              0

            
              6/1/06
              2
              41
              0
              16
              31
              8
              0
              0

            
              9/1/06
              2
              41
              0
              18
              29
              7
              0
              0

            
              1/1/07
              3
              41
              0
              15
              20
              7
              13
              0

            
              3/1/07
              3
              45
              0
              15
              16
              7
              12
              0

            
              6/1/07
              4
              42
              0
              15
              15
              6
              14
              3

            
              9/1/07
              4
              43
              0
              15
              14
              6
              12
              4

            
              1/1/08
              5
              45
              3
              13
              10
              7
              13
              3

            
              3/1/08
              6
              44
              3
              13
              10
              8
              14
              1

            
              6/1/08
              6
              35
              3
              12
              9
              7
              14
              12

            
              9/1/08
              7
              33
              4
              12
              7
              9
              18
              9

            
              1/1/09
              11
              29
              4
              9
              7
              11
              22
              9

            
              3/1/09
              9
              29
              4
              8
              6
              13
              21
              10

            
              6/1/09
              9
              30
              3
              7
              5
              11
              21
              14

            
              9/1/09
              9
              33
              3
              7
              5
              9
              18
              15

            
              1/1/10
              10
              27
              4
              6
              5
              9
              23
              17

            
              3/1/10
              10
              27
              6
              7
              5
              9
              21
              16

            
              6/1/10
              9
              24
              6
              5
              5
              7
              22
              22

            
              9/1/10
              10
              25
              7
              4
              5
              6
              21
              22

            
              1/1/11
              10
              22
              8
              4
              4
              6
              20
              27

            
              3/1/11
              8
              17
              9
              4
              5
              6
              23
              28

            
              6/1/11
              6
              16
              10
              5
              5
              5
              28
              24

            
              9/1/11
              7
              13
              5
              3
              4
              4
              24
              40

            
              1/1/12
              5
              10
              4
              2
              4
              4
              30
              41

            
              3/1/12
              3
              10
              6
              4
              4
              4
              36
              33

            
              6/1/12
              3
              8
              4
              4
              3
              4
              42
              31

            
              9/1/12
              2
              7
              3
              3
              2
              4
              36
              43

            
              1/1/13
              2
              6
              2
              4
              2
              5
              43
              36

            
              3/1/13
              3
              6
              4
              5
              2
              5
              47
              29

            
              6/1/13
              1
              6
              3
              5
              2
              4
              48
              31

            
              9/1/13
              1
              5
              2
              4
              2
              5
              39
              44

            
              1/1/14
              1
              4
              2
              4
              2
              5
              42
              40

            
              3/1/14
              1
              5
              4
              5
              3
              6
              43
              34

            
              6/1/14
              1
              4
              2
              5
              3
              7
              37
              41

            
              9/1/14
              0
              3
              2
              4
              4
              4
              25
              58

            
              1/1/15
              0
              2
              2
              3
              4
              4
              29
              55

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

body {
  font: 10px sans-serif;
}

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

.browser text {
  text-anchor: end;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

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

var parseDate = d3.time.format("%m/%d/%y").parse,
    formatPercent = d3.format(".0%");

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

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

var color = d3.scale.category20();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(formatPercent);

var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });

var stack = d3.layout.stack()
    .values(function(d) { return d.values; });

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 + ")");

d3.csv("data.csv", function(error, data) {
  if (error) throw error;

  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });

  var browsers = stack(color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, y: d[name] / 100};
      })
    };
  }));

  x.domain(d3.extent(data, function(d) { return d.date; }));

  var browser = svg.selectAll(".browser")
      .data(browsers)
    .enter().append("g")
      .attr("class", "browser");

  browser.append("path")
      .attr("class", "area")
      .attr("d", function(d) { return area(d.values); })
      .style("fill", function(d) { return color(d.name); });

  browser.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")"; })
      .attr("x", -6)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
});

</script>
date	BlackBerry sales market share	Microsoft sales market share	HTC sales market share	Sony sales market share	Motorola sales market share	LG sales market share	Samsung sales market share	Apple sales market share
1/1/06	2	42	0	13	34	8	0	0
3/1/06	2	41	0	14	34	8	0	0
6/1/06	2	41	0	16	31	8	0	0
9/1/06	2	41	0	18	29	7	0	0
1/1/07	3	41	0	15	20	7	13	0
3/1/07	3	45	0	15	16	7	12	0
6/1/07	4	42	0	15	15	6	14	3
9/1/07	4	43	0	15	14	6	12	4
1/1/08	5	45	3	13	10	7	13	3
3/1/08	6	44	3	13	10	8	14	1
6/1/08	6	35	3	12	9	7	14	12
9/1/08	7	33	4	12	7	9	18	9
1/1/09	11	29	4	9	7	11	22	9
3/1/09	9	29	4	8	6	13	21	10
6/1/09	9	30	3	7	5	11	21	14
9/1/09	9	33	3	7	5	9	18	15
1/1/10	10	27	4	6	5	9	23	17
3/1/10	10	27	6	7	5	9	21	16
6/1/10	9	24	6	5	5	7	22	22
9/1/10	10	25	7	4	5	6	21	22
1/1/11	10	22	8	4	4	6	20	27
3/1/11	8	17	9	4	5	6	23	28
6/1/11	6	16	10	5	5	5	28	24
9/1/11	7	13	5	3	4	4	24	40
1/1/12	5	10	4	2	4	4	30	41
3/1/12	3	10	6	4	4	4	36	33
6/1/12	3	8	4	4	3	4	42	31
9/1/12	2	7	3	3	2	4	36	43
1/1/13	2	6	2	4	2	5	43	36
3/1/13	3	6	4	5	2	5	47	29
6/1/13	1	6	3	5	2	4	48	31
9/1/13	1	5	2	4	2	5	39	44
1/1/14	1	4	2	4	2	5	42	40
3/1/14	1	5	4	5	3	6	43	34
6/1/14	1	4	2	5	3	7	37	41
9/1/14	0	3	2	4	4	4	25	58
1/1/15	0	2	2	3	4	4	29	55
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

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

	.browser text {
	text-anchor: end;
	}

	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>

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

	var parseDate = d3.time.format("%m/%d/%y").parse,
	formatPercent = d3.format(".0%");

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

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

	var color = d3.scale.category20();

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickFormat(formatPercent);

	var area = d3.svg.area()
	.x(function(d) { return x(d.date); })
	.y0(function(d) { return y(d.y0); })
	.y1(function(d) { return y(d.y0 + d.y); });

	var stack = d3.layout.stack()
	.values(function(d) { return d.values; });

	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 + ")");

	d3.csv("data.csv", function(error, data) {
	if (error) throw error;

	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

	data.forEach(function(d) {
	d.date = parseDate(d.date);
	});

	var browsers = stack(color.domain().map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {date: d.date, y: d[name] / 100};
	})
	};
	}));

	x.domain(d3.extent(data, function(d) { return d.date; }));

	var browser = svg.selectAll(".browser")
	.data(browsers)
	.enter().append("g")
	.attr("class", "browser");

	browser.append("path")
	.attr("class", "area")
	.attr("d", function(d) { return area(d.values); })
	.style("fill", function(d) { return color(d.name); });

	browser.append("text")
	.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
	.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")"; })
	.attr("x", -6)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);
	});

	</script>