small_multiple = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var xScale = d3.scaleLinear()
.domain(d3.extent(data, d=>d.Year))
.range([0, width]);
var yScale = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()
.range([height, 0]);
var xScale = d3.scaleLinear()
.range([0, width]);
var yScale = d3.scaleLinear()
.range([height, 0]);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(3);
var area = d3.area()
.x(function(d) { return xScale(d.Year); })
.y0(height)
.y1(function(d) { return yScale(d.value); });
var line = d3.line()
.x(function(d) { return xScale(d.Year); })
.y(function(d) { return yScale(d.value); });
return svg.node();
xScale.domain(d3.extent(data, function(d) { return d.Year; }));
yScale.domain([0,d3.max(data, function(d) { return d.value; })]);
var cities = d3.nest()
.key(function(d) { return d.city; })
.entries(data);
var nz = cities.filter(function(d){ return d.key === "NZ" });
cities = cities.filter(function(d){ return d.key !== "NZ" });
svg = d3.select("#charts").selectAll("svg")
.data(cities)
.enter().append("svg")
.style("margin-bottom", "10px")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
;
svg.append("path")
.attr("class", "line")
.attr("d", function(d) {return line(nz[0].values); })
.style("stroke", "lightgrey");
svg.append("path")
.attr("class", "line")
.attr("d", function(d) {return line(d.values); });
svg.append("text")
.attr("x", (width + 10)/2)
.attr("y", height - 85)
.style("text-anchor", "middle")
.style("font-size", "12px")
.attr("fill", "#B35959")
.text(function(d) { return d.key; });
svg.append("text")
.text(xScale.domain()[0])
.attr("x", 0)
.attr("y", height + 15)
.style("text-anchor", "start")
.style("font-size", "12px")
.attr("fill", "#B35959");
svg.append("text")
.text(xScale.domain()[1])
.attr("x", width)
.attr("y", height + 15)
.style("text-anchor", "end")
.style("font-size", "12px")
.attr("fill", "#B35959");
svg.append("g").attr("id", "yAxisG").call(yAxis);
d3.selectAll("path.domain").remove();
d3.selectAll("line").style("stroke", "silver");
}
function convertTextToNumbers(d) {
d.year = +d.year;
d.value = +d.value;
return d;
}