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

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

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

var current =(function(d) { console.log(); }) ; var xAxis = d3.svg.axis()

.scale(x) .orient("bottom") .ticks(4) .outerTickSize([0]) .innerTickSize([0]);

var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(3) .outerTickSize([0]) .innerTickSize([0]);

d3.csv("/wp-content/uploads/custom/15/0217-hpi.csv", type, function(error, data) {

// Nest data by region. var regions = d3.nest() .key(function(d) { return d.region; }) .entries(data);

regions.forEach(function(s) { s.maxrate = d3.max(s.values, function(d) { return d.index; }); });

// 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 svg = d3.select("#cam-d3-hpi").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 area path elements. Note: the y-domain is set per element. svg.append("path") .attr("class", "area") .attr("d", function(d) { y.domain([100, 280]); return area(d.values)})

.style("fill", function(d) {

var current = d.values[d.values.length - 1].index.toFixed(1); if (current < 0){ return ("rgba(196,75,129,0.3)") } else { return ("rgba(6,157,220,0.3)") } }); // 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([100, 280]); return line(d.values) }) .style("stroke", function(d) { var current = d.values[d.values.length - 1].index.toFixed(1); if (current < 0){ return ("rgba(196,75,129,0.8)") } else { return ("rgba(6,157,220,0.8)") } }); // Add a small label for the region name. var country = svg.append("text") .attr("class", "bolder") .attr("x", width - 15) .attr("y", height - 6) .style("text-anchor", "end") .text(function(d) { return d.key + " " + d.values[d.values.length - 1].index.toFixed(1) + "%"; }) ; svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + (height) + ")") .call(xAxis) svg.append("g") .attr("class", "y axis") .call(yAxis) var focus = svg.append("g") .attr("class", "focus") .style("display", "none"); focus.append("circle") .attr("r", 5); focus.append("text") .attr("x", 9) .attr("dy", ".35em"); svg.append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height) .on("mouseover", function() { focus.style("display", null); }) .on("mouseout", function() { focus.style("display", "none"); country.text(function(d) { return d.key + " " + d.values[d.values.length - 1].index.toFixed(1) + "%"; }) ; }) .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.index) + ")" }); country.text(function(d) { var d = getHighlightedPoint(d); return d.region + " " + d.index.toFixed(1) + "%"; }) ; 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.index = +d.index; d.date = parseDate(d.date); return d;

}

Here is a graph showing the most recent house price data from the ONS, by region.