|
//create svg container + inner drawing space using the d3 conventional margin |
|
var margin = {top: 20, right: 80, bottom: 30, left: 30}, |
|
width = 960 - margin.left - margin.right, |
|
height = 400 - margin.top - margin.bottom; |
|
//create time formatting function |
|
var parseDate = d3.time.format("%Y-%m-%d").parse; |
|
//create a time scaling function for the x-axis data, from 0 to width of the inner drwg space |
|
var x = d3.time.scale() |
|
.range([0, width]); |
|
//create a linear scaling function for the y-axis data, from height of inner drwg space to 0 |
|
var y = d3.scale.linear() |
|
.range([height, 0]); |
|
//create ordinal scaling function for the colours |
|
var color = d3.scale.category10(); |
|
//******testing |
|
var places = d3.scale.ordinal(); |
|
//createe x- & y-axes functions, bring in scaling functions & orientate |
|
var xAxis = d3.svg.axis() |
|
.scale(x) |
|
.orient("bottom"); |
|
|
|
var yAxis = d3.svg.axis() |
|
.scale(y) |
|
.orient("left"); |
|
//create d3 path generation function |
|
var line = d3.svg.line() |
|
.interpolate("basis") |
|
.x(function(d) { return x(d.date); }) |
|
.y(function(d) { return y(d.pindex); }); |
|
//create svg drawing container & inner drwg space |
|
var svg = d3.select("#chart").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 + ")"); |
|
//asynchrous callback function to retrieve data from tsv file |
|
d3.tsv("data.tsv", function(error, data) { |
|
//look at the 1st data element, gets the object keys, |
|
//data[0] returns the 1st js object, d3.keys functionality looks at eack key:value pair in the object |
|
//& returns only the keys, as an array. Then the js array.filter method is applied to each element in the |
|
//the array and returns the element as long as it does not equal "date". This array of keys is used to set |
|
//the domain of the ordinal scale function. |
|
//data is an array of 106 objects in the form: |
|
// [{ |
|
// series1: "100", |
|
// series2: "100", |
|
// series3: "100", |
|
// series4: "100", |
|
// series5: "100", |
|
// series6: "100", |
|
// series7: "100", |
|
// series8: "100", |
|
// Date: "2005-01-01", |
|
// } ..... 105 other objects for each date value..] |
|
// |
|
//console.log(data); |
|
places.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); |
|
//iterate thru the js objects & for each object convert the date str into a js date object |
|
//& assign it back to the d.date key |
|
data.forEach(function(d) { |
|
d.date = parseDate(d.date); |
|
}); |
|
//reorganise data for use by the d3 pattern: i.e. Nesting data |
|
//1. apply a function to every element in the ordinal domain i.e. each pindex |
|
//2. return an object with 2 key:value pairs |
|
//3. end up with an array of 8 objects for each pindex series, consisting of an array |
|
// of names and a value, where the value is an array of 106 objects, consisting of a |
|
//date and a pindex value: |
|
// [{ |
|
// name: "series1", |
|
// values: [{date: "2005-01-01", |
|
// pindex: "100"}, |
|
// {date: "2005-02-01" |
|
// pindex: "100.4"}, ...etc for all 106 data points i.e. dates |
|
// ] |
|
// }, |
|
// ....+7 more objects for each series |
|
// ] |
|
// |
|
var cities = places.domain().map(function(name) { |
|
return { |
|
name: name, |
|
values: data.map(function(d) { |
|
return {date: d.date, pindex: +d[name]}; |
|
}) |
|
}; |
|
}); |
|
//console.log(cities); |
|
//create an array using d3.extent, & use it to set the x-scale fuction's input domain, |
|
// returns an array of two elements - min & max dates |
|
x.domain(d3.extent(data, function(d) { return d.date; })); |
|
|
|
//as with x-axis, create an array to setup the y-scale function input domain, |
|
//as this is a nested array we need the max & min values for the entire data set |
|
//but also for each individual series |
|
y.domain([ |
|
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.pindex; }); }), |
|
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.pindex; }); }) |
|
]); |
|
|
|
//create a svg group element for the x axis & for the y axis, append labels |
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(xAxis); |
|
|
|
svg.append("g") |
|
.attr("class", "y axis") |
|
.call(yAxis) |
|
.append("text") |
|
.attr("transform", "rotate(-90)") |
|
.attr("y", 6) |
|
.attr("dy", ".71em") |
|
.style("text-anchor", "end") |
|
.text("House Price Index¹"); |
|
|
|
//create an svg g-element for each of the 8 series |
|
var city = svg.selectAll(".city") |
|
.data(cities) |
|
.enter().append("g") |
|
.attr("class", "city"); |
|
//and generate a path for each series using the line function |
|
city.append("path") |
|
|
|
.attr("class", "line") |
|
.attr("d", function(d) { return line(d.values); }) |
|
//****testing |
|
|
|
// .style("stroke", "lightgrey") |
|
//...testing |
|
//.style("stroke-dasharray", (3,3) ) |
|
.style("stroke", function(d){ |
|
if (d.name === "series1") {return "black"} |
|
else {return "lightgrey"} |
|
;}) |
|
|
|
//set an mouseover event listener for when the mouseover occurs on any give path g-element |
|
//using d3.select(this) |
|
//and also select the corresponding text g-element, |
|
//in both selections make path and text go orange |
|
.on("mouseover", function(d){ |
|
//console.log(d.name); |
|
d3.select(this) |
|
.style("stroke", "orange"); |
|
//use the following to select the specific path g-element & bring it to the top |
|
//of the svg drawing container |
|
this.parentNode.parentNode.appendChild(this.parentNode); |
|
//selection for grabbing corresponding text |
|
d3.select('#text-' + d.name) |
|
.attr("visibility","visible") |
|
.style("stroke", "orange") |
|
.text(function(d) {return d.name;}); |
|
}) |
|
|
|
//when mouseout occurs revert the path to grey & the text to invisible |
|
|
|
.on("mouseout", function(d){ |
|
d3.select(this) |
|
.style("stroke", function(d){ |
|
if (d.name === "series1") {return "black"} |
|
else {return "lightgrey"} |
|
;}) |
|
d3.select('#text-' + d.name) |
|
.attr("visibility","hidden") |
|
}) |
|
//create an id for the path DOM element that has the name of the data series in it |
|
.attr("id", function(d, i) { return "path-" + d.name; }) |
|
|
|
|
|
; |
|
|
|
//create the text label for each data series, |
|
//find the position the apppend it to at the end each path using the array.length method |
|
city.append("text") |
|
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) |
|
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.pindex) + ")"; }) |
|
.attr("x", 5) |
|
.attr("dy", ".35em") |
|
//.attr("visibility","hidden") |
|
//****testing |
|
.attr("visibility",function(d){ |
|
if (d.name === "series1") {return "visible"} |
|
else {return "hidden"} |
|
;}) |
|
//as with the path mouseover event above, set an event listener for the text. |
|
.on("mouseover", function(d){ |
|
d3.select('#path-' + d.name) |
|
.style("stroke", "orange") |
|
this.parentNode.parentNode.appendChild(this.parentNode); |
|
d3.select(this) |
|
.attr("visibility", "visible") |
|
.style("stroke", "orange"); |
|
}) |
|
.on("mouseout", function(d) { |
|
d3.select('#path-' + d.name) |
|
//.style("stroke", "lightgrey") |
|
.style("stroke", function(d){ |
|
if (d.name === "series1") {return "black"} |
|
else {return "lightgrey"} |
|
;}) |
|
d3.select(this) |
|
.attr("visibility",function(d){ |
|
if (d.name == "series1") {return "visible"} |
|
else {return "hidden"} |
|
;}) |
|
}) |
|
|
|
.text(function(d) { return d.name; }) |
|
.attr("id", function(d, i) { return "text-" + d.name; }); |
|
|
|
//filter the "series1" series |
|
//and append "points of interest" i.e. circles visible at points: 1.max, 2.min, 3.first, 4.last, |
|
//& set them as mouseover points for further explanations |
|
var filtered = city |
|
.filter(function(d){ |
|
return d.name == "series1" |
|
}) |
|
|
|
filtered |
|
.selectAll('circle') |
|
.data( |
|
function(d){return d.values} |
|
) |
|
.enter().append('circle') |
|
.attr({ |
|
cx: function(d,i){ |
|
return x(d.date) |
|
}, |
|
cy: function(d,i){ |
|
return y(d.pindex) |
|
}, |
|
r: 5 |
|
}) |
|
|
|
//at this point all the data points have circles appended |
|
//but need to set all visibility attrs to "hidden" |
|
//except for : 1.max, 2.min, 3.first, 4.last |
|
/*.attr("visibility", function(f) { |
|
// if (d.pindex == d3.max(filtered, function(v) {return d.pindex;}) {return "visible"} |
|
//if (d.pindex == d3.max(d3.values(filtered))) {return "visible"} |
|
if (+f.pindex == d3.max(filtered, function(d,i) {return +d.pindex;})) {return "visible"} |
|
|
|
// <== max |
|
// if (d.pindex == d3.min(filtered) {return "visible"} // <== min |
|
else { return "hidden" } // <== Add these |
|
;})*/ |
|
|
|
|
|
.style("fill", "orange") |
|
//mouseover cirlces |
|
.on('mouseover', function(d){ |
|
filtered.append("text") |
|
.attr({ |
|
x: function(dd){ |
|
return x(d.date) |
|
}, |
|
y: function(dd){ |
|
return y(d.pindex) |
|
}, |
|
dx:-3, |
|
dy:".35em", |
|
"text-anchor":"end" |
|
}) |
|
.style("fill", "black") |
|
.text( |
|
function(dd){ |
|
var formatDate = d3.time.format("%d-%B-%Y") |
|
return 'Date:' + formatDate(d.date) + ',index:' + d.pindex |
|
} |
|
) |
|
}) |
|
.on('mouseout', function(dd){ |
|
d3.select(this.parentElement) |
|
.selectAll('text').remove() |
|
}) |
|
|
|
; |
|
|
|
|
|
|
|
}); |
