asylum test
var parseDate = d3.time.format("%b %Y").parse, bisectDate = d3.bisector(function(d) { return d.date; }).left;
var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 50]);
var area = d3.svg.area() .x(function(d) { return x(d.date); }) .y0(height) .y1(function(d) { return y(d.rate); })
var line = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.rate); }) .defined(function(d) { return d.rate; });
var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .ticks(7) .outerTickSize([0]) .innerTickSize([6]);
var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(3) .outerTickSize([0]) .innerTickSize([0]);
d3.csv("https://cityam.go-vip.net/wp-content/uploads/2015/05/dataforasylum3-5553570eea9e4.csv", type, function(error, data) {
// Nest data by region. var regions = d3.nest() .key(function(d) { return d.region; }) .entries(data);
// Compute the maximum rate per region, needed for the y-domain. regions.forEach(function(s) { s.maxrate = d3.max(s.values, function(d) { return d.rate; }); });
// Compute the minimum and maximum date across regions. // We assume values are sorted by date. x.domain([ d3.min(regions, function(s) { return s.values[0].date; }), d3.max(regions, function(s) { return s.values[s.values.length - 1].date; }) ]);
// Add an SVG element for each region, with the desired dimensions and margin. var multipleEnter = d3.select("#cam-d3-euroasylum").selectAll("svg") .data(regions) .enter() .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Add the line path elements. Note: the y-domain is set per element. multipleEnter.append("path") .attr("class", "line") .attr("d", function(d) { y.domain([-0, 16695]); return line(d.values) }) .style("stroke", function(d) { var current = d.values[d.values.length - 1].rate; if (current < 0){ return ("#0098da") } else { return ("#0098da") } }); // Add a small label for the region name. multipleEnter.append("text") .attr("class", "bolder") .attr("x", width - 200) .attr("y", height - 200) .style("text-anchor", "end") .text(function(d) { return d.key; }) //; + " " + d.values[d.values.length - 1].rate.toFixed(1) + "%"; } multipleEnter.append("g") .attr("class", "axis") .attr("transform", "translate(0," + (height) + ")") .call(xAxis); multipleEnter.append("g") .attr("class", "y axis") .call(yAxis); var focus = multipleEnter.append("g") .attr("class", "focus") .style("display", "none"); focus.append("circle") .attr("r", 4.5); focus.append("text") .attr("x", 9) .attr("dy", ".35em"); multipleEnter.append("rect") .style("fill", "none") .style("pointer-events", "all") .attr("width", width) .attr("height", height) .on("mouseover", function() { focus.style("display", null); }) .on("mouseout", function() { focus.style("display", "none"); }) .on("mousemove", mousemove); function mousemove() { var x0 = x.invert(d3.mouse(this)[0]); // this is found once, as it's the same for // every multiple-graph var bisectIndex; // move the focus on every graph focus .attr("transform", function(d) { var d = getHighlightedPoint(d); return "translate(" + x(d.date) + "," + y(d.rate) + ")" }); focus.select("text").text(function(d) { var d = getHighlightedPoint(d); return (d.rate) }); function getHighlightedPoint(d) { // we find the spot the user has moved the mouse too on one // graph, and can use that to find the correct point for every-graph if(bisectIndex == null) { bisectIndex = bisectDate(d.values, x0, 1); var d0 = data[bisectIndex - 1]; var d1 = data[bisectIndex]; bisectIndex = x0 - d0.date > d1.date - x0 ? bisectIndex : bisectIndex - 1; } return d.values[bisectIndex] } } });
function type(d) { d.rate = +d.rate; d.date = parseDate(d.date); return d; }