tts/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Languages in Espoo in age groups under 6 and over 65</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

    <style type="text/css">

      body {
        font-family: Helvetica, Arial, sans-serif;
        padding: 100px;
        background-color: GhostWhite;
        }

      h1 {
        font-size: 30px;
        font-weight: bold;
        }

      a  {
        text-decoration: none;
        }

      a:link {
        text-decoration: none;
      }

      #about {
       font-size: 11px;
      }

      svg text {
        font-family: sans-serif;
        font-size: 9px;
     }

      svg .header text {
       font-family: sans-serif;
       font-size: 15px;
      }

      svg .cityname {
        fill: SlateBlue;
        font-weight: bold;
        font-size: 30px;
        }

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

      svg .axis text {
          font-family: sans-serif;
          font-size: 11px;
      }

      svg .y.axis path,
      svg .y.axis line {
          opacity: 0;
      }

      svg rect:hover {
         fill: darkgray;
      }

    </style>

  </head>
  <body>

     <h1>Languages in Espoo in age groups under 6 and over 65</h1>

     <div id="about">
        <p>Source: <a href="http://www.hri.fi/fi/dataset/espoon-vaesto-aidinkielen-ja-ian-mukaan-tilastoalueittain-vuodenvaihteessa-2013-2014">Espoon väestö äidinkielen ja iän mukaan tilastoalueittain vuodenvaihteessa 2013/2014.</a></p>
        <p>Data maintainer, Espoo City R&D. Data origin, Tilastokeskus.</p>
        <p>Downloaded from <a href="http://www.hri.fi/">Helsinki Region Infoshare</a> by licence <a href="http://creativecommons.org/licenses/by/4.0/deed.fi">Creative Commons Nimeä 4.0 Kansainvälinen (CC BY 4.0)</a></p>
     </div>

      <div id="logo">
       <svg width="700" height="300" class="containerleft">
         <g stroke = "SkyBlue" stroke-width = "5" fill = "none">
           <path d="M200,100 a100,60 -30 1,0 100,100" />
           <path d="M200,100 a100,60 -30 1,1 100,100" />
           <path d="M353,120 a100,70 -10 1,0 10,110" />
         </g>
        <text x="400" y="150" class="cityname">ESPOO</text>
        <text x="400" y="175" class="cityname">ESBO</text>
      </svg>
     </div>


     <div id="chart1" width="650px" style="float:left"></div>
     <div id="chart2"></div>


     <script type="text/javascript">

       var h = 500;
       var w = 600;
       var padding = [ 50, 40, 30, 80 ]; // Top, right, bottom, left


       var widthScale = d3.scale.linear()
                                .range([ 0, w - padding[1] - padding[3] ]);

       var heightScale = d3.scale.ordinal()
                                 .rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

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

       var yAxis = d3.svg.axis()
                  .scale(heightScale)
                  .orient("left");

       d3.csv("lang.csv", function(data) {

                // Sort data by the youngest age group, and keep it sorted that way
                data.sort(function(a, b) {
                    return d3.descending(+a.from0to6, +b.from0to6);
                })

                // Thanks http://bl.ocks.org/Larni/fb00b27c26b81c2facc3
                data.forEach(function(d) {
                     d.from0to6 = +d.from0to6;
                     d.from65 = +d.from65;
		            });

                //
                // First SVG is about children.
                //
                // We place it in the leftmost div, and make the div float left
                //

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

                widthScale.domain([0, d3.max(data, function(d) {
                                      return +d.from0to6;
                }) ]);

                // The height scale applies to the other SVG as well, so here just once
                heightScale.domain(data.map(function(d) { return d.Language; } ));

                var kids = svg.selectAll("rect")
                               .data(data)
                               .enter()
                               .append("rect");

                kids.attr("x", padding[3])
                    .attr("y", function(d) {
                        return heightScale(d.Language);
                    })
                    .attr("width", function(d){
                        return widthScale(d.from0to6);
                    })
                    .attr("height", heightScale.rangeBand())
                    .attr("fill", "Gainsboro")
                    .append("title")
                    .text(function(d) {
                        return d.Language + " is spoken by " + d.from0to6 + " children under 6";
                    });

                // Labels for kids
                var labelsKids = svg.selectAll("text")
                                .data(data)
                                .enter()
                                .append("text");

                labelsKids.attr("x", function(d) {
                         return widthScale(d.from0to6) + padding[3] + 2;
                       })
                       .attr("y", function(d) {
                         return heightScale(d.Language) + 10 ;
                       })
                       .text(function(d) {
                         return d.from0to6;
                       });


                svg.append("g")
                   .attr("class", "x axis")
                   .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
                   .call(xAxis);

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

                svg.append("g")
                   .attr("class", "header")
                   .attr("transform", "translate(" + padding[3] + "," + padding[2] + ")")
                   .append("text")
                   .text("Under age of 6");

                //
                // Then the other SVG, this is about the oldest age group.
                // We place it in the other div.
                //

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

                widthScale.domain([0, d3.max(data, function(d) {
                                      return +d.from65;
                }) ]);

                var olds = svg.selectAll("rect")
                               .data(data)
                               .enter()
                               .append("rect");

                olds.attr("x", padding[3])
                    .attr("y", function(d) {
                        return heightScale(d.Language);
                    })
                    .attr("width", function(d){
                        return widthScale(d.from65);
                    })
                    .attr("height", heightScale.rangeBand())
                    .attr("fill", "Gainsboro")
                    .append("title")
                    .text(function(d) {
                        return d.Language + " is spoken by " + d.from65 + " people over 65";
                    });

		// Labels for old people
                var labelsOlds = svg.selectAll("text")
                                .data(data)
                                .enter()
                                .append("text");

                labelsOlds.attr("x", function(d) {
                         return widthScale(d.from65) + padding[3] + 2;
                       })
                       .attr("y", function(d) {
                         return heightScale(d.Language) + 10 ;
                       })
                       .text(function(d) {
                         return d.from65;
                       });

                svg.append("g")
                   .attr("class", "x axis")
                   .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
                   .call(xAxis);

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

                svg.append("g")
                   .attr("class", "header")
                   .attr("transform", "translate(" + padding[3] + "," + padding[2] + ")")
                   .append("text")
                   .text("Over age of 65");

	});


  </script>

 </body>

</html>

## lang.csv

          
            Language
            from0to6
            from7to15
            from16to29
            from30to44
            from45to64
            from65

            
              Albanian
              218
              211
              389
              316
              177
              16

            
              Arabic
              232
              216
              278
              442
              274
              20

            
              Bengali
              61
              35
              162
              201
              31
              0

            
              English
              275
              164
              432
              833
              392
              79

            
              Spanish
              47
              40
              132
              303
              97
              17

            
              Hindi
              74
              34
              76
              248
              23
              5

            
              Chinese
              194
              133
              497
              775
              258
              13

            
              Kurdish
              152
              143
              354
              276
              136
              11

            
              Other
              550
              429
              1393
              2214
              849
              199

            
              Persian
              67
              72
              258
              194
              126
              36

            
              French
              43
              36
              70
              170
              73
              10

            
              Romanian
              26
              30
              52
              139
              34
              4

            
              Swedish
              2226
              2642
              3043
              3440
              4822
              4102

            
              Somali
              421
              442
              615
              337
              213
              29

            
              Finnish
              19150
              22669
              37250
              44685
              55350
              29425

            
              Tagalog
              26
              46
              91
              168
              69
              3

            
              Tamil
              75
              20
              86
              151
              13
              1

            
              Telugu
              68
              21
              74
              149
              3
              0

            
              Thai
              19
              50
              77
              184
              58
              0

            
              Turkish
              54
              39
              109
              174
              102
              21

            
              Hungarian
              53
              48
              59
              171
              46
              11

            
              Urdu
              75
              20
              141
              173
              15
              0

            
              Russian
              512
              489
              1054
              1551
              1086
              178

            
              Vietnamese
              60
              41
              310
              178
              127
              30

            
              Estonian
              459
              429
              1007
              1632
              1328
              92
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Languages in Espoo in age groups under 6 and over 65</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

	<style type="text/css">

	body {
	font-family: Helvetica, Arial, sans-serif;
	padding: 100px;
	background-color: GhostWhite;
	}

	h1 {
	font-size: 30px;
	font-weight: bold;
	}

	a {
	text-decoration: none;
	}

	a:link {
	text-decoration: none;
	}

	#about {
	font-size: 11px;
	}

	svg text {
	font-family: sans-serif;
	font-size: 9px;
	}

	svg .header text {
	font-family: sans-serif;
	font-size: 15px;
	}

	svg .cityname {
	fill: SlateBlue;
	font-weight: bold;
	font-size: 30px;
	}

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

	svg .axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	svg .y.axis path,
	svg .y.axis line {
	opacity: 0;
	}

	svg rect:hover {
	fill: darkgray;
	}

	</style>

	</head>
	<body>

	<h1>Languages in Espoo in age groups under 6 and over 65</h1>

	<div id="about">
	<p>Source: <a href="http://www.hri.fi/fi/dataset/espoon-vaesto-aidinkielen-ja-ian-mukaan-tilastoalueittain-vuodenvaihteessa-2013-2014">Espoon väestö äidinkielen ja iän mukaan tilastoalueittain vuodenvaihteessa 2013/2014.</a></p>
	<p>Data maintainer, Espoo City R&D. Data origin, Tilastokeskus.</p>
	<p>Downloaded from <a href="http://www.hri.fi/">Helsinki Region Infoshare</a> by licence <a href="http://creativecommons.org/licenses/by/4.0/deed.fi">Creative Commons Nimeä 4.0 Kansainvälinen (CC BY 4.0)</a></p>
	</div>

	<div id="logo">
	<svg width="700" height="300" class="containerleft">
	<g stroke = "SkyBlue" stroke-width = "5" fill = "none">
	<path d="M200,100 a100,60 -30 1,0 100,100" />
	<path d="M200,100 a100,60 -30 1,1 100,100" />
	<path d="M353,120 a100,70 -10 1,0 10,110" />
	</g>
	<text x="400" y="150" class="cityname">ESPOO</text>
	<text x="400" y="175" class="cityname">ESBO</text>
	</svg>
	</div>


	<div id="chart1" width="650px" style="float:left"></div>
	<div id="chart2"></div>


	<script type="text/javascript">

	var h = 500;
	var w = 600;
	var padding = [ 50, 40, 30, 80 ]; // Top, right, bottom, left


	var widthScale = d3.scale.linear()
	.range([ 0, w - padding[1] - padding[3] ]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

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

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");

	d3.csv("lang.csv", function(data) {

	// Sort data by the youngest age group, and keep it sorted that way
	data.sort(function(a, b) {
	return d3.descending(+a.from0to6, +b.from0to6);
	})

	// Thanks http://bl.ocks.org/Larni/fb00b27c26b81c2facc3
	data.forEach(function(d) {
	d.from0to6 = +d.from0to6;
	d.from65 = +d.from65;
	});

	//
	// First SVG is about children.
	//
	// We place it in the leftmost div, and make the div float left
	//

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

	widthScale.domain([0, d3.max(data, function(d) {
	return +d.from0to6;
	}) ]);

	// The height scale applies to the other SVG as well, so here just once
	heightScale.domain(data.map(function(d) { return d.Language; } ));

	var kids = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	kids.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.Language);
	})
	.attr("width", function(d){
	return widthScale(d.from0to6);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill", "Gainsboro")
	.append("title")
	.text(function(d) {
	return d.Language + " is spoken by " + d.from0to6 + " children under 6";
	});

	// Labels for kids
	var labelsKids = svg.selectAll("text")
	.data(data)
	.enter()
	.append("text");

	labelsKids.attr("x", function(d) {
	return widthScale(d.from0to6) + padding[3] + 2;
	})
	.attr("y", function(d) {
	return heightScale(d.Language) + 10 ;
	})
	.text(function(d) {
	return d.from0to6;
	});


	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
	.call(xAxis);

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

	svg.append("g")
	.attr("class", "header")
	.attr("transform", "translate(" + padding[3] + "," + padding[2] + ")")
	.append("text")
	.text("Under age of 6");

	//
	// Then the other SVG, this is about the oldest age group.
	// We place it in the other div.
	//

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

	widthScale.domain([0, d3.max(data, function(d) {
	return +d.from65;
	}) ]);

	var olds = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	olds.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.Language);
	})
	.attr("width", function(d){
	return widthScale(d.from65);
	})
	.attr("height", heightScale.rangeBand())
	.attr("fill", "Gainsboro")
	.append("title")
	.text(function(d) {
	return d.Language + " is spoken by " + d.from65 + " people over 65";
	});

	// Labels for old people
	var labelsOlds = svg.selectAll("text")
	.data(data)
	.enter()
	.append("text");

	labelsOlds.attr("x", function(d) {
	return widthScale(d.from65) + padding[3] + 2;
	})
	.attr("y", function(d) {
	return heightScale(d.Language) + 10 ;
	})
	.text(function(d) {
	return d.from65;
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
	.call(xAxis);

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

	svg.append("g")
	.attr("class", "header")
	.attr("transform", "translate(" + padding[3] + "," + padding[2] + ")")
	.append("text")
	.text("Over age of 65");

	});


	</script>

	</body>

	</html>
Language	from0to6	from7to15	from16to29	from30to44	from45to64	from65
Albanian	218	211	389	316	177	16
Arabic	232	216	278	442	274	20
Bengali	61	35	162	201	31	0
English	275	164	432	833	392	79
Spanish	47	40	132	303	97	17
Hindi	74	34	76	248	23	5
Chinese	194	133	497	775	258	13
Kurdish	152	143	354	276	136	11
Other	550	429	1393	2214	849	199
Persian	67	72	258	194	126	36
French	43	36	70	170	73	10
Romanian	26	30	52	139	34	4
Swedish	2226	2642	3043	3440	4822	4102
Somali	421	442	615	337	213	29
Finnish	19150	22669	37250	44685	55350	29425
Tagalog	26	46	91	168	69	3
Tamil	75	20	86	151	13	1
Telugu	68	21	74	149	3	0
Thai	19	50	77	184	58	0
Turkish	54	39	109	174	102	21
Hungarian	53	48	59	171	46	11
Urdu	75	20	141	173	15	0
Russian	512	489	1054	1551	1086	178
Vietnamese	60	41	310	178	127	30
Estonian	459	429	1007	1632	1328	92