joshy · September 27, 2015 20:46
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Urban population of Switzerland 1993 - 2013</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
    <style type="text/css">

      body {
        font-family: Sans-Serif;
        font-size: 13px;
        background-color: #fcfcfa;
      }

      h1 {
        font-size: 17px;
      }

      h2 {
        font-size: 15px;
      }

      a {
        color: steelblue;
      }
      #smallData  svg{
        background-color: #fcfcfa;
      }

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

      .axis text {
        font-size: 12px;
      }

      .agglomeration path{
        stroke: #b9b9b9;
        opacity:0.8;
      }
      .agglomeration path:hover{
        stroke: steelblue;
        opacity:0.8;
      }

      .axistitle{
        font-size: 12px;
      }

    </style>
  </head>
  <body>
    <h1>Agglomeration population of Switzerland in 1'000 /  Years 1991 - 2013.</h1>
    <p style="width:600px">
    The data shows the population of the agglomerations of Switzerland. It shows that mainly the already large populations had growth while the the smaller agglomerations stayed more or less stable. What is not taking into the consideration is that
    the number of communes stayed <i>not</i> the same over the years.
    </p>
    <p><a href="http://www.bfs.admin.ch/xmlns/opendata/je-e-01.02.01.01.03.ods">Source data</a>
    <div id="smallData"></div>


    <script type="text/javascript">
      var w = 700;
      var h = 800;
      var padding = { top: 20, right: 10, bottom: 50, left: 100 };

      var svg = d3.select("#smallData")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

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

      var xScale = d3.scale.linear()
            .range([ padding.left, w - padding.right - padding.left ]);

      var yScale = d3.scale.linear()
            .range([ padding.top, h - padding.bottom]);

      var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient("bottom")
                    .ticks(10)
                    .tickFormat(function(d) {
                      return dateFormat(new Date(d));
                    });

      var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient("left")
                    .ticks(8);

      var line = d3.svg.line()
        .x(function(d) {
          return xScale(dateFormat.parse(d.year));
        })
        .y(function(d) {
          return yScale(+d.value);
        });

      d3.csv("urban-population-of-switzerland.csv", function(data) {

        window.dataset = [];

        //Loop once for each row in data
        for (var i = 0; i < data.length; i++) {
          //Create new object with agglomeration name and empty array
          dataset[i] = {
            agglomeration: data[i].Agglomeration,
            population: []
          };

          //Loop through all the years
          for (var j = 1991; j <= 2013; j++) {
            // If value is not empty
            if (data[i][j.toString()]) {
              //Add a new object to the population data array
              //for this agglomeration
              dataset[i].population.push({
                year: j.toString(),
                value: data[i][j.toString()]
              });
            }
          }
        }

        //Set scale domains
        xScale.domain([dateFormat.parse("1991"), dateFormat.parse("2013")]);

        yScale.domain([
          d3.max(dataset, function(d) {
            return d3.max(d.population, function(d) {
              return +d.value;
            });
          }),
          0
        ]);

        //Make a group for each agglomeration
        var groups = svg.selectAll("g")
          .data(dataset)
          .enter()
          .append("g")
            .attr("class", "agglomeration")
            .attr("id", function(d, i) {
              return "agglomeration_"+i.toString();
            });

        groups.append("title")
          .text(function(d) {
            return d.agglomeration;
          });

        //Within each group, create a new line/path,
        //binding just the population data to each one
        groups.selectAll("path")
          .data(function(d) {
            return [ d.population ];
          })
          .enter()
          .append("path")
          .attr("class", "line")
          .attr("d", line)
          .attr("fill", "none")
          .attr("stroke-width", 2);

        //Axes
        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + (h - padding.bottom) + ")")
          .call(xAxis);

        svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + (padding.left) + ",0)")
          .call(yAxis);

        svg.append("text")
            .attr("class", "axistitle")
            .attr("text-anchor", "end")
            .attr("x", w - padding.left)
            .attr("y", h - 55);

        svg.append("text")
            .attr("class", "axistitle")
            .attr("text-anchor", "end")
            .attr("y", padding.bottom + 62)
            .attr("x", -(padding.bottom - 30))
            .attr("transform", "rotate(-90)")
            .text("Population in 1'000");
      });
    </script>
  </body>
 </html>
diff --git a/urban-population-of-switzerland.csv b/urban-population-of-switzerland.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Urban population of Switzerland 1993 - 2013</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	font-family: Sans-Serif;
	font-size: 13px;
	background-color: #fcfcfa;
	}

	h1 {
	font-size: 17px;
	}

	h2 {
	font-size: 15px;
	}

	a {
	color: steelblue;
	}
	#smallData svg{
	background-color: #fcfcfa;
	}

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

	.axis text {
	font-size: 12px;
	}

	.agglomeration path{
	stroke: #b9b9b9;
	opacity:0.8;
	}
	.agglomeration path:hover{
	stroke: steelblue;
	opacity:0.8;
	}

	.axistitle{
	font-size: 12px;
	}

	</style>
	</head>
	<body>
	<h1>Agglomeration population of Switzerland in 1'000 / Years 1991 - 2013.</h1>
	<p style="width:600px">
	The data shows the population of the agglomerations of Switzerland. It shows that mainly the already large populations had growth while the the smaller agglomerations stayed more or less stable. What is not taking into the consideration is that
	the number of communes stayed <i>not</i> the same over the years.
	</p>
	<p><a href="http://www.bfs.admin.ch/xmlns/opendata/je-e-01.02.01.01.03.ods">Source data</a>
	<div id="smallData"></div>


	<script type="text/javascript">
	var w = 700;
	var h = 800;
	var padding = { top: 20, right: 10, bottom: 50, left: 100 };

	var svg = d3.select("#smallData")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

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

	var xScale = d3.scale.linear()
	.range([ padding.left, w - padding.right - padding.left ]);

	var yScale = d3.scale.linear()
	.range([ padding.top, h - padding.bottom]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(10)
	.tickFormat(function(d) {
	return dateFormat(new Date(d));
	});

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(8);

	var line = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d) {
	return yScale(+d.value);
	});

	d3.csv("urban-population-of-switzerland.csv", function(data) {

	window.dataset = [];

	//Loop once for each row in data
	for (var i = 0; i < data.length; i++) {
	//Create new object with agglomeration name and empty array
	dataset[i] = {
	agglomeration: data[i].Agglomeration,
	population: []
	};

	//Loop through all the years
	for (var j = 1991; j <= 2013; j++) {
	// If value is not empty
	if (data[i][j.toString()]) {
	//Add a new object to the population data array
	//for this agglomeration
	dataset[i].population.push({
	year: j.toString(),
	value: data[i][j.toString()]
	});
	}
	}
	}

	//Set scale domains
	xScale.domain([dateFormat.parse("1991"), dateFormat.parse("2013")]);

	yScale.domain([
	d3.max(dataset, function(d) {
	return d3.max(d.population, function(d) {
	return +d.value;
	});
	}),
	0
	]);

	//Make a group for each agglomeration
	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g")
	.attr("class", "agglomeration")
	.attr("id", function(d, i) {
	return "agglomeration_"+i.toString();
	});

	groups.append("title")
	.text(function(d) {
	return d.agglomeration;
	});

	//Within each group, create a new line/path,
	//binding just the population data to each one
	groups.selectAll("path")
	.data(function(d) {
	return [ d.population ];
	})
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke-width", 2);

	//Axes
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding.bottom) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding.left) + ",0)")
	.call(yAxis);

	svg.append("text")
	.attr("class", "axistitle")
	.attr("text-anchor", "end")
	.attr("x", w - padding.left)
	.attr("y", h - 55);

	svg.append("text")
	.attr("class", "axistitle")
	.attr("text-anchor", "end")
	.attr("y", padding.bottom + 62)
	.attr("x", -(padding.bottom - 30))
	.attr("transform", "rotate(-90)")
	.text("Population in 1'000");
	});
	</script>
	</body>
	</html>
Agglomeration	Number of communes	1991	1992	1993	1994	1995	1996	1997	1998	1999	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012	2013
Aarau	17	76.5	76.7	77.6	77.7	78.1	78.2	78.2	78.3	78.7	79.1	79.7	80.3	81	81.8	82.3	83.1	83.8	85.1	86.4	88	89.3	90.7	91.7
Amriswil-Romanshorn	5	22.6	22.9	23.3	23.6	24	24	24.2	24	24	24.1	24	24.2	24.4	24.6	24.7	24.8	25	25.4	25.8	26.3	26.8	27.3	27.7
Arbon-Rorschach	11	54.6	54.9	55.3	55.6	55.7	55.7	55.6	56	56	56.1	56.2	56.4	56.6	56.7	56.7	57	57.8	58.5	59	59.4	59.7	60.1	60.6
Baden-Brugg	22	100.9	101.6	102.5	102.8	103.5	103.7	103.8	104.2	104.8	105.7	107.3	108.2	108.4	108.5	109	110.3	111.9	114.3	115.7	117.7	118.8	120.6	122.4
Basel	74	470.7	473.2	476	477	477.2	478.4	478.3	477.8	478	479.1	479.7	482.2	484.1	485.9	486.1	487	489.9	494.3	498	497.7	500.6	503.9	508.6
Bellinzona	15	42.4	43	43.6	44.3	44.8	44.7	44.8	44.8	45	45.3	45.8	46.5	46.7	47.2	47.5	48	48.6	49.3	49.9	50.1	50.8	51.5	52.2
Bern	41	343.3	342.3	341.6	340.9	339.7	338.7	337.3	338	339.9	340.4	341.7	342.6	343.3	344.3	344.2	345.2	346.7	349.2	351.3	353.7	356	360.1	364.2
Biel/Bienne	19	88.5	88.7	89.3	88.3	87.9	87.4	86.9	86.5	86.2	86.3	86.1	86.7	87.1	87.6	88	88.6	89	90	90.9	92.2	92.9	94	95.2
Brig-Visp	10	29.9	30.4	30.8	31.2	31.5	31.8	32.1	32.2	32.3	32.5	32.5	32.6	32.8	32.9	32.9	33	33.1	33.6	33.9	34.6	35	35.5	36
Buchs (SG) (Vaduz-)	3	19.1	19.7	20	20.3	20.5	20.6	20.7	20.6	20.7	20.8	20.8	20.9	21	21.1	21.3	21.4	21.6	22.1	22.3	22.7	23	23.2	23.6
Bulle	7	17.4	17.8	18.3	18.9	19.3	19.8	20.2	20.6	20.7	20.9	21.3	21.8	22.3	23	23.4	23.8	24.6	25.3	26	27.1	27.9	28.7	29.5
Burgdorf	6	27.1	27.3	27.3	27.2	27.1	27	26.9	27.4	27	26.9	27.1	27.3	27.4	27.5	27.7	27.9	28.1	28.3	28.2	28.5	28.8	29.1	29.5
Chiasso-Mendrisio (Como-)	12	45.1	45.4	45.8	46	46.2	46.1	46.2	46.3	46.7	47	46.8	47.2	47.5	47.8	48	48.3	48.6	49.1	49.3	49.2	49.5	50	50.8
Chur	13	60.6	61.2	61.8	62.3	62.6	62.6	62.9	63.7	64.2	64.5	64.4	65	65.7	66.2	66.4	66.6	67.4	68.4	69.3	70	70.5	71.1	71.7
Davos	1	11.1	11.4	11.5	11.6	11.6	11.8	11.7	11.7	11.6	12.4	11.3	11.2	11.3	11.3	11.2	11.1	11.1	11.1	11.2	11.2	11.1	11.2	11.2
Delémont	6	18.5	18.6	18.7	18.8	19	19	18.9	18.9	18.9	18.9	19	19	19	19	19	19	19.2	19.4	19.5	19.6	19.8	20	20.6
Einsiedeln	1	11	11.2	11.3	11.5	11.7	11.8	12	12.2	12.3	12.5	12.7	12.9	13	13.1	13.4	13.5	13.8	14	14.2	14.4	14.4	14.6	14.9
Frauenfeld	3	24.7	24.9	24.9	25.2	25.3	25.4	25.5	25.9	26.4	26.7	26.9	27.3	27.3	27.5	27.6	27.9	28.1	28.4	28.8	29.2	29.6	30.2	30.6
Fribourg	30	83.3	84.5	85.6	86.3	86.8	87.7	88	88.5	89.2	89.7	91.5	92.5	93.5	94.7	96	97.7	99.6	101.3	103	104.9	107.3	109.7	112.1
Genève	74	429.3	433.4	438.3	443.8	448.6	448.5	451.5	454.5	459.8	466.3	472	477.9	484.5	489	493.4	497.4	503.6	513.2	521.4	526.4	530.7	533.5	541.3
Grenchen	3	25.1	25.2	25.2	25.2	25.2	25.3	25.3	25.2	25.1	25.1	25.1	25.2	25.1	25.1	25	25	25.1	25.2	25.1	25.4	25.4	25.6	25.9
Heerbrugg-Altstätten	10	44.9	45.7	46.4	47	47.6	48	48.1	48.4	48.8	49.1	49.5	49.7	50.1	50.4	50.8	51.2	51.8	52.6	53.1	53.8	54.5	55	55.7
Interlaken	7	19.6	19.8	20	20.3	20.5	20.7	20.6	20.8	21	21.1	21.3	21.5	21.6	21.8	21.9	22	22.3	22.4	22.6	22.7	22.8	22.9	23.2
Kreuzlingen (Konstanz-)	5	23.3	23.6	24.1	24.5	25.1	25.4	25.2	25.1	25.2	24.4	24.6	25	25.5	25.7	25.9	26.2	26.8	27.3	28	28.8	29.3	30.1	30.7
La Chaux-de-Fonds-Le Locle	2	47.8	48	48.4	48.3	48.4	48.3	48	47.7	47.3	47.1	47.2	47.1	47.2	47.1	47	46.9	47	47.4	47.5	47.6	47.9	48.5	49.1
Lachen	7	27.7	28.4	29.1	29.6	30.1	30.6	30.9	31.3	31.7	32.3	32.6	33.2	33.5	33.7	34.1	34.5	35.2	36.4	36.9	37.8	38.3	39	39.7
Langenthal	1	14.4	14.5	14.7	14.7	14.7	14.7	14.2	14.4	14.5	14.5	14.3	14.3	14.3	14.3	14.4	14.6	14.7	14.9	15.1	14.9	15.1	15.2	15.3
Lausanne	63	287.7	288.7	289.6	291.1	292.1	291.7	292	293.6	295.8	297.4	299.7	302.2	305.4	308.5	310.6	313.7	317.6	324.9	331.4	336.8	342.2	345.3	351.5
Lenzburg	7	24.2	24.3	24.7	24.9	25.1	25.4	25.4	25.6	25.7	25.8	26.1	26.3	26.6	26.7	26.9	27.3	27.8	28.4	28.9	29.5	30.2	30.8	31.4
Locarno	16	52.5	53.4	54.1	54.7	55.5	55.4	55.8	55.9	56.3	56.6	57.3	57.6	58.1	58.5	59	59.5	60.2	60.9	61.4	60.9	61.5	62.1	62.7
Lugano	45	112.3	114.2	115.9	118	119.3	119.3	119.6	120.2	121.7	122.6	124	125.1	126	127.1	128.3	129.4	131.5	133.7	135.3	134.1	135.5	138.1	140.7
Luzern	16	185.3	187.9	189.8	190.8	191.5	191.7	191.4	191.1	192.2	193.4	195.3	196.7	197.5	198.3	199.2	200.3	202.5	205.4	207.6	209.8	211.8	214.3	216.1
Lyss	1	11.8	11.7	11.7	11.8	11.9	12.1	12.1	12.4	12.5	12.5	12.7	12.7	12.8	12.8	12.9	12.9	13.2	13.4	13.6	13.7	13.9	14.1	14.2
Martigny	1	13.5	13.8	14	14.1	14.2	14.1	14.1	14	14	13.8	14.5	14.6	14.7	14.9	15	15.2	15.4	15.6	15.8	16.1	16.3	16.9	17.2
Monthey-Aigle	5	30.2	30.7	31.1	31.3	31.5	31.4	31.5	31.7	32.1	32.4	32.6	33.4	33.9	34.4	35.2	35.9	36.4	37.1	37.9	38.8	39.7	40.3	41
Neuchâtel	12	72.5	72.5	72.8	73	73.7	73.7	73.9	74.2	74.4	74.7	74.9	75.2	75.2	76	76.5	76.9	77.6	78	78.4	78.8	79.3	79.6	80.4
Olten-Zofingen	25	97.9	98.5	99.1	99.4	100	100.3	100	100.4	101	101.4	102	102.7	103.3	104.1	104.6	105.5	106.7	108.1	109.1	110.7	111.9	113.3	114.5
Rapperswil-Jona-Rüti	3	38.9	39	39.2	39.2	39.3	39.5	39.8	40	40.4	40.8	41.5	42	42.3	42.7	42.7	43.1	43.8	44.1	44.6	44.9	45.1	45.5	45.7
Schaffhausen	13	62.3	62.6	62.9	63	63	62.8	62.7	62.8	62.9	62.9	63	63.7	64	64	63.9	64	64.8	65.5	65.8	66.5	67.2	67.7	68.4
Schwyz	3	22.1	22.5	22.8	23.1	23.3	23.2	23.4	23.4	23.8	24.3	24.2	24.5	24.8	25	25.2	25.2	25.4	25.5	25.6	26	26.1	26.5	26.7
Sierre-Montana	11	31.8	32.2	32.5	32.5	32.5	32.2	32.1	32.3	32.5	32.4	33.1	33.4	33.8	34.2	34.8	35.2	35.8	36.5	37	37.1	37.5	38	38.7
Sion	10	48.1	49.2	49.9	50.3	50.8	51.3	51.5	52	52.3	52.6	53	53.6	54.3	55.2	56.1	56.8	57.5	58.6	59.5	61	62.1	63.4	64.9
Solothurn	24	70.5	71.3	71.5	71.5	71.8	72.2	72.4	73.3	73.3	73	73.4	73.8	73.9	74	74.1	74.2	74.7	75.3	75.8	76.4	77.1	77.6	78.2
St. Gallen	11	141.8	142.9	143.7	144.5	144.2	144.1	143.6	143.1	143.5	143.9	144.2	145.1	145.5	145.6	145.3	145.6	146.7	148.5	149.6	150.2	151.4	152.4	153.4
St.Moritz	8	12.8	13.1	13.4	13.6	13.8	14.1	14	13.8	13.8	13.8	13.8	13.8	13.9	14.1	14.2	14.3	14.3	14.6	14.8	14.8	15	14.9	15
Stans	7	25.3	25.7	26.2	26.5	26.9	27.1	27.5	27.5	27.8	28.1	28.4	28.6	28.9	29.2	29.5	29.7	29.9	30.3	30.3	30.5	30.8	30.9	31.1
Thun	10	84.6	84.8	85.2	85.7	86.3	86.8	87.2	88	88.4	88.7	89.4	90.3	91.1	91.6	92.2	92.7	93.6	94.4	94.7	95.3	95.6	96	96.6
Vevey-Montreux	17	76.1	76.5	76.5	77	77.5	77.9	78.3	78.6	78.9	79.7	80.9	81.7	82.9	83.9	85.1	86.1	87.6	89.9	91.2	92	93.4	94.6	96.3
Wetzikon-Pfäffikon (ZH)	5	40.1	40.4	40.6	40.7	41.2	41.6	42	42.2	42.9	43.6	44.6	45.4	46	46.3	46.8	47.1	48.2	49.3	50.1	51.4	52.4	53.4	54.1
Wil (SG)	10	59.2	59.6	60.1	60.8	61.2	61.6	61.9	62.5	63.3	63.9	64.7	65.3	65.8	66.2	66.7	67.2	67.9	68.8	69.4	70.1	71	71.8	72.8
Winterthur	12	115	115.2	116	117	117.7	118.1	118.3	119.1	120.2	121.6	122.9	124.4	125.9	127.8	128.7	130.1	132.5	135	137	139.9	142.4	144.2	145.9
Wohlen (AG)	3	19.1	19.2	19.4	19.6	19.9	20	20.1	20.1	20.3	20.5	20.9	21.2	21.3	21.5	21.7	21.8	21.9	22.2	22.6	22.9	23.2	23.9	24.6
Yverdon-les-Bains	7	27.1	27.4	27.5	27.9	28.3	28.4	28.3	28.3	28.5	28.5	28.7	29	29.2	29.7	30.1	30.5	31	31.8	32.7	33.7	34.1	34.7	35.2
Zug	10	82	83.1	84.5	86.2	88.2	89.5	90.7	92.1	93.4	94.9	96.6	98.1	99.3	100.9	102.2	102.9	104.9	106	106.6	108.7	110.7	112.2	113.8
Zürich	131	994.6	1000.2	1003.2	1008.7	1014.9	1017.7	1019.9	1025.8	1035.8	1047.4	1061.2	1074.3	1081.7	1091.6	1101.7	1111.9	1132.2	1154.5	1170.2	1188.6	1204	1217.8	1232.6