PaladhiDinesh/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    ###Design Choise made : SuperImposed Line charts
I have chosen Olympics dataset.
In this dataset I wanted to know how count of men and women participants changed over the years.
I also wanted to know change occured in the participants count over the years.
In order to do that I felt Multiple line charts are a great way to do.
So In the graph I have taken Years on the x-axis and count on the Y-axis.
Super Imposition is not seen clearly because the values did not overlap.
Men, Women and Participant Line graphs are represented with different colors and the name for each line is given at the end of the line.
I have removed x-axis from the line chart because I feel it as an obstacle. I learned about removal of the x-axis from the article "Line Charts : Where to Start ?"
So, from this line chart I got to know that number of Women participants drastically began to increase from 1980 onwards.
Number of Male participants are more than female participants in every year and there is male participants count decline in 1932,1956 and 1982.
Total participants drastically increased after 1980.

  
## 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;
}

.x.axis path {
  display: none;
}

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

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

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

var parseYear = d3.time.format("%Y").parse;

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

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

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
	 .innerTickSize(-height)
    .outerTickSize(0)
    .tickPadding(10);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
	.innerTickSize(-width)
    .outerTickSize(0)
    .tickPadding(10);

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.Year); })
    .y(function(d) { return y(d.temperature); });

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("olympics.csv", function(error, data) {
  if (error) throw error;

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

  data.forEach(function(d) {
    d.Year = parseYear(d.Year);
  });

  var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {Year: d.Year, temperature: +d[name]};
      })
    };
  });

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

  y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
  ]);

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

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Count");

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

  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });

	city.append("text")
		.attr("transform", "translate(" + (width+3) + "," + y(data[0].Women) + ")")
		.attr("dy", ".35em")
		.attr("text-anchor", "start")
		.style("fill", "steelblue")
		.text("Women");
	city.append("text")
		.attr("transform", "translate(" + (width+3) + "," + y(data[0].Men) + ")")
		.attr("dy", ".35em")
		.attr("text-anchor", "start")
		.style("fill", "Orange")
		.text("Men");
	city.append("text")
		.attr("transform", "translate(" + (width+3) + "," + y(data[0].Participants) + ")")
		.attr("dy", ".35em")
		.attr("text-anchor", "start")
		.style("fill", "Green")
		.text("Participants");
});

</script>

## olympics.csv

          
            Year
            Women
            Men
            Participants

            
              2012
              4655
              5864
              10519

            
              2008
              4611
              6290
              10901

            
              2004
              4304
              6257
              10561

            
              2000
              4068
              6579
              10648

            
              1996
              3520
              6818
              10341

            
              1992
              2721
              6659
              9386

            
              1988
              2202
              6249
              8453

            
              1984
              1567
              5224
              6799

            
              1980
              1123
              4135
              5259

            
              1976
              1260
              4812
              6073

            
              1972
              1060
              6052
              7113

            
              1968
              783
              4774
              5557

            
              1964
              680
              4457
              5137

            
              1960
              612
              4738
              5350

            
              1956
              371
              2818
              3189

            
              1952
              521
              4411
              4932

            
              1948
              440
              3933
              4374

            
              1936
              361
              4123
              4484

            
              1932
              201
              1720
              1921

            
              1928
              311
              2937
              3248

            
              1924
              152
              3104
              3256

            
              1920
              78
              2596
              2674

            
              1912
              53
              2356
              2409

            
              1908
              44
              1980
              2024

            
              1906
              6
              835
              841

            
              1904
              6
              644
              650

            
              1900
              23
              1200
              1223

            
              1896
              0
              176
              176
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

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

	.x.axis path {
	display: none;
	}

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

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

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

	var parseYear = d3.time.format("%Y").parse;

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

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

	var color = d3.scale.category10();

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.innerTickSize(-height)
	.outerTickSize(0)
	.tickPadding(10);

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.innerTickSize(-width)
	.outerTickSize(0)
	.tickPadding(10);

	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.Year); })
	.y(function(d) { return y(d.temperature); });

	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("olympics.csv", function(error, data) {
	if (error) throw error;

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

	data.forEach(function(d) {
	d.Year = parseYear(d.Year);
	});

	var cities = color.domain().map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {Year: d.Year, temperature: +d[name]};
	})
	};
	});

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

	y.domain([
	d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
	d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
	]);

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

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Count");

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

	city.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return line(d.values); })
	.style("stroke", function(d) { return color(d.name); });

	city.append("text")
	.attr("transform", "translate(" + (width+3) + "," + y(data[0].Women) + ")")
	.attr("dy", ".35em")
	.attr("text-anchor", "start")
	.style("fill", "steelblue")
	.text("Women");
	city.append("text")
	.attr("transform", "translate(" + (width+3) + "," + y(data[0].Men) + ")")
	.attr("dy", ".35em")
	.attr("text-anchor", "start")
	.style("fill", "Orange")
	.text("Men");
	city.append("text")
	.attr("transform", "translate(" + (width+3) + "," + y(data[0].Participants) + ")")
	.attr("dy", ".35em")
	.attr("text-anchor", "start")
	.style("fill", "Green")
	.text("Participants");
	});

	</script>
Year	Women	Men	Participants
2012	4655	5864	10519
2008	4611	6290	10901
2004	4304	6257	10561
2000	4068	6579	10648
1996	3520	6818	10341
1992	2721	6659	9386
1988	2202	6249	8453
1984	1567	5224	6799
1980	1123	4135	5259
1976	1260	4812	6073
1972	1060	6052	7113
1968	783	4774	5557
1964	680	4457	5137
1960	612	4738	5350
1956	371	2818	3189
1952	521	4411	4932
1948	440	3933	4374
1936	361	4123	4484
1932	201	1720	1921
1928	311	2937	3248
1924	152	3104	3256
1920	78	2596	2674
1912	53	2356	2409
1908	44	1980	2024
1906	6	835	841
1904	6	644	650
1900	23	1200	1223
1896	0	176	176