block by renecnielsen 11012176

11012176

Full Screen

d3js Multiline chart with brushing and mouseover

data.txt

Time,Education,Water,Climate,Food,Government,Health,Job,Transport,Equality,Discrimination,Phone,Politicalfreedoms,Forests,Crime,Energy,Support,Total
01 Jan 2014,1,0,0,1,2,0,1,0,0,0,0,0,2,0,0,0,7
02 Jan 2014,1,0,0,0,4,0,2,0,0,2,0,0,5,0,0,0,14
03 Jan 2014,4,0,0,0,2,0,3,0,0,2,0,0,4,0,0,0,15
04 Jan 2014,2,0,0,0,1,0,0,0,0,0,0,2,2,0,0,0,7
05 Jan 2014,0,0,0,0,3,0,0,0,0,2,0,3,4,0,0,0,12
06 Jan 2014,4,0,0,0,11,0,2,0,0,4,0,1,31,0,1,0,54
07 Jan 2014,4,0,0,0,5,0,1,0,2,1,0,0,24,2,0,0,39
08 Jan 2014,1,0,0,0,4,0,2,0,1,4,0,1,17,0,0,0,30
09 Jan 2014,1,0,0,0,5,0,1,0,1,2,0,1,4,0,0,0,15
10 Jan 2014,0,0,0,0,6,0,1,0,0,3,0,15,4,0,0,0,29
11 Jan 2014,0,0,0,0,2,0,0,0,0,2,0,0,10,0,0,1,15
12 Jan 2014,1,0,0,0,12,0,1,1,0,3,0,2,11,0,0,0,31
13 Jan 2014,1,0,0,0,2,0,5,0,0,3,0,1,5,0,0,0,17
14 Jan 2014,4,0,0,0,7,0,1,0,0,5,0,1,6,0,0,4,28
15 Jan 2014,2,0,0,0,6,0,2,0,1,6,0,4,7,0,0,0,28
16 Jan 2014,1,0,0,0,3,0,5,0,0,1,0,0,18,0,1,0,29
17 Jan 2014,1,0,0,0,4,3,0,0,1,1,0,0,3,0,0,0,13
18 Jan 2014,2,0,0,0,3,0,0,0,0,0,0,0,5,0,1,0,11
19 Jan 2014,1,0,0,0,6,0,0,0,0,0,0,1,5,0,0,0,13
20 Jan 2014,1,0,0,0,5,0,1,0,0,0,0,2,5,0,0,0,14
21 Jan 2014,9,0,0,0,16,0,4,0,0,1,0,2,5,0,0,0,37
22 Jan 2014,3,0,0,0,6,0,0,0,0,1,0,0,8,0,0,0,18
23 Jan 2014,1,0,0,0,9,0,2,0,0,0,0,1,4,0,0,0,17
24 Jan 2014,6,0,0,0,7,0,3,0,0,0,0,1,14,0,0,0,31
25 Jan 2014,2,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,4
26 Jan 2014,3,0,0,3,7,2,8,0,2,0,0,2,8,0,0,0,35
27 Jan 2014,0,0,0,0,4,0,2,0,0,0,0,0,3,0,1,0,10
28 Jan 2014,3,0,0,0,3,1,3,0,0,2,0,0,4,0,0,0,16
29 Jan 2014,4,0,0,0,4,0,3,0,0,2,0,1,2,0,0,0,16
30 Jan 2014,2,0,0,0,10,0,8,0,0,4,0,2,6,0,0,0,32
31 Jan 2014,7,0,0,0,3,0,1,0,0,1,0,0,2,0,3,0,17
01 Feb 2014,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1
02 Feb 2014,4,0,0,0,4,0,3,0,0,0,0,0,0,0,0,0,11
03 Feb 2014,3,0,0,0,3,0,1,0,1,1,0,0,3,1,0,0,13
04 Feb 2014,4,0,0,0,3,0,1,1,0,2,1,0,1,0,0,0,13
05 Feb 2014,10,0,0,2,10,0,6,0,1,1,0,1,5,0,0,0,36
06 Feb 2014,6,0,0,3,6,0,5,0,0,0,0,1,26,0,0,0,47
07 Feb 2014,2,0,0,0,5,0,4,0,2,0,0,1,8,1,0,0,23
08 Feb 2014,4,0,0,1,2,0,1,0,0,1,0,0,4,0,0,0,13
09 Feb 2014,2,0,0,0,6,0,7,0,1,1,0,4,5,1,0,0,27
10 Feb 2014,4,0,0,8,6,0,10,0,1,0,0,10,6,0,0,0,45
11 Feb 2014,2,0,0,1,8,1,3,0,0,2,0,7,16,0,0,0,40
12 Feb 2014,6,0,1,1,9,0,6,1,1,0,1,6,13,0,0,0,45
13 Feb 2014,3,0,0,0,4,0,3,0,2,2,0,1,14,1,0,0,30
14 Feb 2014,2,0,0,0,9,0,5,0,0,3,0,2,8,0,1,0,30
15 Feb 2014,1,0,0,0,4,0,0,0,0,0,0,0,0,0,0,0,5
16 Feb 2014,4,0,0,0,7,0,5,2,0,34,0,2,14,1,0,0,69
17 Feb 2014,1,0,0,0,4,0,1,0,0,7,0,0,14,0,0,0,27
18 Feb 2014,11,0,0,0,29,0,15,0,3,17,0,2,46,2,0,0,125
19 Feb 2014,5,0,0,1,9,0,2,0,1,3,0,1,4,2,0,0,28
20 Feb 2014,15,0,0,0,22,0,4,0,1,8,0,0,15,0,0,0,65
21 Feb 2014,13,0,0,0,13,0,2,1,0,18,0,1,10,0,0,0,58
22 Feb 2014,3,0,0,0,2,0,1,1,1,2,0,1,13,1,0,0,25
23 Feb 2014,3,0,0,1,7,0,3,1,1,15,0,2,5,0,0,0,38
24 Feb 2014,11,0,0,0,17,0,16,0,1,54,0,0,28,0,0,0,127
25 Feb 2014,16,0,0,0,25,0,15,0,2,41,0,2,25,5,0,0,131
26 Feb 2014,5,0,0,0,15,0,9,0,4,44,0,11,17,2,2,1,110
27 Feb 2014,16,0,0,0,11,1,2,0,1,9,0,1,22,1,0,0,64
28 Feb 2014,5,0,0,0,15,0,2,0,0,35,0,7,36,0,0,0,100
01 Mar 2014,1,0,0,0,8,0,1,0,0,1,0,0,2,0,2,0,15
02 Mar 2014,2,0,0,0,7,0,1,0,0,2,0,1,10,0,0,0,23
03 Mar 2014,1,0,0,0,11,0,4,0,0,3,0,1,11,1,1,0,33
04 Mar 2014,6,0,0,0,20,0,23,0,0,9,0,3,11,0,1,0,73
05 Mar 2014,6,0,0,0,6,1,0,0,0,3,0,2,9,0,0,2,29
06 Mar 2014,16,0,0,1,9,1,0,0,1,4,0,3,2,0,0,0,37
07 Mar 2014,10,0,0,0,4,0,3,0,0,1,0,0,1,1,0,1,21
08 Mar 2014,3,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0,6
09 Mar 2014,8,0,0,0,3,0,1,0,1,0,0,1,2,1,0,0,17
10 Mar 2014,3,0,0,0,7,0,1,1,0,4,0,1,12,0,0,0,29
11 Mar 2014,6,0,0,0,1,0,7,0,0,7,0,0,9,0,0,0,30
12 Mar 2014,6,0,0,0,19,3,6,1,0,10,0,2,12,0,0,0,59
13 Mar 2014,2,0,0,1,9,3,2,0,3,2,0,2,15,1,0,0,40
14 Mar 2014,2,0,0,0,8,0,2,0,0,0,0,0,6,0,1,0,19
15 Mar 2014,3,0,0,0,3,0,1,0,1,1,0,0,5,0,0,0,14
16 Mar 2014,2,0,0,0,5,0,1,1,0,2,0,0,7,0,1,0,19
17 Mar 2014,8,0,0,0,4,0,2,0,1,3,0,2,7,0,0,0,27
18 Mar 2014,5,0,0,1,11,1,2,0,0,0,0,3,5,0,2,0,30
19 Mar 2014,4,0,0,0,4,0,2,1,0,2,0,3,4,0,1,0,21
20 Mar 2014,8,0,0,0,10,1,3,0,0,6,0,1,13,3,0,0,45
21 Mar 2014,4,0,0,0,11,0,2,0,0,0,0,0,7,0,1,0,25
22 Mar 2014,7,0,0,0,7,1,1,0,0,7,0,0,4,0,1,0,28
23 Mar 2014,7,0,0,0,7,0,6,0,0,1,0,5,8,0,0,0,34
24 Mar 2014,5,0,0,0,5,0,15,0,1,4,0,10,76,1,1,0,118
25 Mar 2014,2,0,0,0,8,1,7,1,0,2,1,2,8,0,0,0,32
26 Mar 2014,1,0,0,0,5,0,5,0,1,2,0,4,18,0,0,1,37
27 Mar 2014,9,0,1,0,11,0,6,0,0,1,0,1,9,0,5,0,43
28 Mar 2014,2,0,0,0,9,0,2,0,1,3,0,1,12,1,0,0,31
29 Mar 2014,5,0,0,0,4,0,7,0,0,0,0,0,3,0,0,1,20
30 Mar 2014,1,0,0,0,5,0,2,0,0,0,0,4,9,0,0,0,21
31 Mar 2014,6,0,0,0,12,1,6,1,0,3,0,3,9,0,1,0,42
01 Apr 2014,27,0,0,0,15,0,3,0,0,1,0,0,7,0,0,0,53
02 Apr 2014,11,0,0,0,3,0,3,0,0,2,0,3,15,1,1,0,39
03 Apr 2014,4,0,0,0,5,1,1,0,0,6,0,1,23,0,1,0,42
04 Apr 2014,4,0,0,0,8,0,5,0,0,0,0,3,4,0,2,1,27
05 Apr 2014,3,0,0,0,1,0,0,0,0,3,0,0,6,0,0,0,13
06 Apr 2014,2,0,0,1,14,0,6,0,0,1,0,0,12,0,0,0,36
07 Apr 2014,6,0,0,1,9,0,4,0,0,3,0,1,11,0,0,0,35
08 Apr 2014,1,0,0,0,7,0,3,0,1,3,0,1,14,1,0,0,31
09 Apr 2014,4,0,0,0,10,0,5,0,0,3,0,2,9,0,0,0,33
09 Apr 2014,6,0,0,0,6,0,4,0,1,0,0,1,9,0,0,0,27
10 Apr 2014,6,0,0,0,5,0,2,0,1,0,0,4,5,0,0,0,23
11 Apr 2014,17,0,0,0,9,0,10,0,0,2,0,2,3,0,0,0,43
12 Apr 2014,3,0,0,0,3,0,0,0,0,0,0,0,8,0,0,2,16
13 Apr 2014,1,0,1,0,4,0,0,0,0,1,0,1,10,0,2,0,20
14 Apr 2014,4,0,0,0,6,0,1,1,1,2,0,2,7,2,0,0,26
15 Apr 2014,11,0,0,0,6,0,3,0,0,0,0,0,11,0,0,0,31

style.css

body {
  font: 400 10px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

.x.axis path {
  display: none;
}

.line {
  stroke: #5d6263;
  fill: none;
  stroke-width: 0.75px;
}

.line.education {
  stroke: #47c0be;
}

.line.water {
  stroke: #97d3c9;
}

.line.climate {
  stroke: #fcb749;
}

.line.food {
  stroke: #b0d256;
}

.line.government {
  stroke: #2da9e1;
}

.line.health {
  stroke: #ca3a28;
}

.line.job {
  stroke: #e8168b;
}

.line.transport {
  stroke: #fbe792;
}

.line.equality {
  stroke: #c84699;
}

.line.discrimination {
  stroke: #dec0ca;
}

.line.phone {
  stroke: #7cb5d6;
}

.line.politicalfreedoms {
  stroke: #723390;
}

.line.forests {
  stroke: #71be45;
}

.line.crime {
  stroke: #387195;
}

.line.energy {
  stroke: #a01c40;
}

.line.support {
  stroke: #233884;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.focus circle.education {
  stroke: #47c0be;
  fill: #47c0be;
}

.focus circle.water {
  stroke: #97d3c9;
  fill: #97d3c9;
}

.focus circle.climate {
  stroke: #fcb749;
  fill: #fcb749;
}

.focus circle.food {
  stroke: #b0d256;
  fill: #b0d256;
}

.focus circle.government {
  stroke: #2da9e1;
  fill: #2da9e1;
}

.focus circle.health {
  stroke: #ca3a28;
  fill: #ca3a28;
}

.focus circle.job {
  stroke: #e8168b;
  fill: #e8168b;
}

.focus circle.transport {
  stroke: #fbe792;
  fill: #fbe792;
}

.focus circle.equality {
  stroke: #c84699;
  fill: #c84699;
}

.focus circle.discrimination {
  stroke: #dec0ca;
  fill: #dec0ca;
}

.focus circle.phone {
  stroke: #7cb5d6;
  fill: #7cb5d6;
}

.focus circle.politicalfreedoms {
  stroke: #723390;
  fill: #723390;
}

.focus circle.forests {
  stroke: #71be45;
  fill: #71be45;
}

.focus circle.crime {
  stroke: #387195;
  fill: #387195;
}

.focus circle.energy {
  stroke: #a01c40;
  fill: #a01c40;
}

.focus circle.support {
  stroke: #233884;
  fill: #233884;
}

.focus line {
  stroke: purple;
  shape-rendering: crispEdges;
}

.focus line.education {
  stroke: #47c0be;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.water {
  stroke: #97d3c9;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.climate {
  stroke: #fcb749;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.food {
  stroke: #b0d256;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.government {
  stroke: #2da9e1;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.health {
  stroke: #ca3a28;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.job {
  stroke: #e8168b;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.transport {
  stroke: #fbe792;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.equality {
  stroke: #c84699;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.discrimination {
  stroke: #dec0ca;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.phone {
  stroke: #7cb5d6;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.politicalfreedoms {
  stroke: #723390;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.forests {
  stroke: #71be45;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.crime {
  stroke: #387195;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.energy {
  stroke: #a01c40;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.focus line.support {
  stroke: #233884;
  stroke-dasharray: 3 3;
  opacity: .5;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}