tts/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading Espoo city language data as CSV, and drawing some SVG</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
      <style type="text/css">
        body {
              font-family: Helvetica, Arial, sans-serif;
              padding: 70px;
              background-color: GhostWhite;
        }

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

        .leftborder {
            padding: 25px;
            border-left: solid 4px Silver;
        }

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

      </style>
	</head>
	<body>
	  <h1 class="leftborder">On languages</h1>

		<script type="text/javascript">

			//Load in contents of CSV file
			d3.csv("lang.csv", function(data) {

				//Now CSV contents have been transformed into
				//an array of JSON objects.

				//Log 'data' to the console, for verification.
				console.log(data);

			});
		</script>

		<svg width="700" height="400">
       <!-- group element -->
        <g stroke = "SkyBlue" stroke-width = "5" fill = "none">
                    <!--
                         The d attribute of the first path element

                         'M200,100': Move to x=200 y=10
                         'a': Prepare to draw an elliptical arc from the point you just moved
                         '100,60' : The ellipse has two radii, 100 and 60
                         '-30': Rotate the x axis relative to the SVG coordinate system
                         '1,0': Large-arc flag is 1 meaning one of the two larger arc sweeps will be chosen,
                                Sweep-flag is 0 meaning the arc will be drawn in a negative-angle direction (1 is positive)
                                See http://www.itk.ilstu.edu/faculty/javila/SVG/SVG_drawing1/elliptical_curve.htm
                         '100,100': the endpoint of the arc is located at x=100 y=100
                    -->
          <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>

	</body>
</html>

## lang.csv

          
            Kieli
            0-6
            7-15
            16-29
            30-44
            45-64
            65-

            
              Albania
              218
              211
              389
              316
              177
              16

            
              Arabia
              232
              216
              278
              442
              274
              20

            
              Bengali
              61
              35
              162
              201
              31
              0

            
              Englanti
              275
              164
              432
              833
              392
              79

            
              Espanja
              47
              40
              132
              303
              97
              17

            
              Hindi
              74
              34
              76
              248
              23
              5

            
              Kiina
              194
              133
              497
              775
              258
              13

            
              Kurdi
              152
              143
              354
              276
              136
              11

            
              Muut
              550
              429
              1393
              2214
              849
              199

            
              Persia
              67
              72
              258
              194
              126
              36

            
              Ranska
              43
              36
              70
              170
              73
              10

            
              Romania
              26
              30
              52
              139
              34
              4

            
              Ruotsi
              2226
              2642
              3043
              3440
              4822
              4102

            
              Somali
              421
              442
              615
              337
              213
              29

            
              Suomi
              19150
              22669
              37250
              44685
              55350
              29425

            
              Tagalog, pilipino
              26
              46
              91
              168
              69
              3

            
              Tamili
              75
              20
              86
              151
              13
              1

            
              Telugu
              68
              21
              74
              149
              3
              0

            
              Thai
              19
              50
              77
              184
              58
              0

            
              Turkki
              54
              39
              109
              174
              102
              21

            
              Unkari
              53
              48
              59
              171
              46
              11

            
              Urdu
              75
              20
              141
              173
              15
              0

            
              Ven�j�
              512
              489
              1054
              1551
              1086
              178

            
              Vietnam
              60
              41
              310
              178
              127
              30

            
              Viro
              459
              429
              1007
              1632
              1328
              92
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Loading Espoo city language data as CSV, and drawing some SVG</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">
	body {
	font-family: Helvetica, Arial, sans-serif;
	padding: 70px;
	background-color: GhostWhite;
	}

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

	.leftborder {
	padding: 25px;
	border-left: solid 4px Silver;
	}

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

	</style>
	</head>
	<body>
	<h1 class="leftborder">On languages</h1>

	<script type="text/javascript">

	//Load in contents of CSV file
	d3.csv("lang.csv", function(data) {

	//Now CSV contents have been transformed into
	//an array of JSON objects.

	//Log 'data' to the console, for verification.
	console.log(data);

	});
	</script>

	<svg width="700" height="400">
	<!-- group element -->
	<g stroke = "SkyBlue" stroke-width = "5" fill = "none">
	<!--
	The d attribute of the first path element

	'M200,100': Move to x=200 y=10
	'a': Prepare to draw an elliptical arc from the point you just moved
	'100,60' : The ellipse has two radii, 100 and 60
	'-30': Rotate the x axis relative to the SVG coordinate system
	'1,0': Large-arc flag is 1 meaning one of the two larger arc sweeps will be chosen,
	Sweep-flag is 0 meaning the arc will be drawn in a negative-angle direction (1 is positive)
	See http://www.itk.ilstu.edu/faculty/javila/SVG/SVG_drawing1/elliptical_curve.htm
	'100,100': the endpoint of the arc is located at x=100 y=100
	-->
	<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>

	</body>
	</html>
Kieli	0-6	7-15	16-29	30-44	45-64	65-
Albania	218	211	389	316	177	16
Arabia	232	216	278	442	274	20
Bengali	61	35	162	201	31	0
Englanti	275	164	432	833	392	79
Espanja	47	40	132	303	97	17
Hindi	74	34	76	248	23	5
Kiina	194	133	497	775	258	13
Kurdi	152	143	354	276	136	11
Muut	550	429	1393	2214	849	199
Persia	67	72	258	194	126	36
Ranska	43	36	70	170	73	10
Romania	26	30	52	139	34	4
Ruotsi	2226	2642	3043	3440	4822	4102
Somali	421	442	615	337	213	29
Suomi	19150	22669	37250	44685	55350	29425
Tagalog, pilipino	26	46	91	168	69	3
Tamili	75	20	86	151	13	1
Telugu	68	21	74	149	3	0
Thai	19	50	77	184	58	0
Turkki	54	39	109	174	102	21
Unkari	53	48	59	171	46	11
Urdu	75	20	141	173	15	0
Ven�j�	512	489	1054	1551	1086	178
Vietnam	60	41	310	178	127	30
Viro	459	429	1007	1632	1328	92