README.md

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

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">

<body>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script>

var main_margin = {top: 20, right: 80, bottom: 100, left: 40},
    mini_margin = {top: 630, right: 80, bottom: 20, left: 40},
    main_width = 1200 - main_margin.left - main_margin.right,
    main_height = 700 - main_margin.top - main_margin.bottom,
    mini_height = 700 - mini_margin.top - mini_margin.bottom;

var formatDate = d3.time.format("%d %b %Y"),
    parseDate = formatDate.parse,
    bisectDate = d3.bisector(function(d) { return d.Time; }).left,
    formatOutputEducation = function(d) { return "A good education: " + d.Education + " posts"; },
    formatOutputWater = function(d) { return "Access to clean water and sanitation: " + d.Water + " posts"; },
    formatOutputClimate = function(d) { return "Action taken on climate change: " + d.Climate + " posts"; },
    formatOutputFood = function(d) { return "Affordable and nutritious food: " + d.Food + " posts"; },
    formatOutputGovernment = function(d) { return "An honest and responsive government: " + d.Government + " posts"; },
    formatOutputHealth = function(d) { return "Better healthcare: " + d.Health + " posts"; },
    formatOutputJob = function(d) { return "Better job opportunities: " + d.Job + " posts"; },
    formatOutputTransport = function(d) { return "Better transport and roads: " + d.Transport + " posts"; },
    formatOutputEquality = function(d) { return "Equality between men and women: " + d.Equality + " posts"; },
    formatOutputDiscrimination = function(d) { return "Freedom from discrimination: " + d.Discrimination + " posts"; },
    formatOutputPhone = function(d) { return "Phone and internet access: " + d.Phone + " posts"; },
    formatOutputPoliticalfreedoms = function(d) { return "Political freedoms: " + d.Politicalfreedoms + " posts"; },
    formatOutputForests = function(d) { return "Protecting forests rivers and oceans: " + d.Forests + " posts"; },
    formatOutputCrime = function(d) { return "Protection against crime and violence: " + d.Crime + " posts"; },
    formatOutputEnergy = function(d) { return "Reliable energy at home: " + d.Energy + " posts"; },
    formatOutputSupport = function(d) { return "Support for people who can't work: " + d.Support + " posts"; };

var main_x = d3.time.scale()
    .range([0, main_width]),
    mini_x = d3.time.scale()
    .range([0, main_width]);

var main_y0 = d3.scale.linear()
    .range([main_height, 0]),
    main_y1 = d3.scale.linear()
    .range([main_height, 0]),
    mini_y0 = d3.scale.linear()
    .range([mini_height, 0]),
    mini_y1 = d3.scale.linear()
    .range([mini_height, 0]);

var main_xAxis = d3.svg.axis()
    .scale(main_x)
    .tickFormat(d3.time.format("%d %b"))
    .orient("bottom"),
    mini_xAxis = d3.svg.axis()
    .scale(mini_x)
    .tickFormat(d3.time.format("%d %b"))
    .orient("bottom");

var main_yAxisLeft = d3.svg.axis()
    .scale(main_y0)
    .orient("left");

var brush = d3.svg.brush()
    .x(mini_x)
    .on("brush", brush);

var main_education = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Education); });

var main_water = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Water); });

var main_climate = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Climate); });

var main_food = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Food); });

var main_government = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Government); });

var main_health = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Health); });

var main_job = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Job); });

var main_transport = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Transport); });

var main_equality = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Equality); });

var main_discrimination = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Discrimination); });

var main_phone = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Phone); });

var main_politicalfreedoms = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Politicalfreedoms); });

var main_forests = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Forests); });

var main_crime = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Crime); });

var main_energy = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Energy); });
    
var main_support = d3.svg.line()
    .interpolate("cardinal")
    .x(function(d) { return main_x(d.Time); })
    .y(function(d) { return main_y0(d.Support); });

var mini_line0 = d3.svg.line()
    .x(function(d) { return mini_x(d.Time); })
    .y(function(d) { return mini_y0(d.Total); });

var mini_line1 = d3.svg.line()
    .x(function(d) { return mini_x(d.Time); });

var svg = d3.select("body").append("svg")
    .attr("width", main_width + main_margin.left + main_margin.right)
    .attr("height", main_height + main_margin.top + main_margin.bottom);

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", main_width)
    .attr("height", main_height);

var main = svg.append("g")
    .attr("transform", "translate(" + main_margin.left + "," + main_margin.top + ")");

var mini = svg.append("g")
    .attr("transform", "translate(" + mini_margin.left + "," + mini_margin.top + ")");

d3.csv("data.txt", function(error, data) {
  data.forEach(function(d) {
    d.Time = parseDate(d.Time);
    d.Education = +d.Education;
    d.Water = +d.Water;
    d.Climate = +d.Climate;
    d.Food = +d.Food;
    d.Government = +d.Government;
    d.Health = +d.Health;
    d.Job = +d.Job;
    d.Transport = +d.Transport;
    d.Equality = +d.Equality;
    d.Discrimination = +d.Discrimination;
    d.Phone = +d.Phone;
    d.Politicalfreedoms = +d.Politicalfreedoms;
    d.Forests = +d.Forests;
    d.Crime = +d.Crime;
    d.Energy = +d.Energy;
    d.Support = +d.Support;
    d.Total = +d.Total;
  });

  data.sort(function(a, b) {
    return a.Time - b.Time;
  });

  main_x.domain([data[0].Time, data[data.length - 1].Time]);
  main_y0.domain(d3.extent(data, function(d) { return d.Forests; }));
  main_y1.domain(d3.extent(data, function(d) { return d.Water; }));
  mini_x.domain(main_x.domain());
  mini_y0.domain(d3.extent(data, function(d) { return d.Total; }));
  mini_y1.domain(d3.extent(data, function(d) { return d.Total; }));

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line education")
      .attr("d", main_education);

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line water")
      .attr("d", main_water);
  
  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line climate")
      .attr("d", main_climate);

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line food")
      .attr("d", main_food);
  
  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line government")
      .attr("d", main_government);
  
  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line health")
      .attr("d", main_health);
  
  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line job")
      .attr("d", main_job);

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line transport")
      .attr("d", main_transport);

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line equality")
      .attr("d", main_equality);

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line discrimination")
      .attr("d", main_discrimination);

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line phone")
      .attr("d", main_phone);

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line politicalfreedoms")
      .attr("d", main_politicalfreedoms);

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line forests")
      .attr("d", main_forests);

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line crime")
      .attr("d", main_crime);

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line energy")
      .attr("d", main_energy);

  main.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("class", "line support")
      .attr("d", main_support);

  main.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + main_height + ")")
      .call(main_xAxis);

  main.append("g")
      .attr("class", "y axis axisLeft")
      .call(main_yAxisLeft)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Number of posts");

  mini.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + mini_height + ")")
      .call(main_xAxis);

  mini.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", mini_line0);

  mini.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", mini_line1);

  mini.append("g")
      .attr("class", "x brush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6)
      .attr("height", mini_height + 7);

  var focus = main.append("g")
      .attr("class", "focus")
      .style("display", "none");

  // Watereige auf der Zeitleiste
  focus.append("line")
      .attr("class", "x")
      .attr("y1", main_y0(0) - 6)
      .attr("y2", main_y0(0) + 6)

  // Watereige auf der linken Leiste
  focus.append("line")
      .attr("class", "education")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "water")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "climate")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "food")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "government")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "health")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "job")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "transport")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "equality")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "discrimination")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "phone")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "politicalfreedoms")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "forests")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "crime")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "energy")
      .attr("x1", main_width - 6);

  focus.append("line")
      .attr("class", "support")
      .attr("x1", main_width - 6);

  focus.append("circle")
      .attr("class", "education")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "education")
      .attr("dx", "1em");
      
  focus.append("circle")
      .attr("class", "water")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "water")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "climate")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "climate")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "food")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "food")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "government")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "government")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "health")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "health")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "job")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "job")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "transport")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "transport")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "equality")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "equality")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "discrimination")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "discrimination")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "phone")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "phone")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "politicalfreedoms")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "politicalfreedoms")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "forests")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "forests")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "crime")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "crime")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "energy")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "energy")
      .attr("dx", "1em");

  focus.append("circle")
      .attr("class", "support")
      .attr("r", 4);

  focus.append("text")
      .attr("class", "support")
      .attr("dx", "1em");

  main.append("rect")
      .attr("class", "overlay")
      .attr("width", main_width)
      .attr("height", main_height)
      .on("mouseover", function() { focus.style("display", null); })
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mousemove", mousemove);

  function mousemove() {
    var x0 = main_x.invert(d3.mouse(this)[0]),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.Time > d1.Time - x0 ? d1 : d0;
    focus.select("circle.education").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Education) + ")");
    focus.select("text.education").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Education) + ")").text(formatOutputEducation(d));
    focus.select("circle.water").attr("transform", "translate(" + main_x(d.Time) + "," + main_y1(d.Water) + ")");
    focus.select("text.water").attr("transform", "translate(" + main_x(d.Time) + "," + main_y1(d.Water) + ")").text(formatOutputWater(d));
    focus.select("circle.climate").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Climate) + ")");
    focus.select("text.climate").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Climate) + ")").text(formatOutputClimate(d));
    focus.select("circle.food").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Food) + ")");
    focus.select("text.food").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Food) + ")").text(formatOutputFood(d));
    focus.select("circle.government").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Government) + ")");
    focus.select("text.government").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Government) + ")").text(formatOutputGovernment(d));
    focus.select("circle.health").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Health) + ")");
    focus.select("text.health").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Health) + ")").text(formatOutputHealth(d));
    focus.select("circle.job").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Job) + ")");
    focus.select("text.job").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Job) + ")").text(formatOutputJob(d));
    focus.select("circle.transport").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Transport) + ")");
    focus.select("text.transport").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Transport) + ")").text(formatOutputTransport(d));
    focus.select("circle.equality").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Equality) + ")");
    focus.select("text.equality").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Equality) + ")").text(formatOutputEquality(d));
    focus.select("circle.discrimination").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Discrimination) + ")");
    focus.select("text.discrimination").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Discrimination) + ")").text(formatOutputDiscrimination(d));
    focus.select("circle.phone").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Phone) + ")");
    focus.select("text.phone").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Phone) + ")").text(formatOutputPhone(d));
    focus.select("circle.politicalfreedoms").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Politicalfreedoms) + ")");
    focus.select("text.politicalfreedoms").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Politicalfreedoms) + ")").text(formatOutputPoliticalfreedoms(d));
    focus.select("circle.forests").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Forests) + ")");
    focus.select("text.forests").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Forests) + ")").text(formatOutputForests(d));
    focus.select("circle.crime").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Crime) + ")");
    focus.select("text.crime").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Crime) + ")").text(formatOutputCrime(d));
    focus.select("circle.energy").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Energy) + ")");
    focus.select("text.energy").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Energy) + ")").text(formatOutputEnergy(d));
    focus.select("circle.support").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Support) + ")");
    focus.select("text.support").attr("transform", "translate(" + main_x(d.Time) + "," + main_y0(d.Support) + ")").text(formatOutputSupport(d));
    focus.select(".x").attr("transform", "translate(" + main_x(d.Time) + ",0)");
    focus.select(".education").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Education) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".water").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Water) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".climate").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Climate) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".food").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Food) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".government").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Government) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".health").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Health) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".job").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Job) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".transport").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Transport) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".equality").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Equality) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".discrimination").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Discrimination) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".phone").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Phone) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".politicalfreedoms").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Politicalfreedoms) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".forests").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Forests) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".crime").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Crime) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".energy").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Energy) + ")").attr("x2", main_width + main_x(d.Time));
    focus.select(".support").attr("transform", "translate(" + main_width * -1 + ", " + main_y0(d.Support) + ")").attr("x2", main_width + main_x(d.Time));
  }
});

function brush() {
  main_x.domain(brush.empty() ? mini_x.domain() : brush.extent());
  main.select(".education").attr("d", main_education);
  main.select(".water").attr("d", main_water);
  main.select(".climate").attr("d", main_climate);
  main.select(".food").attr("d", main_climate);
  main.select(".government").attr("d", main_government);
  main.select(".health").attr("d", main_health);
  main.select(".job").attr("d", main_job);
  main.select(".transport").attr("d", main_transport);
  main.select(".equality").attr("d", main_equality);
  main.select(".discrimination").attr("d", main_discrimination);
  main.select(".phone").attr("d", main_phone);
  main.select(".politicalfreedoms").attr("d", main_politicalfreedoms);
  main.select(".forests").attr("d", main_forests);
  main.select(".crime").attr("d", main_crime);
  main.select(".energy").attr("d", main_energy);
  main.select(".support").attr("d", main_support);
  main.select(".x.axis").call(main_xAxis);
}
</script>

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