interactive-vis-course/Week10/small_multiples_simple.html at gh-pages · arnicas/interactive-vis-course · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<!-- Modification of Mike Bostock's code in http://bl.ocks.org/mbostock/1157787 -->
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
  margin: 20px;
  padding: 20px;
}

.line {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.area {
  fill: #e7e7e7;
}

.label {
  fill: steelblue;
}

</style>
<body>

  <h2>Relative African Progress on Measles 2000-2013</h2>

  <p>Source: WHO. Scales differ across each example, showing the change in each over time. This might be a little confusing, though - since the year labels look like scale values.</p>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>

var fullwidth = 250,
  fullheight = 69;

var margin = {top: 25, right: 10, bottom: 20, left: 40},
    width = fullwidth - margin.left - margin.right,
    height = fullheight - margin.top - margin.bottom;

var parseDate = d3.time.format("Year %Y").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.Measles); });

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.Measles); });

d3.csv("data/deaths_04yearsold_excerpt.csv", typeFix, function(error, data) {

  //typeFix is a function that parses the dates and sets the strings to numeric. See below!
  console.log("data after load", data);

  // Nest data by symbol.
  var countries = d3.nest()
      .key(function(d) { return d.Country; })
      .sortValues(function(a,b) {return a.date - b.date;})
      .entries(data);

  // Compute the maxValue per country -- for the y axis
  countries.forEach(function(s) {
    s.maxValue = d3.max(s.values, function(d) { return +d.Measles; });
  });

  console.log(countries);

  // Compute the minimum and maximum date across symbols.
  // We assume values are sorted by date.
  x.domain([
    d3.min(countries, function(s) { return s.values[0].date; }),
    d3.max(countries, function(s) { return s.values[s.values.length - 1].date; })
  ]);

  // Add an SVG element for each symbol, with the desired dimensions and margin.
  var svg = d3.select("body").selectAll("svg")
      .data(countries)
    .enter().append("svg")
      .attr("width", fullwidth)
      .attr("height", fullheight)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // Add the area path elements. Note: the y-domain is set per element.
  svg.append("path")
      .attr("class", "area")
      .attr("d", function(d) {
        y.domain([0, d.maxValue]); return area(d.values);
      });

  // Add the line path elements. Note: the y-domain is set per element.
  svg.append("path")
      .attr("class", "line")
      .attr("d", function(d) {
        y.domain([0, d.maxValue]); return line(d.values);
      });

  // Add a small label for the symbol name.

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

  svg.append("text")
    .attr("class", "label")
    .attr("x", 0)
    .attr("y", -8)
    .style("text-anchor", "start")
    .text(function(d) {
      return outputDate(d.values[0].date);
    });

  svg.append("text")
    .attr("class", "label")
    .attr("x", width/2)
    .attr("y", -8)
    .style("text-anchor", "middle")
    .text(function(d) {
      return d.key;
    });

  svg.append("text")
    .attr("class", "label")
    .attr("x", width)
    .attr("y", -8)
    .style("text-anchor", "end")
    .text(function(d) {
      return outputDate(d.values[d.values.length - 1].date);
    });

    // put a dot on last point
    svg.append("circle")
    .attr("class", "label")
    .attr("cx", function(d) {
      return x(d.values[d.values.length - 1].date);
    })
    .attr("cy", function(d) {
      y.domain([0, d.maxValue]);
      return y(d.values[d.values.length - 1].Measles);
    })
    .attr("r", 2);

    // label the value on the last point
  svg.append("text")
   .attr("class", "label")
    .attr("x", width)
    .attr("y", function(d) {
      y.domain([0, d.maxValue]);
      return y(d.values[d.values.length - 1].Measles);
    })
    .attr("dy", -5)
    .style("text-anchor", "end")
    .text(function(d) {
      return d.values[d.values.length - 1].Measles;
    });
});

// this function is applied to all the data values on load!

function typeFix(d) {
  d.Measles = +d.Measles;
  d.date = parseDate(d.Year);
  return d;
}

</script>