function addStateTimeLine(state, data, callback){ function truncate(str, maxLength, suffix) { if(str.length > maxLength) { str = str.substring(0, maxLength + 1); str = str.substring(0, Math.min(str.length, str.lastIndexOf(" "))); str = str + suffix; } return str; } var margin = {top: 60, right: 60, bottom: 0, left: 10}, width = 240, height = 60; var start_year = data[0].changes[0][0]-1, end_year = data[0].changes[data[0].changes.length-1][0]+1; //var start_year = 1996, // end_year = 2013; var c = d3.scale.category20c(); var x = d3.scale.linear() .range([0, width]); var xAxis = d3.svg.axis() .scale(x) .orient("top"); // as described here : http://bl.ocks.org/Caged/6476579 var tip = d3.tip() .offset([40, 0]) .html(function(d) { return "" + d[1] + " change(s) in " + d[0]; }); var formatYears = d3.format("d"); xAxis.tickFormat(formatYears).tickSubdivide(0); var svg = d3.select(".stateContent").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("margin-left", margin.left + "px") .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.call(tip); // var dataset = [[ [2002, 8], [2003, 1], [2004, 1], [2005, 1], [2006, 3], [2007, 3], [2009, 3], [2013, 3]], [ [2004, 5], [2005, 1], [2006, 2], [2010, 20], [2011, 3] ] ,[ [2001, 5], [2005, 15], [2006, 2], [2010, 20], [2012, 25] ]]; //var dataset = [ [2001, 5], [2005, 15], [2006, 2], [2010, 20], [2012, 25] ]; //console.log(data) x.domain([start_year, end_year]); var xScale = d3.scale.linear() .domain([start_year, end_year]) .range([0, width]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + 0 + ")") .call(xAxis) .selectAll("text") .attr("y", 0) .attr("x", -25) .attr("dy", ".35em") .attr("transform", "rotate(90)"); for (var j = 0; j < data.length; j++) { var g = svg.append("g").attr("class","state"); var circles = g.selectAll("circle") .data(data[j]['changes']) .enter() .append("circle"); var text = g.selectAll("text") .data(data[j]['changes']) .enter() .append("text"); var rScale = d3.scale.linear() .domain([0, d3.max(data[j]['changes'], function(d) { return d[1]; })]) .range([2, 9]); circles .attr("cx", function(d, i) { return xScale(d[0]); }) .attr("cy", j*20+20) .attr("r", function(d) { return rScale(d[1]); }) .style("fill", function(d) { return c(j); }) .style("cursor", "pointer") .on("mouseover", circleMouseOver) .on("mouseout", circleMouseOut) .on("click", circleClick); text .attr("y", j*20+25) .attr("x",function(d, i) { return xScale(d[0])-5; }) .attr("class","value") .text(function(d){ return d[1]; }) .style("fill", function(d) { return c(j); }) .style("display","none"); g.append("text") .attr("y", j*20+25) .attr("x",width+20) .attr("class","label") .text(state.id) //.text(truncate(data[j]['name'],30,"...")) .style("fill", function(d) { return c(j); }) .on("mouseover", mouseover) .on("mouseout", mouseout); }; function circleClick(p){ //console.log("circleClick"); //console.log(p); //console.log(questions); callback(p) } function circleMouseOver(p){ tip.show(p); } function circleMouseOut(p){ tip.hide(); } function mouseover(p) { var g = d3.select(this).node().parentNode; d3.select(g).selectAll("circle").style("display","none"); d3.select(g).selectAll("text.value").style("display","block"); } function mouseout(p) { var g = d3.select(this).node().parentNode; d3.select(g).selectAll("circle").style("display","block"); d3.select(g).selectAll("text.value").style("display","none"); } } function getAnswersOBSELETE(questions, stateQueryResult, state) { //console.log("I'm old why use me?"); $('#queryResults').empty(); questionsTable = '
' + state.properties.name + ' | Query Results:
' questionsTable += '' + questions[i].question + ' | '; slug = questions[i].slug; //console.log(stateQueryResult[slug]); questionsTable += '' + stateQueryResult[slug] + ' | \
' + questions[i].children[j].question + ' | ' questionsTable += '' + stateQueryResult[slug] + ' | ' } questionsTable += '